// sections.jsx — All section components for Identification

const { useState, useEffect, useMemo, useRef } = React;

// ---------------- NAV ----------------
function Nav({ t, lang, setLang }) {
  return (
    <nav className="nav" data-screen-label="Nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark"></span>
          <span>Identificacion</span>
          <span className="brand-dot">.com</span>
        </a>
        <div className="nav-links">
          <a href="#orb">{t.nav.what}</a>
          <a href="#operator">{t.nav.benefits}</a>
          <a href="#how">{t.nav.how}</a>
          <a href="#faq">{t.nav.faq}</a>
        </div>
        <div className="nav-right">
          <div className="lang-toggle" role="tablist" aria-label="Language">
            <button
              className={lang === "en" ? "active" : ""}
              onClick={() => setLang("en")}
              aria-pressed={lang === "en"}
            >EN</button>
            <button
              className={lang === "es" ? "active" : ""}
              onClick={() => setLang("es")}
              aria-pressed={lang === "es"}
            >ES</button>
          </div>
          <a href="apply.html" className="btn btn-primary">{t.nav.apply}
            <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ---------------- HERO ----------------
function Hero({ t, accent }) {
  return (
    <section className="hero wrap" id="top" data-screen-label="Hero">
      <div className="hero-grid">
        <div className="hero-copy">
          <span className="eyebrow">{t.hero.eyebrow}</span>
          <h1>
            <span className="line gradient-text">{t.hero.title_a}</span>
            <span className="line"><span className="serif-em">{t.hero.title_b}</span></span>
          </h1>
          <p className="hero-sub">{t.hero.sub}</p>
          <div className="hero-cta">
            <a href="apply.html" className="btn btn-primary">
              {t.hero.cta_a}
              <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="#how" className="btn btn-ghost">{t.hero.cta_b}</a>
          </div>
          <div className="hero-meta">
            <div className="item"><div className="v">{t.hero.meta_1_v}</div><div className="k">{t.hero.meta_1_k}</div></div>
            <div className="item"><div className="v">{t.hero.meta_2_v}</div><div className="k">{t.hero.meta_2_k}</div></div>
            <div className="item"><div className="v">{t.hero.meta_3_v}</div><div className="k">{t.hero.meta_3_k}</div></div>
          </div>
        </div>
        <Sphere readouts={t.hero.readouts} />
      </div>
    </section>
  );
}

function Sphere({ readouts }) {
  // Generate floating particles deterministically
  const particles = useMemo(() =>
    Array.from({ length: 14 }).map((_, i) => ({
      left: 50 + Math.cos((i / 14) * Math.PI * 2) * 45 + (i % 3) * 2,
      top: 50 + Math.sin((i / 14) * Math.PI * 2) * 45 + (i % 4) * 2,
      delay: (i * 0.7) % 14,
      duration: 10 + (i % 5) * 1.5,
    })), []
  );
  return (
    <div className="sphere-stage">
      <div className="glow"></div>
      <div className="ring r2"></div>
      <div className="ring"></div>
      <img className="sphere-img" src="images/orb-hero.png" alt="The Orb" />
      {particles.map((p, i) => (
        <span key={i} className="particle" style={{
          left: p.left + "%", top: p.top + "%",
          animationDelay: p.delay + "s", animationDuration: p.duration + "s",
        }}></span>
      ))}
      <span className="readout tl">{readouts[0]}</span>
      <span className="readout tr right">{readouts[1]}</span>
      <span className="readout bl">{readouts[2]}</span>
      <span className="readout br right">{readouts[3]}</span>
    </div>
  );
}

// ---------------- WHAT ----------------
function WhatSection({ t }) {
  const illus = [
    <div className="iris"><div className="iris-ring"></div></div>,
    <div className="shield"></div>,
    <div className="network"></div>,
    <div className="pulse">{Array.from({ length: 10 }).map((_, i) => <span key={i}></span>)}</div>,
    <div className="fingerprint"><i></i><i></i><i></i><i></i><i></i></div>,
    <CodeBadge />,
  ];
  const slots = ["a", "b", "c", "d", "e", "f"];
  return (
    <section className="section-pad wrap" id="what" data-screen-label="What is Identification">
      <div className="section-head">
        <span className="eyebrow">{t.what.eyebrow}</span>
        <h2>{t.what.title}</h2>
        <p>{t.what.sub}</p>
      </div>
      <div className="what-grid">
        {t.what.cards.map((c, i) => (
          <div key={i} className={`glass what-card ${slots[i]}`}>
            <div className="num">{c.num} / 06</div>
            <h3>{c.t}</h3>
            <p>{c.d}</p>
            <div className="what-illus">{illus[i]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CodeBadge() {
  return (
    <div style={{
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      letterSpacing: "0.04em",
      color: "rgba(180,210,255,0.85)",
      padding: 14,
      border: "1px solid var(--border)",
      borderRadius: 10,
      background: "rgba(255,255,255,0.02)",
      lineHeight: 1.7,
    }}>
      <div style={{ color: "rgba(255,255,255,0.4)" }}>// human.verify()</div>
      <div>→ <span style={{ color: "var(--accent-hot)" }}>true</span></div>
      <div style={{ color: "rgba(255,255,255,0.4)" }}>signature: 0x9f3b…ac21</div>
    </div>
  );
}

// ---------------- WHY ----------------
function WhySection({ t, locations }) {
  // First card is the featured "earnings" card with CTA; remaining 3 go in a row below.
  const [feature, ...rest] = t.why.cards;
  return (
    <section className="section-pad wrap" id="why" data-screen-label="Why host">
      <div className="section-head">
        <span className="eyebrow">{t.why.eyebrow}</span>
        <h2>{t.why.title}</h2>
        <p>{t.why.sub}</p>
      </div>

      <div className="glass benefit feature">
        <div className="feature-body">
          <span className="tag">{feature.tag}</span>
          <h3>{feature.t}</h3>
          <p>{feature.d}</p>
          <div className="feature-cta-row">
            <a href="apply.html" className="btn btn-primary btn-xl">
              {t.operator.cta}
              <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <span className="op-cta-sub mono">{t.operator.cta_sub}</span>
          </div>
        </div>
        <div className="feature-aside">
          <div className="feature-phrase serif-em">{feature.v}</div>
          <FeaturePulse />
          <div className="feature-meta">
            <div className="feature-meta-row">
              <span className="mono">DIRECT DEPOSIT</span>
              <span>Recurring</span>
            </div>
            <div className="feature-meta-row">
              <span className="mono">MINIMUMS</span>
              <span>None</span>
            </div>
            <div className="feature-meta-row">
              <span className="mono">HOST FEES</span>
              <span>$0</span>
            </div>
          </div>
        </div>
      </div>

      <div className="benefit-row">
        {rest.map((c, i) => (
          <div key={i} className="glass benefit">
            <div className="top">
              <h3>{c.t}</h3>
              <span className="tag">{c.tag}</span>
            </div>
            <p>{c.d}</p>
            <div className="benefit-phrase serif-em">{c.v}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 56 }}>
        <div className="locations">
          <div className="loc-track">
            {[...locations, ...locations].map((l, i) => (
              <span key={i} className="loc-chip"><span className="dot"></span>{l}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function FeaturePulse() {
  // Animated bar pulse — purely decorative, not implying any specific number
  return (
    <div className="feature-pulse" aria-hidden="true">
      {Array.from({ length: 24 }).map((_, i) => (
        <span key={i} style={{ animationDelay: `${(i * 0.08) % 2}s` }}></span>
      ))}
    </div>
  );
}

// ---------------- HOW ----------------
function HowSection({ t }) {
  return (
    <section className="section-pad wrap" id="how" data-screen-label="How it works">
      <div className="section-head">
        <span className="eyebrow">{t.how.eyebrow}</span>
        <h2>{t.how.title}</h2>
        <p>{t.how.sub}</p>
      </div>
      <div className="how-steps">
        {t.how.steps.map((s, i) => (
          <div key={i} className="glass step">
            <div className="marker">{s.n}</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            <div className="meta">
              <span>{s.action}</span>
              <span style={{ color: "var(--fg)" }}>{s.time}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------------- STATS / MAP ----------------
function StatsSection({ t }) {
  // Lon/lat → equirectangular viewBox(1000×500) projection
  const project = (lon, lat) => [((lon + 180) / 360) * 1000, ((90 - lat) / 180) * 500];

  // Real coordinates for active markets — clustered groups
  const pinSpec = [
    // United States — multiple host clusters
    { lon: -74.0,  lat: 40.7, big: true,  label: "NYC" },
    { lon: -118.2, lat: 34.0, big: true,  label: "LA" },
    { lon: -87.6,  lat: 41.9, big: false, label: "Chicago" },
    { lon: -95.4,  lat: 29.8, big: false, label: "Houston" },
    { lon: -80.2,  lat: 25.8, big: false, label: "Miami" },
    { lon: -122.4, lat: 37.8, big: false, label: "SF" },
    // Mexico
    { lon: -99.1,  lat: 19.4, big: true,  label: "CDMX" },
    { lon: -103.3, lat: 20.7, big: false, label: "Guadalajara" },
    { lon: -100.3, lat: 25.7, big: false, label: "Monterrey" },
    { lon: -86.8,  lat: 21.2, big: false, label: "Cancún" },
    // Colombia
    { lon: -74.1,  lat: 4.7,  big: true,  label: "Bogotá" },
    { lon: -75.6,  lat: 6.2,  big: false, label: "Medellín" },
    { lon: -76.5,  lat: 3.4,  big: false, label: "Cali" },
    // Spain
    { lon: -3.7,   lat: 40.4, big: true,  label: "Madrid" },
    { lon:  2.2,   lat: 41.4, big: false, label: "Barcelona" },
    { lon: -5.0,   lat: 37.4, big: false, label: "Sevilla" },
  ];

  const pins = pinSpec.map((p) => {
    const [x, y] = project(p.lon, p.lat);
    return { ...p, x: (x / 1000) * 100, y: (y / 500) * 100 };
  });

  return (
    <section className="section-pad wrap" data-screen-label="Stats">
      <div className="section-head">
        <span className="eyebrow">{t.stats.eyebrow}</span>
        <h2>{t.stats.title}</h2>
        <p>{t.stats.sub}</p>
      </div>
      <div className="stats-grid">
        <div className="glass map-card">
          <div className="map-head">
            <h3>{t.stats.map_title}</h3>
            <span className="mono" style={{ fontSize: 11, color: "var(--fg-faint)", letterSpacing: "0.1em" }}>
              {t.stats.map_legend}
            </span>
          </div>
          <div className="map-wrap">
            <WorldMap />
            {pins.map((p, i) => (
              <span
                key={i}
                className={`map-pin ${p.big ? "big" : ""}`}
                style={{ left: `${p.x}%`, top: `${p.y}%`, animationDelay: `${(i % 6) * 0.35}s` }}
                title={p.label}
              ></span>
            ))}
          </div>
        </div>
        <div className="stat-col">
          {t.stats.cards.map((c, i) => (
            <div key={i} className="glass stat-card">
              <div>
                <div className="v">{c.v}</div>
                <div className="k">{c.k}</div>
              </div>
              <div className="delta">▲ {c.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorldMap() {
  const dots = window.WORLD_DOTS || [];
  return (
    <svg className="map-svg" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet">
      <defs>
        <radialGradient id="mapGlow" cx="50%" cy="50%" r="65%">
          <stop offset="0%" stopColor="rgba(108,164,255,0.16)" />
          <stop offset="100%" stopColor="rgba(108,164,255,0)" />
        </radialGradient>
      </defs>
      <rect width="1000" height="500" fill="url(#mapGlow)" />
      <g fill="rgba(180,210,255,0.5)">
        {dots.map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={1.4} />
        ))}
      </g>
    </svg>
  );
}

// ---------------- APPLY ----------------
function ApplySection({ t }) {
  const [form, setForm] = useState({
    biz: "", contact: "", phone: "", email: "",
    type: "", city: "", traffic: "", why: "",
  });
  const [submitted, setSubmitted] = useState(false);
  const [appId, setAppId] = useState("");
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const onSubmit = (e) => {
    e.preventDefault();
    const id = "ID-" + Math.random().toString(36).slice(2, 6).toUpperCase() + "-" + Date.now().toString(36).slice(-4).toUpperCase();
    setAppId(id);
    setSubmitted(true);
    setTimeout(() => {
      document.getElementById("apply")?.scrollIntoView({ behavior: "instant", block: "start" });
    }, 0);
  };
  return (
    <section className="section-pad wrap" id="apply" data-screen-label="Application">
      <div className="section-head">
        <span className="eyebrow">{t.apply.eyebrow}</span>
        <h2>{t.apply.title}</h2>
        <p>{t.apply.sub}</p>
      </div>
      <div className="apply-grid">
        <div className="glass apply-aside">
          <h3>{t.apply.aside_t}</h3>
          <ul className="checklist">
            {t.apply.aside_items.map((it, i) => <li key={i}>{it}</li>)}
          </ul>
          <div className="small-sphere"></div>
        </div>
        <div className="glass form-card">
          {!submitted ? (
            <form onSubmit={onSubmit}>
              <div className="form-grid">
                <div className="field">
                  <label>{t.apply.fields.biz}</label>
                  <input required value={form.biz} onChange={onChange("biz")} placeholder="Sunset Coffee Bar" />
                </div>
                <div className="field">
                  <label>{t.apply.fields.contact}</label>
                  <input required value={form.contact} onChange={onChange("contact")} placeholder="Alex Rivera" />
                </div>
                <div className="field">
                  <label>{t.apply.fields.phone}</label>
                  <input required value={form.phone} onChange={onChange("phone")} type="tel" placeholder="+1 555 040 1820" />
                </div>
                <div className="field">
                  <label>{t.apply.fields.email}</label>
                  <input required value={form.email} onChange={onChange("email")} type="email" placeholder="alex@sunsetcoffee.com" />
                </div>
                <div className="field">
                  <label>{t.apply.fields.type}</label>
                  <select required value={form.type} onChange={onChange("type")}>
                    <option value="">—</option>
                    {t.apply.types.map((tt, i) => <option key={i} value={tt}>{tt}</option>)}
                  </select>
                </div>
                <div className="field">
                  <label>{t.apply.fields.city}</label>
                  <input required value={form.city} onChange={onChange("city")} placeholder="Mexico City" />
                </div>
                <div className="field full">
                  <label>{t.apply.fields.traffic}</label>
                  <select required value={form.traffic} onChange={onChange("traffic")}>
                    <option value="">—</option>
                    {t.apply.traffic_opts.map((tt, i) => <option key={i} value={tt}>{tt}</option>)}
                  </select>
                </div>
                <div className="field full">
                  <label>{t.apply.fields.why}</label>
                  <textarea value={form.why} onChange={onChange("why")} placeholder={t.apply.fields.why_ph}></textarea>
                </div>
              </div>
              <div className="form-foot">
                <div className="note">{t.apply.note}</div>
                <button type="submit" className="btn btn-primary">
                  {t.apply.submit}
                  <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
              </div>
            </form>
          ) : (
            <div className="success">
              <div className="ok-orb"></div>
              <h3 style={{ fontSize: 28 }}>{t.apply.success_t}</h3>
              <p style={{ maxWidth: 420, textAlign: "center" }}>{t.apply.success_d} <span className="mono" style={{ color: "var(--accent-hot)" }}>{appId}</span></p>
              <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>← Edit application</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ---------------- FAQ ----------------
function FaqSection({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section-pad wrap" id="faq" data-screen-label="FAQ">
      <div className="faq">
        <div>
          <span className="eyebrow">{t.faq.eyebrow}</span>
          <h2 style={{ marginTop: 22 }}>{t.faq.title}</h2>
          <p style={{ marginTop: 22, fontSize: 17 }}>{t.faq.sub}</p>
        </div>
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- FINAL CTA ----------------
function FinalCta({ t }) {
  return (
    <section className="final wrap" data-screen-label="Final CTA">
      <span className="eyebrow no-dot" style={{ position: "relative", zIndex: 1, visibility: "hidden", height: 0, margin: 0, padding: 0 }} aria-hidden="true"></span>
      <div className="final-sphere" style={{ marginTop: 0, position: "relative", zIndex: 1 }}>
        <img src="images/orb-final.png" alt="The Orb" />
      </div>
      <h2 style={{ position: "relative", zIndex: 1 }}>
        <span className="gradient-text">{t.final.title_a}</span>{" "}
        <span className="serif-em">{t.final.title_b}</span>
      </h2>
      <div style={{ marginTop: 48, position: "relative", zIndex: 1 }}>
        <a href="apply.html" className="btn btn-primary" style={{ padding: "18px 30px", fontSize: 16 }}>
          {t.final.cta}
          <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a>
      </div>
    </section>
  );
}

// ---------------- FOOTER ----------------
function Footer({ t }) {
  return (
    <footer data-screen-label="Footer">
      <div className="foot">
        <div>
          <a href="#top" className="brand" style={{ marginBottom: 14 }}>
            <span className="brand-mark"></span>
            <span>Identificacion</span>
            <span className="brand-dot">.com</span>
          </a>
          <p style={{ fontSize: 14, maxWidth: 320, marginTop: 12 }}>{t.foot.blurb}</p>
        </div>
        <div>
          <h4>{t.foot.col1_t}</h4>
          <ul>{t.foot.col1.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.foot.col2_t}</h4>
          <ul>{t.foot.col2.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
        </div>
        <div>
          <h4>{t.foot.col3_t}</h4>
          <ul>{t.foot.col3.map((x, i) => <li key={i}><a href="#">{x}</a></li>)}</ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>{t.foot.legal}</span>
        <span>SYS · ALL NODES NOMINAL</span>
      </div>
    </footer>
  );
}

// ---------------- ABOUT THE ORB ----------------
function AboutOrbSection({ t }) {
  return (
    <section className="section-pad wrap" id="orb" data-screen-label="About the Orb">
      <div className="section-head">
        <span className="eyebrow">{t.about_orb.eyebrow}</span>
        <h2>{t.about_orb.title}</h2>
        <p>{t.about_orb.sub}</p>
      </div>
      <ol className="orb-row-list">
        {t.about_orb.steps.map((s, i) => (
          <li key={i} className={`orb-row ${i % 2 === 1 ? "flip" : ""}`}>
            <div className="orb-row-photo">
              <img src={`images/orb-step-${i + 1}.png`} alt={`Orb view ${i + 1}`} />
              <div className="orb-row-glow"></div>
            </div>
            <div className="orb-row-body">
              <span className="orb-row-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  );
}

// ---------------- OPERATOR CTA ----------------
function OperatorSection({ t }) {
  return (
    <section className="section-pad wrap" id="operator" data-screen-label="Become an operator">
      <div className="op-card glass">
        <div className="op-photo">
          <img src="images/orb-photo-1.png" alt={t.operator.caption} />
          <div className="op-photo-overlay"></div>
          <span className="op-photo-tag mono">LIVE OPERATION · ACTIVE NODE</span>
        </div>
        <div className="op-body">
          <span className="eyebrow">{t.operator.eyebrow}</span>
          <h2>
            <span className="gradient-text">{t.operator.title_a}</span>{" "}
            <span className="serif-em">{t.operator.title_b}</span>
          </h2>
          <p className="op-sub">{t.operator.sub}</p>
          <ul className="op-bullets">
            {t.operator.bullets.map((b, i) => (
              <li key={i}>
                <span><strong>{b.t}.</strong> {b.d}</span>
              </li>
            ))}
          </ul>
          <div className="op-cta">
            <a href="apply.html" className="btn btn-primary btn-xl">
              {t.operator.cta}
              <svg className="arrow" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <span className="op-cta-sub mono">{t.operator.cta_sub}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutOrbSection, OperatorSection,
  Nav, Hero, WhatSection, WhySection, HowSection, StatsSection,
  ApplySection, FaqSection, FinalCta, Footer,
});