// Intake subpage

function IntakeHero() {
  return (
    <section style={{ padding: "72px 0 56px" }}>
      <div className="container">
        <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <span className="eyebrow fade-up">Lifecycle · Intake</span>
          <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)" }}>
            Self-serve <em>requests</em>,<br/>
            without the <span className="accent">email tennis</span>.
          </h1>
          <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center" }}>
            Sales, HR, Procurement, all walk through one front door. Smart routing decides the rest.
          </p>
          <div className="fade-up" style={{ marginTop: 32, display: "flex", gap: 12, justifyContent: "center" }}>
            <a className="btn btn-primary btn-lg" href="/book-demo">Book demo <Icon name="arrow" size={14} /></a>
            <a className="btn btn-ghost btn-lg" href="/pricing">Pricing</a>
          </div>
        </div>
        <div style={{ maxWidth: 720, margin: "56px auto 0" }}>
          <IntakeMock />
        </div>
      </div>
    </section>
  );
}

function IntakeChannels() {
  const ch = [
    { icon: "intake", title: "Web portal", desc: "Branded form on your domain. Embedded or standalone." },
    { icon: "negotiation", title: "Slack & Teams", desc: "/contract from any channel. Status updates in DMs." },
    { icon: "docs", title: "Email alias", desc: "legal@ becomes structured intake. Forwarded threads parsed." },
    { icon: "workspace", title: "API & Zapier", desc: "Pipe from Salesforce, HubSpot, Workday, anywhere." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
          <span className="eyebrow">Channels</span>
          <h2 className="h-section" style={{ marginTop: 18 }}>Meet your team <em>where they work</em>.</h2>
        </div>
        <div className="grid grid-4" style={{ gap: 0, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--bg-elevated)" }}>
          {ch.map((c, i) => (
            <div key={c.title} style={{ padding: 28, borderRight: i < ch.length - 1 ? "1px solid var(--line)" : "none" }}>
              <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-soft)", display: "grid", placeItems: "center", color: "var(--accent)", marginBottom: 18 }}>
                <Icon name={c.icon} size={16} />
              </span>
              <h3 className="h-card" style={{ marginBottom: 8 }}>{c.title}</h3>
              <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{c.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RoutingFlow() {
  const stages = [
    { tag: "Trigger", title: "Sales requests an MSA", body: "Velora · €240k ARR · 3-year term" },
    { tag: "Rule", title: "High value path", body: "value > €100k OR term > 24mo" },
    { tag: "Action", title: "Route to Sarah K.", body: "Standard terms · 48h SLA" },
    { tag: "Outcome", title: "Drafted in 6 minutes", body: "Auto-renewal & cap pre-checked" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start", marginBottom: 56 }}>
          <div>
            <span className="eyebrow">Smart routing</span>
            <h2 className="h-section" style={{ marginTop: 18 }}>Rules that <em>read like English</em>.</h2>
          </div>
          <p className="lede" style={{ paddingTop: 24 }}>
            Build routing logic the way you'd explain it to a new hire. Visual builder for ops, JSON for engineers.
          </p>
        </div>
        <div className="grid grid-4" style={{ gap: 16 }}>
          {stages.map((s, i) => (
            <div key={i} className="card" style={{ padding: 24, position: "relative" }}>
              <span className="tag tag-purple" style={{ marginBottom: 14 }}>{s.tag}</span>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>{s.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", fontFamily: i === 1 ? "var(--font-mono)" : "inherit" }}>{s.body}</div>
              {i < stages.length - 1 && (
                <svg style={{ position: "absolute", right: -14, top: "50%", transform: "translateY(-50%)", color: "var(--ink-5)" }} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                  <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
                </svg>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IntakePage() {
  return (
    <div>
      <IntakeHero />
      <LogoStrip />
      <IntakeChannels />
      <RoutingFlow />
      <IntakeFeature />
      <Testimonial />
      <FinalCTA />
    </div>
  );
}

// === Platform overview page ===
function PlatformHero() {
  return (
    <section style={{ padding: "72px 0 56px" }}>
      <div className="container">
        <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <span className="eyebrow fade-up">The platform</span>
          <h1 className="display fade-up" style={{ marginTop: 20, fontSize: "clamp(40px, 5.4vw, 72px)" }}>
            One platform for every contract,<br/>
            from <span className="accent">request to obligation</span>.
          </h1>
          <p className="lede fade-up" style={{ margin: "28px auto 0", textAlign: "center" }}>
            Thirteen modules. One workspace. Built for the way modern legal & ops teams actually run.
          </p>
        </div>
      </div>
    </section>
  );
}

function ModuleGrid() {
  /* ── Compact inline mockups for each module ─────────────────────────── */
  function IntakeMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "8px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>New project from template</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        </div>
        {["Project information", "Documents", "Assigned questions"].map((item, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            <span style={{ fontSize: 12, color: "var(--ink-2)" }}>{item}</span>
          </div>
        ))}
      </div>
    );
  }

  function DraftingMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>Sales Agreement</span>
        </div>
        {[{ label: "Who is your counterpart?", val: "P. Sherman AB" }, { label: "What is their company ID no.?", val: "1234567-890" }, { label: "What is their registered address?", val: "42 Wallaby Way" }].map((f, i) => (
          <div key={i} style={{ padding: "6px 14px" }}>
            <div style={{ fontSize: 9.5, color: "var(--ink-4)", marginBottom: 3 }}>{f.label}</div>
            <div style={{ fontSize: 11, color: "var(--ink-2)", padding: "5px 8px", borderRadius: 4, border: "1px solid var(--line)", background: "var(--bg-soft)" }}>{f.val}</div>
          </div>
        ))}
        <div style={{ padding: "8px 14px 12px" }}>
          <div style={{ padding: "6px 0", borderRadius: 5, background: "var(--accent)", color: "#fff", textAlign: "center", fontSize: 11, fontWeight: 600 }}>Generate Document</div>
        </div>
      </div>
    );
  }

  function ReviewMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>Supplier Agreement</span>
        </div>
        <div style={{ padding: "8px 14px" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", marginBottom: 6 }}>Approvals</div>
          <div style={{ fontSize: 10, color: "var(--ink-4)", marginBottom: 4 }}>Approval status</div>
          {[{ name: "CEO", status: "Approved", color: "#16A34A", bg: "rgba(22,163,74,0.08)" }, { name: "CFO", status: "Needs it.", color: "#991b1b", bg: "rgba(220,38,38,0.08)" }, { name: "Vendor", status: "Pending", color: "#B97A00", bg: "rgba(185,122,0,0.09)" }].map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
              <span style={{ fontSize: 10, color: "var(--ink-3)", width: 40 }}>{r.name}</span>
              <div style={{ flex: 1, height: 6, borderRadius: 3, background: "var(--line)" }}>
                <div style={{ width: r.status === "Approved" ? "100%" : r.status === "Pending" ? "50%" : "70%", height: "100%", borderRadius: 3, background: r.color, opacity: 0.6 }}/>
              </div>
              <span style={{ fontSize: 9, fontWeight: 600, padding: "1px 6px", borderRadius: 99, background: r.bg, color: r.color }}>{r.status}</span>
            </div>
          ))}
        </div>
        <div style={{ padding: "6px 14px 10px" }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--ink-3)", marginBottom: 4 }}>Documents</div>
          <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 10, color: "var(--accent)" }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>
            Supplier Agreement - Rosti Nordic AB
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#991b1b", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <span style={{ color: "#fff", fontSize: 7, fontWeight: 700 }}>×</span>
            </span>
          </div>
        </div>
      </div>
    );
  }

  function NegotiationMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>Redline session</span>
          <span style={{ fontSize: 9, padding: "2px 7px", borderRadius: 99, background: "rgba(234,179,8,0.1)", color: "#854d0e", fontWeight: 600 }}>3 open</span>
        </div>
        {[{ clause: "§4.2 Liability cap", from: "Unlimited", to: "2× fees", who: "Counterparty" }, { clause: "§7.1 Governing law", from: "Sweden", to: "England", who: "Counterparty" }, { clause: "§9.3 Auto-renewal", from: "12 mo", to: "Removed", who: "You" }].map((c, i) => (
          <div key={i} style={{ padding: "8px 14px", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
            <div style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-2)", marginBottom: 2 }}>{c.clause}</div>
            <div style={{ display: "flex", gap: 6, alignItems: "center", fontSize: 10, color: "var(--ink-4)" }}>
              <span style={{ textDecoration: "line-through" }}>{c.from}</span>
              <span style={{ color: "var(--ink-5)" }}>→</span>
              <span style={{ color: c.who === "You" ? "#16A34A" : "#B97A00", fontWeight: 500 }}>{c.to}</span>
              <span style={{ marginLeft: "auto", fontSize: 9, color: "var(--ink-4)" }}>{c.who}</span>
            </div>
          </div>
        ))}
      </div>
    );
  }

  function EsignMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>Signature ceremony</span>
          <span style={{ fontSize: 9, padding: "2px 7px", borderRadius: 99, background: "rgba(22,163,74,0.08)", color: "#16A34A", fontWeight: 600 }}>eIDAS AES</span>
        </div>
        {[{ name: "Sarah K.", role: "Legal · Sender", status: "Signed", time: "2 min ago" }, { name: "Erik W.", role: "Counterparty", status: "Signed", time: "1 min ago" }, { name: "Maja B.", role: "Finance · Approver", status: "Pending", time: "—" }].map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 14px", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
            <span style={{ width: 24, height: 24, borderRadius: "50%", background: s.status === "Signed" ? "rgba(22,163,74,0.12)" : "var(--bg-soft)", display: "grid", placeItems: "center", flexShrink: 0 }}>
              {s.status === "Signed" ? <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#16A34A" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg> : <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2"><circle cx="12" cy="12" r="10"/></svg>}
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-2)" }}>{s.name}</div>
              <div style={{ fontSize: 9.5, color: "var(--ink-4)" }}>{s.role}</div>
            </div>
            <span style={{ fontSize: 9, fontWeight: 600, padding: "2px 7px", borderRadius: 99, background: s.status === "Signed" ? "rgba(22,163,74,0.08)" : "var(--bg-soft)", color: s.status === "Signed" ? "#16A34A" : "var(--ink-4)" }}>{s.status}</span>
          </div>
        ))}
      </div>
    );
  }

  function RepositoryMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>Archive</span>
        </div>
        <div style={{ padding: "6px 14px 4px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "5px 8px", borderRadius: 6, border: "1px solid var(--line)", background: "var(--bg-soft)", fontSize: 10, color: "var(--ink-4)" }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            Search…
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 6, alignItems: "center" }}>
            <span style={{ fontSize: 9, padding: "2px 8px", borderRadius: 99, background: "var(--accent-soft)", color: "var(--accent)", fontWeight: 500 }}>Signing status is Signed ×</span>
            <span style={{ fontSize: 9, color: "var(--ink-4)" }}>Add filter +</span>
          </div>
        </div>
        {["Supplier contracts", "Customer contracts", "Customer contract", "Employment agreement"].map((f, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 14px" }}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--ink-5)" strokeWidth="1.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
            <span style={{ fontSize: 10.5, color: "var(--ink-3)" }}>{f}</span>
          </div>
        ))}
      </div>
    );
  }

  function ObligationsMinimockup() {
    return (
      <div className="mockup-frame" style={{ padding: 0, overflow: "hidden", width: "100%" }}>
        <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--ink-2)" }}>Upcoming renewals</span>
          <span style={{ fontSize: 9, padding: "2px 7px", borderRadius: 99, background: "rgba(220,38,38,0.08)", color: "#991b1b", fontWeight: 600 }}>2 urgent</span>
        </div>
        {[
          { name: "Velora AB · MSA", date: "Jun 28", days: "18d", status: "action", color: "#991b1b", bg: "rgba(220,38,38,0.08)" },
          { name: "Kvist Group · SLA", date: "Jul 4", days: "24d", status: "pending", color: "#854d0e", bg: "rgba(234,179,8,0.1)" },
          { name: "Helix · DPA", date: "Aug 12", days: "63d", status: "on track", color: "#16A34A", bg: "rgba(22,163,74,0.08)" },
        ].map((r, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 14px", borderBottom: i < 2 ? "1px solid var(--line)" : "none" }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-2)" }}>{r.name}</div>
              <div style={{ fontSize: 9.5, color: "var(--ink-4)" }}>Renews {r.date} · {r.days}</div>
            </div>
            <span style={{ fontSize: 9, fontWeight: 600, padding: "2px 7px", borderRadius: 99, background: r.bg, color: r.color, whiteSpace: "nowrap" }}>{r.status}</span>
          </div>
        ))}
      </div>
    );
  }

  const lifecycleCards = [
    {
      mockup: <IntakeMinimockup />,
      title: "Intake",
      desc: "Self-serve request portal for every team. Smart routing sends each contract to the right workflow automatically.",
      href: "/platform/intake"
    },
    {
      mockup: <DraftingMinimockup />,
      title: "Drafting",
      desc: "Generate compliant first drafts in seconds from structured templates with conditional logic and CRM data.",
      href: "/platform/drafting"
    },
    {
      mockup: <ReviewMinimockup />,
      title: "Review",
      desc: "Run structured approval workflows across teams. Track who approved, who flagged, and what's still pending.",
      href: "/platform/review"
    },
    {
      mockup: <NegotiationMinimockup />,
      title: "Negotiation",
      desc: "Collaborate on redlines with counterparties. Track every clause change, who proposed it, and its current status.",
      href: "/platform/negotiation"
    },
    {
      mockup: <EsignMinimockup />,
      title: "eSignature",
      desc: "eIDAS-compliant AES and QES signing ceremonies with sequential or parallel flows and full audit trails.",
      href: "/platform/esignature"
    },
    {
      mockup: <RepositoryMinimockup />,
      title: "Repository",
      desc: "Every signed contract in one searchable archive. Filter by status, type, party, or any extracted term.",
      href: "/platform/repository"
    },
    {
      mockup: <ObligationsMinimockup />,
      title: "Obligations",
      desc: "Track renewals, deadlines, and post-sign commitments. Get alerts before anything slips through the cracks.",
      href: "/platform/obligations"
    }
  ];

  return (
    <section className="section">
      <div className="container">
        <div className="cc-section-header" style={{ maxWidth: 800, marginBottom: 56 }}>
          <span className="eyebrow">The lifecycle</span>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: "clamp(28px, 3.5vw, 42px)", letterSpacing: "-0.025em", lineHeight: 1.2, margin: "16px 0 20px" }}>
            Empower all teams to create compliant contracts at scale
          </h2>
          <p className="lede" style={{ margin: 0 }}>
            With structured templates, conditional approvals, CRM-first workflows and automated post-sign handling, departments can close faster, capture more value and protect the business.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "40px 28px" }}>
          {lifecycleCards.map((card, i) => (
            <a key={i} href={card.href} className="platform-card" style={{
              textDecoration: "none",
              color: "inherit",
              display: "flex",
              flexDirection: "column"
            }}>
              <div className="platform-card-mockup" style={{
                border: "1px solid var(--line)",
                borderRadius: 12,
                padding: "28px 24px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: 280,
                overflow: "hidden",
                background: "var(--bg-soft)",
                transition: "background 280ms ease, border-color 280ms ease, box-shadow 280ms ease"
              }}>
                <div style={{ width: "100%", maxWidth: 210 }}>
                  {card.mockup}
                </div>
              </div>
              <div style={{ padding: "20px 4px 0" }}>
                <h3 style={{ fontSize: 15, fontWeight: 600, color: "var(--ink-1)", lineHeight: 1.35, margin: "0 0 8px" }}>{card.title}</h3>
                <p style={{ fontSize: 13.5, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>{card.desc}</p>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function PowerModulesGrid() {
  const modules = [
    { icon: "dataroom", title: "Dataroom", desc: "Secure deal & due diligence rooms", href: "/platform/power-modules/dataroom" },
    { icon: "docs", title: "Document Hub", desc: "One home for every file", href: "/platform/power-modules/document-hub" },
    { icon: "legal", title: "Legal Hub", desc: "Contract risk & playbooks", href: "/platform/power-modules/legal-hub" },
    { icon: "permission", title: "Advanced Permissions", desc: "Granular access control", href: "/platform/power-modules/permissions" },
    { icon: "workspace", title: "Workspaces", desc: "Team & entity workspaces", href: "/platform/power-modules/workspaces" },
    { icon: "analytics", title: "Analytics", desc: "Cycle time & bottlenecks", href: "/platform/analytics" },
    { icon: "sign", title: "Unlimited viewers", desc: "Zero seat fees for viewers", href: "/unlimited-viewer" },
    { icon: "negotiation", title: "Sales agent", desc: "CRM-first contract creation", href: "/sales-agent" },
  ];
  return (
    <section className="section" style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 32 }}>
          <span className="eyebrow">Power modules</span>
          <h2 style={{ fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 28, letterSpacing: "-0.02em", margin: 0 }}>Extend the platform</h2>
        </div>
        <div className="grid grid-4" style={{ gap: 16 }}>
          {modules.map((it) => (
            <a key={it.title} href={it.href || "#"} className="card" style={{ padding: 24, textDecoration: "none", color: "inherit", transition: "border-color 160ms ease, transform 160ms ease" }}
               onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--ink-5)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
               onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}>
              <span style={{ width: 32, height: 32, borderRadius: 8, background: "var(--bg-elevated)", display: "grid", placeItems: "center", color: "var(--accent)", marginBottom: 18 }}>
                <Icon name={it.icon} size={16} />
              </span>
              <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 4 }}>{it.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{it.desc}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlatformPage() {
  return (
    <div>
      <PlatformHero />
      <ModuleGrid />
      <PowerModulesGrid />
      <FinalCTA />
    </div>
  );
}

Object.assign(window, { IntakePage, PlatformPage });