// chrome.jsx — shared site chrome for the supporting pages (About / Team /
// Pricing / Book a call). Header + Footer markup mirrors the homepage exactly
// (same class names → same MAI styling) but routes to real page URLs and
// keeps theme in localStorage so it persists across navigation.

/* eslint-disable react/prop-types */

const NAV = [
  { label: "Product",  href: "index.html#how" },
  { label: "Pricing",  href: "pricing.html",  key: "pricing" },
  { label: "Team",     href: "team.html",     key: "team" },
  { label: "About",    href: "about.html",    key: "about" },
];

const FOOTER_COLS = [
  { title: "Product", links: [{ label: "Pricing", href: "pricing.html" }] },
  { title: "Company", links: [{ label: "About", href: "about.html" }, { label: "Team", href: "team.html" }] },
  { title: "Contact", links: [{ label: "hello@prexi.ai", href: "mailto:hello@prexi.ai" }, { label: "Book a call", href: "book-a-call.html" }] },
];

// ── theme (localStorage, shared with homepage) ──
function useTheme() {
  const read = () => {
    try { return localStorage.getItem("prexi-theme") || "light"; } catch (e) { return "light"; }
  };
  const [theme, setThemeState] = React.useState(read);
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("prexi-theme", theme); } catch (e) {}
  }, [theme]);
  return [theme, setThemeState];
}

function ThemeIcon({ kind }) {
  if (kind === "light") return (
    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <circle cx="6" cy="6" r="2.5" /><path d="M6 1V2.5M6 9.5V11M1 6H2.5M9.5 6H11M2.4 2.4L3.5 3.5M8.5 8.5L9.6 9.6M9.6 2.4L8.5 3.5M3.5 8.5L2.4 9.6" />
    </svg>
  );
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10 7.4A4.4 4.4 0 014.6 2C2.6 2.5 1 4.4 1 6.7c0 2.6 2.1 4.7 4.7 4.7 2.3 0 4.2-1.6 4.7-3.6z" />
    </svg>
  );
}

function Header({ theme, setTheme, active }) {
  const themes = [
    { id: "light", label: "Light" },
    { id: "dark",  label: "Dark" },
  ];
  const pillRef = React.useRef(null);
  const [thumb, setThumb] = React.useState({ left: 3, width: 70 });
  React.useEffect(() => {
    if (!pillRef.current) return;
    const a = pillRef.current.querySelector("button.active");
    if (a) {
      const pr = pillRef.current.getBoundingClientRect();
      const ar = a.getBoundingClientRect();
      setThumb({ left: ar.left - pr.left, width: ar.width });
    }
  }, [theme]);

  return (
    <header className="site-header">
      <div className="container-wide site-header-inner">
        <a className="brand" href="index.html">
          Prexi<span className="brand-dot" />
        </a>
        <nav className="nav">
          {NAV.map((l) => (
            <a key={l.label} href={l.href} className={active && l.key === active ? "nav-active" : ""}>{l.label}</a>
          ))}
        </nav>
        <div className="row gap-3" style={{ alignItems: "center" }}>
          <div className="theme-pill" ref={pillRef}>
            <span className="thumb" style={{ left: thumb.left, width: thumb.width }} />
            {themes.map((t) => (
              <button key={t.id} className={theme === t.id ? "active" : ""}
                onClick={() => setTheme(t.id)} aria-pressed={theme === t.id}>
                <ThemeIcon kind={t.id} /> {t.label}
              </button>
            ))}
          </div>
          <a className="btn btn-primary btn-sm" href="book-a-call.html">Talk to founder</a>
        </div>
      </div>
    </header>
  );
}

function ArrowIcon() {
  return (
    <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2.5 7H11.5M8 3.5L11.5 7L8 10.5" />
    </svg>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <a className="brand" href="index.html" style={{ fontSize: 34 }}>
              Prexi<span className="brand-dot" />
            </a>
            <p className="footer-tag">
              The AI video agent for performance marketing teams.
            </p>
            <div className="footer-cta">
              <a className="btn btn-ghost btn-sm" href="book-a-call.html">
                Schedule demo <ArrowIcon />
              </a>
            </div>
          </div>
          <div className="footer-cols">
            {FOOTER_COLS.map((g) => (
              <div className="footer-col" key={g.title}>
                <div className="footer-col-title">{g.title}</div>
                <ul className="footer-col-links">
                  {g.links.map((l) => (
                    <li key={l.label}><a href={l.href}>{l.label}</a></li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bottom">
          <div className="footer-meta">© 2026 Prexi Labs, Inc. · Built for the world</div>
          <div className="footer-meta-right">
            <span>Privacy</span>
            <span>Terms</span>
            <span className="mono" style={{ fontSize: 11, opacity: 0.6 }}>v1.0</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useTheme, Header, Footer, ArrowIcon });