// 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() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);
  const close = () => setOpen(false);
  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 nav-cta" href="#events" style={{ backgroundColor: "rgb(255, 195, 27)", color: "rgb(32, 32, 32)" }}>イベントを見る →</a>
      <button
        type="button"
        className={`nav-burger ${open ? 'is-open' : ''}`}
        aria-label="メニューを開く"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}>
        
        <span></span><span></span><span></span>
      </button>
      <div className={`nav-drawer ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        <div className="nav-drawer-inner">
          <a href="#gameplay" onClick={close}>あそびかた</a>
          <a href="#gallery" onClick={close}>カード図鑑</a>
          <a href="#lineup" onClick={close}>商品</a>
          <a href="#leaders" onClick={close}>ジムリーダー</a>
          <a href="#events" onClick={close}>大会・体験会</a>
          <a href="#faq" onClick={close}>FAQ</a>
          <a className="pop-btn orange" href="#events" onClick={close} style={{ marginTop: 16 }}>イベントを見る →</a>
        </div>
      </div>
    </nav>);

}

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