/* global React */
const { useState, useEffect, useMemo, useRef } = React;

// ============ ICONS ============
const Arr = ({ size = 14, className = "" }) => (
  <svg className={`arr ${className}`} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
);
const Plus = ({ size = 12 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 5v14M5 12h14"/></svg>
);
const Tick = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
);
const Dot = () => <span style={{ display:"inline-block", width:6, height:6, borderRadius:"50%", background:"var(--accent)", marginRight:8, verticalAlign:2 }}/>;

// ============ NAV ============
function Nav({ page, setPage, tweaks }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "solutions", label: "Solutions" },
    { id: "process", label: "Process" },
    { id: "engine", label: "Engine" },
    { id: "proof", label: "Proof" },
    { id: "about", label: "About" },
    { id: "contact", label: "Contact" },
  ];
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "oklch(from var(--bg) l c h / 0.85)" : "transparent",
      backdropFilter: scrolled ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all .35s cubic-bezier(.2,.7,.2,1)",
    }}>
      <div className="wrap" style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"18px 0" }}>
        <button onClick={() => setPage("home")} style={{ display:"flex", alignItems:"center", gap:14 }}>
          <Logo />
          <span className="mono small" style={{ color:"var(--ink-3)", letterSpacing:".06em", display: "none" }}>
            Powered by USEus.pro
          </span>
        </button>
        <nav style={{ display:"flex", alignItems:"center", gap:28 }} className="nav-desktop">
          {links.map(l => (
            <button key={l.id} className={`navlink ${page === l.id ? "active" : ""}`} onClick={() => setPage(l.id)}>
              {l.label}
            </button>
          ))}
        </nav>
        <div style={{ display:"flex", gap:10, alignItems:"center" }}>
          <button className="btn btn-ghost" onClick={() => setPage("wizard-quick")} style={{ padding:"10px 16px", fontSize: 13 }}>
            Quick fit <Arr/>
          </button>
          <button className="btn btn-primary" onClick={() => setPage("wizard-full")} style={{ padding:"10px 18px", fontSize: 13 }}>
            Book strategy call <Arr/>
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .nav-desktop { display: none !important; }
        }
      `}</style>
    </header>
  );
}

function Logo() {
  return (
    <div style={{ display:"flex", alignItems:"baseline", gap: 2 }}>
      <span className="serif" style={{ fontSize: 26, lineHeight: 1, letterSpacing: "-0.02em" }}>WhyCantI</span>
      <span className="mono" style={{ fontSize: 11, color: "var(--accent-ink)", marginLeft: 1 }}>.ca</span>
    </div>
  );
}

// ============ FOOTER ============
function Footer({ setPage }) {
  return (
    <footer style={{ borderTop: "1px solid var(--line)", paddingTop: 80, paddingBottom: 32, marginTop: 80, background: "var(--bg)" }}>
      <div className="wrap">
        <div style={{ display:"grid", gridTemplateColumns: "minmax(0,1.4fr) repeat(3, minmax(0,1fr))", gap: 48, marginBottom: 80 }} className="footer-grid">
          <div>
            <div className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 0.92 }}>
              Stop guessing.<br/><span className="it">Start shipping.</span>
            </div>
            <div className="row" style={{ marginTop: 32 }}>
              <button className="btn btn-primary" onClick={() => setPage("wizard-full")}>Book a strategy call <Arr/></button>
              <button className="btn btn-ghost" onClick={() => setPage("wizard-quick")}>Quick fit check <Arr/></button>
            </div>
          </div>
          <FootCol title="Solutions" links={[
            ["Brand Launch", "solutions"], ["Content Engine", "solutions"],
            ["Growth Infrastructure", "solutions"], ["Strategic Support", "solutions"],
          ]} setPage={setPage}/>
          <FootCol title="Company" links={[
            ["Process", "process"], ["The Engine", "engine"],
            ["Proof", "proof"], ["About", "about"],
          ]} setPage={setPage}/>
          <FootCol title="Get started" links={[
            ["Contact", "contact"], ["Onboarding wizard", "wizard-full"],
            ["Quick fit", "wizard-quick"], ["Partnerships", "contact"],
          ]} setPage={setPage}/>
        </div>

        <div className="hairline" style={{ paddingTop: 32, display:"flex", justifyContent:"space-between", flexWrap:"wrap", gap: 16, alignItems:"center" }}>
          <div className="mono small">
            <span style={{ color:"var(--ink)" }}>WhyCantI.ca</span>
            <span style={{ color:"var(--ink-4)", margin:"0 12px" }}>—</span>
            <span>Powered by USEus.pro</span>
          </div>
          <div className="mono small" style={{ color: "var(--ink-3)" }}>
            © 2026 — Toronto / Remote — All systems operational
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}
function FootCol({ title, links, setPage }) {
  return (
    <div>
      <div className="eyebrow" style={{ marginBottom: 18 }}>{title}</div>
      <div style={{ display:"flex", flexDirection:"column", gap: 10 }}>
        {links.map(([label, id]) => (
          <button key={label} onClick={() => setPage(id)} style={{ textAlign:"left", color:"var(--ink-2)", fontSize: 14 }}>
            {label}
          </button>
        ))}
      </div>
    </div>
  );
}

// Export
Object.assign(window, { Nav, Footer, Arr, Plus, Tick, Dot, Logo });