/* global React, Wordmark */
/* Shared chrome for HEXA-V sub-pages */

const H = (window.HEXA || {});

const SubNav = ({ active }) => {
  const links = [
    { id: "platform",    label: "Platform",     href: "index.html" },
    { id: "ppc-agent",   label: "PPC Agent",    href: "ppc-agent.html" },
    { id: "profit-os",   label: "Profit OS",    href: "profit-os.html" },
    { id: "sales-intel", label: "Sales Intel",  href: "sales-intel.html" },
    { id: "integrations",label: "Integrations", href: "integrations.html" },
    { id: "changelog",   label: "Changelog",    href: "changelog.html" },
    { id: "pricing",     label: "Pricing",      href: "index.html#pricing" },
    { id: "docs",        label: "Docs",         href: "docs.html" },
  ];
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "20px 32px", borderBottom: "1px solid var(--line)",
      position: "sticky", top: 0, zIndex: 10, background: "var(--bg)",
    }} className="sub-nav hexa-nav-wrap">
      <div style={{ display: "flex", alignItems: "center", gap: 40 }} className="hexa-nav-brand">
        <a href="index.html" style={{ color: "var(--fg)", textDecoration: "none" }}><Wordmark size={22} /></a>
        <nav style={{ display: "flex", gap: 24 }} className="sub-nav-links hexa-nav-links">
          {links.map(l => (
            <a key={l.id} href={l.href} className="lnk"
               style={{ color: l.id === active ? "var(--accent)" : undefined, whiteSpace: "nowrap" }}>
              {l.label}
            </a>
          ))}
        </nav>
      </div>
      <div style={{ display: "flex", gap: 12, alignItems: "center" }} className="hexa-nav-actions">
        <a href="signin.html" className="lnk">Sign in</a>
        <a href={(window.HEXA||{}).WATCH_URL || "#watch-demo"} className="btn" style={{ textDecoration: "none" }}>▶ Watch Demo</a>
        <a href={H.SIGNUP_URL || "#"} className="btn btn-primary" style={{ textDecoration: "none", backgroundColor: "#2563eb" }}>Start at $19 →</a>
      </div>
    </div>
  );
};

const SubFooter = () => (
  <div style={{ borderTop: "1px solid var(--line)", padding: "48px 48px 28px", background: "var(--bg-1)" }}>
    <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 40 }} className="footer-grid hexa-footer-grid">
      <div>
        <Wordmark size={22} />
        <p style={{ fontSize: 13, color: "var(--fg-2)", lineHeight: 1.55, marginTop: 16, maxWidth: 280 }}>
          The operating system for marketplace brands that have outgrown spreadsheets, agencies and good intentions.
        </p>
        <div style={{ display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
          <span className="tag">HTTPS · ENCRYPTED</span>
          <span className="tag">GDPR</span>
          <span className="tag">SOC 2 IN PROGRESS</span>
        </div>
      </div>
      <SubFooterCol title="PLATFORM" items={[
        { l: "PPC Agent",    h: "ppc-agent.html" },
        { l: "Profit OS",    h: "profit-os.html" },
        { l: "Sales Intel",  h: "sales-intel.html" },
        { l: "Integrations", h: "integrations.html" },
      ]} />
      <SubFooterCol title="DEVELOPERS" items={[
        { l: "Docs",      h: "docs.html" },
        { l: "Data Export", h: "docs.html" },
        { l: "Webhooks",  h: "docs.html#webhooks" },
        { l: "Changelog", h: "changelog.html" },
      ]} />
      <SubFooterCol title="COMPANY" items={[
        { l: "About",    h: "about.html" },
        { l: "Manifesto",h: "about.html#manifesto" },
        { l: "Security", h: "security.html" },
        { l: "Contact",  h: "mailto:" + (H.CONTACT || "hello@hexa-v.io") },
      ]} />
      <SubFooterCol title="ACCOUNT" items={[
        { l: "Sign in",  h: "signin.html" },
        { l: "Deploy",   h: "deploy.html" },
        { l: "Dashboard ↗", h: H.DASHBOARD_URL || "#" },
      ]} />
    </div>
    <div style={{ marginTop: 36, paddingTop: 20, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", color: "var(--fg-3)", fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.1em" }} className="footer-meta">
      <span>© 2020–2026 HEXA-V LABS · DELAWARE, USA</span>
      <span>NODES.USA / ASIA / EUROPE — BUILD 4.18.2</span>
      <span>An independent operating system for marketplace sellers.</span>
    </div>
  </div>
);

const SubFooterCol = ({ title, items }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, color: "var(--fg-3)", letterSpacing: "0.18em", marginBottom: 16 }}>{title}</div>
    <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
      {items.map((it, i) => (
        <li key={i}><a href={it.h} style={{ fontSize: 13, color: "var(--fg-1)", textDecoration: "none" }}>{it.l}</a></li>
      ))}
    </ul>
  </div>
);

const SubHero = ({ kicker, title, copy, accentWord }) => {
  const parts = accentWord ? title.split(accentWord) : [title];
  return (
    <div style={{ padding: "96px 48px 64px", borderBottom: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
      <div className="hexpattern" style={{ position: "absolute", inset: 0, opacity: 0.4 }} />
      <div style={{
        position: "absolute", right: "-15%", top: "-30%", width: 700, height: 700,
        background: "radial-gradient(circle, var(--accent-glow), transparent 60%)",
        filter: "blur(80px)", pointerEvents: "none"
      }} />
      <div style={{ position: "relative", maxWidth: 1100 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--fg-2)" }}>{kicker}</div>
        <h1 className="display sub-hero-h1 slide-up" style={{
          fontSize: 88, lineHeight: 0.95, letterSpacing: "-0.04em",
          margin: "20px 0 0", fontWeight: 700, textWrap: "balance"
        }}>
          {accentWord ? (
            <>{parts[0]}<span style={{ color: "var(--accent)" }}>{accentWord}</span>{parts[1]}</>
          ) : title}
        </h1>
        <p style={{ fontSize: 20, lineHeight: 1.5, color: "var(--fg-1)", maxWidth: 720, marginTop: 28 }}>{copy}</p>
      </div>
    </div>
  );
};

/* Themed wrapper for sub-pages — restores theme + accent from localStorage */
function SubPage({ children, label }) {
  const [theme, setTheme] = React.useState("dark");
  const [accent, setAccent] = React.useState("#1f3fb3");
  React.useEffect(() => {
    try {
      setTheme(localStorage.getItem("hexa-theme") || "dark");
      setAccent(localStorage.getItem("hexa-accent") || "#1f3fb3");
    } catch (e) {}
    /* snap-in scroll observer */
    const raf = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16));
    raf(() => raf(() => { if (typeof initSnapIn === "function") initSnapIn(); }));
  }, []);
  const rgb = (hex) => {
    const h = hex.replace("#","");
    return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)].join(", ");
  };
  return (
    <>
      <style>{`
        :root, [data-theme="light"] {
          --accent: ${accent};
          --accent-1: ${accent};
          --accent-glow: rgba(${rgb(accent)}, 0.35);
        }
        html { scroll-behavior: smooth; }
      `}</style>
      <div data-theme={theme} data-screen-label={label} style={{ background: "var(--bg)", color: "var(--fg)", minHeight: "100vh" }}>
        {children}
      </div>
    </>
  );
}

window.SubNav = SubNav;
window.SubFooter = SubFooter;
window.SubHero = SubHero;
window.SubPage = SubPage;