// sections-top.jsx — Nav, language switcher, J-Wallet phone, Hero, Stats
const { useState, useEffect, useRef } = React;
const Icon = window.Icon;

/* ───────── J-Wallet phone mockup ───────── */
function JWallet() {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <div className="phone" dir="ltr">
      <div className="phone-screen">
        <div className="jw-status">
          <span>9:41</span>
          <span className="dots"><Icon name="globe" size={12} /> J-Wallet</span>
        </div>
        <div className="jw-top">
          <div>
            <div className="jw-hi">{C.jw.hi}</div>
            <div className="jw-name">{C.jw.name}</div>
          </div>
          <div className="jw-avatar"></div>
        </div>
        <div className="jw-card">
          <div className="lbl">{C.jw.balance}</div>
          <div className="bal tnum">$12,480.55</div>
          <div className="sub"><Icon name="trending-up" size={12} /> {C.jw.week}</div>
          <div className="chip">J-CARD</div>
        </div>
        <div className="jw-actions">
          {C.jw.actions.map((label, i) => (
            <div className="jw-action" key={i}>
              <div className="ic"><Icon name={S.jwIcons[i]} size={17} /></div>
              {label}
            </div>
          ))}
        </div>
        <div className="jw-list">
          <div className="jw-list-h"><span>{C.jw.recent}</span><span>{C.ui.seeAll}</span></div>
          {C.jw.rows.map((r, i) => (
            <div className="jw-row" key={i}>
              <div className="tic" style={{ background: S.jwRowMeta[i].c }}>{S.jwRowMeta[i].tic}</div>
              <div className="meta"><div className="t1">{r.t1}</div><div className="t2">{r.t2}</div></div>
              <div className={"amt " + S.jwRowMeta[i].cls}>{S.jwRowMeta[i].amt}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.JWallet = JWallet;

/* ───────── Ocean — whales swimming back and forth from both sides ───────── */
function Ocean() {
  const png = (window.__resources && window.__resources.logoPng) || "assets/jano_logo.png";
  return (
    <div className="ocean" aria-hidden="true">
      <div className="swim-lane l1"><img className="swim-whale s1" src={png} alt="" /></div>
      <div className="swim-lane l2"><img className="swim-whale s2" src={png} alt="" /></div>
    </div>
  );
}
window.Ocean = Ocean;

/* ───────── Language switcher ───────── */
function LangSwitcher({ lang, onSetLang, dark }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("click", onDoc);
    return () => document.removeEventListener("click", onDoc);
  }, []);
  const cur = window.LANGS.find((l) => l.code === lang) || window.LANGS[0];
  return (
    <div className={"lang" + (dark ? " on-dark" : "")} ref={ref}>
      <button className="lang-btn" onClick={() => setOpen((o) => !o)} aria-label="Language">
        <Icon name="globe" size={17} /><span>{cur.label}</span>
        <Icon name="chevron-down" size={14} className={"lang-caret" + (open ? " up" : "")} />
      </button>
      {open && (
        <div className="lang-menu">
          {window.LANGS.map((l) => (
            <button key={l.code} className={"lang-item" + (l.code === lang ? " active" : "")}
              onClick={() => { onSetLang(l.code); setOpen(false); }}>
              {l.label}{l.code === lang && <Icon name="check" size={15} />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
window.LangSwitcher = LangSwitcher;

/* ───────── Nav ───────── */
function Nav({ active, onNav, onGetStarted, lang, onSetLang }) {
  const C = window.JANO, S = window.JSTRUCT;
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (id) => { setOpen(false); onNav(id); };
  return (
    <>
      <nav className={"nav" + (scrolled ? " scrolled" : "")}>
        <div className="nav-inner">
          <a className="brand" onClick={() => go("top")}>
            <img className="brand-mark" src={(window.__resources && window.__resources.logoSvg) || "assets/jano_logo.svg"} alt="Jano" />
            <span className="brand-name">Jano<b> Payment</b></span>
          </a>
          <ul className="nav-links">
            {C.nav.map((label, i) => (
              <li key={i}><a className={active === S.navIds[i] ? "active" : ""} onClick={() => go(S.navIds[i])}>{label}</a></li>
            ))}
          </ul>
          <div className="nav-right">
            <LangSwitcher lang={lang} onSetLang={onSetLang} dark={!scrolled} />
            <a className="btn btn-primary btn-sm cta-desktop" onClick={onGetStarted}>{C.ui.getStarted}</a>
            <button className="nav-toggle" onClick={() => setOpen(true)} aria-label="Menu"><Icon name="menu" /></button>
          </div>
        </div>
      </nav>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        <button className="nav-toggle" onClick={() => setOpen(false)} aria-label="Close"
          style={{ position: "absolute", top: 24, insetInlineEnd: 24, color: "#fff" }}><Icon name="x" /></button>
        {C.nav.map((label, i) => (<a key={i} onClick={() => go(S.navIds[i])}>{label}</a>))}
        <a className="btn btn-primary" onClick={() => { setOpen(false); onGetStarted(); }}>{C.ui.getStarted}</a>
      </div>
    </>
  );
}
window.Nav = Nav;

/* ───────── Hero ───────── */
function Hero({ headline, onGetStarted, onSeeHow }) {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <header className="hero" id="top">
      <div className="hero-bg">
        <div className="hero-mesh"></div>
        <div className="hero-whale-stage">
          <img className="hero-bg-whale" src={(window.__resources && window.__resources.logoPng) || "assets/jano_logo.png"} alt="" aria-hidden="true" />
          <span className="hero-whale-shine" aria-hidden="true"></span>
        </div>
      </div>
      <div className="wrap hero-inner">
        <div className="hero-copy reveal in">
          <p className="eyebrow on-dark">{C.hero.eyebrow}</p>
          <h1 className="hero-title">
            {headline.split("|").map((part, i) =>
              i === 1 ? <span className="grad" key={i}>{part}</span> : <span key={i}>{part}</span>
            )}
          </h1>
          <p className="hero-sub">{C.hero.sub}</p>
          <div className="hero-cta-row">
            <a className="btn btn-primary" onClick={onGetStarted}>{C.ui.getStarted} <Icon name="arrow-right" size={18} className="dir-flip" /></a>
            <a className="btn btn-ghost" onClick={onSeeHow}>{C.ui.seeHow}</a>
          </div>
          <div className="hero-trust">
            {C.heroTrust.map((t, i) => (
              <div className="hero-trust-item" key={i}><Icon name={S.heroTrustIcons[i]} size={17} /> {t}</div>
            ))}
          </div>
        </div>
        <div className="hero-visual reveal in d2">
          <div className="hero-badge b1">
            <div className="bi"><Icon name="zap" size={18} /></div>
            <div><div className="bt1">{C.stats[0]}</div><div className="bt2 tnum">$0.0004</div></div>
          </div>
          <JWallet />
          <div className="hero-badge b2">
            <div className="bi"><Icon name="repeat" size={18} /></div>
            <div><div className="bt1">{C.how.flow[2].name}</div><div className="bt2">{C.how.pills[3]}</div></div>
          </div>
        </div>
      </div>
      <div className="scroll-cue" onClick={onSeeHow}><div className="m"></div>{C.ui.scroll}</div>
    </header>
  );
}
window.Hero = Hero;

/* ───────── Stat band ───────── */
function StatBand() {
  const C = window.JANO, S = window.JSTRUCT;
  return (
    <section className="section subtle" id="about">
      <div className="wrap about-layout">
        <div className="about-intro reveal">
          <p className="eyebrow">{C.about.eyebrow}</p>
          <h2 className="section-title left" style={{ textAlign: "start", marginTop: 16 }}>{C.about.title}</h2>
          <p className="section-sub" style={{ margin: "20px 0 0" }}>{C.about.sub}</p>
          <div className="hero-trust" style={{ borderTopColor: "var(--border)", marginTop: 32 }}>
            {C.heroTrust.map((t, i) => (
              <div className="about-trust-item" key={i}><Icon name={S.heroTrustIcons[i]} size={17} /> {t}</div>
            ))}
          </div>
        </div>
        <div className="fee-card stat-stack reveal d1">
          {S.stats.map((s, i) => (
            <div className="stat-row" key={i}>
              <div className="stat-ic"><Icon name={S.statIcons[i]} size={22} /></div>
              <div>
                <div className="sr-big tnum">{s.u === "$" && <span className="u">$</span>}{s.big}{s.u && s.u !== "$" && <span className="u">{s.u}</span>}</div>
                <div className="sr-lbl">{C.stats[i]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.StatBand = StatBand;