// Shared components: TopBar, Footer, CTABlock, ComplianceStrip
const { useState, useEffect, useRef } = React;

function TopBar({ t, lang, setLang, page, setPage }) {
  const [open, setOpen] = useState(false);
  const links = [
    ["home", t.nav.home],
    ["services", t.nav.services],
    ["industries", t.nav.industries],
    ["insights", t.nav.insights],
    ["about", t.nav.about],
    ["contact", t.nav.contact]
  ];
  const go = (p) => { setPage(p); setOpen(false); window.scrollTo({top:0, behavior:"instant"}); };
  return (
    <header className="topbar">
      <div className="wrap topbar-inner">
        <div className="brand" onClick={() => go("home")}>
          <div className="brand-mark">FANTULA<span className="accent">.</span></div>
          <div className="brand-suffix">LLC · WY</div>
        </div>
        <nav className={"nav " + (open ? "open" : "")}>
          {links.map(([k, label]) => (
            <button key={k}
              className={"nav-link " + (page === k ? "active" : "")}
              onClick={() => go(k)}>{label}</button>
          ))}
        </nav>
        <div style={{display:"flex", gap:12, alignItems:"center"}}>
          <div className="lang-toggle">
            <button className={lang==="en"?"on":""} onClick={()=>setLang("en")}>EN</button>
            <button className={lang==="zh"?"on":""} onClick={()=>setLang("zh")}>中文</button>
          </div>
          <button className="cta-btn solid topbar-cta-desktop" onClick={()=>go("contact")}>{t.nav.consult}</button>
          <button className="mobile-toggle" onClick={()=>setOpen(o=>!o)} aria-label="menu">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
          </button>
        </div>
      </div>
    </header>
  );
}

function CTABlock({ t, setPage }) {
  return (
    <section className="block">
      <div className="wrap" style={{textAlign:"center"}}>
        <div className="eyebrow" style={{justifyContent:"center", display:"inline-flex"}}>{t.services.kicker}</div>
        <h2 className="section-title" style={{margin:"22px auto 22px", maxWidth: 820}}>
          {t.cta_block.title_a}<em>{t.cta_block.title_em}</em>{t.cta_block.title_b}
        </h2>
        <p className="section-kicker" style={{margin:"0 auto 36px"}}>{t.cta_block.lede}</p>
        <button className="cta-btn solid" onClick={()=>{setPage("contact"); window.scrollTo({top:0});}}>{t.cta_block.cta}</button>
      </div>
    </section>
  );
}

function ComplianceStrip({ lang }) {
  const items = lang === "en"
    ? [
        "Wyoming, USA — Reg. 2026-001975679",
        "B2B Engagements Only",
        "Vendor-Neutral Advisory",
        "GDPR & CCPA Aligned"
      ]
    : [
        "美国怀俄明州 · 注册号 2026-001975679",
        "仅服务企业客户",
        "平台中立咨询",
        "符合 GDPR / CCPA"
      ];
  return (
    <div className="compliance-strip">
      <div className="wrap compliance-inner">
        {items.map((x, i) => (
          <div className="comp-item" key={i}>
            <span className="comp-dot"></span>
            <span>{x}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Footer({ t, lang, setLang, setPage }) {
  const go = (p) => { setPage(p); window.scrollTo({top:0}); };
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <div className="brand" style={{marginBottom:18}}>
              <div className="brand-mark" style={{fontSize:22}}>FANTULA<span className="accent">.</span></div>
              <div className="brand-suffix">LLC · WY</div>
            </div>
            <p style={{maxWidth:340, lineHeight:1.7}}>{t.footer.blurb}</p>
            <a className="foot-social" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5c0 1.4-1.1 2.5-2.5 2.5S0 4.9 0 3.5 1.1 1 2.48 1s2.5 1.1 2.5 2.5zM.22 8h4.52v15H.22V8zm7.5 0H12v2.1h.06c.6-1.1 2.1-2.3 4.3-2.3 4.6 0 5.45 3 5.45 7V23H17.3v-6.6c0-1.6 0-3.6-2.2-3.6s-2.55 1.7-2.55 3.5V23H8.07V8h-.35z"/></svg>
              <span>{t.footer.linkedin}</span>
            </a>
          </div>
          <div className="foot-col">
            <h5>{t.footer.services_h}</h5>
            {t.footer.services_links.map(([label, target], i) => (
              <a key={i} onClick={() => go(target)}>{label}</a>
            ))}
          </div>
          <div className="foot-col">
            <h5>{t.footer.company_h}</h5>
            {t.footer.company_links.map(([label, target], i) => (
              <a key={i} onClick={() => go(target)}>{label}</a>
            ))}
          </div>
          <div className="foot-col">
            <h5>{t.footer.legal_h}</h5>
            <a onClick={()=>go("privacy")}>{t.footer.privacy}</a>
            <a onClick={()=>go("terms")}>{t.footer.terms}</a>
          </div>
          <div className="foot-col">
            <h5>{t.footer.contact_h}</h5>
            <p>contact@fantula.net</p>
            <p>sales@fantula.net</p>
            <p>+86 153 0023 1517</p>
            <p style={{marginTop:14, fontSize:12.5, color:"var(--ink-4)"}}>30 N Gould St Ste R</p>
            <p style={{fontSize:12.5, color:"var(--ink-4)"}}>Sheridan, WY 82801, USA</p>
            <div style={{marginTop:18}}>
              <div style={{fontFamily:"var(--mono)", fontSize:10, color:"var(--ink-4)", letterSpacing:"0.18em", marginBottom:6, textTransform:"uppercase"}}>{t.footer.lang_label}</div>
              <div className="foot-lang">
                <button className={lang==="en"?"on":""} onClick={()=>setLang("en")}>EN</button>
                <button className={lang==="zh"?"on":""} onClick={()=>setLang("zh")}>中文</button>
              </div>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>{t.footer.copy}</span>
          <span>{t.footer.reg}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, CTABlock, ComplianceStrip, Footer });

// Animated network background for hero
function HeroNetwork() {
  const nodes = [
    [120, 80, "pulse"], [240, 140, "pulse pulse-b"], [380, 90, "pulse pulse-c"],
    [60, 220, "pulse pulse-b"], [200, 280, "pulse pulse-c"], [340, 230, "pulse"],
    [460, 180, "pulse pulse-b"], [520, 100, "pulse pulse-c"], [440, 320, "pulse"]
  ];
  const links = [[0,1],[1,2],[1,4],[3,4],[4,5],[5,2],[5,6],[6,7],[2,7],[6,8],[4,8],[7,8]];
  return (
    <svg className="hero-nodes" viewBox="0 0 600 380" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      {links.map(([a,b], i) => (
        <line key={i} x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]} className="flow" />
      ))}
      {nodes.map(([x,y,cls], i) => (
        <circle key={i} cx={x} cy={y} r="2" className={cls} />
      ))}
    </svg>
  );
}

// Accordion FAQ
function FAQ({ t }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq-list">
      {t.faq.items.map(([q, a], i) => (
        <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{q}</span>
            <span className="chev">+</span>
          </button>
          <div className="faq-a">
            <div className="faq-a-inner">{a}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { HeroNetwork, FAQ });