/* global React */
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

// ===================== SOLUTIONS =====================
function SolutionsPage({ setPage }) {
  const [active, setActive] = useStateP("brand");
  const sols = {
    brand: {
      n: "01", title: "Brand Launch", best: "Founders & teams who need a sharper digital starting point.",
      promise: "A site, a story, and a CTA structure that finally matches the ambition.",
      includes: ["Brand direction & messaging foundation", "Single or multi-page premium site", "Launch visuals & systemized assets", "CTA and conversion architecture", "Domain, hosting, analytics setup"],
      outcomes: ["Faster trust-building", "Higher conversion from first impression", "A foundation ads & outreach can rest on"],
      next: "wizard-full",
    },
    content: {
      n: "02", title: "Content Engine", best: "Brands that need consistent monthly visibility.",
      promise: "A monthly engine that ships — with a calendar, the work, and a feedback loop.",
      includes: ["Monthly content calendar", "Branded visuals & reel concepts", "Captions & long-form support", "Publishing & scheduling", "Monthly performance reporting"],
      outcomes: ["Consistent publishing cadence", "Lower creative friction", "Compounding visibility & retention"],
      next: "wizard-full",
    },
    growth: {
      n: "03", title: "Growth Infrastructure", best: "Operators who need the systems behind the brand.",
      promise: "Replace the manual drag with calm, structured operating workflows.",
      includes: ["Intake workflows & forms", "Approval systems & threading", "Scheduling & content automation", "Site/WordPress update workflow", "Reporting & ops support"],
      outcomes: ["Lower operational drag", "Faster execution cycles", "Cleaner handoffs between people, tools, & publishing"],
      next: "wizard-full",
    },
    strat: {
      n: "04", title: "Strategic Support", best: "Founders who need senior direction without a full hire.",
      promise: "Decision-grade thinking on retainer — not slideware, not a strategy theatre.",
      includes: ["Offer & positioning work", "Quarterly growth planning", "Campaign direction", "Premium strategy sessions", "Asynchronous advisory access"],
      outcomes: ["Sharper priorities", "Better budget allocation", "Higher confidence in commercial direction"],
      next: "wizard-full",
    },
  };
  const s = sols[active];

  return (
    <main className="page-enter">
      <PageHero
        eyebrow="Solutions"
        line1="Outcome-shaped"
        line2="systems."
        lead="We don't sell a service menu. We sell four interlocking growth systems — most engagements start with one and compound into the others."
      />

      {/* Selector */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 24 }}><Dot/>Find your fit</div>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 12, marginBottom: 56 }} className="sol-tabs">
            {Object.entries(sols).map(([k, v]) => (
              <button key={k} onClick={() => setActive(k)} style={{
                textAlign:"left", padding: "20px 22px",
                border: "1px solid " + (active === k ? "var(--ink)" : "var(--line)"),
                background: active === k ? "var(--ink)" : "var(--bg)",
                color: active === k ? "var(--bg)" : "var(--ink)",
                borderRadius: "var(--radius)",
                transition: "all .3s cubic-bezier(.2,.7,.2,1)",
              }}>
                <div className="mono" style={{ fontSize: 10, opacity: 0.6, letterSpacing:".1em", marginBottom: 10 }}>—— {v.n}</div>
                <div style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.015em", lineHeight: 1.05 }}>{v.title}</div>
              </button>
            ))}
          </div>

          {/* Active solution panel */}
          <div key={active} className="rise" style={{ display:"grid", gridTemplateColumns:"1.1fr 1fr", gap: "clamp(32px, 4vw, 64px)", padding: "clamp(32px, 4vw, 56px)", border: "1px solid var(--line)", borderRadius:"var(--radius-lg)", background:"var(--bg-elev)" }}>
            <div>
              <div className="eyebrow" style={{ color:"var(--accent-ink)", marginBottom: 16 }}>SOLUTION {s.n}</div>
              <h2 className="h1" style={{ marginTop: 0, marginBottom: 24 }}>{s.title}</h2>
              <p className="lead" style={{ marginBottom: 28 }}>{s.promise}</p>
              <div style={{ padding: "16px 20px", background:"var(--bg-deep)", borderRadius:"var(--radius)", marginBottom: 32 }}>
                <div className="mono small" style={{ color:"var(--ink-3)", marginBottom: 6 }}>BEST FOR</div>
                <div style={{ fontFamily:"var(--serif)", fontSize: 18, letterSpacing:"-0.01em" }}>{s.best}</div>
              </div>

              <div className="eyebrow" style={{ marginBottom: 16 }}>WHAT'S INCLUDED</div>
              <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 10 }}>
                {s.includes.map(i => (
                  <li key={i} style={{ display:"flex", gap: 12, alignItems:"start", paddingBottom: 10, borderBottom:"1px solid var(--line)" }}>
                    <span style={{ color:"var(--accent)", marginTop: 2 }}><Tick size={12}/></span>
                    <span className="body" style={{ color:"var(--ink)" }}>{i}</span>
                  </li>
                ))}
              </ul>

              <button className="btn btn-primary" onClick={() => setPage(s.next)} style={{ marginTop: 36 }}>Start the wizard <Arr/></button>
            </div>

            <div style={{ display:"flex", flexDirection:"column", gap: 16 }}>
              <div style={{ padding: "24px 28px", background:"var(--ink)", color:"var(--bg)", borderRadius:"var(--radius)" }}>
                <div className="mono" style={{ fontSize: 10, opacity: 0.6, letterSpacing:".1em", marginBottom: 14 }}>WHAT CHANGES AFTER THIS</div>
                <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 14 }}>
                  {s.outcomes.map((o, i) => (
                    <li key={o} style={{ display:"flex", gap: 14, alignItems:"baseline" }}>
                      <span className="mono tnum" style={{ fontSize: 11, color:"var(--accent)" }}>{String(i+1).padStart(2,"0")}</span>
                      <span style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em", lineHeight: 1.15 }}>{o}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="frame" style={{ flex: 1, minHeight: 240 }}>
                <div className="label">VISUAL / {s.n}</div>
                <div className="num">N° {s.n}28 — system snapshot</div>
                <div style={{ position:"absolute", inset:0, background:`radial-gradient(ellipse at 60% 40%, oklch(from var(--accent) l c h / 0.18), transparent 70%)` }}/>
              </div>
            </div>
          </div>
        </div>

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

      {/* Comparison table */}
      <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/>Fit / matrix</div>
              <h2 className="h1" style={{ marginTop: 24 }}>Which one are you?</h2>
            </div>
            <p className="lead" style={{ alignSelf:"end" }}>If the wizard feels like too much, this matrix gets you 80% of the way there.</p>
          </div>

          <div style={{ border:"1px solid var(--line)", borderRadius:"var(--radius)", overflow:"hidden" }}>
            <div style={{ display:"grid", gridTemplateColumns:"1.5fr 1fr 1.4fr 1fr", padding:"16px 24px", background:"var(--bg-deep)", borderBottom:"1px solid var(--line)" }} className="comp-head">
              <div className="eyebrow">Need</div><div className="eyebrow">Solution</div><div className="eyebrow">Outcome</div><div className="eyebrow">CTA</div>
            </div>
            {[
              ["Stronger online foundation", "Brand Launch", "Sharper site & clarity", "Strategy call"],
              ["Consistent visibility", "Content Engine", "Publishing on cadence", "Start wizard"],
              ["Backend systems & workflows", "Growth Infrastructure", "Cleaner execution", "Request proposal"],
              ["Senior direction", "Strategic Support", "Better priorities", "Strategy call"],
            ].map((r, i) => (
              <div key={i} style={{ display:"grid", gridTemplateColumns:"1.5fr 1fr 1.4fr 1fr", padding:"22px 24px", background:"var(--bg)", borderBottom: i < 3 ? "1px solid var(--line)" : "none", alignItems:"center" }} className="comp-row">
                <div style={{ fontFamily:"var(--serif)", fontSize: 19, letterSpacing:"-0.01em" }}>{r[0]}</div>
                <div className="mono small" style={{ color:"var(--accent-ink)" }}>{r[1]}</div>
                <div className="body" style={{ color:"var(--ink-2)" }}>{r[2]}</div>
                <button className="btn-link" onClick={() => setPage(r[3].includes("wizard") ? "wizard-full" : r[3].includes("proposal") ? "contact" : "wizard-full")}>{r[3]} <Arr size={10}/></button>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .comp-head, .comp-row { grid-template-columns: 1fr !important; gap: 6px !important; }
            .comp-row { padding: 18px 16px !important; }
          }
        `}</style>
      </section>

      <FinalCta setPage={setPage}/>
    </main>
  );
}

// ===================== PROCESS =====================
function ProcessPage({ setPage }) {
  const steps = [
    { n:"01", t:"Diagnose the gap", body:"Discovery prompts, an audit, business-state assessment. We map where the friction actually lives — not where it's loudest.", artifacts:["Audit document","Priority map","Gap diagnostic","Stakeholder interviews"] },
    { n:"02", t:"Build the foundation", body:"Site structure, messaging, content arc, workflow design, decision framework. The operating layer is laid down before any production starts.", artifacts:["Wireframes","Messaging frame","Content plan","Workflow map"] },
    { n:"03", t:"Produce and deploy", body:"USEus.pro produces and ships — assets, web pages, content, and operational systems — to the cadence we agreed.", artifacts:["Production view","Approval threads","Publishing logic","Live deployments"] },
    { n:"04", t:"Review and improve", body:"Quarterly review: what worked, what didn't, what's next. The system compounds because it has a feedback loop, not a finish line.", artifacts:["Performance report","Optimization queue","Next-cycle plan","Renewal scope"] },
  ];

  return (
    <main className="page-enter">
      <PageHero
        eyebrow="Process"
        line1="A system,"
        line2="not a sprint."
        lead="The right result comes from the right cadence — diagnose, build, ship, review. Repeat. The work compounds because the operating loop holds."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display:"grid", gridTemplateColumns:"auto 1fr 1.2fr", gap: "clamp(24px, 4vw, 64px)",
              padding: "clamp(48px, 6vw, 96px) 0",
              borderTop: "1px solid var(--line)",
              alignItems:"start",
            }} className="step-row">
              <div style={{ minWidth: 80 }}>
                <div style={{ fontFamily:"var(--serif)", fontSize: "clamp(48px, 7vw, 96px)", letterSpacing:"-0.03em", lineHeight: 0.9, color:"var(--accent-ink)" }}>{s.n}</div>
                <div className="mono small" style={{ color:"var(--ink-3)", marginTop: 12, letterSpacing:".1em" }}>STAGE</div>
              </div>
              <div>
                <h3 className="h2" style={{ margin: 0 }}>{s.t}</h3>
                <p className="lead" style={{ marginTop: 24, maxWidth: "44ch" }}>{s.body}</p>
                <div style={{ display:"flex", flexWrap:"wrap", gap: 8, marginTop: 24 }}>
                  {s.artifacts.map(a => <span key={a} className="tag">{a}</span>)}
                </div>
              </div>
              <StepVisual stage={i} />
            </div>
          ))}
        </div>

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

      {/* Why this works */}
      <section className="section" style={{ background:"var(--ink)", color:"var(--bg)" }}>
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow" style={{ color:"oklch(from var(--bg) l c h / 0.6)" }}><Dot/>Why this works</div>
              <h2 className="h1" style={{ marginTop: 24 }}>Calm, repeatable,<br/><span className="it" style={{ color:"oklch(from var(--accent) calc(l + 0.05) c h)" }}>compounding.</span></h2>
            </div>
            <p className="lead" style={{ alignSelf:"end", color:"oklch(from var(--bg) l c h / 0.7)" }}>
              The cadence is the product. Anyone can ship one good thing once. The hard problem is shipping good work every quarter, without the system stalling.
            </p>
          </div>
          <div style={{ display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap: 1, background:"oklch(from var(--bg) l c h / 0.18)", border:"1px solid oklch(from var(--bg) l c h / 0.18)", borderRadius:"var(--radius)", overflow:"hidden" }} className="why-grid">
            {[
              ["Faster alignment", "Decisions land in days, not weeks"],
              ["Clearer delivery", "Every artifact has a place"],
              ["Better consistency", "Cadence beats heroics"],
              ["Lower friction", "The drag goes to the engine"],
              ["Scalable execution", "Add capacity without chaos"],
            ].map(([t, s]) => (
              <div key={t} style={{ padding: "28px 24px", background:"var(--ink)" }}>
                <div style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em", marginBottom: 10 }}>{t}</div>
                <div className="small" style={{ color:"oklch(from var(--bg) l c h / 0.6)" }}>{s}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 980px) { .why-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 540px) { .why-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      <FinalCta setPage={setPage}/>
    </main>
  );
}

function StepVisual({ stage }) {
  if (stage === 0) {
    return (
      <div style={{ padding: 24, border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--bg-elev)" }}>
        <div className="mono small" style={{ color:"var(--ink-3)", letterSpacing:".1em", marginBottom: 16 }}>AUDIT / SAMPLE</div>
        {["Brand clarity","Site conversion","Content cadence","Workflow load","Reporting loop"].map((l, i) => {
          const v = [40, 25, 18, 30, 12][i];
          return (
            <div key={l} style={{ display:"grid", gridTemplateColumns:"1fr auto", gap: 8, alignItems:"center", marginBottom: 12 }}>
              <div>
                <div className="small" style={{ color:"var(--ink)" }}>{l}</div>
                <div style={{ height: 4, background:"var(--line)", borderRadius: 2, marginTop: 6, overflow:"hidden" }}>
                  <div style={{ width: `${v}%`, height:"100%", background: v < 25 ? "var(--plum)" : "var(--accent)" }}/>
                </div>
              </div>
              <div className="mono tnum" style={{ fontSize: 11, color:"var(--ink-3)" }}>{v}/100</div>
            </div>
          );
        })}
      </div>
    );
  }
  if (stage === 1) {
    return (
      <div style={{ padding: 0, border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--bg-elev)", overflow:"hidden" }}>
        <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
          <div className="mono small" style={{ letterSpacing:".1em", color:"var(--ink-3)" }}>WIRES / V0.4</div>
          <div className="mono small" style={{ color:"var(--ink-4)" }}>5 / 9</div>
        </div>
        <div style={{ padding: 18, display:"grid", gridTemplateColumns:"1fr 1fr", gap: 12 }}>
          {[1,2,3,4].map(i => (
            <div key={i} style={{ aspectRatio:"4/3", background:"var(--bg-deep)", border:"1px dashed var(--line-2)", borderRadius: 4, padding: 8, display:"flex", flexDirection:"column", justifyContent:"space-between" }}>
              <div className="mono small" style={{ fontSize: 9, color:"var(--ink-4)" }}>FRAME {String(i).padStart(2,"0")}</div>
              <div style={{ display:"flex", flexDirection:"column", gap: 3 }}>
                <div style={{ height: 4, background:"var(--line-2)", borderRadius: 2, width:"70%" }}/>
                <div style={{ height: 3, background:"var(--line-2)", borderRadius: 2, width:"40%" }}/>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (stage === 2) {
    return (
      <div style={{ padding: 24, border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--ink)", color:"var(--bg)" }}>
        <div className="mono small" style={{ color:"oklch(from var(--bg) l c h / 0.5)", letterSpacing:".1em", marginBottom: 16 }}>DEPLOY / LIVE</div>
        {[
          { l:"Site v2 → production", s:"shipped", t:"04:12" },
          { l:"Content batch wk 14", s:"shipped", t:"06:48" },
          { l:"Intake automation v2", s:"in build", t:"—" },
          { l:"Quarterly report", s:"queued", t:"—" },
        ].map((r, i) => (
          <div key={i} style={{ display:"grid", gridTemplateColumns:"1fr auto auto", gap: 12, padding:"10px 0", borderBottom: i < 3 ? "1px solid oklch(from var(--bg) l c h / 0.15)" : "none", alignItems:"center" }}>
            <div className="small">{r.l}</div>
            <div className="mono" style={{ fontSize: 10, color: r.s === "shipped" ? "var(--accent)" : "oklch(from var(--bg) l c h / 0.5)", letterSpacing:".1em" }}>{r.s.toUpperCase()}</div>
            <div className="mono tnum" style={{ fontSize: 10, color:"oklch(from var(--bg) l c h / 0.5)" }}>{r.t}</div>
          </div>
        ))}
      </div>
    );
  }
  return (
    <div style={{ padding: 24, border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--bg-elev)" }}>
      <div className="mono small" style={{ color:"var(--ink-3)", letterSpacing:".1em", marginBottom: 12 }}>QUARTERLY / Q2</div>
      <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 16 }}>
        <div>
          <div className="tnum" style={{ fontFamily:"var(--serif)", fontSize: 44, letterSpacing:"-0.02em", lineHeight: 1 }}>+62%</div>
          <div className="small" style={{ marginTop: 6 }}>Lead form rate</div>
        </div>
        <div>
          <div className="tnum" style={{ fontFamily:"var(--serif)", fontSize: 44, letterSpacing:"-0.02em", lineHeight: 1 }}>5.2×</div>
          <div className="small" style={{ marginTop: 6 }}>Publishing velocity</div>
        </div>
      </div>
      <div style={{ marginTop: 20, height: 60, position:"relative" }}>
        <svg viewBox="0 0 200 60" style={{ width:"100%", height:"100%" }}>
          <polyline points="0,50 30,42 60,38 90,30 120,28 150,18 180,14 200,8" fill="none" stroke="var(--accent)" strokeWidth="1.5"/>
          <polyline points="0,55 30,52 60,50 90,46 120,44 150,40 180,36 200,32" fill="none" stroke="var(--ink-3)" strokeWidth="1" strokeDasharray="2 3"/>
        </svg>
      </div>
    </div>
  );
}

// ===================== ENGINE (Why USEus) =====================
function EnginePage({ setPage }) {
  return (
    <main className="page-enter">
      <PageHero
        eyebrow="The engine"
        line1="A quiet"
        line2="execution layer."
        lead="USEus.pro is the production layer behind the work — content, deployment, automation, approvals, reporting. You see the brand. The engine runs the system."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display:"grid", gridTemplateColumns:"1.1fr 1fr", gap: "clamp(32px, 4vw, 80px)", alignItems:"start" }} className="eng-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}><Dot/>What it does</div>
              <h2 className="h2" style={{ marginTop: 0 }}>Six capability modules.<br/><span className="it">One operating layer.</span></h2>
              <div style={{ marginTop: 40, display:"flex", flexDirection:"column", gap: 0, borderTop:"1px solid var(--line)" }}>
                {[
                  ["Content production","Brand-anchored, AI-assisted, human-finished. From calendar to caption to clip."],
                  ["Site & page deployment","Always-on hosting, structured updates, premium delivery."],
                  ["Workflow & automation","Intake, approvals, scheduling, content updates, ops scaffolding."],
                  ["Approvals & threading","One thread per decision. Clear states, no inbox archaeology."],
                  ["Publishing systems","Scheduled, channel-aware, retried, accounted-for."],
                  ["Reporting & optimization","Quarterly cadence. Numbers that actually move the next loop."],
                ].map(([t, b], i) => (
                  <div key={t} style={{ display:"grid", gridTemplateColumns:"auto 1fr", gap: 24, padding: "24px 0", borderBottom:"1px solid var(--line)" }}>
                    <div className="mono tnum small" style={{ color:"var(--ink-4)", paddingTop: 4 }}>{String(i+1).padStart(2,"0")}</div>
                    <div>
                      <div style={{ fontFamily:"var(--serif)", fontSize: 22, letterSpacing:"-0.01em" }}>{t}</div>
                      <div className="body" style={{ marginTop: 6 }}>{b}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ position:"sticky", top: 100 }}>
              <ArchitectureDiagram/>
              <div style={{ marginTop: 20, padding: "20px 24px", border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--bg-elev)" }}>
                <div className="eyebrow" style={{ marginBottom: 10 }}>Why the structure matters</div>
                <p className="body" style={{ margin: 0 }}>
                  Most agencies are one freelance pool deep. Two of you off for a week and the cadence breaks. The engine layer is what makes it sustainable.
                </p>
              </div>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 980px) { .eng-grid { grid-template-columns: 1fr !important; } }`}</style>
      </section>

      <FinalCta setPage={setPage}/>
    </main>
  );
}

// ===================== PROOF =====================
function ProofPage({ setPage }) {
  const cases = [
    { co:"Aurora Studio", tag:"BRAND LAUNCH", desc:"A creative studio with a clear voice but a confused site. We rebuilt the foundation in 18 days.",
      kpis:[["+62%","lead form rate"],["21d","to launch"],["3.4×","time on site"]],
    },
    { co:"Northbound Co.", tag:"CONTENT ENGINE", desc:"From sporadic posts to 14 deliverables a week, on cadence, for two quarters and counting.",
      kpis:[["5.2×","publishing velocity"],["92%","on-time rate"],["+38%","reach"]],
    },
    { co:"Halcyon Health", tag:"AUTOMATION", desc:"An intake-to-approval flow that used to take days. Now sub-hour, with cleaner records.",
      kpis:[["-78%","approval lag"],["0","missed launches"],["4 hrs/wk","ops freed"]],
    },
    { co:"Meridian Capital", tag:"STRATEGIC", desc:"Quarterly advisory & positioning work for a financial advisory practice rebuilding for the next decade.",
      kpis:[["2x","close rate"],["Q4","new offer ship"],["+$420k","ARR"]],
    },
  ];
  return (
    <main className="page-enter">
      <PageHero
        eyebrow="Proof"
        line1="Selected work."
        line2="Honest numbers."
        lead="A handful of representative engagements. Not a 200-thumbnail wall — work we can talk through end-to-end."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap" style={{ display:"flex", flexDirection:"column", gap: 24 }}>
          {cases.map((c, i) => (
            <div key={c.co} style={{
              display:"grid", gridTemplateColumns: i % 2 === 0 ? "1.1fr 1fr" : "1fr 1.1fr",
              gap: 0, border:"1px solid var(--line)", borderRadius:"var(--radius-lg)", overflow:"hidden",
            }} className="case-grid">
              <div className="frame" style={{ minHeight: 360, order: i % 2 === 0 ? 0 : 1 }}>
                <div className="label">CASE / 0{i+1}</div>
                <div className="num">N° {(i+1)*214} — {c.co}</div>
                <div className="corner">{c.tag}</div>
                <div style={{ position:"absolute", inset: 0,
                  background: i === 0
                    ? "radial-gradient(ellipse at 30% 50%, oklch(from var(--accent) l c h / 0.25), transparent 60%)"
                    : i === 1
                    ? "radial-gradient(ellipse at 70% 30%, oklch(from var(--moss) l c h / 0.20), transparent 60%)"
                    : i === 2
                    ? "radial-gradient(ellipse at 50% 60%, oklch(from var(--plum) l c h / 0.22), transparent 60%)"
                    : "radial-gradient(ellipse at 40% 40%, oklch(from var(--accent) l c h / 0.20), transparent 60%)"
                }}/>
              </div>
              <div style={{ padding:"clamp(28px, 4vw, 56px)", display:"flex", flexDirection:"column", justifyContent:"space-between", gap: 32, background:"var(--bg-elev)" }}>
                <div>
                  <div className="eyebrow" style={{ color:"var(--accent-ink)", marginBottom: 16 }}>{c.tag}</div>
                  <h3 className="h2" style={{ margin: "0 0 18px" }}>{c.co}</h3>
                  <p className="lead" style={{ margin: 0 }}>{c.desc}</p>
                </div>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 16, paddingTop: 24, borderTop:"1px solid var(--line)" }}>
                  {c.kpis.map(([v, l]) => (
                    <div key={l}>
                      <div className="tnum" style={{ fontFamily:"var(--serif)", fontSize:"clamp(28px, 3vw, 40px)", letterSpacing:"-0.02em", lineHeight: 1 }}>{v}</div>
                      <div className="small" style={{ marginTop: 8 }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Testimonials */}
        <div className="wrap" style={{ marginTop: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 32 }}><Dot/>From the operators</div>
          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 20 }} className="quote-grid">
            {[
              ["The cadence stopped feeling like a thing I had to push.","Founder, Aurora Studio"],
              ["First agency that actually shipped to the date on the kickoff doc.","COO, Northbound Co."],
              ["I stopped being the bottleneck. That was the entire point.","Founder, Halcyon Health"],
            ].map(([q, who]) => (
              <div key={who} style={{ padding:"clamp(24px, 3vw, 36px)", border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--bg-elev)" }}>
                <div style={{ fontFamily:"var(--serif)", fontSize:"clamp(20px, 2vw, 26px)", letterSpacing:"-0.01em", lineHeight: 1.2, marginBottom: 24 }}>"{q}"</div>
                <div className="mono small" style={{ color:"var(--ink-3)", letterSpacing:".06em" }}>—— {who}</div>
              </div>
            ))}
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .case-grid { grid-template-columns: 1fr !important; }
            .case-grid > div:nth-child(2) { order: 2 !important; }
            .quote-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </section>

      <FinalCta setPage={setPage}/>
    </main>
  );
}

// ===================== ABOUT =====================
function AboutPage({ setPage }) {
  return (
    <main className="page-enter">
      <PageHero
        eyebrow="About"
        line1="A growth brand"
        line2="for serious operators."
        lead="WhyCantI.ca exists to close the gap between ambition and execution. A bold front-door brand, backed by a quiet engine."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap about-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: "clamp(32px, 5vw, 96px)", alignItems:"start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>The story</div>
            <p className="lead" style={{ marginTop: 0, marginBottom: 24 }}>
              Most businesses aren't short on ideas. They're short on the system that turns the ideas into shipped work — week after week, quarter after quarter, without one person holding it together by force of will.
            </p>
            <p className="body">
              WhyCantI.ca is built to be the answer to that. It's the question every ambitious operator asks at 2am about the gap they can feel between where they are and where they could be. We close it with a system, not a sprint.
            </p>
          </div>

          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>What we stand for</div>
            <ul style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 0, borderTop:"1px solid var(--line)" }}>
              {["Possibility","Momentum","Clarity","Execution","Compounding growth"].map((v, i) => (
                <li key={v} style={{ display:"grid", gridTemplateColumns:"auto 1fr auto", gap: 24, alignItems:"center", padding:"22px 0", borderBottom:"1px solid var(--line)" }}>
                  <div className="mono tnum small" style={{ color:"var(--ink-4)" }}>{String(i+1).padStart(2,"0")}</div>
                  <div style={{ fontFamily:"var(--serif)", fontSize: 28, letterSpacing:"-0.015em" }}>{v}</div>
                  <Arr size={14}/>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Architecture */}
      <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/>Architecture</div>
              <h2 className="h1" style={{ marginTop: 24 }}>The brand,<br/><span className="it">the engine.</span></h2>
            </div>
            <p className="lead" style={{ alignSelf:"end" }}>
              You see the brand. The engine sits behind it — calmly running production, deployment, and reporting. That's the structure that makes the cadence sustainable.
            </p>
          </div>
          <div style={{ maxWidth: 720 }}>
            <ArchitectureDiagram/>
          </div>
        </div>
      </section>

      <FinalCta setPage={setPage}/>

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

// ===================== CONTACT =====================
const WEBHOOK_URL = "https://n8n.226.wtf/webhook/whycanti-lead";

function ContactPage({ setPage }) {
  const [form, setForm] = useStateP({ name:"", email:"", company:"", note:"" });
  const [sent, setSent] = useStateP(false);
  const [submitting, setSubmitting] = useStateP(false);

  return (
    <main className="page-enter">
      <PageHero
        eyebrow="Contact"
        line1="Build the next"
        line2="version, properly."
        lead="Pick the path that matches your intent. We respond inside 12 hours, with a real human, with a real next step."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 16, marginBottom: 64 }} className="intent-grid">
            {[
              ["Strategy call","60 min, scoped agenda","wizard-full"],
              ["Proposal request","We send a structured scope","contact"],
              ["Partnerships","Co-build / referral","contact"],
              ["Long-term build","Quarterly engagements","wizard-full"],
            ].map(([t, s, p]) => (
              <button key={t} onClick={() => setPage(p)} style={{
                textAlign:"left", padding: "24px 24px",
                border:"1px solid var(--line)", borderRadius:"var(--radius)",
                background:"var(--bg-elev)",
                transition:"all .3s",
              }}
                onMouseEnter={e => { e.currentTarget.style.background = "var(--ink)"; e.currentTarget.style.color = "var(--bg)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "var(--bg-elev)"; e.currentTarget.style.color = ""; }}
              >
                <div style={{ fontFamily:"var(--serif)", fontSize: 24, letterSpacing:"-0.015em", marginBottom: 8 }}>{t}</div>
                <div className="small">{s}</div>
                <div className="mono small" style={{ marginTop: 18, letterSpacing:".1em" }}>—— OPEN <Arr size={10}/></div>
              </button>
            ))}
          </div>

          <div style={{ display:"grid", gridTemplateColumns:"1.2fr 1fr", gap: "clamp(32px, 4vw, 80px)" }} className="contact-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}><Dot/>Direct line</div>
              <h2 className="h2" style={{ marginTop: 0, marginBottom: 32 }}>Send a brief.</h2>

              {sent ? (
                <div style={{ padding: 32, border:"1px solid var(--accent)", borderRadius:"var(--radius)", background:"oklch(from var(--accent) l c h / 0.08)" }}>
                  <div className="mono small" style={{ color:"var(--accent-ink)", marginBottom: 8 }}>SENT — {new Date().toLocaleTimeString()}</div>
                  <div style={{ fontFamily:"var(--serif)", fontSize: 28, letterSpacing:"-0.01em", marginBottom: 12 }}>Got it, {form.name.split(" ")[0] || "thanks"}.</div>
                  <p className="body" style={{ margin: 0 }}>You'll get a real reply inside 12 hours — not a calendly link.</p>
                </div>
              ) : (
                <form onSubmit={e => {
                  e.preventDefault();
                  setSubmitting(true);
                  fetch(WEBHOOK_URL, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ source:"contact", ...form }),
                  }).catch(() => {}).finally(() => { setSubmitting(false); setSent(true); });
                }} style={{ display:"flex", flexDirection:"column", gap: 14 }}>
                  <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 14 }}>
                    <input className="input" placeholder="Your name" required value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
                    <input className="input" type="email" placeholder="Email" required value={form.email} onChange={e => setForm({...form, email: e.target.value})}/>
                  </div>
                  <input className="input" placeholder="Company / project" value={form.company} onChange={e => setForm({...form, company: e.target.value})}/>
                  <textarea className="input" rows="6" placeholder="What's the brief? What's the gap?" value={form.note} onChange={e => setForm({...form, note: e.target.value})}/>
                  <div style={{ display:"flex", gap: 12, alignItems:"center", marginTop: 8 }}>
                    <button type="submit" className="btn btn-primary" disabled={submitting} style={{ opacity: submitting ? 0.5 : 1 }}>{submitting ? "Sending…" : "Send brief"} <Arr/></button>
                    <span className="small">Or <button type="button" onClick={() => setPage("wizard-full")} style={{ borderBottom:"1px solid var(--line-2)", paddingBottom: 2 }}>start the wizard</button> for a guided intake.</span>
                  </div>
                </form>
              )}
            </div>

            <div>
              <div style={{ padding:"clamp(28px, 3vw, 40px)", border:"1px solid var(--line)", borderRadius:"var(--radius)", background:"var(--bg-elev)" }}>
                <div className="eyebrow" style={{ marginBottom: 18 }}>What happens next</div>
                <ol style={{ listStyle:"none", padding: 0, margin: 0, display:"flex", flexDirection:"column", gap: 18 }}>
                  {[
                    ["You send a brief or finish the wizard","under 5 minutes"],
                    ["A real human reads it and replies","under 12 hours"],
                    ["A 30–60 min strategy call","scoped agenda, no theatre"],
                    ["A structured proposal lands","within 3 working days"],
                  ].map(([t, when], i) => (
                    <li key={t} style={{ display:"grid", gridTemplateColumns:"auto 1fr auto", gap: 14, paddingBottom: 18, borderBottom: i < 3 ? "1px solid var(--line)" : "none" }}>
                      <div className="mono tnum small" style={{ color:"var(--accent)" }}>{String(i+1).padStart(2,"0")}</div>
                      <div style={{ fontFamily:"var(--serif)", fontSize: 17, letterSpacing:"-0.005em" }}>{t}</div>
                      <div className="mono small" style={{ color:"var(--ink-4)" }}>{when}</div>
                    </li>
                  ))}
                </ol>
              </div>
            </div>
          </div>
        </div>

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

// ===================== Shared bits =====================
function PageHero({ eyebrow, line1, line2, lead }) {
  return (
    <section style={{ padding:"clamp(48px, 7vw, 120px) 0 clamp(56px, 7vw, 96px)" }}>
      <div className="wrap">
        <div className="eyebrow rise"><Dot/>{eyebrow}</div>
        <h1 className="display rise rise-1" style={{ marginTop: 24, marginBottom: 32 }}>
          {line1}<br/>
          <span className="it">{line2}</span>
        </h1>
        <p className="lead rise rise-2" style={{ maxWidth: "60ch" }}>{lead}</p>
      </div>
    </section>
  );
}

Object.assign(window, { SolutionsPage, ProcessPage, EnginePage, ProofPage, AboutPage, ContactPage, PageHero, FinalCta: window.FinalCta });