// why.jsx — OnboardIQ /why-onboardiq
// Argument-first page. Long-form authored prose in 6 named beats, with
// margin pull-quotes on desktop and one product-surface embed (audit log)
// pinned to Beat 5.

const WHY_MAX_W = 1180;
const BEAT_MAX_W = 580;

// ─── hero ─────────────────────────────────────────────────────
function WhyHero() {
  return (
    <section style={{ padding: '88px 24px 56px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: WHY_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: 22 }}>
          <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' }}>
            why onboardiq · the argument
          </span>
        </div>

        <h1 className="oiq-display" style={{
          fontSize: 64, lineHeight: 0.98, letterSpacing: '-0.035em',
          fontWeight: 500, color: 'var(--ink-900)',
          margin: 0, maxWidth: 920, textWrap: 'balance',
        }}>
          Six beats. Read them. Decide whether the eleven days are worth running properly.
        </h1>

        <p style={{
          fontSize: 17.5, lineHeight: 1.55, color: 'var(--ink-700)',
          maxWidth: 680, marginTop: 28, marginBottom: 0, letterSpacing: '-0.005em',
        }}>
          This page is the argument, written out. No feature grid, no checkmark column, no card row.
          If you finish it and you still think a Drive folder is fine, we did not have a buyer here.
        </p>

        <div className="oiq-mono" style={{
          marginTop: 36, paddingTop: 18, borderTop: '1px solid var(--paper-300)',
          display: 'flex', gap: 24, flexWrap: 'wrap',
          fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase',
        }}>
          <span>01 · the eleven days are real</span>
          <span>02 · generic hris is a category, not a competitor</span>
          <span>03 · clearance is structural, not a feature</span>
          <span>04 · per-onboarding is the honest unit</span>
          <span>05 · audit is the second buyer</span>
          <span>06 · built by an operator</span>
        </div>
      </div>
    </section>
  );
}

// ─── Beat layout component ───────────────────────────────────
// Two-column on desktop: body left, margin pull-quote right.
// Children pass: { n, title, body (paragraphs[]), pull }
function Beat({ n, title, body, pull, children, last }) {
  return (
    <section style={{
      padding: '72px 24px',
      borderBottom: last ? 'none' : '1px solid var(--paper-300)',
    }}>
      <div style={{ maxWidth: WHY_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 620px) minmax(0, 260px)', gap: 56, alignItems: 'start' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14 }}>
              <span className="oiq-mono" style={{ fontSize: 11.5, color: 'var(--ink-500)', letterSpacing: '0.1em' }}>BEAT {n}</span>
              <span style={{ height: 1, background: 'var(--paper-400)', flex: 1, alignSelf: 'center' }} />
            </div>

            <h2 className="oiq-display" style={{
              fontSize: 36, letterSpacing: '-0.025em', fontWeight: 500,
              color: 'var(--ink-900)', margin: 0, lineHeight: 1.06, maxWidth: BEAT_MAX_W,
            }}>
              {title}
            </h2>

            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
              {body.map((p, i) => (
                <p key={i} style={{
                  fontSize: 17, lineHeight: 1.55, color: 'var(--ink-800)',
                  letterSpacing: '-0.005em', margin: 0, textWrap: 'pretty', maxWidth: BEAT_MAX_W,
                }}>
                  {p}
                </p>
              ))}
            </div>

            {children}
          </div>

          {/* Margin pull-quote */}
          {pull && (
            <aside style={{
              position: 'sticky', top: 80,
              borderLeft: '2px solid var(--accent-500)',
              paddingLeft: 16,
              marginTop: 60,
            }}>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>
                pull · beat {n}
              </div>
              <blockquote style={{
                margin: 0, fontFamily: 'var(--mono)', fontSize: 13, lineHeight: 1.55,
                color: 'var(--ink-900)', letterSpacing: '0.01em', fontWeight: 500,
              }}>
                "{pull}"
              </blockquote>
            </aside>
          )}
        </div>
      </div>
    </section>
  );
}

// ─── audit log vignette (Beat 5) ──────────────────────────
const WHY_ACTIVITY = [
  { t: "09:42 · 2024-03-11", actor: "T. Bramwell",  verb: "countersigned", obj: "I-9 Section 2 · Daniel Okafor",            chain: "0x7a1f…c402" },
  { t: "09:31 · 2024-03-11", actor: "system",       verb: "ran",           obj: "E-Verify case · cleared in 12s",            chain: "0x7a1e…b8e1" },
  { t: "09:18 · 2024-03-11", actor: "D. Okafor",    verb: "uploaded",      obj: "I-9 Section 1 + passport · OCR verified",   chain: "0x7a1d…9c10" },
  { t: "08:42 · 2024-03-11", actor: "P. Subramanian", verb: "signed",      obj: "NDA v2024.02 · RFC 3161 timestamped",       chain: "0x7a1b…21a9" },
  { t: "08:21 · 2024-03-11", actor: "audit",        verb: "rotated",       obj: "hash-chain checkpoint · 14 events sealed",  chain: "0x7a1a…ff80" },
  { t: "23:01 · 2024-03-10", actor: "system",       verb: "archived",      obj: "yesterday's chain · 217 events · WORM",     chain: "0x7a19…40d3" },
];

function AuditLogVignette() {
  return (
    <div style={{
      marginTop: 28,
      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: 10,
        padding: '10px 14px',
        background: 'var(--paper-100)',
        borderBottom: '1px solid var(--paper-300)',
      }}>
        <Icon name="audit" size={14} />
        <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 12.5, color: 'var(--ink-900)' }}>Audit log</span>
        <span className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.04em' }}>
          /app/compliance/audit-log · scope · Daniel Okafor · onboarding ob_82h11k
        </span>
        <span style={{ flex: 1 }} />
        <Pill kind="success" dot mono>chain verified</Pill>
      </div>
      <div>
        {WHY_ACTIVITY.map((a, i) => (
          <div key={i} style={{
            padding: '10px 14px',
            display: 'grid', gridTemplateColumns: '160px 1fr',
            gap: 14,
            borderBottom: i === WHY_ACTIVITY.length - 1 ? 'none' : '1px solid var(--paper-200)',
          }}>
            <span className="oiq-mono oiq-tabular" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{a.t}</span>
            <div>
              <div style={{ fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.4 }}>
                <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>{a.actor}</span>{' '}
                <span style={{ color: 'var(--ink-500)' }}>{a.verb}</span>{' '}
                <span style={{ color: 'var(--ink-900)' }}>{a.obj}</span>
              </div>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', marginTop: 2 }}>prev · {a.chain}</div>
            </div>
          </div>
        ))}
      </div>
      <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)' }}>
          replicated to write-once storage · last verification 12 min ago · chain length 14,328
        </span>
      </div>
    </div>
  );
}

// ─── photo slot for Beat 1 ─────────────────────────────────
function WhyDocPhoto() {
  return (
    <div style={{ marginTop: 28 }}>
      <PhotoSlot
        kind="argument · document"
        aspect="16/10"
        src="/photos/forms-stack.jpg"
        alt="Stack of tax forms and paperwork on a white desk with a calculator, hand at edge, no face"
        objectPosition="center 40%"
        subject="A real onboarding folder on a desk: manila folder, paper-clipped I-9, state withholding form, a printed offer letter with a signed third page visible. Tight overhead crop. Pen and a coffee ring on the table edge, no laptop, no posed hand."
        treatment="Documentary editorial. Available light, slight warm cast. The artifacts do the storytelling. Reads as the thing OnboardIQ replaces, not the thing it sells."
        dims="2000 × 1250"
      />
    </div>
  );
}

// ─── final CTA ─────────────────────────────────────────────
function WhyFinalCTA() {
  return (
    <section style={{ padding: '96px 24px', textAlign: 'center', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: 720, margin: '0 auto' }}>
        <div className="oiq-eyebrow" style={{ marginBottom: 16 }}>If the argument lands</div>
        <h2 className="oiq-display" style={{
          fontSize: 48, letterSpacing: '-0.03em', fontWeight: 500,
          color: 'var(--ink-900)', margin: 0, lineHeight: 1.02,
        }}>
          Run a real onboarding this week.
        </h2>
        <div style={{ display: 'flex', gap: 12, marginTop: 32, justifyContent: 'center' }}>
          <Btn kind="primary" size="lg">Start free trial</Btn>
          <Btn kind="secondary" size="lg">Book a demo</Btn>
        </div>
        <div className="oiq-mono" style={{ fontSize: 11.5, color: 'var(--ink-500)', marginTop: 16, letterSpacing: '0.02em' }}>
          No credit card. 14-day trial. Real onboardings, not a sandbox.
        </div>
        <div style={{ marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--paper-300)', display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="/pricing" style={{ fontSize: 13, color: 'var(--ink-700)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>See the prices, calculator, FAQ</a>
          <a href="/features/clearance-onboarding" style={{ fontSize: 13, color: 'var(--ink-700)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>Read the clearance track in depth</a>
          <a href="/compare/rippling" style={{ fontSize: 13, color: 'var(--ink-700)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>Side-by-side with Rippling</a>
        </div>
      </div>
    </section>
  );
}

// ─── assembly ──────────────────────────────────────────────
function Why({ 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} />

      <WhyHero />

      <Beat
        n="01"
        title="The eleven days are real."
        body={[
          "From the day someone signs an offer to the day they can actually do the work, forty to sixty discrete things happen. Most are not interesting in isolation: a copy of a driver's license, a state withholding form, an emergency contact, a Slack invite, a laptop request, an acknowledgement that the handbook was read.",
          "In aggregate they take eleven days at a small business, and they fail in three predictable shapes. They sit in an inbox waiting for a countersignature nobody asked for. They are scattered across a Drive folder where the I-9 is filed next to a Christmas-party flyer. Or they get pushed into an HRIS that was not designed to run them, and quietly drops the contractor branch on the floor.",
        ]}
        pull="Forty to sixty discrete things, eleven days, three predictable shapes of failure."
      >
        <WhyDocPhoto />
      </Beat>

      <Beat
        n="02"
        title="Generic HRIS is a category, not a competitor."
        body={[
          "BambooHR keeps HR records. Gusto runs payroll and benefits. Rippling does both of those and IT provisioning. These are real, capable products for what they are for, and we are not going to pretend otherwise.",
          "What none of them was designed for is the moment of transition from candidate to employee, with its peculiar density of legal artifacts, identity verifications, and time-pressured countersignatures. Onboarding inside a generic HRIS is a feature stapled to the front of the actual product, which is why it forces a 1099 contractor through an employee flow and treats a cleared engineer like a marketing manager.",
          "Use one of these for the work it was designed for. Use OnboardIQ for the eleven days.",
        ]}
        pull="Onboarding inside a generic HRIS is a feature stapled to the front of the actual product."
      />

      <Beat
        n="03"
        title="Clearance is the structural difference, not a feature."
        body={[
          "In a checkbox-driven HRIS, 'has security clearance' is a column on a personnel record. In reality, a cleared hire is not a checkbox; it is a parallel architecture.",
          "The SF-86 prep packet takes longer than the I-9. Tier-1 trust investigations look nothing like tier-5 SCI investigations, and treating them the same will eventually fail an audit. Continuous-evaluation programs require a calendar nobody else's HRIS knows how to keep. The polygraph window has its own scheduling logic. The reinvestigation reminder is a legal obligation.",
          "A system that retrofits these as features will always be a system that does cleared work by accident. OnboardIQ treats clearance as the starting point for an entire track, not a flag on a generic flow.",
        ]}
        pull="A cleared hire is not a checkbox. It is a parallel architecture."
      />

      <Beat
        n="04"
        title="Per-onboarding is the honest unit."
        body={[
          "The value of an onboarding lands once: on the day the person is ready to work. It does not accrue monthly the way benefits administration does. It is not consumed by the hour the way support is.",
          "A bill that ignores that shape charges you for the HR coordinator who logs in twice a year, the contractor who finished in March, the seasonal hire at the same rate as the engineering director. Per-onboarding pricing aligns the bill with the artifact you actually bought.",
          "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. The number you get at the end of the year matches the number of new people who walked through the door.",
        ]}
        pull="The bill should match the artifact. The artifact is a person, ready to work."
      />

      <Beat
        n="05"
        title="Audit is the second buyer."
        body={[
          "The HR director who buys OnboardIQ is not the person who ultimately validates it. Three years from now, a contracting officer is going to ask why the I-9 retention rule was followed on a person who left in 2024. Or DCAA is going to ask for the full chain of custody on a subcontractor's documents from a 2023 award. Or an external auditor is going to need everything, scoped to one employee, in a single ZIP, with a manifest that proves nothing was tampered with.",
          "OnboardIQ writes that proof as it goes. Every state change is an event in an append-only log. Each event includes the hash of the previous one. The whole chain is verifiable, replicated to write-once storage, and exportable on demand.",
          "The audit certificate the customer downloads at the end of an onboarding is not a PDF that says 'signed.' It is a cryptographic artifact.",
        ]}
        pull="Not a PDF that says 'signed.' A cryptographic artifact."
      >
        <AuditLogVignette />
      </Beat>

      <Beat
        n="06"
        title="Built by an operator who does the work."
        body={[
          "OnboardIQ is built by IT Custom Solution, a New York government contractor that runs four other products across the same customer journey: GovBid AI, OpsTicket, DeliverOps, ShieldDesk, VaultGuard.",
          "We built OnboardIQ because every contract we won eventually ran into the same eleven days, and we got tired of running them through a Drive folder. The product is opinionated because we use it. It is rigorous because we have to be.",
        ]}
        pull="Every contract we won eventually ran into the same eleven days."
        last
      >
        <div style={{ marginTop: 22 }}>
          <a href="/about" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 13.5, color: 'var(--ink-900)', textDecoration: 'none',
            padding: '8px 14px', border: '1px solid var(--ink-900)', borderRadius: 'var(--r-2)',
          }}>
            Read the founder's letter <Icon name="chevron-r" size={12} />
          </a>
        </div>
      </Beat>

      <WhyFinalCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { Why });