// Top nav (anchor links only) + footer + theme toggle + Tweaks integration

const NAV_ANCHORS = [
  { label: "How it works", href: "#flow" },
  { label: "AI Operators", href: "#chat-ops" },
  { label: "In the box",   href: "#box" },
  { label: "Skins",        href: "#skins" },
  { label: "Built for",    href: "#built-for" },
  { label: "FAQ",          href: "#faq" },
];

function ThemeToggle({ theme, setTheme }) {
  return (
    <button
      className="theme-toggle"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label="Toggle theme"
    >
      {theme === "dark" ? (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <circle cx="8" cy="8" r="3" fill="currentColor"/>
          <path d="M8 1v2M8 13v2M1 8h2M13 8h2M2.5 2.5l1.4 1.4M12.1 12.1l1.4 1.4M2.5 13.5l1.4-1.4M12.1 3.9l1.4-1.4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ) : (
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M13 9.5A6 6 0 1 1 6.5 3a5 5 0 0 0 6.5 6.5z" fill="currentColor"/>
        </svg>
      )}
    </button>
  );
}

function TopNav({ theme, setTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className={"site-nav " + (scrolled ? "scrolled" : "")}>
      <div className="container site-nav-inner">
        <Logo />
        <nav className="site-nav-links">
          {NAV_ANCHORS.map((a) => (
            <a key={a.href} href={a.href}>{a.label}</a>
          ))}
        </nav>
        <div className="site-nav-actions">
          <ThemeToggle theme={theme} setTheme={setTheme} />
          <a className="btn btn-primary site-nav-cta" href="#cta">
            Book launch call
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h7M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <button className="site-nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
            <span/><span/><span/>
          </button>
        </div>
      </div>
      {open && (
        <div className="site-nav-mobile">
          {NAV_ANCHORS.map((a) => (
            <a key={a.href} href={a.href} onClick={() => setOpen(false)}>{a.label}</a>
          ))}
          <a className="btn btn-primary" href="#cta" onClick={() => setOpen(false)}>Book launch call</a>
        </div>
      )}
      <style>{`
        .site-nav {
          position: fixed; top: 0; left: 0; right: 0;
          z-index: 50;
          padding: 16px 0;
          transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease;
          border-bottom: 1px solid transparent;
        }
        .site-nav.scrolled {
          background: color-mix(in oklab, var(--ink) 86%, transparent);
          backdrop-filter: saturate(140%) blur(12px);
          border-bottom-color: var(--line);
        }
        .site-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
        .site-nav-links { display: flex; gap: 4px; }
        .site-nav-links a {
          padding: 8px 14px;
          font-size: 14px; font-weight: 500;
          color: var(--text-dim);
          border-radius: 999px;
          transition: color .15s ease, background .15s ease;
        }
        .site-nav-links a:hover { color: var(--text); background: var(--surface-2); }
        .site-nav-actions { display: flex; align-items: center; gap: 10px; }
        .theme-toggle {
          width: 36px; height: 36px;
          display: grid; place-items: center;
          border-radius: 999px;
          background: var(--surface-2);
          border: 1px solid var(--line);
          color: var(--text-dim);
          transition: color .15s ease, background .15s ease;
        }
        .theme-toggle:hover { color: var(--text); background: var(--surface-hover); }
        .site-nav-burger {
          display: none;
          background: transparent; border: 0;
          width: 36px; height: 36px;
          flex-direction: column; justify-content: center; align-items: center; gap: 4px;
        }
        .site-nav-burger span {
          width: 18px; height: 1.6px; background: var(--text); border-radius: 1px;
        }
        .site-nav-mobile {
          display: none;
          flex-direction: column; gap: 8px;
          padding: 20px 32px 24px;
          background: var(--ink);
          border-bottom: 1px solid var(--line);
        }
        .site-nav-mobile a { padding: 12px 14px; border-radius: 12px; color: var(--text); font-size: 16px; }
        .site-nav-mobile a:hover { background: var(--surface-2); }
        .site-nav-mobile .btn { justify-content: center; margin-top: 6px; }

        @media (max-width: 900px) {
          .site-nav-links { display: none; }
          .site-nav-cta   { display: none; }
          .site-nav-burger { display: flex; }
          .site-nav-mobile { display: flex; }
        }
      `}</style>
    </header>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container site-footer-grid">
        <div className="site-footer-brand">
          <Logo size={20} />
          <p className="site-footer-tag">
            Launch a prop firm in 60 seconds — operated by AI agents, not 47 dashboards.
          </p>
          <p className="site-footer-meta">
            Built by the founders of <a href="https://www.antelopeos.ai" target="_blank" rel="noreferrer">antelopeOS.ai</a>.
          </p>
        </div>

        <div className="site-footer-col">
          <div className="site-footer-h mono">Product</div>
          <a href="#flow">How it works</a>
          <a href="#agents">AI Operators</a>
          <a href="#box">What's in the box</a>
          <a href="#skins">200+ skins</a>
          <a href="#timeline">60-second flow</a>
          <a href="#compare">Build vs. buy</a>
        </div>

        <div className="site-footer-col">
          <div className="site-footer-h mono">Contact</div>
          <a href="mailto:now@60seconds.io">now@60seconds.io</a>
          <a href="#cta">Book launch call</a>
        </div>

        <div className="site-footer-col">
          <div className="site-footer-h mono">Follow</div>
          <a href="#" aria-label="X / Twitter">X · @60secondsio</a>
          <a href="#" aria-label="LinkedIn">LinkedIn</a>
          <a href="#" aria-label="GitHub">GitHub</a>
        </div>
      </div>

      <div className="container site-footer-strip">
        <div>© 2026 60Seconds · <a href="https://60seconds.io">60seconds.io</a></div>
        <div>Operated by AI agents — supervised by humans.</div>
      </div>
      <style>{`
        .site-footer {
          padding: 80px 0 32px;
          margin-top: 60px;
          border-top: 1px solid var(--line);
          background: linear-gradient(180deg, transparent 0%, var(--surface-2) 100%);
          position: relative; z-index: 1;
        }
        .site-footer-grid {
          display: grid;
          grid-template-columns: 1.6fr 1fr 1fr 1fr;
          gap: 48px;
          padding-bottom: 56px;
        }
        .site-footer-brand { max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
        .site-footer-tag { font-size: 14px; color: var(--text-dim); line-height: 1.55; }
        .site-footer-meta { font-size: 12.5px; color: var(--text-mute); }
        .site-footer-meta a { color: var(--purple-2); }
        .site-footer-meta a:hover { text-decoration: underline; }
        .site-footer-col { display: flex; flex-direction: column; gap: 12px; }
        .site-footer-h {
          font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--text-mute); font-weight: 600; margin-bottom: 4px;
        }
        .site-footer-col a {
          font-size: 13.5px; color: var(--text-dim);
          transition: color .15s ease;
        }
        .site-footer-col a:hover { color: var(--text); }
        .site-footer-strip {
          display: flex; justify-content: space-between;
          padding-top: 28px;
          border-top: 1px solid var(--line);
          font-family: var(--font-mono); font-size: 11.5px;
          color: var(--text-mute);
          letter-spacing: 0.02em;
        }
        .site-footer-strip a { color: var(--text-dim); }
        .site-footer-strip a:hover { color: var(--text); }
        @media (max-width: 900px) {
          .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
          .site-footer-brand { grid-column: 1 / -1; }
          .site-footer-strip { flex-direction: column; gap: 12px; align-items: flex-start; }
        }
        @media (max-width: 560px) {
          .site-footer-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </footer>
  );
}

window.TopNav = TopNav;
window.SiteFooter = SiteFooter;