/* global React */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// ============ HOMEPAGE ============
function HomePage({ setPage, tweaks }) {
  return (
    <main className="page-enter">
      <Hero setPage={setPage} tweaks={tweaks}/>
      <Marquee/>
      <ExecutionGap/>
      <Pillars setPage={setPage}/>
      <ProcessSnapshot setPage={setPage}/>
      <EngineSnapshot setPage={setPage}/>
      <ProofSnapshot setPage={setPage}/>
      <FinalCta setPage={setPage}/>
    </main>
  );
}

// ============ HERO ============
function Hero({ setPage, tweaks }) {
  const headlines = {
    a: { line1: "Stop guessing.", line2: "Start shipping." },
    b: { line1: "From ambition", line2: "to execution." },
    c: { line1: "Move faster.", line2: "Look sharper." },
  };
  const h = headlines[tweaks.headline] || headlines.a;

  const [t, setT] = useStateH(0);
  useEffectH(() => {
    let raf;
    const start = performance.now();
    const tick = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  return (
    <section style={{ position:"relative", paddingTop: "clamp(40px, 6vw, 80px)", paddingBottom: "clamp(80px, 10vw, 140px)", overflow: "hidden" }} className="grain">
      <div className="wrap">
        {/* Top meta line */}
        <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: "clamp(40px, 6vw, 80px)", gap: 16, flexWrap:"wrap" }} className="rise">
          <div className="eyebrow"><Dot/>Vol. 04 — A growth & execution platform for serious operators</div>
          <div className="mono small" style={{ color:"var(--ink-3)" }}>
            EST. {new Date().getFullYear()} / {timeLabel(t)}
          </div>
        </div>

        {/* Headline + visual layered */}
        <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 1.35fr) minmax(0, 1fr)", gap: "clamp(32px, 4vw, 72px)", alignItems:"end" }} className="hero-grid">
          <div>
            <h1 className="display rise rise-1" style={{ margin: 0 }}>
              {h.line1}<br/>
              <span className="it">{h.line2}</span>
            </h1>
            <div style={{ marginTop: 36, display:"flex", gap: "clamp(20px, 3vw, 44px)", flexWrap:"wrap" }} className="rise rise-2">
              <p className="lead" style={{ margin:0, maxWidth: "44ch" }}>
                A growth & execution layer for founders who already have the ideas — websites, content systems, automation, and strategy under one calm operating cadence.
              </p>
              <div style={{ display:"flex", flexDirection:"column", gap: 10, minWidth: 220 }}>
                <button className="btn btn-primary" onClick={() => setPage("wizard-full")}>Book a strategy call <Arr/></button>
                <button className="btn btn-ghost" onClick={() => setPage("wizard-quick")}>Two-minute fit check <Arr/></button>
                <button className="btn-link" onClick={() => setPage("process")} style={{ marginTop: 4, alignSelf:"start" }}>See how it works <Arr size={11}/></button>
              </div>
            </div>
          </div>

          <HeroVisual t={t}/>
        </div>

        {/* Powered-by strip */}
        <div className="rise rise-3" style={{ marginTop: "clamp(56px, 7vw, 96px)", paddingTop: 28, borderTop: "1px solid var(--line)", display:"grid", gridTemplateColumns:"repeat(4, minmax(0,1fr))", gap: 24 }}>
          <MetaCell n="01" label="Front-door brand" value="WhyCantI.ca" tone="bold"/>
          <MetaCell n="02" label="Execution engine" value="USEus.pro" tone="muted"/>
          <MetaCell n="03" label="Avg. time to launch" value="21 days"/>
          <MetaCell n="04" label="Concurrent operators" value="14 active"/>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function timeLabel(t) {
  const now = new Date();
  const h = String(now.getHours()).padStart(2,"0");
  const m = String(now.getMinutes()).padStart(2,"0");
  const s = String(Math.floor(t) % 60).padStart(2,"0");
  return `${h}:${m}:${s} EST`;
}

function MetaCell({ n, label, value, tone }) {
  return (
    <div>
      <div className="mono small" style={{ color:"var(--ink-4)", marginBottom: 8 }}>{n}</div>
      <div className="eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      <div style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em", color: tone === "muted" ? "var(--ink-3)" : "var(--ink)" }}>
        {value}
      </div>
    </div>
  );
}

// ============ HERO VISUAL — layered editorial composite ============
function HeroVisual({ t }) {
  const float = Math.sin(t * 0.7) * 4;
  const float2 = Math.sin(t * 0.5 + 1) * 6;
  return (
    <div style={{ position:"relative", aspectRatio: "5/6", minHeight: 380 }}>
      {/* Backdrop block with dots */}
      <div className="dotgrid" style={{
        position:"absolute", inset: "0 -8% 8% 12%",
        background: "var(--bg-deep)",
        backgroundImage: "radial-gradient(oklch(from var(--ink) l c h / 0.10) 1px, transparent 1px)",
        backgroundSize: "16px 16px",
        borderRadius: "var(--radius)",
        border: "1px solid var(--line)",
      }}/>

      {/* Photo placeholder block */}
      <div className="frame" style={{
        position:"absolute", left: "0%", top: "8%", right: "30%", bottom: "30%",
        transform: `translateY(${float}px)`,
        boxShadow: "0 30px 60px -30px oklch(from var(--ink) l c h / 0.3)",
      }}>
        <div className="label">EDITORIAL / 01</div>
        <div className="corner">35MM</div>
        <div className="num">N° 0142 — Operator at desk, golden hour</div>
        <div style={{
          position:"absolute", inset: 0,
          background: `
            radial-gradient(ellipse at 30% 40%, oklch(from var(--accent) l c h / 0.25), transparent 60%),
            linear-gradient(135deg, oklch(from var(--bg-deep) calc(l - 0.05) c h), oklch(from var(--bg-deep) calc(l + 0.02) c h))
          `,
        }}/>
        {/* Faux UI overlay */}
        <div style={{ position:"absolute", left: "50%", bottom: "12%", right: "8%", height: "30%",
          background: "oklch(from var(--bg) l c h / 0.75)",
          backdropFilter: "blur(12px)",
          border: "1px solid var(--line)",
          borderRadius: 6,
          padding: 12,
        }}>
          <div className="mono" style={{ fontSize: 9, color:"var(--ink-3)", letterSpacing:".1em" }}>NOW SHIPPING</div>
          <div style={{ fontFamily:"var(--serif)", fontSize: 16, marginTop: 6, lineHeight: 1.1 }}>Brand launch / wk 03</div>
          <div style={{ display:"flex", gap: 4, marginTop: 12 }}>
            {[1,1,1,0.4,0.2].map((v,i)=>(
              <div key={i} style={{ flex:1, height: 4, background: `oklch(from var(--ink) l c h / ${v * 0.6})`, borderRadius: 2 }}/>
            ))}
          </div>
        </div>
      </div>

      {/* UI panel mockup */}
      <div style={{
        position:"absolute", right: 0, top: "32%", width: "62%", aspectRatio: "4/5",
        background: "var(--bg-elev)",
        border: "1px solid var(--line)",
        borderRadius: "var(--radius)",
        boxShadow: "0 20px 60px -20px oklch(from var(--ink) l c h / 0.18)",
        transform: `translateY(${float2}px)`,
        overflow:"hidden",
      }}>
        <DashMockup/>
      </div>

      {/* Small floating tile */}
      <div style={{
        position:"absolute", left: "20%", bottom: 0, width: "34%",
        background: "var(--ink)",
        color: "var(--bg)",
        borderRadius: "var(--radius)",
        padding: "20px 22px",
        transform: `translateY(${-float}px)`,
        boxShadow: "0 12px 32px -12px oklch(from var(--ink) l c h / 0.4)",
      }}>
        <div className="mono" style={{ fontSize: 10, opacity: 0.6, letterSpacing:".1em" }}>SYS / RUN</div>
        <div style={{ fontFamily:"var(--serif)", fontSize: 28, letterSpacing:"-0.015em", marginTop: 6, lineHeight: 1 }}>
          ↗ <span className="tnum">{(127 + Math.sin(t * 0.3) * 4).toFixed(0)}%</span>
        </div>
        <div style={{ fontSize: 11, opacity: 0.7, marginTop: 4 }}>publishing velocity, qtr</div>
      </div>
    </div>
  );
}

function DashMockup() {
  return (
    <div style={{ padding: 16, height:"100%", display:"flex", flexDirection:"column", gap: 12 }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
        <div className="mono" style={{ fontSize: 9, color:"var(--ink-3)", letterSpacing:".1em" }}>USEUS.PRO / OPS</div>
        <div style={{ display:"flex", gap: 4 }}>
          {[0,1,2].map(i => <div key={i} style={{ width:6, height:6, borderRadius:"50%", background: i===0 ? "var(--accent)" : "var(--line-2)" }}/>)}
        </div>
      </div>
      <div style={{ fontFamily:"var(--serif)", fontSize: 17, lineHeight: 1.15, letterSpacing:"-0.01em" }}>
        Q2 content engine — 47 deliverables in flight
      </div>
      {/* Workflow rows */}
      <div style={{ flex: 1, display:"flex", flexDirection:"column", gap: 6, marginTop: 4 }}>
        {[
          { l:"Reels — week 14", s:"Approved", p: 100 },
          { l:"Long-form — site copy", s:"In review", p: 78 },
          { l:"Brand launch / Aurora", s:"Production", p: 54 },
          { l:"Automation — intake v2", s:"Build", p: 32 },
          { l:"Quarterly report", s:"Drafting", p: 18 },
        ].map((r,i) => (
          <div key={i} style={{ display:"grid", gridTemplateColumns:"1fr auto auto", gap: 10, alignItems:"center", padding: "8px 10px", borderRadius: 6, background: i === 0 ? "oklch(from var(--accent) l c h / 0.10)" : "transparent", border: "1px solid var(--line)" }}>
            <div style={{ fontSize: 11, color:"var(--ink)" }}>{r.l}</div>
            <div className="mono" style={{ fontSize: 9, color:"var(--ink-3)" }}>{r.s}</div>
            <div style={{ width: 36, height: 4, background:"var(--line-2)", borderRadius: 2, overflow:"hidden" }}>
              <div style={{ width: `${r.p}%`, height:"100%", background: i===0 ? "var(--accent)" : "var(--ink-2)" }}/>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 6 }}>
        {["INTAKE","BUILD","PUBLISH"].map((s,i) => (
          <div key={s} style={{ padding: "8px 6px", border: "1px solid var(--line)", borderRadius: 4, textAlign:"center" }}>
            <div className="mono" style={{ fontSize: 8, letterSpacing:".1em", color:"var(--ink-3)" }}>{s}</div>
            <div className="tnum" style={{ fontFamily:"var(--serif)", fontSize: 18, lineHeight: 1, marginTop: 4 }}>{[12, 9, 26][i]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ MARQUEE ============
function Marquee() {
  const items = [
    "WEBSITES THAT SHIP IN WEEKS, NOT QUARTERS",
    "CONTENT ENGINES THAT DON'T STALL",
    "AUTOMATION THAT REPLACES THE DRAG",
    "STRATEGY THAT TRANSLATES INTO LINE ITEMS",
    "ONE OPERATING CADENCE",
  ];
  return (
    <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding:"22px 0", overflow:"hidden", background: "var(--bg-elev)" }}>
      <div style={{ display:"flex", gap: 56, animation: "marquee 50s linear infinite", whiteSpace:"nowrap", width:"max-content" }}>
        {[...items, ...items, ...items].map((it, i) => (
          <div key={i} style={{ display:"flex", alignItems:"center", gap: 56 }}>
            <span className="mono" style={{ fontSize: 12, letterSpacing:".14em", color:"var(--ink-2)" }}>{it}</span>
            <span style={{ width: 6, height: 6, borderRadius:"50%", background:"var(--accent)" }}/>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ EXECUTION GAP ============
function ExecutionGap() {
  const before = ["Inconsistent content", "Weak website clarity", "Manual approvals", "Stalled launches", "No reporting cadence", "Patchy follow-through"];
  const after = ["Calendar that runs itself", "A site that converts", "Approvals in one thread", "Launches on the day", "Quarterly proof", "Compounding momentum"];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><Dot/>01 / The premise</div>
            <h2 className="h1" style={{ marginTop: 24, marginBottom: 0 }}>
              You don't have an<br/>
              <span className="it">idea problem.</span>
            </h2>
          </div>
          <p className="lead" style={{ alignSelf:"end" }}>
            You have an execution problem. The brief is fine. The thinking is fine. What's missing is the operating layer that turns intent into shipped work — week after week, without you holding it together.
          </p>
        </div>

        <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 1, background: "var(--line)", border:"1px solid var(--line)", borderRadius:"var(--radius)", overflow:"hidden" }} className="gap-grid">
          <div style={{ background:"var(--bg-elev)", padding: "clamp(28px, 4vw, 48px)" }}>
            <div className="eyebrow" style={{ color:"var(--plum)", marginBottom: 24 }}>BEFORE — THE FRICTION</div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display:"flex", flexDirection:"column", gap: 18 }}>
              {before.map(b => (
                <li key={b} style={{ display:"flex", alignItems:"center", gap: 14, paddingBottom: 18, borderBottom: "1px solid var(--line)" }}>
                  <div className="mono" style={{ fontSize: 11, color:"var(--ink-4)", width: 24 }}>—</div>
                  <span style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em", color:"var(--ink-3)" }}>{b}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background:"var(--bg)", padding: "clamp(28px, 4vw, 48px)" }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>AFTER — THE SYSTEM</div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display:"flex", flexDirection:"column", gap: 18 }}>
              {after.map((a, i) => (
                <li key={a} style={{ display:"flex", alignItems:"center", gap: 14, paddingBottom: 18, borderBottom: "1px solid var(--line)" }}>
                  <div className="mono" style={{ fontSize: 11, color:"var(--accent)", width: 24 }}>{String(i+1).padStart(2,"0")}</div>
                  <span style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em" }}>{a}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .gap-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============ PILLARS — Bento ============
function Pillars({ setPage }) {
  return (
    <section className="section" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><Dot/>02 / The four systems</div>
            <h2 className="h1" style={{ marginTop: 24, marginBottom: 0 }}>
              Four systems.<br/>
              <span className="it">One operating cadence.</span>
            </h2>
          </div>
          <p className="lead" style={{ alignSelf:"end" }}>
            We work in four interlocking layers. Most engagements start with one and compound into the others as the system takes hold.
          </p>
        </div>

        <div className="bento">
          <PillarCard
            n="01"
            title="Brand Launch"
            kicker="Sharper digital starting point"
            body="Direction, messaging, a multi-page site, launch visuals, and the CTA structure that holds the whole thing together."
            big
            visual={<BrandVisual/>}
            setPage={setPage}
          />
          <PillarCard
            n="02"
            title="Content Engine"
            kicker="Velocity without the chaos"
            body="A monthly calendar, branded visuals, reel concepts, captions, publishing support, and reporting that actually closes a loop."
            visual={<ContentVisual/>}
            setPage={setPage}
          />
          <PillarCard
            n="03"
            title="Automation"
            kicker="Replace the drag"
            body="Intake workflows, approval systems, scheduling, content updates, ops support."
            visual={<AutoVisual/>}
            setPage={setPage}
          />
          <PillarCard
            n="04"
            title="Strategic Support"
            kicker="Senior direction on retainer"
            body="Offer positioning, growth planning, campaign direction, quarterly advisory."
            visual={<StratVisual/>}
            setPage={setPage}
          />
        </div>
      </div>

      <style>{`
        .bento {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          grid-auto-rows: minmax(260px, auto);
          gap: 16px;
        }
        .bento > *:nth-child(1) { grid-column: span 4; grid-row: span 2; }
        .bento > *:nth-child(2) { grid-column: span 2; grid-row: span 2; }
        .bento > *:nth-child(3) { grid-column: span 3; }
        .bento > *:nth-child(4) { grid-column: span 3; }
        @media (max-width: 980px) {
          .bento { grid-template-columns: 1fr 1fr; }
          .bento > * { grid-column: span 2 !important; grid-row: auto !important; }
        }
        @media (max-width: 600px) {
          .bento { grid-template-columns: 1fr; }
          .bento > * { grid-column: span 1 !important; }
        }
      `}</style>
    </section>
  );
}

function PillarCard({ n, title, kicker, body, big, visual, setPage }) {
  return (
    <div style={{
      background: "var(--bg)",
      border: "1px solid var(--line)",
      borderRadius: "var(--radius)",
      padding: big ? "clamp(28px, 3vw, 44px)" : "clamp(24px, 2.5vw, 34px)",
      display:"flex", flexDirection:"column", justifyContent:"space-between",
      gap: 24,
      position: "relative", overflow:"hidden",
      transition: "transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s",
    }}
      onMouseEnter={e => e.currentTarget.style.borderColor = "var(--ink-3)"}
      onMouseLeave={e => e.currentTarget.style.borderColor = "var(--line)"}
    >
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"start", gap: 12 }}>
        <div>
          <div className="mono small" style={{ color:"var(--ink-4)" }}>—— {n}</div>
          <h3 className={big ? "h2" : "h3"} style={{ marginTop: 14, marginBottom: 8 }}>{title}</h3>
          <div className="eyebrow" style={{ color:"var(--accent-ink)" }}>{kicker}</div>
        </div>
      </div>

      {visual && <div style={{ flex: big ? 1 : "none", minHeight: big ? 180 : 100 }}>{visual}</div>}

      <div>
        <p className="body" style={{ marginTop: 0, marginBottom: 18, maxWidth: "44ch" }}>{body}</p>
        <button className="btn-link" onClick={() => setPage("solutions")}>Learn more <Arr size={11}/></button>
      </div>
    </div>
  );
}

function BrandVisual() {
  return (
    <div style={{ position:"relative", height:"100%", minHeight: 200 }}>
      <div className="frame" style={{ position:"absolute", inset:"0 25% 10% 0", aspectRatio: "16/10" }}>
        <div className="label">SITE / HERO</div>
        <div style={{ position:"absolute", left: 18, bottom: 20, right: 20 }}>
          <div style={{ fontFamily:"var(--serif)", fontSize: 24, lineHeight: 1, color:"var(--ink-2)" }}>Aurora&nbsp;Studio</div>
          <div className="mono" style={{ fontSize: 9, color:"var(--ink-4)", marginTop: 6 }}>—— LAUNCH WK 21</div>
        </div>
      </div>
      <div className="frame" style={{ position:"absolute", right: 0, bottom: 0, width:"38%", aspectRatio:"3/4" }}>
        <div className="label" style={{ fontSize: 9 }}>MOBILE</div>
        <div style={{ position:"absolute", inset: 16, top: 36, background: "oklch(from var(--bg) l c h / 0.7)", borderRadius: 6, padding: 10 }}>
          <div style={{ height: 6, width:"60%", background:"var(--ink-3)", borderRadius: 2, marginBottom: 6 }}/>
          <div style={{ height: 4, width:"80%", background:"var(--line-2)", borderRadius: 2, marginBottom: 10 }}/>
          <div style={{ height: 30, background: "var(--accent)", borderRadius: 4 }}/>
        </div>
      </div>
    </div>
  );
}

function ContentVisual() {
  const cells = Array.from({ length: 28 }).map((_, i) => i);
  return (
    <div style={{ display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap: 4, padding: "8px 0" }}>
      {cells.map(i => {
        const v = (i * 13) % 7;
        const isPub = [2,5,8,12,15,18,22,25].includes(i);
        return (
          <div key={i} style={{
            aspectRatio:"1/1",
            background: isPub ? "var(--accent)" : v === 0 ? "var(--ink-2)" : "var(--bg-deep)",
            borderRadius: 3,
            opacity: i > 24 ? 0.3 : 1,
          }}/>
        );
      })}
    </div>
  );
}

function AutoVisual() {
  return (
    <svg viewBox="0 0 240 100" style={{ width:"100%", height: "auto" }}>
      <defs>
        <marker id="arr" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M0,0 L10,5 L0,10 z" fill="currentColor"/>
        </marker>
      </defs>
      {[
        { x: 20, y: 50, l: "Intake" },
        { x: 90, y: 30, l: "Triage" },
        { x: 90, y: 70, l: "Build" },
        { x: 160, y: 50, l: "Approve" },
        { x: 220, y: 50, l: "Ship" },
      ].map((n, i) => (
        <g key={i} style={{ color: "var(--ink-3)" }}>
          <rect x={n.x - 18} y={n.y - 10} width="36" height="20" rx="3" fill="var(--bg)" stroke="var(--line-2)"/>
          <text x={n.x} y={n.y + 3} fontSize="7" textAnchor="middle" fontFamily="var(--mono)" fill="var(--ink-2)">{n.l}</text>
        </g>
      ))}
      <g stroke="var(--ink-3)" fill="none" strokeWidth="1" markerEnd="url(#arr)" color="var(--ink-3)">
        <path d="M38,50 Q60,40 72,32"/>
        <path d="M38,50 Q60,60 72,68"/>
        <path d="M108,30 Q130,40 142,48"/>
        <path d="M108,70 Q130,60 142,52"/>
        <path d="M178,50 L202,50"/>
      </g>
      <circle cx="220" cy="50" r="3" fill="var(--accent)"/>
    </svg>
  );
}

function StratVisual() {
  return (
    <div style={{ display:"flex", flexDirection:"column", gap: 8 }}>
      {[
        { q:"Q1", t:"Reposition the offer", w: 90 },
        { q:"Q2", t:"Channel mix + content arc", w: 60 },
        { q:"Q3", t:"Scale infrastructure", w: 30 },
      ].map(r => (
        <div key={r.q} style={{ display:"grid", gridTemplateColumns: "auto 1fr auto", alignItems:"center", gap: 12, padding: "8px 12px", border: "1px solid var(--line)", borderRadius: 6, background:"var(--bg)" }}>
          <span className="mono small" style={{ color:"var(--accent)" }}>{r.q}</span>
          <span style={{ fontFamily:"var(--serif)", fontSize: 14, letterSpacing:"-0.01em" }}>{r.t}</span>
          <div style={{ width: 50, height: 3, background:"var(--line-2)", borderRadius: 2, overflow:"hidden" }}>
            <div style={{ width: `${r.w}%`, height:"100%", background:"var(--ink)" }}/>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============ PROCESS SNAPSHOT ============
function ProcessSnapshot({ setPage }) {
  const steps = [
    { n:"01", t: "Diagnose the gap", body: "An audit of brand, content, systems, and growth — surfacing the bottleneck that's actually slowing you down." },
    { n:"02", t: "Build the foundation", body: "Site structure, messaging spine, content plan, workflow design — the operating layer is laid down." },
    { n:"03", t: "Produce and deploy", body: "USEus.pro produces and ships the assets — websites, content, automations — at the cadence we agreed to." },
    { n:"04", t: "Review and improve", body: "Quarterly review, performance reporting, and a new arc planned. The system compounds." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><Dot/>03 / The cadence</div>
            <h2 className="h1" style={{ marginTop: 24, marginBottom: 0 }}>
              A four-step<br/><span className="it">operating loop.</span>
            </h2>
          </div>
          <p className="lead" style={{ alignSelf:"end" }}>
            Not a sprint. Not a one-off. A sustainable cadence that turns ambition into a quarterly drumbeat — diagnose, build, ship, review.
          </p>
        </div>

        <div style={{ position:"relative" }}>
          <div style={{ position:"absolute", top: 38, left: "5%", right: "5%", height: 1, background: "var(--line)" }}/>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 16, position:"relative" }} className="proc-grid">
            {steps.map((s, i) => (
              <div key={s.n} style={{ position:"relative", paddingTop: 56 }}>
                <div style={{
                  position:"absolute", top: 28, left: "50%", transform:"translateX(-50%)",
                  width: 20, height: 20, borderRadius: "50%",
                  background: i === 0 ? "var(--accent)" : "var(--bg)",
                  border: "1px solid " + (i === 0 ? "var(--accent)" : "var(--ink)"),
                }}/>
                <div className="mono small" style={{ color:"var(--accent-ink)", marginBottom: 14 }}>STEP {s.n}</div>
                <h3 className="h3" style={{ margin:"0 0 14px" }}>{s.t}</h3>
                <p className="body" style={{ margin: 0 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{ marginTop: 56, display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap: 16 }}>
          <p className="small" style={{ maxWidth: "60ch", margin: 0 }}>
            <span className="mono" style={{ color:"var(--ink)" }}>Note —</span> Most clients see compounding gains by the end of the second loop. The first loop is about removing friction; the second is about ratcheting velocity.
          </p>
          <button className="btn-link" onClick={() => setPage("process")}>The full process <Arr size={11}/></button>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .proc-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .proc-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ============ ENGINE SNAPSHOT ============
function EngineSnapshot({ setPage }) {
  return (
    <section className="section" style={{ background: "var(--ink)", color: "var(--bg)", borderRadius: 0, position:"relative", overflow:"hidden" }}>
      <div className="wrap">
        <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1.1fr)", gap: "clamp(40px, 5vw, 80px)", alignItems: "center" }} className="engine-grid">
          <div>
            <div className="eyebrow" style={{ color:"oklch(from var(--bg) l c h / 0.6)", marginBottom: 24 }}><Dot/>04 / Powered by</div>
            <h2 className="h1" style={{ margin: 0 }}>
              The engine sits<br/>
              <span style={{ fontStyle:"italic", color: "oklch(from var(--accent) calc(l + 0.05) c h)" }}>quietly behind everything.</span>
            </h2>
            <p className="lead" style={{ color: "oklch(from var(--bg) l c h / 0.75)", marginTop: 32, maxWidth: "50ch" }}>
              USEus.pro is the production layer that keeps the work shipping — AI-assisted content production, deployment support, automation, approvals, reporting. You see the brand. They run the system.
            </p>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 0, marginTop: 40, borderTop:"1px solid oklch(from var(--bg) l c h / 0.18)" }}>
              {[
                ["Content production", "AI-assisted, brand-anchored"],
                ["Site & page deployment", "Always-on hosting layer"],
                ["Workflow & automation", "Approvals, scheduling, intake"],
                ["Reporting & optimization", "Quarterly cadence"],
              ].map(([h, sub], i) => (
                <div key={h} style={{ padding: "20px 0", borderBottom: "1px solid oklch(from var(--bg) l c h / 0.18)", paddingRight: i % 2 === 0 ? 16 : 0, paddingLeft: i % 2 === 1 ? 16 : 0 }}>
                  <div style={{ fontFamily:"var(--serif)", fontSize: 20, letterSpacing:"-0.01em" }}>{h}</div>
                  <div className="small" style={{ color:"oklch(from var(--bg) l c h / 0.55)", marginTop: 4 }}>{sub}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <button className="btn btn-accent" onClick={() => setPage("engine")}>Inside the engine <Arr/></button>
            </div>
          </div>
          <ArchitectureDiagram dark/>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .engine-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ArchitectureDiagram({ dark }) {
  const txt = dark ? "oklch(from var(--bg) l c h / 0.85)" : "var(--ink)";
  const muted = dark ? "oklch(from var(--bg) l c h / 0.5)" : "var(--ink-3)";
  const line = dark ? "oklch(from var(--bg) l c h / 0.22)" : "var(--line)";
  const card = dark ? "oklch(from var(--bg) l c h / 0.06)" : "var(--bg-elev)";
  return (
    <div style={{ position:"relative", padding: 28, border: `1px solid ${line}`, borderRadius: "var(--radius)", background: card, backdropFilter: "blur(8px)" }}>
      <div className="mono small" style={{ color: muted, letterSpacing:".1em" }}>SYSTEM / ARCHITECTURE</div>
      <div style={{ marginTop: 24, display:"flex", flexDirection:"column", gap: 14 }}>
        <ArchRow tone="bold" label="Front-door brand" name="WhyCantI.ca" sub="What clients see — invitation, brand, conversion" badge="L1" txt={txt} muted={muted} line={line}/>
        <div style={{ display:"flex", justifyContent:"center" }}>
          <div style={{ width: 1, height: 24, background: line }}/>
        </div>
        <ArchRow label="Execution engine" name="USEus.pro" sub="Production, automation, approvals, deployment" badge="L2" txt={txt} muted={muted} line={line}/>
        <div style={{ display:"flex", justifyContent:"center" }}>
          <div style={{ width: 1, height: 24, background: line }}/>
        </div>
        <ArchRow muted label="Operating entity" name="McKeyra Group Corp" sub="Foundation — financial, legal, strategic" badge="L3" txt={muted} muted={muted} line={line}/>
      </div>
    </div>
  );
}
function ArchRow({ tone, label, name, sub, badge, txt, muted, line, muted: m2 }) {
  return (
    <div style={{
      display:"grid", gridTemplateColumns:"auto 1fr auto", gap: 16, alignItems:"center",
      padding: "16px 18px", border: `1px solid ${line}`, borderRadius: 6,
      background: tone === "bold" ? "var(--accent)" : "transparent",
      color: tone === "bold" ? "var(--ink)" : txt,
    }}>
      <div className="mono" style={{ fontSize: 10, opacity: 0.7, letterSpacing:".1em" }}>{badge}</div>
      <div>
        <div style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em", lineHeight: 1 }}>{name}</div>
        <div className="small" style={{ marginTop: 4, opacity: 0.7 }}>{label} — {sub}</div>
      </div>
      <div className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{tone === "bold" ? "← visible" : "→ behind"}</div>
    </div>
  );
}

// ============ PROOF SNAPSHOT ============
function ProofSnapshot({ setPage }) {
  const cases = [
    { tag: "BRAND LAUNCH", co: "Aurora Studio", line: "Reframed positioning, shipped in 18 days", k1: "+62%", k1l: "lead form rate", k2: "21d", k2l: "to launch" },
    { tag: "CONTENT ENGINE", co: "Northbound Co.", line: "From sporadic to 14 posts/wk on cadence", k1: "5.2×", k1l: "publishing velocity", k2: "92%", k2l: "on-time rate" },
    { tag: "AUTOMATION", co: "Halcyon Health", line: "Intake-to-approval cut from days to hours", k1: "-78%", k1l: "approval lag", k2: "0", k2l: "missed launches" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-elev)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><Dot/>05 / The receipts</div>
            <h2 className="h1" style={{ marginTop: 24, marginBottom: 0 }}>
              Selected work,<br/>
              <span className="it">honestly measured.</span>
            </h2>
          </div>
          <p className="lead" style={{ alignSelf:"end" }}>
            We curate. A handful of representative engagements with the numbers that mattered to those operators — not vanity metrics, not a 200-thumbnail wall.
          </p>
        </div>

        <div style={{ display:"flex", flexDirection:"column", gap: 1, background:"var(--line)", border:"1px solid var(--line)", borderRadius:"var(--radius)", overflow:"hidden" }}>
          {cases.map((c, i) => (
            <div key={c.co} style={{
              display:"grid", gridTemplateColumns:"auto 1fr auto auto auto", gap: "clamp(16px, 3vw, 36px)",
              alignItems:"center", padding: "clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px)",
              background: "var(--bg)",
              transition: "background .3s",
              cursor: "pointer",
            }}
              onMouseEnter={e => e.currentTarget.style.background = "var(--bg-elev)"}
              onMouseLeave={e => e.currentTarget.style.background = "var(--bg)"}
              onClick={() => setPage("proof")}
              className="proof-row"
            >
              <div className="mono small" style={{ color:"var(--ink-4)", width: 28 }}>0{i+1}</div>
              <div>
                <div className="eyebrow" style={{ color:"var(--accent-ink)", marginBottom: 8 }}>{c.tag}</div>
                <div style={{ fontFamily:"var(--serif)", fontSize: "clamp(22px, 2.4vw, 32px)", letterSpacing:"-0.015em", lineHeight: 1.05, marginBottom: 6 }}>{c.co}</div>
                <div className="body" style={{ color:"var(--ink-2)", margin: 0 }}>{c.line}</div>
              </div>
              <KPI v={c.k1} l={c.k1l}/>
              <KPI v={c.k2} l={c.k2l}/>
              <Arr size={18}/>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display:"flex", justifyContent:"flex-end" }}>
          <button className="btn-link" onClick={() => setPage("proof")}>All proof <Arr size={11}/></button>
        </div>
      </div>
    </section>
  );
}
function KPI({ v, l }) {
  return (
    <div style={{ textAlign:"right", minWidth: 90 }}>
      <div className="tnum" style={{ fontFamily:"var(--serif)", fontSize: "clamp(24px, 2.4vw, 34px)", letterSpacing:"-0.02em", lineHeight: 1 }}>{v}</div>
      <div className="mono" style={{ fontSize: 10, color:"var(--ink-3)", marginTop: 6, letterSpacing:".06em" }}>{l}</div>
    </div>
  );
}

// ============ FINAL CTA ============
function FinalCta({ setPage }) {
  return (
    <section className="section" style={{ paddingTop: "clamp(80px, 9vw, 140px)" }}>
      <div className="wrap">
        <div style={{
          padding: "clamp(40px, 6vw, 96px)", borderRadius: "var(--radius-lg)",
          background:"var(--bg-deep)", border:"1px solid var(--line)",
          position:"relative", overflow:"hidden",
        }}>
          <div className="dotgrid" style={{ position:"absolute", inset: 0, opacity: 0.5 }}/>
          <div style={{ position:"relative", display:"grid", gridTemplateColumns:"1.4fr 1fr", gap: 48, alignItems:"end" }} className="cta-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}><Dot/>06 / Next move</div>
              <div className="display" style={{ fontSize:"clamp(56px, 8vw, 132px)", margin: 0 }}>
                Better execution<br/>
                <span className="it">starts with<br/>a real system.</span>
              </div>
            </div>
            <div style={{ display:"flex", flexDirection:"column", gap: 14 }}>
              <button className="btn btn-primary" onClick={() => setPage("wizard-full")} style={{ padding:"18px 26px", justifyContent:"space-between", fontSize: 15 }}>
                <span>Book a strategy call</span> <Arr/>
              </button>
              <button className="btn btn-ghost" onClick={() => setPage("wizard-quick")} style={{ padding:"18px 26px", justifyContent:"space-between", fontSize: 15 }}>
                <span>Two-minute fit check</span> <Arr/>
              </button>
              <button className="btn btn-ghost" onClick={() => setPage("contact")} style={{ padding:"18px 26px", justifyContent:"space-between", fontSize: 15 }}>
                <span>Request a proposal</span> <Arr/>
              </button>
              <p className="small" style={{ marginTop: 16 }}>Most replies under 12 hours. No discovery-call theater — bring the actual brief.</p>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .cta-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { HomePage, ArchitectureDiagram });