// marketing-home.jsx — OnboardIQ / (home)

// ─── shared bits ─────────────────────────────────────────────────
const MAX_W = 1180;

// PhotoSlot · system component for photography we have not shot yet.
// Three variants, all carrying the same brief / dims / kind metadata so when
// we commission a photographer the prompt is already written.
//
//   variant="contained"  Default. Card-shaped slot with verdigris header
//                        strip + hatched fill. Sits inline with body copy.
//   variant="full-bleed" Edge-to-edge band. Photo fills width. Thin caption
//                        strip BELOW the photo. Use for atmospheric shots.
//   variant="overlay"    Photo as section background with scrim. Children
//                        render on top. Corner tag carries the metadata.
//
// All three variants render at scroll speed and reveal the full subject
// brief through a click-disclosure.
function PhotoSlot({
  variant = "contained",
  aspect = "4/3",
  height,
  subject,
  treatment,
  dims,
  kind = "photo",
  tone = "light",
  compact = false,
  defaultOpen = false,
  scrim,
  children,
  src,
  alt,
  objectPosition = "center center",
}) {
  const [open, setOpen] = React.useState(defaultOpen);
  const filled = Boolean(src);
  const stripText = `PHOTO · ${variant === "contained" ? "" : variant.toUpperCase() + " · "}${kind.toUpperCase()} · ${filled ? "FILLED" : "PENDING"}`;

  // ─── OVERLAY ──────────────────────────────────────────────
  if (variant === "overlay") {
    const scrimBg = scrim || 'linear-gradient(180deg, rgba(22,20,15,.92) 0%, rgba(22,20,15,.95) 100%)';
    return (
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        {filled ? (
          <img src={src} alt={alt || subject} style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition,
          }} />
        ) : (
          <React.Fragment>
            {/* Hatch fill representing the unshot photo */}
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: `repeating-linear-gradient(-45deg,
                transparent 0 10px,
                var(--accent-500) 10px 12px)`,
              opacity: 0.6,
            }} />
            {/* Soft solid base behind hatch (so the hatch reads on a neutral) */}
            <div style={{ position: 'absolute', inset: 0, background: 'var(--paper-100)', zIndex: -1 }} />
          </React.Fragment>
        )}
        {/* Scrim */}
        <div style={{ position: 'absolute', inset: 0, background: scrimBg }} />
        {/* Children on top */}
        <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
        {/* Corner tag · bottom-right */}
        <PhotoCornerTag
          stripText={stripText} dims={dims}
          subject={subject} treatment={treatment}
          open={open} setOpen={setOpen}
        />
      </div>
    );
  }

  // ─── FULL-BLEED ──────────────────────────────────────────
  if (variant === "full-bleed") {
    return (
      <div style={{ width: '100%' }}>
        {/* Photo area */}
        <div style={{
          position: 'relative',
          width: '100%',
          aspectRatio: height ? undefined : aspect,
          height: height,
          background: 'var(--paper-100)',
          overflow: 'hidden',
          borderTop: '1.5px solid var(--accent-500)',
          borderBottom: '1.5px solid var(--accent-500)',
        }}>
          {filled ? (
            <img src={src} alt={alt || subject} style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover', objectPosition,
            }} />
          ) : (
            <React.Fragment>
              {/* Hatch */}
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: `repeating-linear-gradient(-45deg,
                  transparent 0 12px,
                  var(--accent-500) 12px 14px)`,
                opacity: 0.5,
              }} />
              {/* Soften */}
              <div style={{ position: 'absolute', inset: 0, background: 'rgba(251,249,244,.78)' }} />
              {/* Center kind glyph for visual anchor */}
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                pointerEvents: 'none',
              }}>
                <div className="oiq-mono" style={{
                  fontSize: 32, fontWeight: 600, letterSpacing: '0.16em',
                  color: 'var(--ink-900)', opacity: 0.18,
                  textTransform: 'uppercase',
                }}>
                  {kind}
                </div>
              </div>
            </React.Fragment>
          )}
          <CornerMarks color="var(--accent-500)" />
        </div>
        {/* Caption strip below */}
        <PhotoCaptionStrip
          stripText={stripText} dims={dims}
          subject={subject} treatment={treatment}
          open={open} setOpen={setOpen}
        />
      </div>
    );
  }

  // ─── CONTAINED (default) ─────────────────────────────────
  const isDark = tone === "dark";
  const stripBg   = 'var(--accent-500)';
  const stripFg   = 'var(--ink-900)';
  const stripSub  = 'rgba(22,20,15,.55)';
  const border    = 'var(--accent-500)';
  const fillBg    = isDark ? 'rgba(246,242,230,.04)' : 'var(--paper-50)';
  const cardBg    = isDark ? 'rgba(22,20,15,.78)'    : 'var(--paper-50)';
  const cardBd    = isDark ? 'rgba(246,242,230,.16)' : 'var(--paper-300)';
  const briefLbl  = isDark ? 'rgba(246,242,230,.55)' : 'var(--ink-500)';
  const briefVal  = isDark ? 'var(--paper-50)'       : 'var(--ink-900)';
  const briefSub  = isDark ? 'rgba(246,242,230,.74)' : 'var(--ink-700)';
  const discBg    = isDark ? 'rgba(22,20,15,.65)' : 'var(--paper-50)';

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      aspectRatio: height ? undefined : aspect,
      height: height,
      background: fillBg,
      border: `1.5px solid ${border}`,
      borderRadius: 'var(--r-2)',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
    }}>
      {/* Header strip · always visible */}
      <div style={{
        flex: '0 0 auto',
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '0 10px',
        height: compact ? 22 : 26,
        background: stripBg, color: stripFg,
        fontFamily: 'var(--mono)', fontSize: compact ? 9 : 9.75,
        letterSpacing: '0.12em', textTransform: 'uppercase',
        fontWeight: 600,
      }}>
        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{stripText}</span>
        {dims && (
          <span style={{
            color: stripSub,
            fontSize: compact ? 8.5 : 9, letterSpacing: '0.06em',
            padding: '1px 6px',
            background: 'rgba(22,20,15,.06)', borderRadius: 2,
            whiteSpace: 'nowrap',
          }}>{dims}</span>
        )}
      </div>

      {/* Hatch fill OR real image */}
      <div style={{
        position: 'relative', flex: 1, minHeight: 0,
        backgroundImage: filled ? 'none' : `repeating-linear-gradient(-45deg,
          transparent 0 6px,
          var(--accent-500) 6px 7px)`,
        backgroundColor: fillBg,
        overflow: 'hidden',
      }}>
        {filled ? (
          <img src={src} alt={alt || subject} style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover', objectPosition,
          }} />
        ) : (
          <div style={{
            position: 'absolute', inset: 0,
            background: isDark ? 'rgba(20,18,14,.85)' : 'rgba(251,249,244,.88)',
            pointerEvents: 'none',
          }} />
        )}
        <CornerMarks color={border} />

        {!compact && (
          <div style={{
            position: 'absolute', bottom: 8, left: 8, right: 8,
            zIndex: 1, display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-start',
          }}>
            {open && (
              <div style={{
                background: cardBg,
                border: `1px solid ${cardBd}`,
                padding: '8px 10px',
                borderRadius: 'var(--r-1)',
                width: '100%',
                backdropFilter: isDark ? 'blur(8px)' : 'blur(4px)',
                WebkitBackdropFilter: isDark ? 'blur(8px)' : 'blur(4px)',
              }}>
                <div className="oiq-mono" style={{ fontSize: 9, color: briefLbl, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 3 }}>subject</div>
                <div style={{ fontSize: 11.5, color: briefVal, lineHeight: 1.4 }}>{subject}</div>
                {treatment && (
                  <React.Fragment>
                    <div className="oiq-mono" style={{ fontSize: 9, color: briefLbl, letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 8, marginBottom: 3 }}>treatment</div>
                    <div style={{ fontSize: 11, color: briefSub, lineHeight: 1.4 }}>{treatment}</div>
                  </React.Fragment>
                )}
              </div>
            )}
            <button
              type="button"
              onClick={() => setOpen(o => !o)}
              style={{
                all: 'unset', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '4px 8px',
                background: discBg,
                border: `1px solid ${cardBd}`,
                borderRadius: 'var(--r-1)',
                fontFamily: 'var(--mono)', fontSize: 10,
                color: isDark ? 'rgba(246,242,230,.85)' : 'var(--ink-700)',
                letterSpacing: '0.04em',
                backdropFilter: 'blur(4px)',
                WebkitBackdropFilter: 'blur(4px)',
              }}
            >
              <span style={{ display: 'inline-block', transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 180ms' }}>▼</span>
              <span>{open ? 'hide brief' : 'subject brief'}</span>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// Caption strip · sits below a full-bleed photo
function PhotoCaptionStrip({ stripText, dims, subject, treatment, open, setOpen }) {
  return (
    <div style={{
      borderBottom: '1px solid var(--paper-300)',
      background: 'var(--paper-50)',
    }}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        padding: '10px 24px',
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <span style={{
          padding: '3px 10px',
          background: 'var(--accent-500)', color: 'var(--ink-900)',
          fontFamily: 'var(--mono)', fontSize: 9.5, fontWeight: 700,
          letterSpacing: '0.12em',
        }}>{stripText}</span>
        {dims && (
          <span className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.06em' }}>
            {dims}
          </span>
        )}
        <span style={{ flex: 1 }} />
        <button
          type="button"
          onClick={() => setOpen(o => !o)}
          style={{
            all: 'unset', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '4px 10px',
            background: 'var(--paper-50)',
            border: '1px solid var(--paper-300)',
            borderRadius: 'var(--r-1)',
            fontFamily: 'var(--mono)', fontSize: 10,
            color: 'var(--ink-700)', letterSpacing: '0.04em',
          }}
        >
          <span style={{ display: 'inline-block', transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 180ms' }}>▼</span>
          <span>{open ? 'hide brief' : 'subject brief'}</span>
        </button>
      </div>
      {open && (
        <div style={{
          maxWidth: 1180, margin: '0 auto',
          padding: '0 24px 14px',
          display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16,
        }}>
          <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>subject</div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-900)', lineHeight: 1.5, maxWidth: 880 }}>{subject}</div>
          {treatment && (
            <React.Fragment>
              <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>treatment</div>
              <div style={{ fontSize: 13, color: 'var(--ink-700)', lineHeight: 1.5, maxWidth: 880 }}>{treatment}</div>
            </React.Fragment>
          )}
        </div>
      )}
    </div>
  );
}

// Corner tag · sits in bottom-right of overlay variant
function PhotoCornerTag({ stripText, dims, subject, treatment, open, setOpen }) {
  return (
    <div style={{
      position: 'absolute', bottom: 16, right: 16, zIndex: 2,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6,
      maxWidth: 'calc(100% - 32px)',
    }}>
      {open && (
        <div style={{
          background: 'rgba(22,20,15,.82)',
          border: '1px solid rgba(246,242,230,.16)',
          padding: '10px 12px',
          borderRadius: 'var(--r-1)',
          maxWidth: 360,
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
        }}>
          <div className="oiq-mono" style={{ fontSize: 9, color: 'rgba(246,242,230,.55)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 3 }}>subject</div>
          <div style={{ fontSize: 11.5, color: 'var(--paper-50)', lineHeight: 1.45 }}>{subject}</div>
          {treatment && (
            <React.Fragment>
              <div className="oiq-mono" style={{ fontSize: 9, color: 'rgba(246,242,230,.55)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 8, marginBottom: 3 }}>treatment</div>
              <div style={{ fontSize: 11, color: 'rgba(246,242,230,.74)', lineHeight: 1.45 }}>{treatment}</div>
            </React.Fragment>
          )}
        </div>
      )}
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        style={{
          all: 'unset', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '4px 10px',
          background: 'var(--accent-500)', color: 'var(--ink-900)',
          fontFamily: 'var(--mono)', fontSize: 9.5, fontWeight: 700,
          letterSpacing: '0.12em',
        }}
      >
        <span>{stripText}</span>
        {dims && <span style={{ opacity: 0.6, fontWeight: 500 }}>{dims}</span>}
        <span style={{ display: 'inline-block', transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 180ms' }}>▼</span>
      </button>
    </div>
  );
}

function CornerMarks({ color }) {
  const c = color || 'var(--paper-400)';
  const s = { position: 'absolute', width: 12, height: 12, border: `1px solid ${c}`, pointerEvents: 'none' };
  return (
    <React.Fragment>
      <span style={{ ...s, top: 6, left: 6, borderRight: 'none', borderBottom: 'none' }} />
      <span style={{ ...s, top: 6, right: 6, borderLeft: 'none', borderBottom: 'none' }} />
      <span style={{ ...s, bottom: 6, left: 6, borderRight: 'none', borderTop: 'none' }} />
      <span style={{ ...s, bottom: 6, right: 6, borderLeft: 'none', borderTop: 'none' }} />
    </React.Fragment>
  );
}

function Nav({ tweaks, setTweak }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(251, 249, 244, 0.78)',
      backdropFilter: 'blur(12px) saturate(160%)',
      WebkitBackdropFilter: 'blur(12px) saturate(160%)',
      borderBottom: '1px solid var(--paper-300)',
    }}>
      <div style={{
        maxWidth: MAX_W, margin: '0 auto',
        padding: '14px 24px', display: 'flex', alignItems: 'center', gap: 28,
      }}>
        <Lockup size={20} color="var(--ink-900)" />
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, flex: 1, marginLeft: 18 }}>
          {[
            { l: "Why OnboardIQ", h: "/why-onboardiq" },
            { l: "Features", h: "/features", caret: true },
            { l: "Industries", h: "/industries", caret: true },
            { l: "Pricing", h: "/pricing" },
            { l: "Customers", h: "/customers" },
            { l: "Compare", h: "/compare", caret: true },
          ].map((it) => (
            <a key={it.l} href={it.h} style={{
              fontSize: 13.5, color: 'var(--ink-700)', textDecoration: 'none',
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              {it.l}
              {it.caret && <Icon name="chevron-d" size={11} />}
            </a>
          ))}
        </div>
        <a href="/login" style={{ fontSize: 13.5, color: 'var(--ink-700)', textDecoration: 'none' }}>Sign in</a>
        <Btn kind="primary" size="sm">Start free trial</Btn>
      </div>
    </nav>
  );
}

// ─── hero ────────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{ padding: '72px 24px 40px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 64, alignItems: 'start' }}>

          {/* Left: headline + subhead + CTAs */}
          <div>
            <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' }}>
                onboarding · the eleven days that decide
              </span>
            </div>

            <h1 className="oiq-display" style={{
              fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.035em',
              fontWeight: 500, color: 'var(--ink-900)',
              margin: 0,
              textWrap: 'balance',
            }}>
              Offer accepted<br/>is not <span style={{ color: 'var(--accent-700)' }}>Day&nbsp;1</span>.
            </h1>

            <p style={{
              fontSize: 19, lineHeight: 1.5, color: 'var(--ink-700)',
              maxWidth: 540, marginTop: 28, marginBottom: 0,
              letterSpacing: '-0.005em',
            }}>
              OnboardIQ runs the eleven days in between: documents, signatures, I-9 with E-Verify,
              clearance prep, equipment, system access. Audit-ready the moment anyone asks.
            </p>

            <div style={{ display: 'flex', gap: 12, marginTop: 32, alignItems: '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>

          {/* Right: spec card · the artifact metaphor */}
          <SpecCard />
        </div>
      </div>
    </section>
  );
}

function SpecCard() {
  // A "document" framing on the right: not stock illustration, not a floating UI panel.
  // It's a recognizable artifact: an onboarding spec sheet, set in mono.
  return (
    <div style={{
      border: '1px solid var(--paper-300)',
      borderRadius: 'var(--r-2)',
      background: 'var(--paper-50)',
      boxShadow: 'var(--shadow-2)',
      overflow: 'hidden',
      position: 'relative',
    }}>
      {/* paper header strip */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 16px',
        background: 'var(--paper-100)',
        borderBottom: '1px solid var(--paper-300)',
      }}>
        <Icon name="documents" size={14} />
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-700)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          ob_spec · 2026-05 · daniel.okafor
        </span>
        <span style={{ flex: 1 }} />
        <Pill kind="success" dot mono>day-1 ready</Pill>
      </div>

      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div className="oiq-eyebrow" style={{ marginBottom: 4 }}>candidate</div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 22, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.015em' }}>Daniel Okafor</div>
          <div className="oiq-mono" style={{ fontSize: 11.5, color: 'var(--ink-600)' }}>Cloud Engineer · Eng · Arlington VA · W-2 · TS interim</div>
        </div>

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

        <SpecRow label="01" type="doc"    title="Documents · 6 of 6 received"     when="day 1 · 09:18" status="success" />
        <SpecRow label="02" type="sig"    title="Offer letter countersigned"      when="day 1 · 11:04" status="success" />
        <SpecRow label="03" type="form"   title="I-9 Section 1 submitted"         when="day 1 · 16:22" status="success" />
        <SpecRow label="04" type="ev"     title="E-Verify case opened · cleared"  when="day 2 · 09:11" status="success" />
        <SpecRow label="05" type="cl"     title="Interim clearance prep packet"   when="day 3"          status="warn"    note="awaiting your countersignature" />
        <SpecRow label="06" type="eq"     title="Laptop kit (M4 + monitor)"       when="day 5"          status="info"    note="FedEx pickup window today" />
        <SpecRow label="07" type="access" title="Okta, GitHub, OpsTicket, Slack"  when="day 6"          status="neutral" />
        <SpecRow label="08" type="train"  title="CMMC v2.3 acknowledged"          when="day 8"          status="neutral" />
        <SpecRow label="09" type="check"  title="30/60/90 plan with manager"      when="day 11"         status="neutral" last />

        <div style={{ borderTop: '1px dashed var(--paper-300)', paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            hash-chain checkpoint · 0x7a1f…c402
          </div>
          <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-600)' }}>
            elapsed · 11d 02h
          </div>
        </div>
      </div>
    </div>
  );
}

function SpecRow({ label, type, title, when, status, note, last }) {
  const dotColor = status === "success" ? "var(--green-500)" :
                   status === "warn"    ? "var(--accent-600)" :
                   status === "info"    ? "var(--blue-500)"  :
                   "var(--ink-400)";
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '28px 16px 1fr auto', gap: 10, alignItems: 'center', paddingBottom: last ? 0 : 0 }}>
      <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{label}</span>
      <span style={{ color: 'var(--ink-700)', display: 'flex' }}><StepIcon type={type} /></span>
      <div>
        <div style={{ fontSize: 13.5, color: 'var(--ink-900)' }}>{title}</div>
        {note && <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2 }}>{note}</div>}
      </div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-600)' }}>{when}</span>
        <span className="oiq-dot" style={{ background: dotColor }} />
      </div>
    </div>
  );
}

// ─── argument · authored prose ──────────────────────────────────
function Argument() {
  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: 26, lineHeight: 1.42, letterSpacing: '-0.015em',
          color: 'var(--ink-900)', margin: 0, textWrap: 'pretty',
        }}>
          A new hire is not a calendar event. Between the day someone signs an offer and the day they
          can actually do the work, a small business handles forty to sixty discrete artifacts: forms,
          signatures, eligibility verifications, training acknowledgements, equipment, system access.
          Done in a Google Drive folder, this loses days and breaks at audit. Done in a generic HRIS,
          it forces a contractor through an employee flow and a cleared engineer through a flow that
          knows nothing about clearance. OnboardIQ is built for the middle: opinionated enough to ship
          a real onboarding on day two, rigorous enough to survive a DCAA review three years later.
        </p>
      </div>
    </section>
  );
}

// ─── real product surface ───────────────────────────────────────
function ProductSurface() {
  return (
    <section style={{ padding: '64px 24px 88px', background: 'var(--paper-100)', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="oiq-eyebrow" style={{ marginBottom: 8 }}>The product · /app</div>
            <h2 className="oiq-display" style={{ fontSize: 44, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
              An operator's console, not a stat-card grid.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 14, marginBottom: 0 }}>
              The dashboard surfaces what owes your attention right now, who owes it, and the SLA on it.
              Compliance posture is a second-tier panel because rigor is monthly, not hourly.
            </p>
          </div>
          <a style={{ fontSize: 13, color: 'var(--ink-900)', display: 'inline-flex', alignItems: 'center', gap: 4, textDecoration: 'none', borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>
            Open a demo tenant <Icon name="chevron-r" size={12} />
          </a>
        </div>

        {/* Browser-window chrome around the live dashboard component */}
        <DashboardSurface />

        {/* Annotation strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 32 }}>
          <AnnotationItem
            n="01"
            title="Today's queue is the hero"
            body="What owes your attention, who owes it, and the SLA. Compliance posture is a second-tier panel because rigor is monthly, not hourly."
          />
          <AnnotationItem
            n="02"
            title="Ownership is categorical"
            body="Every action carries a label: on you, on IT, on the new hire, or on an external party (sponsor, vendor, agency). No more 'who's the bottleneck' meetings."
          />
          <AnnotationItem
            n="03"
            title="The audit trail is the product"
            body="Every state change is an event in an append-only hash-chained log. The audit certificate the customer downloads carries the verifiable hash."
          />
        </div>
      </div>
    </section>
  );
}

function DashboardSurface() {
  const tweaks = { accent: "verdigris", dark: false, whitelabel: "default", density: "compact" };
  return (
    <div style={{
      borderRadius: 'var(--r-3)',
      overflow: 'hidden',
      boxShadow: '0 24px 64px rgba(22,20,15,.10), 0 4px 12px rgba(22,20,15,.06)',
      border: '1px solid var(--paper-300)',
      background: 'var(--paper-50)',
    }}>
      {/* Chrome */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '10px 14px',
        background: 'var(--paper-200)',
        borderBottom: '1px solid var(--paper-300)',
      }}>
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: 'var(--ink-300)' }} />
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: 'var(--ink-300)' }} />
        <span style={{ width: 11, height: 11, borderRadius: '50%', background: 'var(--ink-300)' }} />
        <div style={{
          marginLeft: 14, padding: '4px 12px',
          background: 'var(--paper-50)', borderRadius: 'var(--r-2)',
          border: '1px solid var(--paper-300)',
          fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--ink-600)',
          letterSpacing: '0.04em',
        }}>
          meridian-fed.onboardiq.app/app
        </div>
      </div>
      {/* Scaled dashboard */}
      <div style={{ position: 'relative', height: 800, overflow: 'hidden', background: 'var(--paper-100)' }}>
        <div style={{
          width: 1500, height: 1000,
          transform: 'scale(0.755)',
          transformOrigin: 'top left',
        }}>
          <Dashboard tweaks={tweaks} />
        </div>
      </div>
    </div>
  );
}

function AnnotationItem({ n, title, body }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, borderTop: '2px solid var(--ink-900)', paddingTop: 14 }}>
      <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>{n}</span>
      <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.005em' }}>{title}</div>
      <div style={{ fontSize: 13.5, color: 'var(--ink-700)', lineHeight: 1.5 }}>{body}</div>
    </div>
  );
}

// ─── capability spine · typographic list, not bento ────────────
function CapabilitySpine() {
  const caps = [
    { n: "01", icon: "clearance", name: "Clearance-aware onboarding",
      body: "SF-86 prep, interim vs. final, tier-1 through tier-5 investigation tracking, polygraph reminders, continuous-evaluation calendar. Gated per position; invisible if you don't need it.",
      href: "/features/clearance-onboarding",
      photo: {
        kind: "capability · clearance",
        aspect: "4/3",
        subject: "Mid-shot of a cleared engineer at a SCIF-style workstation: keycard reader visible foreground, two monitors, no faces toward camera. Real federal-contractor office, not a Hollywood server-room cliché.",
        treatment: "Documentary, available light, slight green-yellow institutional cast left in. Crop tight; the keycard reader and badge lanyard do the storytelling, not the person.",
        dims: "1600 × 1200",
      },
    },
    { n: "02", icon: "branch", name: "Contractor, W-2, subcontractor flows",
      body: "Conditional branches that key on hire type, location, department, or clearance level. A 1099 in California gets a different flow than a W-2 in Virginia. The customer builds it visually, without code.",
      href: "/features/contractor-onboarding" },
    { n: "03", icon: "audit", name: "Audit-ready document vault",
      body: "Every artifact: versioned, tagged, retention-policied (I-9 follows its own legal rule), legal-hold-aware. Bulk export is one click and arrives with a cryptographic manifest.",
      href: "/features/document-vault" },
    { n: "04", icon: "signature", name: "E-signature with chain of custody",
      body: "Native envelopes, RFC 3161 timestamped, hash-chained into the audit log. The certificate of completion is a verifiable artifact, not a PDF that says 'signed'.",
      href: "/features/signatures" },
    { n: "05", icon: "shield", name: "I-9, E-Verify, state new-hire reporting",
      body: "Section 1 and Section 2 with the 3-business-day rule enforced. E-Verify case opened and resolved inline. State-by-state new-hire reporting deadlines surfaced before they slip.",
      href: "/features/compliance" },
    { n: "06", icon: "external", name: "White-label new-hire portal",
      body: "Customer brand, customer domain (onboarding.acme.com), customer sender. The new hire never knows OnboardIQ exists. For PEOs and MSPs reselling the platform, this is the whole product.",
      href: "/features/white-label",
      photo: {
        kind: "capability · white-label",
        aspect: "4/3",
        src: "/photos/phone-onboarding.jpg",
        alt: "Hands holding a phone mid-task, workspace blurred behind, no face visible",
        objectPosition: "center 35%",
        subject: "A new hire's hands on a phone, completing an onboarding form on a kitchen table or commuter train. Not the office, not a stock-photo cafe. Mid-process moment, screen detail recognizable but not legible.",
        treatment: "Documentary, slightly overexposed natural window light, warm. The phone screen is the subject; the person is anonymous from the elbow up. Vertical-friendly crop available.",
        dims: "1600 × 1200",
      },
    },
  ];
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: MAX_W, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>Six things, named specifically</div>
          <h2 className="oiq-display" style={{ fontSize: 44, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
            What's actually in the box.
          </h2>
        </div>

        <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {caps.map((c, i) => (
            <li key={c.n} style={{
              display: 'grid',
              gridTemplateColumns: c.photo ? '64px 36px 1fr 280px 160px' : '64px 36px 1fr 200px',
              gap: 24, alignItems: 'start',
              padding: '28px 0',
              borderTop: '1px solid var(--paper-300)',
              borderBottom: i === caps.length - 1 ? '1px solid var(--paper-300)' : 'none',
            }}>
              <div className="oiq-mono" style={{ fontSize: 12, color: 'var(--ink-500)', paddingTop: 4, letterSpacing: '0.08em' }}>{c.n}</div>
              <div style={{ paddingTop: 4, color: 'var(--ink-700)' }}>
                <Icon name={c.icon} size={22} stroke={1.7} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, maxWidth: 540 }}>
                <div style={{ fontSize: 22, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.015em' }}>{c.name}</div>
                <div style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5 }}>{c.body}</div>
              </div>
              {c.photo && (
                <div>
                  <PhotoSlot {...c.photo} />
                </div>
              )}
              <div style={{ paddingTop: 8, textAlign: 'right' }}>
                <a href={c.href} style={{
                  fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-900)',
                  letterSpacing: '0.04em', textDecoration: 'none',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  borderBottom: '1px solid var(--ink-300)', paddingBottom: 2,
                }}>
                  Deep-dive <Icon name="chevron-r" size={12} />
                </a>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ─── clearance wedge ───────────────────────────────────────────
function ClearanceWedge() {
  return (
    <section style={{
      position: 'relative',
      borderBottom: '1px solid var(--ink-800)',
      overflow: 'hidden',
    }}>
      <PhotoSlot
        variant="overlay"
        kind="clearance · wedge"
        dims="2400 × 1400"
        src="/photos/clearance-workstation.jpg"
        alt="Workstation with monitors mid-task, plant in foreground, documentary editorial"
        objectPosition="center 40%"
        subject="Mid-shot of a cleared engineer at a SCIF-style workstation: keycard reader visible foreground, two monitors with secure-network indicators, no faces toward camera. Real federal-contractor office, not a Hollywood server-room cliché. Subject of the shot is the badge lanyard."
        treatment="Documentary editorial. Available light, slight green-yellow institutional cast left in. Crop wide; the photo runs as a section background behind a 92% ink-900 scrim so the verdigris headline reads cleanly on top. Use the same frame on /features/clearance-onboarding and /industries/government-contractors."
        scrim="linear-gradient(180deg, rgba(22,20,15,.93) 0%, rgba(22,20,15,.96) 60%, rgba(22,20,15,.94) 100%)"
      >
        <div style={{ padding: '96px 24px', color: 'var(--paper-50)' }}>
          <div style={{ maxWidth: MAX_W, margin: '0 auto', position: 'relative' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'start' }}>
              <div>
                <div className="oiq-eyebrow" style={{ color: 'var(--accent-400)', marginBottom: 14 }}>The govcon wedge</div>
                <h2 className="oiq-display" style={{
                  fontSize: 52, letterSpacing: '-0.03em', fontWeight: 500,
                  color: 'var(--paper-50)', margin: 0, lineHeight: 1.02,
                }}>
                  Built for the contracts<br/>nobody else's HRIS handles.
                </h2>
                <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(246,242,230,.74)', maxWidth: 520, marginTop: 24, marginBottom: 0 }}>
                  When a position is marked as requiring a clearance, OnboardIQ unlocks a track no
                  generic HRIS ships: SF-86 prep, interim vs. final, tier-1 through tier-5 investigation
                  tracking, adjudication notes, polygraph reminders, and a continuous-evaluation calendar
                  that does not forget the reinvestigation window.
                </p>

                <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
                  <a href="/features/clearance-onboarding" 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,
                  }}>
                    See the clearance track <Icon name="chevron-r" size={14} />
                  </a>
                  <a href="/industries/government-contractors" style={{
                    fontFamily: 'var(--sans)', fontSize: 13.5, fontWeight: 500,
                    color: 'var(--paper-50)', padding: '10px 16px', borderRadius: 'var(--r-2)',
                    textDecoration: 'none', border: '1px solid rgba(246,242,230,.24)',
                  }}>
                    For government contractors
                  </a>
                </div>
              </div>

              {/* Spec-grid: shows the categorical features without falling into bento */}
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr',
                border: '1px solid rgba(246,242,230,.18)',
                borderRadius: 'var(--r-2)',
                overflow: 'hidden',
                background: 'rgba(22,20,15,.4)',
                backdropFilter: 'blur(2px)',
                WebkitBackdropFilter: 'blur(2px)',
              }}>
                <WedgeSpec label="SF-86" value="Prep checklist with .gov links" />
                <WedgeSpec label="Tiers" value="T1 · T2 · T3 · T4 · T5" />
                <WedgeSpec label="Status" value="Interim · final · adjudication" />
                <WedgeSpec label="Investigation" value="DCSA · OPM · agency-specific" />
                <WedgeSpec label="Polygraph" value="CI · FS · LSP scheduling" />
                <WedgeSpec label="CE program" value="Continuous evaluation calendar" />
                <WedgeSpec label="Reinvestigation" value="Tier-aware reminder schedule" />
                <WedgeSpec label="Position-of-trust" value="Public-trust designation tier" last />
                <WedgeSpec label="Sub flows" value="DD-254 + subcontractor packets" last />
                <WedgeSpec label="DCAA-ready" value="Audit export with manifest" last />
              </div>
            </div>
          </div>
        </div>
      </PhotoSlot>
    </section>
  );
}

function WedgeSpec({ label, value, last }) {
  return (
    <div style={{
      padding: '14px 16px',
      borderRight: '1px solid rgba(246,242,230,.10)',
      borderBottom: last ? '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: 4 }}>{label}</div>
      <div style={{ fontSize: 13, color: 'var(--paper-50)', lineHeight: 1.4 }}>{value}</div>
    </div>
  );
}

// ─── customer stories · honest placeholders ───────────────────
function CustomerStories() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36 }}>
          <div>
            <div className="oiq-eyebrow" style={{ marginBottom: 8 }}>Proof, pending</div>
            <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04, maxWidth: 540 }}>
              We are not running fake testimonials.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, maxWidth: 540, marginTop: 14, marginBottom: 0 }}>
              Customer stories will appear here when we have permission to publish them in full.
              No AI headshots. No grayscale logo strip of companies that have not signed off.
              If you want to be a launch customer with real attribution, write to us.
            </p>
          </div>
          <a href="mailto:hello@onboardiq.app" style={{ fontSize: 13, color: 'var(--ink-900)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>
            hello@onboardiq.app
          </a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          <StoryPlaceholder kind="Government contractor" subject="Mixed W-2 + sub flow · 80 to 250 employees" />
          <StoryPlaceholder kind="Regulated commercial"   subject="Healthcare or finance · I-9 + state reporting at scale" />
          <StoryPlaceholder kind="PEO / MSP"              subject="White-labeled across multiple end customers" />
        </div>
      </div>
    </section>
  );
}

function StoryPlaceholder({ kind, subject }) {
  // Two photo slots per story · headshot + environment
  return (
    <div style={{
      border: '1px solid var(--paper-300)',
      borderRadius: 'var(--r-2)',
      padding: 18,
      background: 'var(--paper-50)',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '88px 1fr', gap: 10 }}>
        <PhotoSlot
          compact
          kind="headshot"
          aspect="1/1"
          subject="Real customer, named with permission. Mid-shot, eye-level, neutral office light. No retouching beyond color correction."
          dims="800²"
        />
        <PhotoSlot
          compact
          kind="environment"
          aspect="auto"
          height={88}
          subject="Their actual workspace, mid-task. No staged laptop-and-coffee. Available light."
        />
      </div>
      <div>
        <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Customer story · pending real attribution</div>
        <div style={{ fontSize: 15, color: 'var(--ink-900)', fontWeight: 500, lineHeight: 1.4 }}>{kind}</div>
        <div style={{ fontSize: 13, color: 'var(--ink-600)', lineHeight: 1.45, marginTop: 4 }}>{subject}</div>
      </div>
      <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--paper-300)' }}>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>slot · reserved for launch cohort</span>
      </div>
    </div>
  );
}

// ─── comparison cue · typographic, matches argument-section rhythm ─
function Comparison() {
  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: 18 }}>Where this sits</div>
        <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
          Three categories sit nearby. Three honest verdicts.
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28, marginTop: 36 }}>
          <CompareLine
            n="01"
            cat="Paper onboarding"
            sub="spreadsheets, Drive folders, the inbox"
            body={
              <React.Fragment>
                The most common form of onboarding in companies under a hundred people. Loses four to seven days per hire, breaks at audit, and has no enforcement on the I-9 retention rule.{' '}
                <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>OnboardIQ replaces it outright.</span>
              </React.Fragment>
            }
            href="/compare/paper-onboarding"
          />
          <CompareLine
            n="02"
            cat="Generic HRIS"
            sub="BambooHR, Gusto, Rippling"
            body={
              <React.Fragment>
                Payroll-and-benefits products with onboarding stapled to the front. Fine for a fifteen-person services firm. Cannot branch on clearance level, sponsor code, or subcontractor agreement.{' '}
                <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>Pair OnboardIQ with one of these. Do not ask one of these to do onboarding.</span>
              </React.Fragment>
            }
            href="/compare/rippling"
          />
          <CompareLine
            n="03"
            cat="Enterprise platforms"
            sub="Workday, SAP SuccessFactors"
            body={
              <React.Fragment>
                The same problem at the other extreme: six-figure implementation, twelve-week setup, a SKU sheet your eight-person HR team will not parse.{' '}
                <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>OnboardIQ is what you use until you genuinely need Workday, which is later than you think.</span>
              </React.Fragment>
            }
            href={null}
          />
        </div>

        <div style={{ marginTop: 40, paddingTop: 16, borderTop: '1px solid var(--paper-300)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.06em' }}>full side-by-side comparisons</span>
          <div style={{ display: 'flex', gap: 16 }}>
            {[
              ["vs BambooHR", "/compare/bamboohr"],
              ["vs Rippling", "/compare/rippling"],
              ["vs Gusto", "/compare/gusto-onboarding"],
              ["vs Paper", "/compare/paper-onboarding"],
            ].map(([l, h]) => (
              <a key={h} href={h} style={{
                fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-900)',
                textDecoration: 'none', letterSpacing: '0.02em',
                display: 'inline-flex', alignItems: 'center', gap: 4,
                borderBottom: '1px solid var(--ink-300)', paddingBottom: 2,
              }}>
                {l} <Icon name="chevron-r" size={11} />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CompareLine({ n, cat, sub, body, href }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '52px 200px 1fr', gap: 20, alignItems: 'baseline' }}>
      <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>{n}</div>
      <div>
        <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>{cat}</div>
        <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.04em', marginTop: 2 }}>{sub}</div>
      </div>
      <div style={{ fontSize: 17, color: 'var(--ink-700)', lineHeight: 1.5, letterSpacing: '-0.005em' }}>
        {body}
      </div>
    </div>
  );
}

// ─── pricing teaser ────────────────────────────────────────────
function PricingTeaser() {
  const plans = [
    { name: "Starter",       price: "$8",  unit: "per onboarding", line: "Billed at completion. No seat fees.",      fit: "1 to 25 hires a year." },
    { name: "Business",      price: "$6",  unit: "per onboarding", line: "Volume rate. White-label included.",        fit: "25 to 200 hires a year." },
    { name: "Govcon",        price: "Let's talk", unit: "annual",  line: "Clearance track. SCIM. Audit export tier.", fit: "Federal contractors of any size." },
  ];
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <div className="oiq-eyebrow" style={{ marginBottom: 10 }}>Pricing</div>
            <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
              Per onboarding, not per seat.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.5, marginTop: 12, marginBottom: 0, maxWidth: 540 }}>
              You pay when an onboarding completes, not for the HR coordinator who hasn't logged in this quarter.
            </p>
          </div>
          <a href="/pricing" style={{
            fontSize: 13, color: 'var(--ink-900)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            borderBottom: '1px solid var(--ink-300)', paddingBottom: 2,
          }}>
            Full pricing, FAQ, calculator <Icon name="chevron-r" size={12} />
          </a>
        </div>

        <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.name} style={{
              padding: 28,
              borderLeft: i === 0 ? 'none' : '1px solid var(--paper-300)',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <div>
                <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{p.name}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
                  <span style={{ fontFamily: 'var(--sans)', fontSize: 36, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.025em' }}>{p.price}</span>
                  <span className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)' }}>{p.unit}</span>
                </div>
              </div>
              <div style={{ fontSize: 14, color: 'var(--ink-700)', lineHeight: 1.5 }}>
                {p.line}
              </div>
              <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-600)', letterSpacing: '0.02em', paddingTop: 12, borderTop: '1px solid var(--paper-300)', marginTop: 'auto' }}>
                fit: {p.fit}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── ITC parent moment ────────────────────────────────────────
function ITCParent() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
          <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
            an itc product
          </span>
          <div style={{ height: 1, background: 'var(--paper-400)', flex: 1 }} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 56, alignItems: 'start' }}>
          {/* Founder photo slot */}
          <div>
            <PhotoSlot
              kind="founder portrait"
              aspect="4/5"
              subject="Olufela 'Lu' Fagbure, Founder and Director of IT Custom Solution. Three-quarter mid-shot at the NY office. Eye-level, natural window light, no studio backdrop. Photographed once for the canonical founder image; reused on /about, /about/founder, and across the ITC suite."
              treatment="Documentary editorial. Slight contrast lift. No background blur. Subject in plain dress, holding nothing. The wall behind shows the room (office, books, lighting), not a staged backdrop."
              dims="1600 × 2000"
            />
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', marginTop: 8, letterSpacing: '0.04em' }}>
              shoot once · use across ITC suite
            </div>
          </div>

          <div>
            <p style={{
              fontSize: 22, lineHeight: 1.5, color: 'var(--ink-900)',
              letterSpacing: '-0.015em', margin: 0, textWrap: 'pretty',
            }}>
              OnboardIQ is built by{' '}
              <span style={{ fontWeight: 500 }}>IT Custom Solution LLC</span>, a New York government
              contractor that runs five other products across the customer journey: GovBid AI for
              winning the work, OpsTicket for running it, DeliverOps for executing it, ShieldDesk for
              securing it, and VaultGuard for proving it. We built OnboardIQ for the second stop in
              that journey, because every contract we won eventually ran into the same eleven days.
            </p>

            <div style={{ display: 'flex', gap: 14, marginTop: 28, alignItems: 'center' }}>
              <a href="/about" style={{
                fontSize: 13.5, color: 'var(--ink-900)', textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                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>
              <a href="https://itcustomsolution.com" style={{ fontSize: 13, color: 'var(--ink-600)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                itcustomsolution.com <Icon name="external" size={11} />
              </a>
            </div>

            {/* Suite map · diagrammatic, not a logo strip */}
            <div style={{ marginTop: 36, padding: '20px 24px', border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', background: 'var(--paper-50)' }}>
              <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>
                the customer journey · six stops
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0 }}>
                {[
                  { glyph: "GB", name: "GovBid AI",  role: "win the work" },
                  { glyph: "OI", name: "OnboardIQ",  role: "onboard the team", active: true },
                  { glyph: "OT", name: "OpsTicket",  role: "run support" },
                  { glyph: "DO", name: "DeliverOps", role: "execute delivery" },
                  { glyph: "SD", name: "ShieldDesk", role: "protect the env" },
                  { glyph: "VG", name: "VaultGuard", role: "prove compliance" },
                ].map((s, i) => (
                  <div key={s.glyph} style={{
                    padding: '14px 8px',
                    borderLeft: i === 0 ? 'none' : '1px solid var(--paper-300)',
                    display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start',
                  }}>
                    <div style={{
                      width: 26, height: 26, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      background: s.active ? 'var(--accent-500)' : 'var(--ink-900)',
                      color: s.active ? 'var(--ink-900)' : 'var(--paper-50)',
                      fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 600, letterSpacing: '0.04em',
                      borderRadius: 'var(--r-1)',
                    }}>{s.glyph}</div>
                    <div>
                      <div style={{ fontSize: 12, color: 'var(--ink-900)', fontWeight: s.active ? 600 : 400 }}>{s.name}</div>
                      <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)' }}>{s.role}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── final CTA + Footer ───────────────────────────────────────
function FinalCTA() {
  return (
    <React.Fragment>
      {/* Headline + CTA section (no photo, centered) */}
      <section style={{ padding: '96px 24px 80px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <h2 className="oiq-display" style={{ fontSize: 56, letterSpacing: '-0.03em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.02 }}>
            Sign up Tuesday.<br/>Run a real onboarding Wednesday.
          </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: 18, letterSpacing: '0.02em' }}>
            No credit card. 14-day trial. Real onboardings, not a sandbox.
          </div>
        </div>
      </section>

      {/* Full-bleed photo band · the place */}
      <PhotoSlot
        variant="full-bleed"
        kind="environment · the place"
        aspect="auto"
        height={520}
        src="/photos/office-environment.jpg"
        alt="Modern open office interior with dark walls, polished concrete floor, no people visible"
        objectPosition="center center"
        subject="ITC's New York office, midday: a small team working at desks, one person at a whiteboard, light from the south-facing windows. No staged poses, no laptops-and-coffee, no hands-pointing-at-screens. Real office, real moment."
        treatment="Documentary editorial. Wide-mid shot, edge-to-edge, no margins. Slight warm tone. Faces incidental, not central. Use as the canonical 'this is where the work happens' image across home, /about, and the careers page."
        dims="2400 × 1080"
      />
    </React.Fragment>
  );
}

function Footer() {
  const cols = [
    { h: "Product", items: ["Why OnboardIQ", "Features", "Integrations", "Templates", "Pricing", "Changelog", "Status"] },
    { h: "Industries", items: ["Government contractors", "Healthcare", "Financial services", "Professional services", "Managed service providers"] },
    { h: "Compare", items: ["vs BambooHR", "vs Rippling", "vs Gusto Onboarding", "vs Paper onboarding"] },
    { h: "Company", items: ["About", "Founder's letter", "Careers", "Partners", "Contact"] },
    { h: "Legal", items: ["Terms", "Privacy", "DPA", "Subprocessors", "Cookies", "AUP", "SLA", "Accessibility"] },
  ];
  return (
    <footer style={{ background: 'var(--ink-900)', color: 'var(--paper-50)', padding: '64px 24px 32px' }}>
      <div style={{ maxWidth: MAX_W, margin: '0 auto' }}>

        {/* Top row */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(5, 1fr)', gap: 32, marginBottom: 48 }}>
          <div>
            <Lockup size={22} color="var(--paper-50)" />
            <p style={{ fontSize: 13, color: 'rgba(246,242,230,.5)', lineHeight: 1.5, marginTop: 16, maxWidth: 280 }}>
              Commercial-grade onboarding for the eleven days between offer accepted and Day 1 productive.
            </p>
            <div style={{ marginTop: 20, padding: '14px 0', borderTop: '1px solid rgba(246,242,230,.12)', borderBottom: '1px solid rgba(246,242,230,.12)' }}>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'rgba(246,242,230,.4)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>An ITC product</div>
              <div style={{ fontSize: 12.5, color: 'rgba(246,242,230,.74)', lineHeight: 1.4 }}>
                IT Custom Solution LLC<br/>
                420 Lexington Ave Suite 1402 POB 1005<br/>
                New York NY 10170
              </div>
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.h}>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'rgba(246,242,230,.4)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {c.items.map(it => (
                  <li key={it}>
                    <a href="#" style={{ fontSize: 13, color: 'rgba(246,242,230,.74)', textDecoration: 'none' }}>{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Bottom row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, paddingTop: 24, borderTop: '1px solid rgba(246,242,230,.12)' }}>
          <div className="oiq-mono" style={{ fontSize: 10.5, color: 'rgba(246,242,230,.5)', letterSpacing: '0.04em' }}>
            © 2026 IT Custom Solution LLC. All rights reserved.
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
            <a href="/sitemap"        style={{ fontSize: 12, color: 'rgba(246,242,230,.5)', textDecoration: 'none' }}>Sitemap</a>
            <a href="/status"         style={{ fontSize: 12, color: 'rgba(246,242,230,.5)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span className="oiq-dot" style={{ background: 'var(--green-500)' }} /> All systems operational
            </a>
            <a href="/legal/cookies"  style={{ fontSize: 12, color: 'rgba(246,242,230,.5)', textDecoration: 'none' }}>Cookie preferences</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── Page assembly ──────────────────────────────────────────
function MarketingHome({ 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} />
      <Hero />
      <Argument />
      <ProductSurface />
      <CapabilitySpine />
      <ClearanceWedge />
      <Comparison />
      <CustomerStories />
      <PricingTeaser />
      <ITCParent />
      <FinalCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { MarketingHome, Nav, Footer, FinalCTA, PhotoSlot });