// atoms.jsx
function Logo({ size = 240 }) {
  return <img src="assets/logo.png" alt="生態系ウォーズ" style={{ width: size, maxWidth: '100%', height: 'auto', display: 'block' }} />;
}

function Stripes() {
  return <div className="art-stripes" style={{ position: 'absolute', inset: 0 }} />;
}

function ArtPlaceholder({ habitat = 'forest', label = '', no = '' }) {
  return (
    <div className={`tcg-card-art art-${habitat}`}>
      <Stripes />
      <div style={{ position: 'relative', zIndex: 2, width: '100%', height: '100%',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        padding: '10px 12px', color: '#fff' }}>
        <div style={{ fontFamily: 'DotGothic16, monospace', fontSize: 10, opacity: 0.8, textAlign: 'left' }}>[ {habitat.toUpperCase()} ]</div>
        <div style={{ fontFamily: 'DotGothic16, monospace', fontSize: 11, opacity: 0.85, textAlign: 'center', alignSelf: 'center' }}>◾︎生き物イラスト◾︎<br />{label}</div>
        <div style={{ fontFamily: 'DotGothic16, monospace', fontSize: 10, opacity: 0.8, textAlign: 'right' }}>No.{no}</div>
      </div>
    </div>);

}

function CreatureCard({ c, rarity = 3, tag = 'N', onClick }) {
  return (
    <div className="tcg-card" onClick={onClick}>
      <div className="tcg-card-header">
        <div className="tcg-card-name">{c.name}</div>
        <div className="rarity">{Array.from({ length: rarity }).map((_, i) => <span key={i} className="rarity-star" />)}</div>
      </div>
      <ArtPlaceholder habitat={c.habitat} label={c.name} no={c.no} />
      <div className="tcg-card-tag">{tag}</div>
      <div className="tcg-card-stats">
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
          <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{c.status}</span>
        </div>
        <div style={{ fontFamily: 'Reggae One, sans-serif', fontSize: 13, lineHeight: 1.3 }}>{c.skill}</div>
      </div>
    </div>);

}

function SectionHeader({ label, title, subtitle, align = 'left' }) {
  const style = align === 'center' ? { textAlign: 'center', margin: '0 auto', maxWidth: 800 } : {};
  return (
    <div style={style}>
      <span className="section-label">{label}</span>
      <h2 className="section-title" style={{ fontFamily: "\"Zen Kaku Gothic New\"" }}>{title}</h2>
      {subtitle && <p className="section-subtitle" style={{ margin: align === 'center' ? '0 auto' : 0 }}>{subtitle}</p>}
    </div>);

}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-logo"><img src="assets/logo.png" alt="" style={{ height: 36 }} /></div>
      <div className="nav-links">
        <a href="#gameplay">あそびかた</a>
        <a href="#gallery">カード図鑑</a>
        <a href="#lineup">商品</a>
        <a href="#leaders">ジムリーダー</a>
        <a href="#events">大会・体験会</a>
        <a href="#faq">FAQ</a>
      </div>
      <a className="pop-btn orange" href="#events" style={{ fontSize: 14, padding: '10px 18px' }}>イベントを見る →</a>
    </nav>);

}

Object.assign(window, { Logo, Stripes, ArtPlaceholder, CreatureCard, SectionHeader, Nav });