// Section components

// ====== NAV ======
function Nav() {
  const { t } = useLang();
  return (
    <nav className="nav">
      <a href="#top" className="nav-brand">
        <span className="mark">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M12 3 L21 12 L12 21 L3 12 Z" />
            <circle cx="12" cy="12" r="3" fill="currentColor" />
          </svg>
        </span>
        Black Craft
      </a>
      <div className="nav-right">
        <div className="nav-links">
          <a href="#game">{t.nav.game}</a>
          <a href="#studio">{t.nav.team}</a>
          <a href="#devlog">{t.nav.devlog}</a>
        </div>
        <LangPicker />
      </div>
    </nav>);
}

// ====== HERO ======
function Hero() {
  const { t } = useLang();
  return (
    <header className="hero" id="top">
      <div className="hero-bg"></div>

      <ParticleField count={50} />

      <SparkBurst style={{ bottom: "15%", left: "15%" }} color="green" count={8} />
      <SparkBurst style={{ bottom: "12%", right: "18%" }} color="violet" count={8} />
      <SparkBurst style={{ top: "25%", right: "10%" }} color="green" count={5} />
      <SparkBurst style={{ top: "30%", left: "8%" }} color="violet" count={5} />

      {/* Eyes scattered around the hero, each blinking on its own clock */}
      <Eye eye={1} top="13%" left="2.5%" rotate={-9} blinkDelay={0.4} fadeDelay={2} blinkPeriod={5.2} fadePeriod={13} />
      <Eye eye={2} top="33%" left="6%" rotate={5} blinkDelay={3.4} fadeDelay={10} blinkPeriod={4.7} fadePeriod={14} />
      <Eye eye={3} top="58%" left="3.5%" rotate={-5} blinkDelay={1.7} fadeDelay={6} blinkPeriod={5.0} fadePeriod={15} />
      <Eye eye={2} bottom="10%" left="11%" rotate={7} blinkDelay={2.3} fadeDelay={4} blinkPeriod={5.7} fadePeriod={16} />
      <Eye eye={3} top="9%" right="3.5%" rotate={6} blinkDelay={2.1} fadeDelay={7} blinkPeriod={6.8} fadePeriod={16} />
      <Eye eye={1} top="38%" right="2.5%" rotate={-11} blinkDelay={1.2} fadeDelay={5} blinkPeriod={6.2} fadePeriod={12} />
      <Eye eye={3} bottom="28%" right="6%" rotate={-6} blinkDelay={3.0} fadeDelay={11} blinkPeriod={5.9} fadePeriod={13} />
      <Eye eye={2} bottom="11%" right="19%" rotate={9} blinkDelay={2.8} fadeDelay={8} blinkPeriod={4.4} fadePeriod={15} />
      <Eye eye={1} bottom="6%" left="33%" rotate={4} blinkDelay={0.9} fadeDelay={3} blinkPeriod={5.6} fadePeriod={14} />

      <div className="hero-inner">
        <div className="hero-logo">
          <img src="assets/dd-logo.png" alt="Dimension Disrupt" style={{ width: "681px" }} />
          <h1 className="visually-hidden">Dimension Disrupt</h1>
        </div>

        <p className="hero-subtitle">
          {t.hero.subtitle}
        </p>

        <div className="hero-tags">
          {t.hero.tags.map((tag, i) =>
          <span className={`tag ${i % 2 === 0 ? "green" : "violet"}`} key={i}>{tag}</span>
          )}
        </div>

        <div className="hero-cta">
          <a href="#wishlist" className="btn btn-primary" style={{ display: "none" }}>
            {t.hero.ctaWishlist}
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
          <a href="#game" className="btn btn-ghost">{t.hero.ctaSee}</a>
        </div>

        <LoreRune
          shape={0}
          color="green"
          style={{ top: "22%", left: "10%" }}
          text={t.hero.rune1} />

        <LoreRune
          shape={2}
          color="violet"
          style={{ bottom: "32%", right: "12%" }}
          text={t.hero.rune2} />
      </div>
    </header>);
}

// ====== GAME ======
function GameSection() {
  const { t } = useLang();
  const pillarMeta = [
  {
    n: "I",
    color: "p-green",
    icon:
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M32 8 L48 22 L42 56 L22 56 L16 22 Z" />
          <path d="M22 28 L42 28 M24 38 L40 38" />
          <circle cx="32" cy="20" r="3" fill="currentColor" />
        </svg>
  },
  {
    n: "II",
    color: "p-violet",
    icon:
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M8 56 L20 28 L32 40 L44 20 L56 56 Z" />
          <path d="M14 56 L14 40 M50 56 L50 44" />
          <circle cx="32" cy="14" r="2" fill="currentColor" />
        </svg>
  },
  {
    n: "III",
    color: "p-magenta",
    icon:
    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 50 L12 26 L32 12 L52 26 L52 50 Z" />
          <path d="M22 50 L22 36 L42 36 L42 50" />
          <path d="M28 50 L28 44 M36 50 L36 44" />
        </svg>
  }];

  const pillars = pillarMeta.map((m, i) => ({ ...m, ...t.game.pillars[i] }));

  const features = t.game.features;


  return (
    <section className="game-section" id="game">
      <ParticleField count={25} />
      <div className="container">
        <div className="section-label">{t.game.label}</div>
        <h2 className="section-title">
          {t.game.title1}<br />
          <span className="pop-v">{t.game.title2}</span>
        </h2>
        <p className="section-lede">
          {t.game.lede}
        </p>

        <div className="pillars">
          {pillars.map((p, i) =>
          <div className={`pillar ${p.color}`} key={i}>
              <div className="pillar-num">{t.game.pillarWord} {p.n}</div>
              <div className="pillar-icon">{p.icon}</div>
              <h3>{p.title}</h3>
              <p>{p.copy}</p>
            </div>
          )}
        </div>

        <div className="features">
          <div>
            <div className="section-label violet" style={{ marginBottom: 30 }}>{t.game.featuresLabel}</div>
            <ul className="feature-list">
              {features.map((f, i) =>
              <li key={i}>
                  <span className="num">0{i + 1}</span>
                  <div className="copy">
                    <h4>{f.t}</h4>
                    <p>{f.c}</p>
                  </div>
                </li>
              )}
            </ul>
          </div>

          <div className="placeholder keyart-placeholder">
            <div>
              KEY ART<br />
              [ HERO + DUNGEON MAW ]<br />
              <span style={{ opacity: 0.5 }}>2400 × 3000</span>
            </div>
            <SparkBurst style={{ bottom: "10%", left: "30%" }} color="green" count={6} />
            <SparkBurst style={{ top: "20%", right: "20%" }} color="violet" count={4} />
            <Eye eye={3} top="10%" left="8%" rotate={-5} blinkDelay={1.6} fadeDelay={3} blinkPeriod={5.8} fadePeriod={15} />
            <Eye eye={1} bottom="22%" right="12%" rotate={8} blinkDelay={3.2} fadeDelay={9} blinkPeriod={4.9} fadePeriod={13} />
            <LoreRune
              shape={4}
              color="green"
              style={{ top: "12%", right: "12%" }}
              text={t.game.rune} />
          </div>
        </div>
      </div>
    </section>);
}

// ====== STUDIO ======
function StudioSection() {
  const { t } = useLang();
  const [m0, m1] = t.studio.members;
  return (
    <section className="studio-section" id="studio">
      <ParticleField count={20} />
      <div className="container">
        <div className="section-label">{t.studio.label}</div>
        <h2 className="section-title">{t.studio.title1} <br /><span className="pop-g">{t.studio.title2}</span></h2>
        <p className="section-lede">{t.studio.lede}</p>

        <div className="team">
          <div className="member">
            <div className="placeholder member-portrait">
              <span className="frame-corner fc-tl"></span>
              <span className="frame-corner fc-tr"></span>
              <span className="frame-corner fc-bl"></span>
              <span className="frame-corner fc-br"></span>
              <div>
                PORTRAIT — CHARLIE<br />
                <span style={{ opacity: 0.5 }}>1200 × 1600</span>
              </div>
              <SparkBurst style={{ bottom: "8%", left: "50%" }} color="green" count={5} />
              <Eye eye={2} top="12%" left="8%" width={72} rotate={3} blinkDelay={2.4} fadeDelay={4} blinkPeriod={5.1} fadePeriod={12} />
              <Eye eye={3} bottom="22%" right="14%" width={78} rotate={-2} blinkDelay={0.8} fadeDelay={7} blinkPeriod={4.6} fadePeriod={14} />
            </div>
            <h3 className="member-name">Charlie</h3>
            <div className="member-role">{m0.role}</div>
            <p className="member-bio">{m0.bio}</p>
            <div className="member-stats">
              <div><span className="k">{t.studio.mainsK} </span> {m0.mains}</div>
              <div><span className="k">{t.studio.fearsK} </span> {m0.fears}</div>
            </div>
          </div>

          <div className="member violet">
            <div className="placeholder member-portrait">
              <span className="frame-corner fc-tl"></span>
              <span className="frame-corner fc-tr"></span>
              <span className="frame-corner fc-bl"></span>
              <span className="frame-corner fc-br"></span>
              <div>
                PORTRAIT — MABU<br />
                <span style={{ opacity: 0.5 }}>1200 × 1600</span>
              </div>
              <SparkBurst style={{ bottom: "8%", left: "50%" }} color="violet" count={5} />
              <Eye eye={1} bottom="22%" left="14%" width={72} rotate={-5} blinkDelay={3.6} fadeDelay={2} blinkPeriod={6.3} fadePeriod={16} />
              <LoreRune
                shape={3}
                color="violet"
                style={{ top: "10%", right: "10%" }}
                text={t.studio.rune} />
            </div>
            <h3 className="member-name">Mabu</h3>
            <div className="member-role">{m1.role}</div>
            <p className="member-bio">{m1.bio}</p>
            <div className="member-stats">
              <div><span className="k">{t.studio.mainsK} </span> {m1.mains}</div>
              <div><span className="k">{t.studio.fearsK} </span> {m1.fears}</div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ====== DEVLOG ======
function DevlogSection() {
  const { t } = useLang();
  const postMeta = [
  { featured: true, date: "12 · 05 · 26", thumb: "DEVLOG IMG · DUNGEON TILES" },
  { date: "03 · 05 · 26", thumb: "DEVLOG IMG · SLIME ANIM" },
  { date: "21 · 04 · 26", thumb: "DEVLOG IMG · SANITY UI" }];

  const posts = postMeta.map((m, i) => ({ ...m, ...t.devlog.posts[i] }));


  return (
    <section className="devlog-section" id="devlog">
      <ParticleField count={20} />
      <Eye eye={1} top="7%" right="3%" rotate={7} blinkDelay={1.4} fadeDelay={4} blinkPeriod={5.5} fadePeriod={14} />
      <Eye eye={3} bottom="9%" left="3.5%" rotate={-6} blinkDelay={2.9} fadeDelay={9} blinkPeriod={6.1} fadePeriod={15} />
      <Eye eye={2} bottom="20%" right="5%" rotate={4} blinkDelay={0.8} fadeDelay={6} blinkPeriod={4.9} fadePeriod={13} />
      <div className="container">
        <div className="devlog-head">
          <div>
            <div className="section-label">{t.devlog.label}</div>
            <h2 className="section-title">{t.devlog.title1}<br /><span className="pop-g">{t.devlog.title2}</span></h2>
          </div>
          <a href="All Entries.html" className="btn btn-ghost">{t.devlog.all}
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M5 12h14M13 5l7 7-7 7" />
            </svg>
          </a>
        </div>

        <div className="devlog-grid">
          {posts.map((p, i) =>
          <a className={`entry ${p.featured ? "featured" : ""}`} key={i}>
              <div className="placeholder entry-thumb">
                <div>{p.thumb}</div>
                {i === 0 &&
              <>
                    <SparkBurst style={{ bottom: "12%", right: "20%" }} color="green" count={5} />
                    <Eye eye={2} top="14%" left="12%" width={72} rotate={4} blinkDelay={1.9} fadeDelay={6} blinkPeriod={5.4} fadePeriod={13} />
                    <LoreRune
                  shape={1}
                  color="green"
                  style={{ bottom: "14%", left: "10%" }}
                  text={t.devlog.rune} />
                  </>
              }
                {i === 1 && <SparkBurst style={{ bottom: "10%", left: "50%" }} color="violet" count={4} />}
              </div>
              <div className="entry-meta">
                <span>{p.date}</span>
                <span className="dot"></span>
                <span className="tag-inline">{p.tag}</span>
              </div>
              <h3 className="entry-title">{p.title}</h3>
              <p className="entry-excerpt">{p.excerpt}</p>
            </a>
          )}
        </div>
      </div>
    </section>);
}

// ====== FOOTER ======
function Footer() {
  const { t } = useLang();
  return (
    <footer id="wishlist">
      <Eye eye={3} top="20%" left="3%" width={74} rotate={-7} blinkDelay={1.1} fadeDelay={3} blinkPeriod={5.6} fadePeriod={15} />
      <Eye eye={1} bottom="22%" right="4%" width={80} rotate={6} blinkDelay={2.7} fadeDelay={8} blinkPeriod={6.0} fadePeriod={14} />
      <Eye eye={2} top="32%" left="46%" width={60} rotate={5} blinkDelay={0.6} fadeDelay={11} blinkPeriod={4.8} fadePeriod={16} />
      <div className="footer-inner">
        <div className="footer-brand">
          <h4>Black <span className="g">Craft</span></h4>
          <p>{t.footer.tagline}</p>
        </div>
        <div className="footer-col">
          <h5>{t.footer.colGame.title}</h5>
          <ul>
            {t.footer.colGame.links.map((l, i) => <li key={i}><a>{l}</a></li>)}
          </ul>
        </div>
        <div className="footer-col">
          <h5>{t.footer.colStudio.title}</h5>
          <ul>
            {t.footer.colStudio.links.map((l, i) => <li key={i}><a>{l}</a></li>)}
          </ul>
        </div>
        <div className="footer-col">
          <h5>{t.footer.colFollow.title}</h5>
          <ul>
            {t.footer.colFollow.links.map((l, i) => <li key={i}><a>{l}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="footer-support">
        <span className="footer-support-label">{t.support.label}</span>
        <a className="footer-support-logo" href="https://acau.uy" target="_blank" rel="noopener noreferrer" aria-label="ACAU — Agencia del Cine y el Audiovisual del Uruguay">
          <img src="assets/acau-logo.png" alt="ACAU — Agencia del Cine y el Audiovisual del Uruguay" />
        </a>
        <p className="footer-support-blurb" style={{ padding: "0px", margin: "0px", width: "600px" }}>{t.support.blurb}</p>
      </div>
      <div className="footer-bottom">
        <span>{t.footer.copyright}</span>
        <span>v0.0.1 · Pre-alpha</span>
      </div>
    </footer>);
}

Object.assign(window, { Nav, Hero, GameSection, StudioSection, DevlogSection, Footer });