// pricing.jsx — OnboardIQ /pricing

const PRICE_MAX_W = 1180;

// ─── hero ───────────────────────────────────────────────────────
function PricingHero() {
  return (
    <section style={{ padding: '88px 24px 56px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: PRICE_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 10px', background: 'var(--accent-100)', borderRadius: 'var(--r-pill)', marginBottom: 20 }}>
          <span className="oiq-dot" style={{ background: 'var(--accent-600)' }} />
          <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--accent-700)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            pricing · the per-onboarding model
          </span>
        </div>

        <h1 className="oiq-display" style={{
          fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.035em',
          fontWeight: 500, color: 'var(--ink-900)',
          margin: 0, maxWidth: 940, textWrap: 'balance',
        }}>
          Per <span style={{ color: 'var(--accent-700)' }}>onboarding</span>,<br/>not per seat.
        </h1>

        <p style={{
          fontSize: 19, lineHeight: 1.5, color: 'var(--ink-700)',
          maxWidth: 720, marginTop: 28, marginBottom: 0, letterSpacing: '-0.005em',
        }}>
          You pay when an onboarding completes. Not for the HR coordinator who hasn't logged in
          this quarter. Not for the contractor who finished six months ago. Not full price for the
          seasonal hire.
        </p>
      </div>
    </section>
  );
}

// ─── plan cards ────────────────────────────────────────────────
const PLANS = [
  {
    key: "starter",
    name: "Starter",
    price: "$8",
    unit: "per onboarding",
    fit: "1 to 25 hires a year",
    line: "Billed at completion. No seat fees. Month-to-month.",
    bullets: [
      "Unlimited admin users",
      "3 published templates",
      "Basic workflow branching",
      "E-Verify, I-9, state new-hire reporting",
      "Native e-signature with hash-chained audit",
      "Document vault with default retention",
      "Email support",
    ],
    cta: "Start free trial",
    ctaKind: "primary",
  },
  {
    key: "business",
    name: "Business",
    price: "$6",
    unit: "per onboarding",
    fit: "25 to 200 hires a year",
    line: "Volume rate. White-label and SSO included. 10% off annual.",
    bullets: [
      "Everything in Starter, plus:",
      "Unlimited templates",
      "Advanced branching (hire type, location, dept)",
      "White-label new-hire portal (CNAME, sender)",
      "SSO via SAML or OIDC",
      "Auditor magic-link, scoped and time-boxed",
      "HRIS push (Gusto, Rippling, ADP, Paychex)",
      "Email and chat support",
    ],
    cta: "Start free trial",
    ctaKind: "primary",
  },
  {
    key: "govcon",
    name: "GovCon",
    price: "Let's talk",
    unit: "annual",
    fit: "Federal contractors of any size",
    line: "Clearance track, SCIM, DCAA-ready exports, named CSM.",
    bullets: [
      "Everything in Business, plus:",
      "Clearance-aware track (SF-86, tiers, CE program)",
      "Sub flows with DD-254 packets",
      "SCIM 2.0 provisioning",
      "Full API and webhook surface",
      "Custom retention and legal hold",
      "DCAA-ready audit export with manifest",
      "Documented path to FedRAMP-aligned topology",
      "Named customer success contact",
    ],
    cta: "Talk to us",
    ctaKind: "secondary",
  },
];

function PlanCards() {
  return (
    <section style={{ padding: '24px 24px 96px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: PRICE_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', overflow: 'hidden', background: 'var(--paper-50)' }}>
          {PLANS.map((p, i) => (
            <div key={p.key} style={{
              padding: 32,
              borderLeft: i === 0 ? 'none' : '1px solid var(--paper-300)',
              display: 'flex', flexDirection: 'column', gap: 22,
            }}>
              {/* Header */}
              <div>
                <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{p.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 10 }}>
                  <span style={{ fontFamily: 'var(--sans)', fontSize: 44, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.03em', lineHeight: 1 }}>{p.price}</span>
                  <span className="oiq-mono" style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>{p.unit}</span>
                </div>
                <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 12, letterSpacing: '0.02em', padding: '4px 0', borderTop: '1px solid var(--paper-300)', borderBottom: '1px solid var(--paper-300)' }}>
                  fit: {p.fit}
                </div>
              </div>

              {/* One-line summary */}
              <div style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.5 }}>
                {p.line}
              </div>

              {/* Bullet list */}
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {p.bullets.map((b, j) => (
                  <li key={j} style={{
                    fontSize: 13, color: b.endsWith(':') ? 'var(--ink-900)' : 'var(--ink-700)',
                    fontWeight: b.endsWith(':') ? 500 : 400, lineHeight: 1.45,
                    display: 'flex', gap: 8,
                  }}>
                    {!b.endsWith(':') && (
                      <span style={{ color: 'var(--ink-400)', flex: '0 0 auto', paddingTop: 6 }}>
                        <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor"><rect x="2" y="2" width="4" height="4" /></svg>
                      </span>
                    )}
                    <span>{b}</span>
                  </li>
                ))}
              </ul>

              {/* CTA */}
              <div style={{ marginTop: 'auto', paddingTop: 12 }}>
                <Btn kind={p.ctaKind} full size="lg">{p.cta}</Btn>
              </div>
            </div>
          ))}
        </div>

        <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 16, letterSpacing: '0.02em', textAlign: 'center' }}>
          No credit card. 14-day trial, up to 5 onboardings. Real onboardings, not a sandbox.
        </div>
      </div>
    </section>
  );
}

// ─── calculator ───────────────────────────────────────────────
function Calculator() {
  const [hc, setHc]   = React.useState(80);     // total headcount
  const [hy, setHy]   = React.useState(35);     // hires per year
  const [pc, setPc]   = React.useState(15);     // % cleared
  const [pk, setPk]   = React.useState(20);     // % contractor

  const rate = hy <= 25 ? 8 : 6;
  const plan = pc > 0 ? "GovCon" : (hy <= 25 ? "Starter" : "Business");
  const oiqAnnual = hy * rate;
  const govconNote = pc > 0 ? " · GovCon annual contract" : null;

  const hrisLow  = hc * 12 * 8;
  const hrisHigh = hc * 12 * 12;
  const hrisMid  = hc * 12 * 10;

  const fmt = (n) => "$" + n.toLocaleString();

  return (
    <section style={{ padding: '96px 24px', background: 'var(--paper-100)', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: PRICE_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 36 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>Calculator</div>
          <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            What this actually costs you.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 12, marginBottom: 0 }}>
            Compared against per-seat HRIS pricing at $8 to $12 per employee per month. Both are
            real numbers from buyer conversations, not vendor list prices.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, alignItems: 'stretch' }}>
          {/* Inputs */}
          <Surface style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 22 }}>
            <CalcRow label="Total headcount" value={hc} unit="people" set={setHc} min={5} max={500} step={5} />
            <CalcRow label="Hires per year"   value={hy} unit="hires"  set={setHy} min={1} max={250} step={1} />
            <CalcRow label="% requiring clearance" value={pc} unit="%" set={setPc} min={0} max={100} step={5} />
            <CalcRow label="% contractor / 1099"   value={pk} unit="%" set={setPk} min={0} max={100} step={5} />

            <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', paddingTop: 12, borderTop: '1px solid var(--paper-300)', lineHeight: 1.5 }}>
              The clearance share routes you to GovCon. The contractor share affects template count
              and branching, not unit price.
            </div>
          </Surface>

          {/* Output */}
          <Surface style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 0, background: 'var(--paper-50)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
              <div className="oiq-eyebrow">OnboardIQ · {plan}</div>
              <Pill kind="ink" dot>{plan === "GovCon" ? "annual" : `$${rate}/onboarding`}</Pill>
            </div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 52, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.035em', lineHeight: 1 }}>
                {plan === "GovCon" ? "Let's talk" : fmt(oiqAnnual)}
              </span>
              {plan !== "GovCon" && <span className="oiq-mono" style={{ fontSize: 12, color: 'var(--ink-500)' }}>/ year</span>}
            </div>
            <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-600)', marginBottom: 22 }}>
              {plan === "GovCon"
                ? "Typical range $12,000 to $80,000 · scaled by tier mix, audit volume, SCIM"
                : `${hy} onboardings × $${rate}${govconNote || ""}`}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, paddingTop: 18, borderTop: '1px solid var(--paper-300)' }}>
              <CompareCell
                label="Per-seat HRIS · low end"
                value={fmt(hrisLow)}
                sub={`${hc} × 12 × $8`}
              />
              <CompareCell
                label="Per-seat HRIS · high end"
                value={fmt(hrisHigh)}
                sub={`${hc} × 12 × $12`}
              />
            </div>

            {plan !== "GovCon" && (
              <div style={{
                marginTop: 18, padding: '12px 14px',
                background: 'var(--accent-100)', color: 'var(--accent-700)',
                borderRadius: 'var(--r-2)', fontSize: 13, lineHeight: 1.5,
              }}>
                <span style={{ fontWeight: 500 }}>{fmt(hrisMid - oiqAnnual)} less per year</span>
                {' '}at the midpoint, with no penalty for the people who don't hire this quarter.
              </div>
            )}

            <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--paper-300)', lineHeight: 1.55, letterSpacing: '0.01em' }}>
              One or two cleared positions in an otherwise commercial workforce? The Business tier still applies. <a href="#" style={{ color: 'var(--ink-900)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)' }}>Talk to us.</a>
            </div>
          </Surface>
        </div>
      </div>
    </section>
  );
}

function CalcRow({ label, value, set, min, max, step, unit }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
        <span style={{ fontSize: 13, color: 'var(--ink-700)', fontWeight: 500 }}>{label}</span>
        <span className="oiq-mono oiq-tabular" style={{ fontSize: 13, color: 'var(--ink-900)' }}>
          {value}<span style={{ color: 'var(--ink-500)', marginLeft: 4, fontSize: 11 }}>{unit}</span>
        </span>
      </div>
      <input
        type="range"
        min={min} max={max} step={step} value={value}
        onChange={(e) => set(Number(e.target.value))}
        style={{
          width: '100%', accentColor: 'var(--accent-500)',
        }}
      />
    </div>
  );
}

function CompareCell({ label, value, sub }) {
  return (
    <div>
      <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.02em' }}>{value}</div>
      <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)' }}>{sub}</div>
    </div>
  );
}

// ─── why per-onboarding ───────────────────────────────────
function WhyPerOnboarding() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div className="oiq-eyebrow" style={{ marginBottom: 18 }}>The argument</div>
        <p style={{
          fontSize: 24, lineHeight: 1.42, letterSpacing: '-0.015em',
          color: 'var(--ink-900)', margin: 0, textWrap: 'pretty',
        }}>
          Per-seat HRIS pricing was designed for benefits administration, where the customer is the
          full headcount and the value is delivered every month. Onboarding does not work that way.
          The value lands once, on the day the person is Day-1 ready. Charging by seat means you
          pay for the HR coordinator who logs in twice a year, the contractor who finished six
          months ago, the seasonal hire at the same rate as the engineering director. Per-onboarding
          aligns the bill with the artifact you actually bought: a person, ready to work, with the
          paperwork done correctly. You pay at completion. If an onboarding is canceled, you are
          not billed. If a person is reboarded a year later, that is a new onboarding, and you can
          see exactly what it cost.
        </p>
      </div>
    </section>
  );
}

// ─── plan comparison table ────────────────────────────────
const COMPARE_ROWS = [
  { section: "Pricing" },
  { feat: "Unit",                              s: "$8 per onboarding",          b: "$6 per onboarding",          g: "Annual contract" },
  { feat: "Billing",                           s: "Month-to-month",             b: "Monthly or annual (10% off)", g: "Annual" },
  { feat: "Cancelled onboardings",             s: "Not billed",                 b: "Not billed",                 g: "Counted vs. annual minimum" },

  { section: "Workflow" },
  { feat: "Templates published",               s: "3",                          b: "Unlimited",                  g: "Unlimited" },
  { feat: "Branching conditions",              s: "Hire type, location",        b: "Plus department, manager, custom field", g: "Plus clearance tier, sponsor code" },
  { feat: "30/60/90 plans",                    s: "Included",                   b: "Included",                   g: "Included" },
  { feat: "Reboarding workflows",              s: "Included",                   b: "Included",                   g: "Included" },
  { feat: "Offboarding",                       s: "Included",                   b: "Included",                   g: "Included" },

  { section: "Compliance" },
  { feat: "I-9, E-Verify, state reporting",    s: "Included",                   b: "Included",                   g: "Included" },
  { feat: "Document retention",                s: "Default per type",           b: "Custom per type",            g: "Custom + legal hold" },
  { feat: "Hash-chained audit log",            s: "Included",                   b: "Included",                   g: "Included" },
  { feat: "Audit export",                      s: "Per-employee ZIP",           b: "Bulk ZIP with manifest",     g: "DCAA-ready, scoped, signed" },
  { feat: "Auditor magic-link",                s: "Not included",               b: "Time-boxed, scoped",         g: "Time-boxed, scoped" },
  { feat: "Clearance track",                   s: "Not included",               b: "Not included",               g: "Full (SF-86, tiers, CE)" },
  { feat: "DD-254 sub flows",                  s: "Not included",               b: "Not included",               g: "Included" },

  { section: "Brand & identity" },
  { feat: "White-label new-hire portal",       s: "Not included",               b: "Custom domain, sender",      g: "Custom domain, sender" },
  { feat: "SSO (SAML, OIDC)",                  s: "Not included",               b: "Included",                   g: "Included" },
  { feat: "SCIM 2.0 provisioning",             s: "Not included",               b: "Not included",               g: "Included" },

  { section: "Developer surface" },
  { feat: "Public API",                        s: "Read-only, 10k req/day",     b: "Full, 100k req/day",         g: "Full, custom limits" },
  { feat: "Webhooks",                          s: "10 endpoints",               b: "Unlimited",                  g: "Unlimited" },
  { feat: "Sandbox tenant",                    s: "Not included",               b: "Included",                   g: "Included" },

  { section: "Operations" },
  { feat: "Admin users",                       s: "Unlimited",                  b: "Unlimited",                  g: "Unlimited" },
  { feat: "Support",                           s: "Email",                      b: "Email + chat",               g: "Email + chat + named CSM" },
  { feat: "Data residency",                    s: "US",                         b: "US",                         g: "US (path to FedRAMP topology)" },
];

function PlanComparison() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: PRICE_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 36 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>What changes per plan</div>
          <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            Real differences, not checkmark padding.
          </h2>
          <p style={{ fontSize: 14.5, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 12, marginBottom: 0 }}>
            Where Starter is genuinely limited, we say so. Where every plan ships the same thing,
            we say that too. No tier-locking for the sake of a feature column.
          </p>
        </div>

        <div style={{
          border: '1px solid var(--paper-300)',
          borderRadius: 'var(--r-2)',
          overflow: 'hidden',
          background: 'var(--paper-50)',
        }}>
          {/* Header row */}
          <div style={{
            display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
            background: 'var(--paper-100)',
            borderBottom: '1px solid var(--paper-300)',
          }}>
            <div style={{ padding: '14px 18px' }}>
              <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>capability</div>
            </div>
            {["Starter", "Business", "GovCon"].map((n, i) => (
              <div key={n} style={{ padding: '14px 18px', borderLeft: '1px solid var(--paper-300)' }}>
                <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{n}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-900)', fontWeight: 500, marginTop: 4 }}>
                  {i === 0 ? "$8 / onboarding" : i === 1 ? "$6 / onboarding" : "Let's talk"}
                </div>
              </div>
            ))}
          </div>

          {COMPARE_ROWS.map((r, i) => (
            r.section ? (
              <div key={i} style={{
                padding: '14px 18px',
                background: 'var(--paper-100)',
                borderTop: i === 0 ? 'none' : '1px solid var(--paper-300)',
                borderBottom: '1px solid var(--paper-300)',
              }}>
                <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-700)', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 600 }}>{r.section}</div>
              </div>
            ) : (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
                borderTop: i > 0 && !COMPARE_ROWS[i - 1].section ? '1px solid var(--paper-200)' : 'none',
              }}>
                <div style={{ padding: '12px 18px', fontSize: 13.5, color: 'var(--ink-900)' }}>{r.feat}</div>
                {[r.s, r.b, r.g].map((val, j) => {
                  const absent = val === "Not included";
                  return (
                    <div key={j} style={{
                      padding: '12px 18px', borderLeft: '1px solid var(--paper-200)',
                      fontSize: absent ? 12 : 13,
                      color: absent ? 'var(--ink-400)' : 'var(--ink-700)',
                      fontFamily: absent ? 'var(--mono)' : 'var(--sans)',
                      letterSpacing: absent ? '0.02em' : 0,
                    }}>
                      {val}
                    </div>
                  );
                })}
              </div>
            )
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── GovCon explanation ──────────────────────────────────
function GovConBand() {
  return (
    <section style={{ padding: '96px 24px', background: 'var(--ink-900)', color: 'var(--paper-50)', borderBottom: '1px solid var(--ink-800)' }}>
      <div style={{ maxWidth: PRICE_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="oiq-eyebrow" style={{ color: 'var(--accent-400)', marginBottom: 14 }}>GovCon pricing</div>
            <h2 className="oiq-display" style={{ fontSize: 44, letterSpacing: '-0.03em', fontWeight: 500, color: 'var(--paper-50)', margin: 0, lineHeight: 1.02 }}>
              Why we don't list a number.
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'rgba(246,242,230,.74)', marginTop: 22, marginBottom: 0 }}>
              Federal contractor onboarding is shaped by four variables we cannot price by the
              hire: the clearance tier mix in your workforce (T1 looks nothing like T5), audit
              export volume across DCAA and contracting officer requests, SCIM provisioning needs
              against your IdP, and the contract structure (prime vs. sub, single award vs. IDIQ).
              We send a fixed annual quote in two business days after a one-call brief.
            </p>

            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 28, alignItems: 'center' }}>
              <a href="#" style={{
                fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 500,
                color: 'var(--ink-900)', background: 'var(--accent-400)',
                padding: '10px 16px', borderRadius: 'var(--r-2)',
                textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                Request a GovCon quote <Icon name="chevron-r" size={14} />
              </a>
              <span className="oiq-mono" style={{ fontSize: 11, color: 'rgba(246,242,230,.55)', letterSpacing: '0.04em' }}>
                typical range $12k to $80k annual
              </span>
            </div>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            border: '1px solid rgba(246,242,230,.14)', borderRadius: 'var(--r-2)', overflow: 'hidden',
          }}>
            {[
              ["clearance tier mix",      "T1 prep is hours. T5 prep is months."],
              ["audit export volume",     "DCAA, OPM, agency-specific, on demand."],
              ["scim provisioning",       "IdP shape, group sync, JIT rules."],
              ["contract structure",      "Prime, sub, IDIQ, BPA, task-order."],
              ["data residency path",     "US today, FedRAMP-aligned path documented."],
              ["named CSM",               "One person on your account, not a queue."],
            ].map(([l, v], i, arr) => (
              <div key={l} style={{
                padding: '14px 16px',
                borderRight: (i % 2 === 0) ? '1px solid rgba(246,242,230,.10)' : 'none',
                borderBottom: i < arr.length - 2 ? '1px solid rgba(246,242,230,.10)' : 'none',
              }}>
                <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--accent-400)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{l}</div>
                <div style={{ fontSize: 13, color: 'var(--paper-50)', lineHeight: 1.4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────
const FAQ_ITEMS = [
  { q: "What counts as an onboarding?",
    a: "A new-hire workflow that completes at least one milestone (a signature, a form submission, or a document upload). Drafts and never-started invitations are free. You pay once per person, not per step." },
  { q: "Do reboardings count?",
    a: "Yes. When a person leaves and comes back, the reboard runs as its own workflow with its own audit trail. Customers with frequent contractor recalls usually cross into Business at the 25-a-year mark." },
  { q: "Is there an annual prepay discount?",
    a: "Business is 10% off when paid up front, billed at the start of the term. GovCon is negotiated annually. Starter is month-to-month, no prepay." },
  { q: "What's in the trial?",
    a: "14 days, no credit card, up to 5 onboardings. Real onboardings, not a sandbox. If a trial onboarding carries past day 14, you finish it on whichever plan you choose." },
  { q: "Do offboardings cost extra?",
    a: "No. Offboardings use the same workflow engine and are included on every plan." },
  { q: "What if an onboarding is canceled before completion?",
    a: "You are not charged. Billing happens at completion. A workflow that never reaches Day-1 ready does not generate an invoice line." },
  { q: "Can I switch plans mid-year?",
    a: "Starter to Business is immediate, prorated to the next billing cycle. Business to GovCon requires a contract. Downgrades take effect at the next billing cycle to avoid mid-cycle entitlement gaps." },
  { q: "What happens at year-end on GovCon?",
    a: "We reconcile against actual onboardings completed. If you under-ran the contract, we credit forward. If you over-ran, we issue a true-up invoice at the same per-onboarding rate the contract was priced at." },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28 }}>
          <div>
            <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>Questions buyers actually ask</div>
            <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
              Pricing FAQ.
            </h2>
          </div>
          <a href="mailto:hello@onboardiq.app" style={{ fontSize: 13, color: 'var(--ink-700)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>
            Ask us anything else
          </a>
        </div>

        <div style={{ borderTop: '1px solid var(--paper-300)' }}>
          {FAQ_ITEMS.map((it, i) => (
            <FAQRow key={i} q={it.q} a={it.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQRow({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--paper-300)' }}>
      <button onClick={onToggle} style={{
        all: 'unset', cursor: 'pointer',
        width: '100%', padding: '18px 0',
        display: 'grid', gridTemplateColumns: '1fr 24px', gap: 16, alignItems: 'center',
      }}>
        <div style={{ fontSize: 17, color: 'var(--ink-900)', fontWeight: 500, letterSpacing: '-0.01em' }}>{q}</div>
        <div style={{ color: 'var(--ink-500)', transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 180ms cubic-bezier(0.4,0,0.2,1)' }}>
          <Icon name="chevron-d" size={16} />
        </div>
      </button>
      <div style={{
        maxHeight: open ? 400 : 0, overflow: 'hidden',
        transition: 'max-height 240ms cubic-bezier(0.4,0,0.2,1)',
      }}>
        <div style={{ fontSize: 15.5, color: 'var(--ink-700)', lineHeight: 1.55, paddingBottom: 22, maxWidth: 680 }}>
          {a}
        </div>
      </div>
    </div>
  );
}

// ─── trust band (condensed from home wedge) ─────────────
function TrustBand() {
  return (
    <section style={{ padding: '88px 24px', background: 'var(--paper-100)', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: PRICE_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div>
            <div className="oiq-eyebrow" style={{ marginBottom: 12 }}>Trust posture</div>
            <h2 className="oiq-display" style={{ fontSize: 32, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.06 }}>
              Real claims, not framework theater.
            </h2>
            <p style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 14, marginBottom: 0 }}>
              We list what we actually do. Where a control is provider-attested, we name the provider.
              Where a certification does not exist, we do not imply one.
            </p>
            <a href="/security" style={{
              marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 13, color: 'var(--ink-900)', textDecoration: 'none',
              borderBottom: '1px solid var(--ink-300)', paddingBottom: 2,
            }}>
              Full security posture <Icon name="chevron-r" size={12} />
            </a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', overflow: 'hidden', background: 'var(--paper-50)' }}>
            {[
              ["Encryption in transit",  "TLS 1.3, HSTS preloaded"],
              ["Encryption at rest",     "AES-256 with KMS-wrapped keys"],
              ["Per-tenant DEK",         "Envelope encryption, KMS-rooted"],
              ["Audit log",              "Append-only, hash-chained, replicated"],
              ["Data residency",         "US-region, EU path documented"],
              ["Card data",              "Stripe-handled, PCI-DSS scope reduced"],
              ["Access control",         "RBAC + step-up auth on sensitive actions"],
              ["Audit-ready export",     "Any window, any person, with manifest"],
            ].map(([l, v], i, arr) => (
              <div key={l} style={{
                padding: '14px 16px',
                borderRight: (i % 2 === 0) ? '1px solid var(--paper-300)' : 'none',
                borderBottom: i < arr.length - 2 ? '1px solid var(--paper-300)' : 'none',
              }}>
                <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{l}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-900)', lineHeight: 1.4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── final CTA · overlay with signature photo behind scrim ─
function PricingFinalCTA() {
  return (
    <section style={{ position: 'relative', borderBottom: '1px solid var(--ink-800)', overflow: 'hidden' }}>
      <PhotoSlot
        variant="overlay"
        kind="signature · contract"
        dims="2400 × 1200"
        src="/photos/signing-contract.jpg"
        alt="Hand signing a contract on a wooden desk, documentary lighting, no face visible"
        objectPosition="center 40%"
        subject="A hand on a contract page, signing. Real desk, real ballpoint, available light. Documentary, no rehearsed framing, no laptop or coffee cup in shot."
        treatment="Editorial. Tight crop on the hand, document edge, and table grain. Photo runs as a section background behind a 92% ink-900 scrim. The signature itself is incidental; the table surface and paper texture do the work."
        scrim="linear-gradient(180deg, rgba(22,20,15,.92) 0%, rgba(22,20,15,.95) 100%)"
      >
        <div style={{ padding: '120px 24px', color: 'var(--paper-50)' }}>
          <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
            <h2 className="oiq-display" style={{ fontSize: 56, letterSpacing: '-0.03em', fontWeight: 500, color: 'var(--paper-50)', margin: 0, lineHeight: 1.02 }}>
              Try it on a real hire.<br/>Pay if it ships.
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(246,242,230,.74)', lineHeight: 1.55, marginTop: 22, marginBottom: 0, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
              The trial includes up to 5 onboardings with the full feature surface of Business.
              If one of those onboardings carries an actual new hire past Day 1, you choose a plan
              and we bill the per-onboarding rate. No card up front.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 36, justifyContent: 'center' }}>
              <a href="#" style={{
                fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500,
                color: 'var(--ink-900)', background: 'var(--accent-400)',
                padding: '12px 20px', borderRadius: 'var(--r-2)',
                textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                Start free trial <Icon name="chevron-r" size={14} />
              </a>
              <a href="#" style={{
                fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500,
                color: 'var(--paper-50)', padding: '12px 20px', borderRadius: 'var(--r-2)',
                textDecoration: 'none', border: '1px solid rgba(246,242,230,.28)',
              }}>
                Book a demo
              </a>
            </div>
            <div className="oiq-mono" style={{ fontSize: 11.5, color: 'rgba(246,242,230,.5)', marginTop: 18, letterSpacing: '0.02em' }}>
              No credit card. 14-day trial. Real onboardings, not a sandbox.
            </div>
          </div>
        </div>
      </PhotoSlot>
    </section>
  );
}

// ─── assembly ──────────────────────────────────────────
function Pricing({ tweaks, setTweak }) {
  return (
    <div
      className="oiq"
      data-theme={tweaks.dark ? "dark" : "light"}
      data-accent={tweaks.accent}
      style={{ background: 'var(--paper-50)', color: 'var(--ink-900)', minHeight: '100vh' }}
    >
      <Nav tweaks={tweaks} setTweak={setTweak} />
      <PricingHero />
      <PlanCards />
      <Calculator />
      <WhyPerOnboarding />
      <PlanComparison />
      <GovConBand />
      <FAQ />
      <TrustBand />
      <PricingFinalCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { Pricing });