// pages.jsx — Home, Pricing, Customers, About, Resources, Contact
const { useState: useStatePg, useEffect: useEffectPg } = React;

/* ═══════════════════════════════════════════════════════════════════════
   HOME
   ═══════════════════════════════════════════════════════════════════════ */

function PageHome({ setRoute, defaultDemo }) {
  return (
    <main id="main" className="page-enter">
      {/* HERO */}
      <section style={{
        position: "relative",
        paddingTop: 80,
        paddingBottom: 80,
      }}>
        {/* hairline grid background */}
        <div className="gridlines" aria-hidden="true" style={{
          position: "absolute", inset: 0, opacity: 0.6,
          maskImage: "radial-gradient(ellipse at 70% 0%, black 30%, transparent 75%)",
          WebkitMaskImage: "radial-gradient(ellipse at 70% 0%, black 30%, transparent 75%)",
        }} />
        <div className="wrap-wide" style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr)", gap: 56 }}>
            <div style={{ maxWidth: 920 }}>
              <div className="row gap-8" style={{ marginBottom: 24 }}>
                <span className="pill pill-accent">CRESTIRON · ENTERPRISE PLATFORM</span>
                <span className="mono-sm muted">For regulated enterprise and federal CoEs</span>
              </div>
              <h1 className="h-display">
                Govern Salesforce delivery <em>like the audit is tomorrow.</em>
              </h1>
              <p className="lead" style={{ marginTop: 28, fontSize: 19, maxWidth: 56 + "ch" }}>
                CrestIron is a two-product platform for Salesforce Centers of Excellence:
                an org-health command center and a release-readiness copilot. It exposes
                the silent metadata debt, missing evidence, and release drift that only
                become visible after users are blocked, auditors ask questions, or an AI
                agent acts on the wrong field.
              </p>
              <div className="row gap-16" style={{ marginTop: 32, flexWrap: "wrap" }}>
                <button className="btn btn-primary btn-lg" onClick={() => setRoute("contact")}>
                  Book a 30-minute briefing <IconArrow />
                </button>
                <button className="btn btn-secondary btn-lg" onClick={() => setRoute("orglens")}>
                  See the products
                </button>
              </div>
              <div className="row gap-24" style={{ marginTop: 36, flexWrap: "wrap" }}>
                <SignalChip k="Section 508" v="WCAG 2.2 AA conformant" />
                <SignalChip k="Control mapping" v="Designed against SOC 2 & FedRAMP" />
                <SignalChip k="Data residency" v="GovCloud · US-only" />
              </div>
            </div>

            <Playground defaultDemo={defaultDemo} />
          </div>

          <div style={{ marginTop: 56 }}>
            <TrustStrip />
          </div>
        </div>
      </section>

      {/* TWO-PRODUCT OVERVIEW */}
      <section className="section">
        <div className="wrap-wide">
          <div className="row between" style={{ marginBottom: 40, alignItems: "flex-end", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="eyebrow">01 / Platform</div>
              <h2 className="h1" style={{ marginTop: 12, maxWidth: 20 + "ch" }}>
                Two products. <em style={{ color: "var(--text-secondary)", fontStyle: "normal" }}>One audit trail.</em>
              </h2>
            </div>
            <p className="body" style={{ maxWidth: 42 + "ch", color: "var(--text-secondary)" }}>
              OrgLens AI tells you what to fix.
              ReleaseGuard makes sure nothing risky ships.
              They share scoring logic, ownership data, and policy packs — so the same
              standard runs from intake to production.
            </p>
          </div>

          <div className="grid grid-2" style={{ gap: 24 }}>
            <ProductCard
              tag="ORGLENS AI"
              title="Org-health command center"
              kicker="For admins, delivery leaders, and consulting partners."
              body="Scan any Salesforce org in minutes. See what is slowing you down, what is risky, and what is safely ignorable. Stop discovering toxic automation, dormant access, and AI-readiness gaps only after a launch fails."
              meta={[
                ["OrgScore", "0–100 across 6 categories"],
                ["Findings", "Automation, fields, access, Apex, AI-readiness"],
                ["If ignored", "Hidden debt becomes outages, audit gaps, and agent mistakes"],
              ]}
              cta="Open OrgLens AI"
              onClick={() => setRoute("orglens")}
              accent
            />
            <ProductCard
              tag="RELEASEGUARD AI"
              title="Release-readiness copilot"
              kicker="For release managers, QA leads, and platform owners."
              body="A governance layer above your pipeline. ReleaseGuard reviews every release against your policy pack — human-authored or AI-generated — before a missing rollback plan or undocumented waiver becomes the production incident everyone remembers."
              meta={[
                ["Reviews", "Story · evidence · security · rollback · AI provenance"],
                ["Verdict", "Ready · Conditional · Blocked, with reasoning"],
                ["If skipped", "CAB blind spots, weekend breakage, and no defensible trail"],
              ]}
              cta="Open ReleaseGuard AI"
              onClick={() => setRoute("releaseguard")}
            />
          </div>
        </div>
      </section>

      {/* WHY NOW */}
      <section className="section">
        <div className="wrap-wide">
          <div className="grid grid-3" style={{ alignItems: "stretch" }}>
            <div>
              <div className="eyebrow">02 / Why now</div>
              <h2 className="h2" style={{ marginTop: 12, maxWidth: 18 + "ch" }}>
                The agentic era starts with a clean org.
              </h2>
              <p className="body" style={{ marginTop: 16, color: "var(--text-secondary)" }}>
                Agentforce, copilots, and AI-authored changes are arriving faster than
                most Salesforce orgs can govern them. The orgs that win will be the ones
                whose metadata, automation, and access models are clean enough to trust
                with an agent — and whose release process can explain every change to an
                auditor.
              </p>
            </div>

            <WhyCard
              num="01"
              title="AI changes the surface area of risk"
              body="An agent that writes flows is only as safe as the rules that gate the release. Governance must cover both human and AI-authored changes — with the same evidence standard."
            />
            <WhyCard
              num="02"
              title="Regulated teams cannot wait for cleanup"
              body="Financial services platforms, healthcare programs, and federal CoEs are inheriting a decade of Workflow Rules, Process Builders, and overlapping permission sets. Audit windows and accessibility deadlines do not move."
            />
          </div>

          <div style={{ marginTop: 48 }}>
            <InactionPanel
              title="The most expensive Salesforce risk is the one your team has normalized."
              body="Every unscanned org and every ungated release creates a quiet liability: stale permissions nobody owns, brittle flows nobody wants to touch, waiver decisions nobody can prove, and AI-generated changes nobody can confidently explain. CrestIron turns those unknowns into named, scored work before they become an outage, audit finding, or executive escalation."
              risks={[
                { label: "Org drift", text: "Metadata debt hardens until every new feature takes longer and breaks more often." },
                { label: "Audit exposure", text: "Screenshots and Slack approvals collapse the moment an auditor asks who accepted the risk." },
                { label: "AI blast radius", text: "Agents amplify whatever your metadata, permissions, and release gates already get wrong." },
              ]}
              cta="Surface the hidden risk"
              onCta={() => setRoute("contact")}
            />
          </div>

          <hr className="div-h" style={{ margin: "48px 0" }} />

          <div className="grid grid-4">
            <StatBlock value="6" label="Scan categories" />
            <StatBlock value="173" label="Median findings per org" />
            <StatBlock value="P0–P4" label="Priority scoring" />
            <StatBlock value="§508" label="Conformant by default" />
          </div>
        </div>
      </section>

      {/* BUILT BY PRACTITIONERS */}
      <section className="section">
        <div className="wrap-wide">
          <div className="grid grid-2" style={{ gap: 64, alignItems: "center" }}>
            <div>
              <div className="eyebrow">03 / Where we come from</div>
              <h2 className="h2" style={{ marginTop: 12 }}>
                Built inside the CoEs that run Salesforce — not behind them.
              </h2>
              <p className="body" style={{ marginTop: 16, color: "var(--text-secondary)" }}>
                Our founding team ran Salesforce Centers of Excellence for federal civilian
                and defense agencies, and for Fortune 500 financial services and healthcare
                platforms. We know the difference between an SI engagement that ships and
                one that stalls in the CAB. We built CrestIron to be the product we wished
                we had — one that turns invisible org risk into a number a CIO can act on,
                and one that turns release governance into a workflow instead of a meeting.
              </p>
              <div className="row gap-16" style={{ marginTop: 28 }}>
                <button className="btn btn-secondary" onClick={() => setRoute("about")}>About CrestIron</button>
                <button className="btn btn-ghost" onClick={() => setRoute("customers")}>How teams use it <IconArrow /></button>
              </div>
            </div>

            <div className="card" style={{ padding: 32 }}>
              <div className="mono-sm muted" style={{ letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 20 }}>
                Where CrestIron fits
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 16 }}>
                <FitRow tag="FINSERV" title="Financial services & insurance" detail="Audit-heavy CoEs, SOX evidence, customer-data sensitivity" />
                <FitRow tag="HEALTH"  title="Healthcare & life sciences" detail="HIPAA-bounded orgs, Sales + Service Cloud, validated environments" />
                <FitRow tag="FED-CIV" title="Federal civilian agencies" detail="Multi-org program lines, ATO timelines, Section 508 obligations" />
                <FitRow tag="DOD"     title="Defense & intel programs"  detail="Multi-tenant program orgs, audit-grade approval packets" />
                <FitRow tag="ENT"     title="Regulated commercial CoEs"  detail="Energy, retail, manufacturing — multi-org governance with audit obligations" />
                <FitRow tag="SI"      title="Systems integrators" detail="Partner edition: multi-client dashboard, branded reports" />
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="wrap-wide">
          <div style={{
            background: "var(--surface-0)",
            border: "1px solid var(--border)",
            borderRadius: "var(--r-3)",
            padding: "56px 48px",
            display: "grid",
            gridTemplateColumns: "1fr auto",
            alignItems: "center",
            gap: 32,
          }} className="cta-grid">
            <div>
              <div className="eyebrow eyebrow-accent">// Get started</div>
              <h2 className="h1" style={{ marginTop: 12, maxWidth: 22 + "ch" }}>
                Run a free OrgLens AI scan against your sandbox.
              </h2>
              <p className="body" style={{ marginTop: 16, maxWidth: 52 + "ch" }}>
                Connect a sandbox via OAuth, run a Quick Scan in five minutes, and see your OrgScore.
                If the scan finds nothing frightening, you can walk away. If it does, you will know
                exactly what is waiting inside your next audit, launch, or AI rollout.
              </p>
            </div>
            <div className="col gap-16" style={{ alignItems: "stretch", minWidth: 220 }}>
              <button className="btn btn-primary btn-lg" onClick={() => setRoute("contact")}>Request access <IconArrow /></button>
              <button className="btn btn-secondary btn-lg" onClick={() => setRoute("orglens")}>How a scan works</button>
            </div>
          </div>
        </div>
      </section>

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

function SignalChip({ k, v }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
      <span className="mono-sm muted" style={{ letterSpacing: "0.08em", textTransform: "uppercase" }}>{k}</span>
      <span style={{ fontSize: 13, color: "var(--text-primary)" }}>{v}</span>
    </div>
  );
}

function ProductCard({ tag, title, kicker, body, meta, cta, onClick, accent }) {
  return (
    <div className="card card-hover" style={{
      padding: 36,
      display: "flex", flexDirection: "column",
      minHeight: 380,
      borderColor: accent ? "var(--border-strong)" : "var(--border)",
    }}>
      <div className="row between" style={{ marginBottom: 24 }}>
        <span className={`pill ${accent ? "pill-accent" : ""}`}>{tag}</span>
        <Mark size={16} color="var(--text-muted)" />
      </div>
      <h3 className="h2" style={{ marginBottom: 8 }}>{title}</h3>
      <div className="mono-sm muted" style={{ marginBottom: 20 }}>{kicker}</div>
      <p className="body" style={{ margin: 0, color: "var(--text-secondary)" }}>{body}</p>

      <div style={{ marginTop: 32, marginBottom: 24, display: "flex", flexDirection: "column" }}>
        {meta.map(([k, v], i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "140px 1fr", gap: 16,
            padding: "12px 0",
            borderTop: "1px solid var(--border-subtle)",
          }}>
            <span className="mono-sm muted" style={{ letterSpacing: "0.06em", textTransform: "uppercase" }}>{k}</span>
            <span className="body-sm" style={{ color: "var(--text-primary)" }}>{v}</span>
          </div>
        ))}
      </div>

      <button className="btn btn-ghost" style={{ marginTop: "auto", alignSelf: "flex-start", padding: 0 }} onClick={onClick}>
        {cta} <IconArrow />
      </button>
    </div>
  );
}

function WhyCard({ num, title, body }) {
  return (
    <div style={{ padding: 24, borderLeft: "1px solid var(--border-subtle)" }}>
      <span className="mono-sm muted">{num}</span>
      <h3 className="h3" style={{ marginTop: 8, marginBottom: 12 }}>{title}</h3>
      <p className="body-sm" style={{ margin: 0 }}>{body}</p>
    </div>
  );
}

function StatBlock({ value, label }) {
  return (
    <div>
      <div style={{ fontSize: 52, fontWeight: 300, letterSpacing: "-0.03em", lineHeight: 1, color: "var(--text-primary)" }}>{value}</div>
      <div className="mono-sm muted" style={{ marginTop: 12, letterSpacing: "0.08em", textTransform: "uppercase" }}>{label}</div>
    </div>
  );
}

function FitRow({ tag, title, detail }) {
  return (
    <li style={{
      display: "grid",
      gridTemplateColumns: "76px 1fr",
      gap: 16,
      alignItems: "baseline",
      paddingBottom: 14,
      borderBottom: "1px solid var(--border-subtle)",
    }}>
      <span className="mono-sm" style={{
        letterSpacing: "0.08em", textTransform: "uppercase",
        color: "var(--accent)",
      }}>{tag}</span>
      <div>
        <div style={{ fontSize: 14, color: "var(--text-primary)" }}>{title}</div>
        <div className="body-sm" style={{ marginTop: 2 }}>{detail}</div>
      </div>
    </li>
  );
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════════════════ */

function PagePricing({ setRoute }) {
  const [product, setProduct] = useStatePg("orglens");

  const orgLensTiers = [
    {
      name: "Free Scan", price: "$0", priceNote: "Single scan",
      desc: "See your OrgScore and the top three risks. No commitment, no install in production.",
      features: [
        "Quick Scan · 2–5 min",
        "Overall OrgScore + category scores",
        "Top 3 findings revealed",
        "Watermarked PDF export",
        "Sample remediation card",
      ],
      cta: "Start a free scan",
    },
    {
      name: "Admin", price: "$149", priceNote: "per org / month",
      desc: "Full scan with prioritized fix backlog for a single connected org.",
      features: [
        "Quick + Deep scans",
        "Full Fix Backlog with P0–P4 scoring",
        "Field cleanup, automation, access, Apex, AI readiness",
        "Branded PDF report + CSV export",
        "Ignore / accept-risk workflow",
        "Weekly scheduled scans",
      ],
      cta: "Start Admin trial",
    },
    {
      name: "Team", badge: "MOST POPULAR", price: "$499", priceNote: "per org / month",
      featured: true,
      desc: "For CoEs running multiple sandboxes with active delivery teams.",
      features: [
        "Everything in Admin",
        "Multiple sandboxes per org",
        "Jira, Azure DevOps, DevOps Center integrations",
        "Trend history + before/after remediation tracking",
        "Slack + email alerts",
        "Custom rule profiles",
      ],
      cta: "Talk to sales",
    },
    {
      name: "Enterprise", price: "From $1,500", priceNote: "per org / month",
      desc: "For regulated enterprises and federal programs needing SSO, audit, and dedicated support.",
      features: [
        "Everything in Team",
        "SSO / SAML / SCIM",
        "Immutable audit log + waiver retention",
        "GovCloud-only deployment option",
        "Custom policy packs",
        "Named delivery contact",
      ],
      cta: "Contact sales",
    },
  ];

  const releaseGuardTiers = [
    {
      name: "Essentials", price: "$899", priceNote: "per org / month",
      desc: "Single team formalizing release governance. Everything you need to ship one production org safely.",
      features: [
        "1 production org",
        "Release risk scoring",
        "Pre-deploy checklist",
        "Rollback recommendations",
        "Slack alerts",
        "Email support",
      ],
      cta: "Start with Essentials",
    },
    {
      name: "Professional", badge: "MOST POPULAR", price: "$1,499", priceNote: "per org / month",
      featured: true,
      desc: "Multi-team CoEs running governed release cadences with AI-aware impact analysis across program lines.",
      features: [
        "Up to 5 orgs",
        "AI impact analysis",
        "Dependency graph",
        "Test coverage AI audit",
        "Change request integration",
        "Priority support + CSM",
      ],
      cta: "Talk to sales",
    },
    {
      name: "Enterprise", price: "Custom", priceNote: "contact sales",
      desc: "Financial services, healthcare, defense programs, and large SIs with multi-program governance and 24/7 SLA.",
      features: [
        "Unlimited orgs",
        "Multi-cloud risk matrix",
        "SFDX pipeline hooks",
        "SSO + governance audit",
        "Dedicated architect",
        "SLA 99.9% + 24/7 support",
      ],
      cta: "Contact sales",
    },
    {
      name: "Partner", price: "$999–$2,999", priceNote: "per month",
      desc: "For SIs delivering Salesforce engagements across multiple enterprise or federal clients.",
      features: [
        "Multi-client portfolio dashboard",
        "Branded / white-label reports",
        "Proposal generator from findings",
        "Benchmark across client portfolio",
        "Reseller economics available",
      ],
      cta: "Apply to partner program",
    },
  ];

  const tiers = product === "orglens" ? orgLensTiers : releaseGuardTiers;

  return (
    <main id="main" className="page-enter">
      <section style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="wrap-wide">
          <div className="eyebrow">04 / Pricing</div>
          <h1 className="h-display" style={{ marginTop: 16, maxWidth: 18 + "ch" }}>
            Priced like infrastructure. <em>Not a toy.</em>
          </h1>
          <p className="lead" style={{ marginTop: 24 }}>
            Both products price per connected org. Enterprise & federal pricing is annual.
            Partner edition is built around delivery economics.
          </p>

          <div style={{ marginTop: 40, display: "inline-flex", padding: 4, background: "var(--surface-0)", border: "1px solid var(--border)", borderRadius: 999 }}>
            <ToggleSeg active={product === "orglens"} onClick={() => setProduct("orglens")}>OrgLens AI</ToggleSeg>
            <ToggleSeg active={product === "releaseguard"} onClick={() => setProduct("releaseguard")}>ReleaseGuard AI</ToggleSeg>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap-wide">
          <div className="grid grid-4" style={{ gap: 16 }}>
            {tiers.map((t, i) => (
              <PricingCard key={t.name} tier={t} setRoute={setRoute} />
            ))}
          </div>

          <div style={{ marginTop: 64, padding: "32px 0", borderTop: "1px solid var(--border-subtle)" }}>
            <div className="grid grid-3" style={{ gap: 32 }}>
              <div>
                <div className="eyebrow">Implementation</div>
                <h3 className="h3" style={{ marginTop: 8 }}>Policy pack setup</h3>
                <p className="body-sm" style={{ marginTop: 8 }}>
                  One-time $8k–$25k engagement to author your governance rules,
                  finding library, and approval routing. Typical timeline: 2–4 weeks.
                </p>
              </div>
              <div>
                <div className="eyebrow">Advisory</div>
                <h3 className="h3" style={{ marginTop: 8 }}>Quarterly governance review</h3>
                <p className="body-sm" style={{ marginTop: 8 }}>
                  Optional retainer. Our CoE practitioners audit your release cadence
                  and tune scoring thresholds against your audit findings.
                </p>
              </div>
              <div>
                <div className="eyebrow">Procurement</div>
                <h3 className="h3" style={{ marginTop: 8 }}>Vehicles & schedules</h3>
                <p className="body-sm" style={{ marginTop: 8 }}>
                  Available via GSA MAS (under partner), SEWP V resellers, and major
                  state cooperative purchasing programs. Direct contracts welcome.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function ToggleSeg({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      background: active ? "var(--surface-2)" : "transparent",
      color: active ? "var(--text-primary)" : "var(--text-secondary)",
      border: 0,
      padding: "8px 18px",
      borderRadius: 999,
      fontSize: 13,
      fontWeight: 500,
      transition: "background 120ms, color 120ms",
    }}>{children}</button>
  );
}

function PricingCard({ tier, setRoute }) {
  return (
    <div className="card" style={{
      padding: 28,
      display: "flex",
      flexDirection: "column",
      borderColor: tier.featured ? "var(--accent-border)" : "var(--border)",
      background: tier.featured ? "linear-gradient(180deg, rgba(74,127,255,0.04), transparent 60%), var(--surface-0)" : "var(--surface-0)",
      position: "relative",
    }}>
      {/* Badge slot — reserves identical height across all cards so titles align */}
      <div style={{ minHeight: 22, marginBottom: 18, display: "flex", alignItems: "flex-start" }}>
        {tier.featured && <span className="pill pill-accent">MOST POPULAR</span>}
      </div>

      <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: "-0.012em", lineHeight: 1.15, marginBottom: 12 }}>
        {tier.name}
      </div>

      <div style={{ minHeight: 56, marginBottom: 20 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
          <span style={{ fontSize: 28, fontWeight: 300, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{tier.price}</span>
        </div>
        <div className="mono-sm muted">{tier.priceNote}</div>
      </div>

      <p className="body-sm" style={{ margin: 0, minHeight: 72 }}>{tier.desc}</p>

      <ul style={{ listStyle: "none", padding: 0, margin: "24px 0", display: "flex", flexDirection: "column", gap: 10 }}>
        {tier.features.map((f, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "16px 1fr", gap: 10, fontSize: 13, color: "var(--text-secondary)" }}>
            <span style={{ color: "var(--accent)", marginTop: 4 }}><IconCheck s={14} /></span>
            <span>{f}</span>
          </li>
        ))}
      </ul>

      <button
        className={tier.featured ? "btn btn-primary" : "btn btn-secondary"}
        style={{ marginTop: "auto" }}
        onClick={() => setRoute("contact")}
      >{tier.cta}</button>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════════════════════
   CUSTOMERS
   ═══════════════════════════════════════════════════════════════════════ */

function PageCustomers({ setRoute }) {
  return (
    <main id="main" className="page-enter">
      <section style={{ paddingTop: 80, paddingBottom: 48 }}>
        <div className="wrap-wide">
          <div className="eyebrow">05 / How teams use it</div>
          <h1 className="h-display" style={{ marginTop: 16, maxWidth: 20 + "ch" }}>
            Real CoE patterns. <em>De-identified.</em>
          </h1>
          <p className="lead" style={{ marginTop: 24 }}>
            We do not publish customer names. The enterprises, federal agencies, and SIs we
            work with don't put their logo on vendor websites — and we respect that. Below
            are anonymized case patterns drawn from active engagements.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 64 }}>
        <div className="wrap-wide">
          <div className="grid grid-2" style={{ gap: 24 }}>
            <CaseCard
              tag="FEDERAL CIVILIAN"
              kicker="3,400-user Salesforce program · 11 sandboxes"
              title="Cut blocked late-stage releases by 62% in a single quarter."
              body="A civilian agency CoE deployed ReleaseGuard against a multi-vendor delivery program. By moving governance checks left of CAB, the program reduced last-mile blockers and produced a defensible approval packet for every promotion. Audit hours dropped from 14 per release to 2."
              metrics={[
                ["Late-stage blockers", "−62%", "ok"],
                ["Approval cycle time", "−41%", "ok"],
                ["Releases with complete evidence", "98%", "ok"],
              ]}
            />
            <CaseCard
              tag="DEFENSE PROGRAM"
              kicker="Multi-program CoE · GovCloud · CAC/PIV SSO"
              title="Inherited a decade of automation debt; shipped Agentforce-readiness in a quarter."
              body="A defense program inheriting a sprawling Salesforce footprint ran OrgLens AI across four program orgs. The team prioritized 38 P1 findings before piloting agents — addressing duplicative status fields, automation stacking on Opportunity-analog objects, and missing field descriptions that blocked agent grounding."
              metrics={[
                ["AI Readiness score", "+29", "ok"],
                ["Automation conflicts resolved", "47", "ok"],
                ["Unused fields retired", "1,284", "ok"],
              ]}
            />
            <CaseCard
              tag="FINANCIAL SERVICES"
              kicker="Global insurance carrier · Sales + Service Cloud · 8 orgs"
              title="Replaced a 17-tab governance spreadsheet with a single packet."
              body="A top-10 insurer's Salesforce CoE ran ReleaseGuard against six months of releases across customer-facing program lines. The team retired the spreadsheets used to assemble audit evidence for internal SOX walkthroughs — every release now ships with a packet auditors can read end-to-end in fifteen minutes."
              metrics={[
                ["Audit evidence hours / release", "−8h", "ok"],
                ["Late-stage rework", "−48%", "ok"],
                ["Packets accepted in internal audit", "100%", "ok"],
              ]}
            />
            <CaseCard
              tag="HEALTHCARE"
              kicker="Multi-state provider network · HIPAA-bounded"
              title="Section 508 conformance baked into release intake."
              body="A provider network added an accessibility policy to their ReleaseGuard policy pack: no patient-facing change ships without a documented 508 review and assistive-tech test evidence. Result: zero accessibility-driven hotfixes in the following two release cycles, and a credible response when state HHS auditors asked."
              metrics={[
                ["A11y hotfixes / release", "0", "ok"],
                ["Avg evidence completeness", "94%", "ok"],
                ["Pages tested per release", "18", "ok"],
              ]}
            />
            <CaseCard
              tag="SI · PARTNER EDITION"
              kicker="14 enterprise + federal clients · multi-tenant portfolio"
              title="Generated $1.8M in remediation engagements from inbound scans."
              body="A boutique Salesforce SI used OrgLens AI partner edition as the leading edge of every assessment — from a regional bank's RevOps cleanup to a federal civilian ATO remediation. Branded scan reports turned into scoped SOWs in days, not weeks — with credibility because findings came with confidence scores and effort estimates."
              metrics={[
                ["Scans → scoped SOWs", "73%", "ok"],
                ["Avg engagement value", "$128k", "ok"],
                ["Client portfolio health trend", "↑", "ok"],
              ]}
            />
          </div>

          <div className="card" style={{ padding: 32, marginTop: 32 }}>
            <div className="row between" style={{ flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="eyebrow">Voices from the field</div>
                <h3 className="h2" style={{ marginTop: 12, maxWidth: 28 + "ch" }}>
                  We can't share names. We can share what they say.
                </h3>
              </div>
              <button className="btn btn-secondary" onClick={() => setRoute("contact")}>Request a reference call</button>
            </div>

            <div className="grid grid-3" style={{ gap: 24, marginTop: 32 }}>
              <Quote
                attribution="VP, Salesforce platform · Financial services"
                text="We finally have a defensible answer when leadership asks why a release is delayed. The verdict carries its reasoning, the waiver log is signed, and the SOX walkthrough doesn't surface anything we didn't already see."
              />
              <Quote
                attribution="Release manager · Defense program SI"
                text="Before CrestIron, our CAB was a meeting where surprises happened. Now it's a meeting where the packet is already done and we discuss the two items we knew were going to be discussed."
              />
              <Quote
                attribution="Practice lead · Salesforce consultancy"
                text="OrgLens AI reports give us a credible reason to be in the room. Every scan is a budgeted remediation plan a CIO can sign on Friday."
              />
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function CaseCard({ tag, kicker, title, body, metrics }) {
  return (
    <div className="card" style={{ padding: 32, display: "flex", flexDirection: "column" }}>
      <div className="row between" style={{ marginBottom: 20 }}>
        <span className="pill">{tag}</span>
        <span className="mono-sm muted">{kicker}</span>
      </div>
      <h3 className="h3" style={{ marginBottom: 12 }}>{title}</h3>
      <p className="body-sm" style={{ margin: 0 }}>{body}</p>
      <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--border-subtle)", display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {metrics.map(([k, v, s], i) => (
          <div key={i}>
            <div style={{ fontSize: 24, fontWeight: 300, letterSpacing: "-0.02em", color: `var(--${s})` }}>{v}</div>
            <div className="mono-sm muted" style={{ marginTop: 4, letterSpacing: "0.06em", textTransform: "uppercase" }}>{k}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Quote({ attribution, text }) {
  return (
    <figure style={{ margin: 0, paddingLeft: 16, borderLeft: "1px solid var(--accent)" }}>
      <blockquote style={{ margin: 0, fontSize: 15, lineHeight: 1.55, color: "var(--text-primary)" }}>
        {text}
      </blockquote>
      <figcaption className="mono-sm muted" style={{ marginTop: 16, letterSpacing: "0.04em" }}>
        — {attribution}
      </figcaption>
    </figure>
  );
}

Object.assign(window, { PageHome, PagePricing, PageCustomers });