// clearance.jsx — OnboardIQ /features/clearance-onboarding
// The govcon wedge as a feature deep-dive. Argument + product evidence +
// a real-feeling reference for SF-86, tiers, polygraph, reinvestigation.

const CL_MAX_W = 1180;

// ─── hero (verdigris over ink) ─────────────────────────────
function ClearanceHero() {
  return (
    <section style={{
      padding: '96px 24px 88px',
      background: 'var(--ink-900)', color: 'var(--paper-50)',
      borderBottom: '1px solid var(--ink-800)',
    }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 10px', background: 'rgba(67,125,109,.16)', border: '1px solid rgba(67,125,109,.35)', borderRadius: 'var(--r-pill)', marginBottom: 24 }}>
          <span className="oiq-dot" style={{ background: 'var(--accent-400)' }} />
          <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--accent-400)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            features · clearance-aware onboarding
          </span>
        </div>

        <h1 className="oiq-display" style={{
          fontSize: 80, lineHeight: 0.95, letterSpacing: '-0.035em',
          fontWeight: 500, color: 'var(--paper-50)',
          margin: 0, maxWidth: 1080, textWrap: 'balance',
        }}>
          A cleared hire is not<br/>
          a checkbox. It is a<br/>
          <span style={{ color: 'var(--accent-400)' }}>parallel architecture.</span>
        </h1>

        <p style={{
          fontSize: 19, lineHeight: 1.55, color: 'rgba(246,242,230,.74)',
          maxWidth: 720, marginTop: 30, marginBottom: 0, letterSpacing: '-0.005em',
        }}>
          OnboardIQ treats clearance as the starting point for an entire track. SF-86 prep, tier-1
          through tier-5 investigation tracking, adjudication notes, polygraph scheduling, the
          continuous-evaluation calendar, and the reinvestigation window. Not a flag on a generic
          flow. The whole architecture for a particular customer.
        </p>

        <div style={{ display: 'flex', gap: 12, marginTop: 36, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="#" style={{
            fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 500,
            color: 'var(--ink-900)', background: 'var(--accent-400)',
            padding: '12px 18px', 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 18px', borderRadius: 'var(--r-2)',
            textDecoration: 'none', border: '1px solid rgba(246,242,230,.28)',
          }}>
            Book a govcon demo
          </a>
          <span className="oiq-mono" style={{ fontSize: 11, color: 'rgba(246,242,230,.55)', letterSpacing: '0.04em' }}>
            14-day trial · no card · real onboardings, not a sandbox
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── second buyer band: who this is for ──────────────────
function WhoBand() {
  return (
    <section style={{ padding: '64px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div className="oiq-eyebrow" style={{ marginBottom: 12 }}>Who this page is for</div>
        <p style={{ fontSize: 22, lineHeight: 1.5, color: 'var(--ink-900)', letterSpacing: '-0.01em', margin: 0, maxWidth: 880, textWrap: 'pretty' }}>
          Small and mid-sized federal contractors, sub-primes, and the program managers who staff
          their contracts. If you have ever sent a clearance prep packet over email, kept a
          reinvestigation calendar in a shared spreadsheet, or watched a DCAA reviewer ask for a
          file you cannot easily produce, the rest of this page is for you.
        </p>
      </div>
    </section>
  );
}

// ─── the track diagram · sequential steps ────────────────
const CL_TRACK = [
  { n: "01", title: "Position designation",     body: "Mark the role as requiring clearance, set the tier (T1 / T2 / T3 / T4 / T5), pick the sponsor (your own facility clearance, the prime's, or an agency code).", time: "minutes" },
  { n: "02", title: "SF-86 preparation packet", body: "Generated against the canonical .gov form, with a checklist of supporting documents (employment history, residences, foreign contacts). Links the new hire to the official eApp portal. We do not collect the SF-86 itself.", time: "1 to 2 weeks" },
  { n: "03", title: "Investigation handoff",    body: "Tracks DCSA / OPM / agency-specific case numbers and status. Records adjudication notes against the case. The system never pretends to be the investigator.", time: "varies by tier" },
  { n: "04", title: "Interim determination",    body: "If your sponsor grants an interim, the workflow opens the interim-only track: limited system access, sponsor attestations, work-product restrictions. The interim is a state, not a flag.", time: "weeks" },
  { n: "05", title: "Final determination",      body: "On final adjudication, the position moves to the steady-state track: full access provisioning, fitness sign-offs, position-of-trust designation tier set, CE program enrollment.", time: "months" },
  { n: "06", title: "Continuous evaluation",    body: "Calendar of CE check-ins, with reminders tied to the program your sponsor enrolls you in. Records anomaly reports and the responses to them.", time: "ongoing" },
  { n: "07", title: "Reinvestigation",          body: "Tier-aware reminder schedule keyed to the original adjudication date. The reminder is a legal obligation; we surface it twelve and six months out.", time: "T3 · 10y · T5 · 5y" },
];

function TrackDiagram() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 36 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>The track</div>
          <h2 className="oiq-display" style={{ fontSize: 44, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            Seven stops, from designation to reinvestigation.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 14, marginBottom: 0 }}>
            Each stop is a state, not a checkbox. The workflow knows what tier you are, what comes
            next, and what the legal obligation is when the calendar turns over.
          </p>
        </div>

        <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {CL_TRACK.map((s, i) => (
            <li key={s.n} style={{
              display: 'grid', gridTemplateColumns: '48px 36px 1fr 160px',
              gap: 24, alignItems: 'start',
              padding: '24px 0',
              borderTop: '1px solid var(--paper-300)',
              borderBottom: i === CL_TRACK.length - 1 ? '1px solid var(--paper-300)' : 'none',
            }}>
              <div className="oiq-mono" style={{ fontSize: 12, color: 'var(--ink-500)', paddingTop: 4, letterSpacing: '0.08em' }}>{s.n}</div>
              <div style={{ paddingTop: 6, display: 'flex', justifyContent: 'center' }}>
                <span style={{
                  width: 14, height: 14, borderRadius: '50%',
                  border: '2px solid var(--accent-500)',
                  background: i === 0 ? 'var(--accent-500)' : 'var(--paper-100)',
                }} />
              </div>
              <div style={{ maxWidth: 640 }}>
                <div style={{ fontSize: 20, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>{s.title}</div>
                <div style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 6 }}>{s.body}</div>
              </div>
              <div style={{ textAlign: 'right', paddingTop: 6 }}>
                <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>typical time</div>
                <div className="oiq-mono" style={{ fontSize: 13, color: 'var(--ink-900)', marginTop: 2 }}>{s.time}</div>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ─── tier matrix · what changes per tier ───────────────
const TIERS = [
  { tier: "T1", name: "Trust",        invest: "Tier 1 (NACI equiv.)",  scope: "Non-sensitive public trust",       reinv: "5y", proto: "Standard background" },
  { tier: "T2", name: "Moderate trust", invest: "Tier 2",              scope: "Moderate-risk public trust",       reinv: "5y", proto: "MBI-equivalent" },
  { tier: "T3", name: "Secret",       invest: "Tier 3 / T3R",          scope: "Confidential, Secret",             reinv: "10y", proto: "ANACI / NACLC" },
  { tier: "T4", name: "High-risk",    invest: "Tier 4",                scope: "High-risk public trust",           reinv: "5y", proto: "BI" },
  { tier: "T5", name: "Top Secret",   invest: "Tier 5 / T5R",          scope: "TS, TS/SCI, Q",                    reinv: "5y", proto: "SSBI + polygraph variant" },
];

function TierMatrix() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 36 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>Five tiers, five tracks</div>
          <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            Tier-aware, not tier-blind.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 14, marginBottom: 0 }}>
            Each tier has its own investigation type, its own reinvestigation window, and its own
            adjudication protocol. A workflow that treats them the same will eventually fail an
            audit on a position it should never have run.
          </p>
        </div>

        <div style={{
          border: '1px solid var(--paper-300)',
          borderRadius: 'var(--r-2)',
          overflow: 'hidden',
          background: 'var(--paper-50)',
        }}>
          {/* header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '70px 1.1fr 1.4fr 1.6fr 90px 1.3fr',
            background: 'var(--paper-100)',
            borderBottom: '1px solid var(--paper-300)',
          }}>
            {["TIER", "NAME", "INVESTIGATION", "SCOPE", "REINVEST", "PROTOCOL"].map((h, i) => (
              <div key={h} style={{ padding: '12px 16px', borderLeft: i === 0 ? 'none' : '1px solid var(--paper-300)' }}>
                <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.1em' }}>{h}</div>
              </div>
            ))}
          </div>
          {TIERS.map((t, i) => (
            <div key={t.tier} style={{
              display: 'grid', gridTemplateColumns: '70px 1.1fr 1.4fr 1.6fr 90px 1.3fr',
              borderTop: i === 0 ? 'none' : '1px solid var(--paper-200)',
            }}>
              <div style={{ padding: '14px 16px' }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 32, height: 22,
                  background: 'var(--accent-500)', color: 'var(--ink-900)',
                  fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.04em',
                  borderRadius: 'var(--r-1)',
                }}>{t.tier}</span>
              </div>
              <div style={{ padding: '14px 16px', borderLeft: '1px solid var(--paper-200)', fontSize: 14, color: 'var(--ink-900)', fontWeight: 500 }}>{t.name}</div>
              <div style={{ padding: '14px 16px', borderLeft: '1px solid var(--paper-200)', fontSize: 13, color: 'var(--ink-700)' }}>{t.invest}</div>
              <div style={{ padding: '14px 16px', borderLeft: '1px solid var(--paper-200)', fontSize: 13, color: 'var(--ink-700)' }}>{t.scope}</div>
              <div style={{ padding: '14px 16px', borderLeft: '1px solid var(--paper-200)', fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--ink-900)' }}>{t.reinv}</div>
              <div style={{ padding: '14px 16px', borderLeft: '1px solid var(--paper-200)', fontSize: 13, color: 'var(--ink-700)' }}>{t.proto}</div>
            </div>
          ))}
        </div>

        <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 14, letterSpacing: '0.02em' }}>
          Tier nomenclature follows the SEAD-3 / Federal Investigative Standards. We track the case in your sponsor's terms, not ours.
        </div>
      </div>
    </section>
  );
}

// ─── live product surface: clearance tracker ─────────────
const CLEARED = [
  { name: "Jenna Whitfield",  role: "Program Manager",   tier: "T5",  status: "active",       sub: "Top Secret / SCI · adjudicated 2024-02-11",   ce: "next check 2026-08-11", flag: null },
  { name: "Aisha Karam",      role: "Cyber Analyst",     tier: "T3",  status: "interim",      sub: "Secret · interim · sponsor 24-OPM-7714",      ce: "final pending",         flag: "interim" },
  { name: "Daniel Okafor",    role: "Cloud Engineer",    tier: "T5",  status: "investigation", sub: "TS · T5 · DCSA case 24-D-118-22",            ce: "pending adjudication",   flag: "in-flight" },
  { name: "Marcus Reed",      role: "UX Designer",       tier: null,  status: "uncleared",    sub: "Commercial role · no clearance required",     ce: null,                    flag: null },
  { name: "Priya Subramanian",role: "Sr Contracts",      tier: "T2",  status: "active",       sub: "Public trust · MBI · adjudicated 2022-05-30", ce: "next check 2025-11-30", flag: "ce-due" },
  { name: "Theo Bramwell",    role: "IT Support",        tier: "T3",  status: "reinvest-due", sub: "Secret · adjudicated 2016-04-14",             ce: "reinvestigation Q3",    flag: "reinvest" },
];

function ClearanceTrackerSurface() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 24 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>In the product · /app/compliance/clearances</div>
          <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            One screen, all your cleared positions.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 14, marginBottom: 0 }}>
            Tier, current state, last adjudication, next CE check, reinvestigation window. The
            color bar is the same ownership taxonomy as the rest of the app. The yellow rows are
            the ones the calendar is going to make you answer for.
          </p>
        </div>

        <Surface style={{ overflow: 'hidden' }}>
          {/* Header */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 14px',
            background: 'var(--paper-100)',
            borderBottom: '1px solid var(--paper-300)',
          }}>
            <Icon name="clearance" size={14} />
            <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--ink-900)' }}>Clearance tracker</span>
            <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>34 active · 7 in adjudication · 2 reinvest due · last CE seal 09:41</span>
            <span style={{ flex: 1 }} />
            <Btn kind="secondary" size="sm" icon="filter">Tier · all</Btn>
            <Btn kind="secondary" size="sm">Export</Btn>
          </div>

          {/* Column header */}
          <div style={{
            display: 'grid', gridTemplateColumns: '3px 22px 1fr 60px 120px 1.4fr 160px 28px',
            gap: 10, alignItems: 'center',
            padding: '8px 14px 8px 0',
            background: 'var(--paper-100)',
            borderBottom: '1px solid var(--paper-300)',
          }}>
            <span />
            <span />
            <span className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>person · role</span>
            <span className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>tier</span>
            <span className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>status</span>
            <span className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>case</span>
            <span className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>ce / reinvest</span>
            <span />
          </div>

          {/* Rows */}
          {CLEARED.map((p, i) => {
            const flagColor =
              p.flag === "reinvest"  ? 'var(--red-500)' :
              p.flag === "ce-due"    ? 'var(--accent-600)' :
              p.flag === "interim"   ? 'var(--accent-600)' :
              p.flag === "in-flight" ? 'var(--blue-500)' :
              'var(--ink-300)';
            const statusPill =
              p.status === "active"         ? ['success', 'active'] :
              p.status === "interim"        ? ['warn',    'interim'] :
              p.status === "investigation"  ? ['info',    'in-investigation'] :
              p.status === "reinvest-due"   ? ['danger',  'reinvest due'] :
                                              ['neutral', 'uncleared'];
            return (
              <div key={p.name} style={{
                display: 'grid', gridTemplateColumns: '3px 22px 1fr 60px 120px 1.4fr 160px 28px',
                gap: 10, alignItems: 'center',
                padding: '12px 14px 12px 0',
                borderBottom: i === CLEARED.length - 1 ? 'none' : '1px solid var(--paper-200)',
                background: p.flag === "reinvest" ? 'var(--red-100)' : (p.flag === "ce-due" || p.flag === "interim") ? 'var(--accent-50)' : 'transparent',
              }}>
                <div style={{ width: 3, height: 34, background: flagColor }} />
                <Avatar name={p.name} size={22} />
                <div>
                  <div style={{ fontSize: 13, color: 'var(--ink-900)', fontWeight: 500 }}>{p.name}</div>
                  <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{p.role}</div>
                </div>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  width: 32, height: 22,
                  background: p.tier ? 'var(--accent-500)' : 'var(--paper-200)',
                  color: p.tier ? 'var(--ink-900)' : 'var(--ink-500)',
                  fontFamily: 'var(--mono)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.04em',
                  borderRadius: 'var(--r-1)',
                }}>{p.tier || 'n/a'}</span>
                <Pill kind={statusPill[0]} dot>{statusPill[1]}</Pill>
                <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-700)' }}>{p.sub}</div>
                <div className="oiq-mono oiq-tabular" style={{ fontSize: 11, color: p.flag === "reinvest" ? 'var(--red-500)' : p.flag ? 'var(--accent-700)' : 'var(--ink-600)' }}>
                  {p.ce || 'n/a'}
                </div>
                <Icon name="chevron-r" size={13} />
              </div>
            );
          })}

          {/* Footer · audit hash */}
          <div style={{
            padding: '10px 14px',
            background: 'var(--paper-100)',
            borderTop: '1px solid var(--paper-300)',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <Icon name="lock" size={12} />
            <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-700)' }}>
              every state change written to the hash-chained audit log · last checkpoint 0x7a1f…c402
            </span>
          </div>
        </Surface>
      </div>
    </section>
  );
}

// ─── what gets retrofit vs built · the structural argument ─
function StructuralArgument() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 36 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>Why structural, not feature</div>
          <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            What a generic HRIS bolts on, and what we built into the floor.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', overflow: 'hidden' }}>
          {/* Left: bolted on */}
          <div style={{ padding: 28, background: 'var(--paper-50)', borderRight: '1px solid var(--paper-300)' }}>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--red-500)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>
              ✕ bolted-on
            </div>
            <h3 style={{ fontSize: 20, color: 'var(--ink-900)', fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>
              Clearance as a feature
            </h3>
            <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                "A checkbox on the personnel record: 'has clearance.'",
                "A free-text field for the case number, with no schema.",
                "Reinvestigation is a calendar reminder you set yourself.",
                "Interim vs. final is a tag, not a workflow.",
                "SF-86 prep is a Drive folder named 'paperwork, Daniel.'",
                "Adjudication notes live in someone's Notion.",
                "Auditor asks for the trail. The trail is in an email thread.",
              ].map((s, i) => (
                <li key={i} style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.5, display: 'flex', gap: 10 }}>
                  <span style={{ flex: '0 0 auto', color: 'var(--ink-400)', 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>{s}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right: built in */}
          <div style={{ padding: 28, background: 'var(--accent-50)' }}>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--accent-700)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>
              ✓ structural
            </div>
            <h3 style={{ fontSize: 20, color: 'var(--ink-900)', fontWeight: 500, margin: 0, letterSpacing: '-0.01em' }}>
              Clearance as the floor plan
            </h3>
            <ul style={{ listStyle: 'none', padding: 0, margin: '18px 0 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                "Clearance state is a typed object: tier, status, sponsor, case, adjudication date, CE program.",
                "Investigation case has its own schema, tied to the right authority (DCSA, OPM, agency).",
                "Reinvestigation reminders are tier-aware and tracked as legal obligations.",
                "Interim and final are different workflow states with different access provisioning rules.",
                "SF-86 prep is a generated packet with a checklist, not a Drive folder.",
                "Adjudication notes are field-level, audited, and access-controlled.",
                "Auditor asks for the trail. The trail exports as a scoped ZIP with a manifest.",
              ].map((s, i) => (
                <li key={i} style={{ fontSize: 14, color: 'var(--ink-800)', lineHeight: 1.5, display: 'flex', gap: 10 }}>
                  <span style={{ flex: '0 0 auto', color: 'var(--accent-700)', 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>{s}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── DD-254 sub flows · the other half nobody else does ──
function SubFlows() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>DD-254 sub flows</div>
            <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
              The flow nobody else's HRIS ships.
            </h2>
            <p style={{ fontSize: 15.5, color: 'var(--ink-700)', lineHeight: 1.55, marginTop: 18, marginBottom: 0 }}>
              When you bring on a cleared subcontractor, the contract carries a DD-254 with its own
              classified-information requirements. The sub has a sponsor, the sponsor has a contract
              code, the contract has a security classification specification, and the new hire's
              access is gated on all three. We treat the DD-254 packet as a first-class workflow
              with its own envelopes, countersignatures, and audit trail. The sub-prime sees their
              own portal, you see your view, the contracting officer sees a scoped export.
            </p>
            <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 20, padding: '12px 14px', background: 'var(--paper-50)', border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)' }}>
              tip · the DD-254 contract security classification specification has thirty fields and
              a signature block for the prime, the sub, and the cognizant security office. We pre-fill
              the boilerplate against your facility clearance record so you fill in the contract-specific
              parts only.
            </div>
          </div>

          {/* Envelope / packet rendering */}
          <div style={{
            border: '1px solid var(--paper-300)',
            borderRadius: 'var(--r-2)',
            background: 'var(--paper-50)',
            overflow: 'hidden',
            boxShadow: 'var(--shadow-1)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: 'var(--paper-100)', borderBottom: '1px solid var(--paper-300)' }}>
              <Icon name="documents" size={13} />
              <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-700)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>dd-254 · packet · v3</span>
              <span style={{ flex: 1 }} />
              <Pill kind="warn" dot mono>signatures · 2 of 3</Pill>
            </div>
            <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div>
                <div className="oiq-eyebrow" style={{ marginBottom: 2 }}>contract</div>
                <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.015em' }}>CONTRACT-MFD-441 · IDIQ task order 2026-04</div>
                <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-600)' }}>prime · MeridianFed · sub · BlueRidge LLC · sponsor · 24-OPM-7714</div>
              </div>
              <div style={{ borderTop: '1px solid var(--paper-300)' }} />

              <DDFieldRow label="Classification" value="Secret" />
              <DDFieldRow label="Access required" value="Confidential, Secret · no SAP, no SCI" />
              <DDFieldRow label="Sub-prime" value="BlueRidge LLC · CAGE 7XKL2 · FCL Secret" />
              <DDFieldRow label="Subject" value="Aisha Karam · Cyber Analyst · interim Secret" />

              <div style={{ borderTop: '1px dashed var(--paper-300)' }} />

              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <DDSig name="Prime · M. Reed (security officer)"   when="signed 2026-05-09 · 14:02 ET" done />
                <DDSig name="Sub · J. Halloran (FSO, BlueRidge)"   when="signed 2026-05-10 · 09:41 ET" done />
                <DDSig name="CSO · sponsor 24-OPM-7714"            when="awaiting · sent 18h ago" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DDFieldRow({ label, value }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 12 }}>
      <span className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase', paddingTop: 2 }}>{label}</span>
      <span style={{ fontSize: 13.5, color: 'var(--ink-900)' }}>{value}</span>
    </div>
  );
}

function DDSig({ name, when, done }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 14, height: 14, borderRadius: 'var(--r-1)',
        background: done ? 'var(--green-500)' : 'transparent',
        border: done ? 'none' : '1.4px dashed var(--accent-600)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--paper-50)',
      }}>
        {done && <svg width="9" height="9" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square"><path d="M3 8l3 3 7-7" /></svg>}
      </span>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12.5, color: 'var(--ink-900)' }}>{name}</div>
        <div className="oiq-mono" style={{ fontSize: 10, color: done ? 'var(--green-700)' : 'var(--accent-700)' }}>{when}</div>
      </div>
    </div>
  );
}

// ─── photo slot · capability evidence ────────────────────
function ClearanceEvidencePhoto() {
  return (
    <section style={{ padding: '64px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="oiq-eyebrow" style={{ marginBottom: 12 }}>Where the work happens</div>
            <h2 className="oiq-display" style={{ fontSize: 36, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.06 }}>
              The product is shaped by the office it serves.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.55, marginTop: 14, marginBottom: 0 }}>
              OnboardIQ is built for the kind of contractor who actually runs cleared work: small,
              sub-prime, or program-managing teams who have to keep the clearance calendar
              themselves. The clearance track is shaped by how the work happens, not by an HR
              taxonomy that treats clearance as a checkbox.
            </p>
          </div>
          <PhotoSlot
            kind="capability · clearance"
            aspect="5/4"
            src="/photos/clearance-workstation.jpg"
            alt="Workstation with monitors and screen analytics, plant in foreground, documentary"
            subject="A real cleared workstation, mid-day. Keycard reader and badge lanyard in foreground. Two monitors with the OnboardIQ clearance tracker visible on one (composited from a real screen capture, not a mockup). A printed DD-254 on the desk, partly folded. No faces in frame."
            treatment="Documentary editorial. Available light, slight green-yellow institutional cast left in. The compositional anchor is the keycard reader, not the screen. Shoot once for the canonical clearance-page image and use the same frame on /industries/government-contractors."
            dims="2000 × 1600"
          />
        </div>
      </div>
    </section>
  );
}

// ─── compliance + audit band (re-used pattern) ──────────
function ComplianceBand() {
  return (
    <section style={{ padding: '88px 24px', background: 'var(--ink-900)', color: 'var(--paper-50)', borderBottom: '1px solid var(--ink-800)' }}>
      <div style={{ maxWidth: CL_MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 32 }}>
          <div className="oiq-eyebrow" style={{ color: 'var(--accent-400)', marginBottom: 12 }}>The second buyer</div>
          <h2 className="oiq-display" style={{ fontSize: 38, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--paper-50)', margin: 0, lineHeight: 1.04 }}>
            Built for the auditor you have not met yet.
          </h2>
          <p style={{ fontSize: 15, color: 'rgba(246,242,230,.74)', lineHeight: 1.55, marginTop: 14, marginBottom: 0 }}>
            A contracting officer in 2028 is going to ask for the chain of custody on a clearance
            decision from 2025. The chain has to be there, and it has to be verifiable. Everything
            on this page is also a file in that chain.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid rgba(246,242,230,.14)', borderRadius: 'var(--r-2)', overflow: 'hidden' }}>
          {[
            ["Hash-chained log",   "Every state change is an append-only event with the previous hash baked in."],
            ["WORM replication",   "Daily snapshots replicate to write-once-read-many storage."],
            ["Scoped exports",     "Time-boxed, scoped ZIP with cryptographic manifest. DCAA-ready."],
            ["Auditor magic-link", "External auditors get a read-only, scoped, time-boxed view."],
          ].map(([t, b], i, arr) => (
            <div key={t} style={{
              padding: '20px 20px',
              borderRight: i === arr.length - 1 ? 'none' : '1px solid rgba(246,242,230,.10)',
            }}>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--accent-400)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>{t}</div>
              <div style={{ fontSize: 13, color: 'var(--paper-50)', lineHeight: 1.45 }}>{b}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 22, paddingTop: 16, borderTop: '1px solid rgba(246,242,230,.12)' }}>
          <span className="oiq-mono" style={{ fontSize: 10.5, color: 'rgba(246,242,230,.5)', letterSpacing: '0.04em' }}>
            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
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ─────────────────────────────────────────────────
const CL_FAQ = [
  { q: "Does OnboardIQ replace eApp / SF-86?",
    a: "No, and it is not designed to. eApp is the only legitimate way to submit an SF-86 to an investigative authority. We generate the prep packet against the canonical form, walk the new hire through what they will need (employment history, residences, foreign contacts), and link out to the official portal. We do not store the SF-86 itself." },
  { q: "Can OnboardIQ submit to DCSA / OPM directly?",
    a: "No system can. Investigation submissions go through the eApp pipeline owned by the agency. OnboardIQ tracks the case number the agency returns, records the adjudication status notes you receive, and writes everything to the audit log so the workflow knows where the case stands." },
  { q: "What about FedRAMP?",
    a: "Today OnboardIQ runs on US-region infrastructure with documented controls. We have a documented path to a FedRAMP-aligned deployment topology for federal customers who require it. We will not claim a certification we do not hold." },
  { q: "Does it support CMMC?",
    a: "We surface CMMC training acknowledgement as a step type and store the artifact under the same retention rules as the rest of the audit log. We are not a CMMC assessor; we make it easier to produce evidence for one." },
  { q: "How do you handle position-of-trust roles that do not require classified access?",
    a: "Public trust and high-risk public trust (T1, T2, T4) are first-class tiers in the workflow with their own investigation types and reinvestigation windows. The clearance tracker treats them as tracks of equal weight, not as edge cases." },
  { q: "What if our sponsor changes mid-onboarding?",
    a: "Sponsor change is a workflow state with its own signal. The case under the old sponsor is closed with a status note, and a new packet opens under the new sponsor with the relevant fields pre-filled. The audit log carries both." },
];

function ClFAQ() {
  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 className="oiq-eyebrow" style={{ marginBottom: 10 }}>Questions security officers ask</div>
        <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
          Clearance FAQ.
        </h2>

        <div style={{ marginTop: 28, borderTop: '1px solid var(--paper-300)' }}>
          {CL_FAQ.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--paper-300)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} 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' }}>{it.q}</div>
                <div style={{ color: 'var(--ink-500)', transform: open === i ? '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 === i ? 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: 720 }}>
                  {it.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── final CTA · overlay with cleared workstation photo behind scrim
function ClFinalCTA() {
  return (
    <section style={{ position: 'relative', borderBottom: '1px solid var(--ink-800)', overflow: 'hidden' }}>
      <PhotoSlot
        variant="overlay"
        kind="cleared · workstation"
        dims="2400 × 1200"
        subject="The cleared workstation from the evidence photo above, reframed wider. Keycard reader, badge lanyard, two monitors. No faces. Used as the closing image of the clearance page."
        treatment="Documentary editorial. Wide-mid shot. Slight green-yellow institutional cast. Photo runs as a section background behind a 92% ink-900 scrim with a faint verdigris tint at the edges."
        scrim="linear-gradient(180deg, rgba(22,20,15,.91) 0%, rgba(31,74,63,.20) 50%, rgba(22,20,15,.94) 100%)"
      >
        <div style={{ padding: '120px 24px', color: 'var(--paper-50)', textAlign: 'center' }}>
          <div style={{ maxWidth: 760, margin: '0 auto' }}>
            <h2 className="oiq-display" style={{
              fontSize: 56, letterSpacing: '-0.03em', fontWeight: 500,
              color: 'var(--paper-50)', margin: 0, lineHeight: 1.02,
            }}>
              Run a cleared onboarding this week.
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(246,242,230,.74)', lineHeight: 1.55, marginTop: 16, marginBottom: 0 }}>
              Trial includes the full clearance track. If you want a govcon-specific demo with
              sponsor and DD-254 fixtures preloaded, we run those on Tuesdays and Thursdays.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, 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 govcon 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 Clearance({ 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} />
      <ClearanceHero />
      <WhoBand />
      <TrackDiagram />
      <TierMatrix />
      <ClearanceTrackerSurface />
      <StructuralArgument />
      <SubFlows />
      <ClearanceEvidencePhoto />
      <ComplianceBand />
      <ClFAQ />
      <ClFinalCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { Clearance });
