/* FriendlyPhotons — Marketing site UI kit · primitives, nav, footer.
   Cosmetic recreations of friendlyphotons.ai components. Exported to window. */

// ── Icon (inline Lucide-style line glyphs) ──────────────────────────────────
function Icon({ name, size = 24, stroke = "currentColor", width = 2, style }) {
  const paths = {
    layers: <><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></>,
    search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></>,
    "map-pin": <><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></>,
    activity: <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    waves: <><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
    message: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
    arrow: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    home: <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    building: <><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="9" y1="7" x2="15" y2="7"/><line x1="9" y1="11" x2="15" y2="11"/><line x1="9" y1="15" x2="15" y2="15"/></>,
    school: <><path d="M22 10 12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></>,
    bed: <><path d="M2 4v16"/><path d="M2 9h18a2 2 0 0 1 2 2v9"/><path d="M2 16h20"/><path d="M6 9V7a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2"/></>,
    bulb: <><path d="M15 14c.2-1 .7-1.7 1.5-2.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></>,
    award: <><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/><circle cx="12" cy="8" r="6"/></>,
    users: <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={stroke}
      strokeWidth={width} strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {paths[name]}
    </svg>
  );
}

// ── Logo wordmark ────────────────────────────────────────────────────────────
function Wordmark({ size = 18, onDark = false }) {
  return (
    <span style={{ fontWeight: 800, fontSize: size, letterSpacing: "-0.02em",
      color: onDark ? "#fff" : "var(--text-primary)" }}>
      Friendly<span style={{ color: "var(--teal-400)" }}>Photons</span>
    </span>
  );
}

// ── Buttons ──────────────────────────────────────────────────────────────────
function Button({ children, variant = "primary", onClick, href }) {
  const Tag = href ? "a" : "button";
  const cls = "fp-btn fp-btn-" + variant;
  return <Tag className={cls} onClick={onClick} href={href}>{children}</Tag>;
}

function GhostLink({ children, onClick, href = "#" }) {
  return <a className="fp-ghost" href={href} onClick={onClick}>{children} <span>→</span></a>;
}

// ── Nav ──────────────────────────────────────────────────────────────────────
function Nav({ onDownload }) {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  return (
    <nav className="fp-nav">
      <div className="fp-container fp-nav-inner">
        <a className="fp-logo" href="#top" onClick={close}><Wordmark /></a>
        <ul className="fp-nav-links">
          <li><a href="#stakes">Why it matters</a></li>
          <li><a href="#answer">The rating</a></li>
          <li><a href="#journey">How it works</a></li>
          <li><a href="#who">Who it's for</a></li>
        </ul>
        <button className="fp-nav-toggle" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>
          {open ? (
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 5l12 12M17 5L5 17" stroke="#1A1A18" strokeWidth="1.5" strokeLinecap="round"/></svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M3 6h16M3 11h16M3 16h16" stroke="#1A1A18" strokeWidth="1.5" strokeLinecap="round"/></svg>
          )}
        </button>
      </div>
      <div className={"fp-nav-menu" + (open ? " is-open" : "")}>
        <a href="#stakes" onClick={close}>Why it matters</a>
        <a href="#answer" onClick={close}>The rating</a>
        <a href="#journey" onClick={close}>How it works</a>
        <a href="#who" onClick={close}>Who it's for</a>
        <button className="fp-btn fp-btn-primary" onClick={(e) => { close(); if (onDownload) onDownload(e); }}>Get early access</button>
      </div>
    </nav>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function Footer({ onContact }) {
  return (
    <footer className="fp-footer">
      <div className="fp-container fp-footer-inner">
        <div className="fp-footer-left">
          <Wordmark size={15} />
          <div className="fp-footer-links">
            <a href="/privacy.html">Privacy Policy</a>
            <a href="/cookies.html">Cookie Policy</a>
            <a href="#" onClick={(e) => { e.preventDefault(); if (onContact) onContact(e); }}>Contact</a>
          </div>
        </div>
        <div className="fp-footer-copy">© 2026 FriendlyPhotons &amp; The Quantum Spaces Project, Inc.</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Wordmark, Button, GhostLink, Nav, Footer });