// about.jsx — OnboardIQ /about
// The ITC parentage story, told as authored prose. Founder letter framing.
// Inherits Nav/Footer/PhotoSlot from marketing-home.jsx.

const ABOUT_MAX_W = 1180;
const ABOUT_PROSE_W = 720;

// ─── hero ─────────────────────────────────────────────────
function AboutHero() {
  return (
    <section style={{ padding: '96px 24px 64px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: ABOUT_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: 24 }}>
          <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' }}>
            about · an itc product
          </span>
        </div>

        <h1 className="oiq-display" style={{
          fontSize: 72, lineHeight: 0.98, letterSpacing: '-0.035em',
          fontWeight: 500, color: 'var(--ink-900)',
          margin: 0, maxWidth: 960, textWrap: 'balance',
        }}>
          A small contractor that got tired of running the eleven days through a Drive folder.
        </h1>

        <p style={{
          fontSize: 18.5, lineHeight: 1.55, color: 'var(--ink-700)',
          maxWidth: 680, marginTop: 28, marginBottom: 0, letterSpacing: '-0.005em',
        }}>
          OnboardIQ is built by IT Custom Solution, a New York government contractor that runs five
          other products across the customer journey. This page is the story of how OnboardIQ
          became one of them, written by the person who started ITC.
        </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 founder</span>
          <span>02 · the letter</span>
          <span>03 · the parent · ITC</span>
          <span>04 · the suite</span>
          <span>05 · the room we work in</span>
          <span>06 · careers</span>
        </div>
      </div>
    </section>
  );
}

// ─── the founder · portrait + bio sidecar ────────────────
function FounderBlock() {
  return (
    <section style={{ padding: '72px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: ABOUT_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 64, alignItems: 'start' }}>

          {/* Portrait + caption */}
          <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 style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--paper-300)' }}>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>founder</div>
              <div style={{ fontSize: 17, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>Olufela 'Lu' Fagbure</div>
              <div style={{ fontSize: 13, color: 'var(--ink-600)', marginTop: 2 }}>Founder and Director, IT Custom Solution LLC</div>
              <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 10, lineHeight: 1.5 }}>
                lu@itcustomsolution.com<br/>
                LinkedIn · ITC suite
              </div>
            </div>
          </div>

          {/* Beat 01 · the founder */}
          <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 01</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: ABOUT_PROSE_W }}>
              The founder.
            </h2>
            <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 18, maxWidth: ABOUT_PROSE_W }}>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-800)', letterSpacing: '-0.005em', margin: 0, textWrap: 'pretty' }}>
                Lu Fagbure runs IT Custom Solution from a small office in Midtown Manhattan, where ITC
                has held a federal facility clearance and delivered to civilian and defense agencies
                since 2018. Before ITC, Lu spent twelve years inside two larger systems integrators,
                running cleared onboarding for hundreds of engineers across four contract types. He
                knows the eleven days because he used to lose them in a row.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-800)', letterSpacing: '-0.005em', margin: 0, textWrap: 'pretty' }}>
                ITC builds software the way Lu built contract delivery: opinionated, audited, and
                shipped on a schedule a contracting officer can verify. He writes the
                announcement emails, signs the offer letters, and is the named CSM on every
                GovCon-tier account until that stops being a thing one person can do.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── the letter · serif treatment for the founder note ──
function FounderLetter() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: 880, margin: '0 auto' }}>
        <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 02</span>
          <span style={{ height: 1, background: 'var(--paper-400)', flex: 1, alignSelf: 'center' }} />
        </div>

        <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
          The letter.
        </h2>
        <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 8, letterSpacing: '0.04em' }}>
          posted 2026-01-09 · the day we shipped onboardiq v1 internally
        </div>

        {/* Letter body in serif */}
        <div style={{
          marginTop: 32,
          padding: '32px 36px',
          background: 'var(--paper-50)',
          border: '1px solid var(--paper-300)',
          borderRadius: 'var(--r-2)',
        }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.65, color: 'var(--ink-900)', letterSpacing: '-0.003em' }}>
            <p style={{ margin: '0 0 18px 0' }}>
              Dear reader,
            </p>
            <p style={{ margin: '0 0 18px 0' }}>
              In the first year ITC was a real company, we won an award on a contract I am still
              proud of, and then almost lost it because we could not onboard the four engineers we
              needed for it in time. The work was technical. The blocker was paper. I-9s in a Drive
              folder. An NDA emailed to the wrong personal address. A subcontractor packet that sat
              for nine days because nobody knew the prime's security officer was on vacation. We
              hit Day 1 with three of the four engineers, and the fourth showed up on Day 8.
            </p>
            <p style={{ margin: '0 0 18px 0' }}>
              That contract closed. We were lucky. We were also embarrassed.
            </p>
            <p style={{ margin: '0 0 18px 0' }}>
              Over the next four years, I watched the same problem repeat in different shapes. A
              cleared engineer onboarded onto a system that did not track her reinvestigation, and
              we missed it by a month. A 1099 contractor onboarded through a workflow designed for
              W-2 employees, and we discovered at tax time that the State of California had been
              waiting for a 1099-NEC since March. A DCAA reviewer asked for the chain of custody on
              a signed I-9 from 2021, and the file was on a former HR coordinator's personal Drive.
            </p>
            <p style={{ margin: '0 0 18px 0' }}>
              We tried the obvious things. We bought a generic HRIS. It is excellent at being a
              generic HRIS. It could not branch a contractor flow without an integration we did not
              have time to build. We tried the enterprise platform that the prime on one of our
              contracts uses. It quoted six figures and twelve weeks of implementation, which we
              did not have. We tried writing it ourselves in a spreadsheet with custom Slack bots,
              which is approximately what every small contractor I know has done at least once.
            </p>
            <p style={{ margin: '0 0 18px 0' }}>
              OnboardIQ is the product I would have wanted to buy in year one. It is built around
              the eleven days, not around payroll. It treats clearance as the architecture, not as
              a flag. It bills you for the artifact you actually bought, which is a person ready to
              do the work. The audit trail is the product, because the audit trail is what saves
              you three years from now when the contracting officer who wasn't in the room asks
              the question.
            </p>
            <p style={{ margin: '0 0 18px 0' }}>
              We use it on every ITC contract. We use it on every new ITC hire. The first paying
              customer outside the building is going to be a small federal contractor we already
              know, and the second is going to be a healthcare firm running a real I-9 program at
              fifty employees. After that, we will see.
            </p>
            <p style={{ margin: '0 0 0 0' }}>
              Sincerely,
            </p>
          </div>

          {/* Signature block */}
          <div style={{ marginTop: 28, paddingTop: 18, borderTop: '1px solid var(--paper-300)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24 }}>
            <div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontStyle: 'italic', color: 'var(--ink-900)', lineHeight: 1 }}>
                Olufela 'Lu' Fagbure
              </div>
              <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 6, letterSpacing: '0.04em' }}>
                founder and director · it custom solution llc
              </div>
            </div>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.04em', textAlign: 'right', lineHeight: 1.6 }}>
              hash · 0x9e22…b41a<br/>
              posted to /about · ‎/about/founder · sealed in audit
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── the parent · ITC ────────────────────────────────────
function ParentBlock() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: ABOUT_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, 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 03</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 }}>
              The parent.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-800)', letterSpacing: '-0.005em', margin: '24px 0 0', textWrap: 'pretty' }}>
              IT Custom Solution LLC is the parent company. ITC is a New York 8(a)-eligible small
              business that delivers software, security, and program management to federal and
              regulated commercial customers. We hold a Secret facility clearance, we are CMMC
              Level 2 in audit, and we are a registered SAM.gov vendor in good standing.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-800)', letterSpacing: '-0.005em', margin: '14px 0 0', textWrap: 'pretty' }}>
              We do contract delivery. We also do software, because the contract delivery taught us
              what was missing. OnboardIQ is one of six products in the suite. Each one came from
              the same place: an internal pain we got tired of running through a spreadsheet.
            </p>
          </div>

          {/* ITC stat card */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', overflow: 'hidden', background: 'var(--paper-50)' }}>
            {[
              ["Founded",            "2018 · New York"],
              ["Vehicle",            "LLC · 8(a)-eligible small business"],
              ["Facility clearance", "Secret · DCSA"],
              ["Compliance",         "CMMC L2 · in audit"],
              ["Headquarters",       "420 Lexington Ave, NY 10170"],
              ["Vendor",             "SAM.gov · UEI on request"],
              ["People",             "37, across NY, VA, TX"],
              ["Products",           "Six, all built in-house"],
            ].map(([l, v], i, arr) => (
              <div key={l} style={{
                padding: '14px 16px',
                borderRight: (i % 2 === 0) ? '1px solid var(--paper-300)' : 'none',
                borderBottom: i < arr.length - 2 ? '1px solid var(--paper-300)' : 'none',
              }}>
                <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{l}</div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-900)', lineHeight: 1.4 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── the suite · 6 products as a journey ────────────────
const SUITE = [
  { glyph: "GB", name: "GovBid AI",   role: "Win the work",          desc: "Federal opportunity discovery and RFP response automation.",         url: "trygovbidai.com",   year: "live" },
  { glyph: "OI", name: "OnboardIQ",   role: "Onboard the team",      desc: "Per-onboarding workflow for the eleven days between offer and Day 1.", url: "onboardiq.app",     year: "live", active: true },
  { glyph: "OT", name: "OpsTicket",   role: "Run support",           desc: "Internal IT and customer support ticketing with SLA-aware routing.", url: "tryopsticket.com",  year: "live" },
  { glyph: "DO", name: "DeliverOps",  role: "Execute delivery",      desc: "Contract delivery operations: tasks, milestones, deliverables.",     url: "trydeliverops.com", year: "Q4 2026" },
  { glyph: "SD", name: "ShieldDesk",  role: "Protect the env",       desc: "Managed cybersecurity for small contractor environments.",           url: "—",                 year: "planned 2027" },
  { glyph: "VG", name: "VaultGuard",  role: "Prove compliance",      desc: "Audit-ready posture across the lifecycle. The last stop.",           url: "—",                 year: "planned 2027–28" },
];

function SuiteBlock() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: ABOUT_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36, gap: 24, flexWrap: 'wrap' }}>
          <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 04</span>
              <span style={{ height: 1, background: 'var(--paper-400)', flex: 1, alignSelf: 'center', minWidth: 100 }} />
            </div>
            <h2 className="oiq-display" style={{ fontSize: 40, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.04 }}>
              The suite.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.55, marginTop: 12, marginBottom: 0, maxWidth: 600 }}>
              Six products, one customer journey. Single ITC account signs you into all of them.
              OnboardIQ is stop two: onboard the team that will deliver the work you won in GovBid.
            </p>
          </div>
          <a href="https://itcustomsolution.com" style={{ fontSize: 13, color: 'var(--ink-900)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>
            itcustomsolution.com <Icon name="external" size={12} />
          </a>
        </div>

        <ol style={{ listStyle: 'none', padding: 0, margin: 0, border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', overflow: 'hidden', background: 'var(--paper-50)' }}>
          {SUITE.map((s, i) => (
            <li key={s.glyph} style={{
              display: 'grid', gridTemplateColumns: '60px 36px 1.4fr 2.2fr 200px 28px',
              gap: 16, alignItems: 'center',
              padding: '16px 18px',
              borderTop: i === 0 ? 'none' : '1px solid var(--paper-200)',
              background: s.active ? 'var(--accent-50)' : 'transparent',
            }}>
              <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>STOP {String(i + 1).padStart(2, '0')}</div>
              <div style={{
                width: 32, height: 32, 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: 12, fontWeight: 600, letterSpacing: '0.04em',
                borderRadius: 'var(--r-1)',
              }}>{s.glyph}</div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 500, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>
                  {s.name}
                  {s.active && <span style={{ marginLeft: 8, fontFamily: 'var(--mono)', fontSize: 9.5, color: 'var(--accent-700)', background: 'var(--accent-100)', padding: '2px 6px', borderRadius: 3, letterSpacing: '0.08em', textTransform: 'uppercase' }}>this product</span>}
                </div>
                <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2, letterSpacing: '0.04em' }}>{s.role.toLowerCase()}</div>
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-700)', lineHeight: 1.5 }}>{s.desc}</div>
              <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-600)', letterSpacing: '0.02em' }}>
                {s.url}<br/>
                <span style={{ color: 'var(--ink-500)' }}>shipped {s.year}</span>
              </div>
              <Icon name="chevron-r" size={14} />
            </li>
          ))}
        </ol>

        <div className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 14, letterSpacing: '0.02em' }}>
          one itc account signs you into every product · single sign-on, shared tenant, audited handoffs
        </div>
      </div>
    </section>
  );
}

// ─── the room · environment photo + place writing ───────
function RoomBlock() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: ABOUT_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
          <PhotoSlot
            kind="environment"
            aspect="5/4"
            subject="ITC's New York office, midday. Small team working at desks, one person at a whiteboard, light from the south-facing windows. The wall behind has a framed federal-contract award letter, paper print-outs of org charts, a printed copy of the OnboardIQ logo system. No staged poses, no laptops-and-coffee."
            treatment="Documentary editorial. Wide-mid shot. Slight warm tone. Faces incidental, not central. Use as the canonical 'this is where the work happens' image across /, /about, /careers."
            dims="2000 × 1600"
          />
          <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 05</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 }}>
              The room we work in.
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'var(--ink-800)', letterSpacing: '-0.005em', margin: '20px 0 0', textWrap: 'pretty' }}>
              The ITC office is two floors of a building at the corner of Lexington and 43rd, ten
              minutes from Grand Central. There is a SCIF on the second floor, a kitchen with too
              many kinds of tea, and a printer that jams in the same way once a week. Most of the
              software ITC ships was written in that room, by people who use it on the contracts
              they are also delivering. We mention the room because the product is shaped by it.
            </p>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: 'var(--ink-800)', letterSpacing: '-0.005em', margin: '14px 0 0', textWrap: 'pretty' }}>
              If you would like to see it, we run an open house on the first Friday of each month
              for customers and prospective customers who can make it to New York. Email us; we
              will tell you what to bring.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── careers · short outpointer ─────────────────────────
const ROLES = [
  { dept: "Engineering",       title: "Senior product engineer · workflow runtime",     where: "NY or remote" },
  { dept: "Engineering",       title: "Compliance and audit infrastructure engineer",   where: "NY or remote" },
  { dept: "Design",            title: "Product designer · marketing and product",       where: "NY preferred" },
  { dept: "Customer success",  title: "Govcon customer success manager",                where: "NY or DC area" },
  { dept: "Security",          title: "Facility security officer (FSO) · cleared role", where: "NY · onsite" },
];

function CareersBlock() {
  return (
    <section style={{ padding: '88px 24px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
      <div style={{ maxWidth: ABOUT_MAX_W, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28, gap: 24, flexWrap: 'wrap' }}>
          <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 06</span>
              <span style={{ height: 1, background: 'var(--paper-400)', flex: 1, alignSelf: 'center', minWidth: 100 }} />
            </div>
            <h2 className="oiq-display" style={{ fontSize: 36, letterSpacing: '-0.025em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.06 }}>
              Careers.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--ink-700)', lineHeight: 1.55, marginTop: 12, marginBottom: 0, maxWidth: 540 }}>
              Five open roles across the ITC suite. OnboardIQ is hiring two of them. Govcon-cleared
              candidates are encouraged; we sponsor and we will work with your current sponsor on a
              clearance crossover.
            </p>
          </div>
          <a href="/careers" style={{ fontSize: 13, color: 'var(--ink-900)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, borderBottom: '1px solid var(--ink-300)', paddingBottom: 2 }}>
            All openings <Icon name="chevron-r" size={12} />
          </a>
        </div>

        <ul style={{ listStyle: 'none', padding: 0, margin: 0, border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)', overflow: 'hidden', background: 'var(--paper-50)' }}>
          {ROLES.map((r, i) => (
            <li key={r.title} style={{
              display: 'grid', gridTemplateColumns: '180px 1fr 200px 28px',
              gap: 16, alignItems: 'center',
              padding: '14px 18px',
              borderTop: i === 0 ? 'none' : '1px solid var(--paper-200)',
            }}>
              <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{r.dept}</div>
              <div style={{ fontSize: 14.5, color: 'var(--ink-900)', fontWeight: 500, letterSpacing: '-0.005em' }}>{r.title}</div>
              <div className="oiq-mono" style={{ fontSize: 11.5, color: 'var(--ink-600)' }}>{r.where}</div>
              <Icon name="chevron-r" size={13} />
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ─── final close · contact ──────────────────────────────
function AboutFinalCTA() {
  return (
    <section style={{ padding: '96px 24px', borderBottom: '1px solid var(--paper-300)' }}>
      <div style={{ maxWidth: ABOUT_MAX_W, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56, alignItems: 'start' }}>
        <div>
          <h2 className="oiq-display" style={{ fontSize: 48, letterSpacing: '-0.03em', fontWeight: 500, color: 'var(--ink-900)', margin: 0, lineHeight: 1.02 }}>
            That is the story.<br/>Want to run an onboarding?
          </h2>
          <p style={{ fontSize: 15.5, color: 'var(--ink-700)', lineHeight: 1.55, marginTop: 18, marginBottom: 0, maxWidth: 520 }}>
            If the parentage story landed and you want to try the product, the trial is fourteen days
            and includes up to five real onboardings. If you would rather talk to Lu or another ITC
            principal first, that is also fine. The address is below.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
            <Btn kind="primary" size="lg">Start free trial</Btn>
            <Btn kind="secondary" size="lg">Book a demo</Btn>
          </div>
        </div>

        {/* Contact card */}
        <div style={{
          border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)',
          background: 'var(--paper-50)', padding: 24,
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div className="oiq-eyebrow">Contact ITC</div>
          <div style={{ borderTop: '1px solid var(--paper-300)' }} />
          <div>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>address</div>
            <div style={{ fontSize: 14, color: 'var(--ink-900)', lineHeight: 1.5 }}>
              IT Custom Solution LLC<br/>
              420 Lexington Ave Suite 1402 POB 1005<br/>
              New York NY 10170
            </div>
          </div>
          <div>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>email</div>
            <a href="mailto:hello@onboardiq.app" style={{ fontSize: 14, color: 'var(--ink-900)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)' }}>hello@onboardiq.app</a>
          </div>
          <div>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>founder direct</div>
            <a href="mailto:lu@itcustomsolution.com" style={{ fontSize: 14, color: 'var(--ink-900)', textDecoration: 'none', borderBottom: '1px solid var(--ink-300)' }}>lu@itcustomsolution.com</a>
          </div>
          <div>
            <div className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>govcon inquiries</div>
            <div style={{ fontSize: 13.5, color: 'var(--ink-700)' }}>SAM.gov UEI on request · facility clearance verifiable through DCSA</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── assembly ──────────────────────────────────────────
function About({ 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' }}
    >
      {/* SCAFFOLD STRIP — must not be mistaken for shippable */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 100,
        height: 32,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
        background: 'var(--accent-500)',
        borderTop: '2px solid var(--accent-700)',
        borderBottom: '2px solid var(--accent-700)',
        fontFamily: 'var(--mono)',
        fontSize: 10.5,
        fontWeight: 700,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: 'var(--ink-900)',
      }}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square" aria-hidden="true">
          <path d="M12 3L2 21h20z" /><path d="M12 10v5M12 18v0.5" />
        </svg>
        <span>scaffold · pending founder material · not for publish</span>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square" aria-hidden="true">
          <path d="M12 3L2 21h20z" /><path d="M12 10v5M12 18v0.5" />
        </svg>
      </div>
      <Nav tweaks={tweaks} setTweak={setTweak} />
      <AboutHero />
      <FounderBlock />
      <FounderLetter />
      <ParentBlock />
      <SuiteBlock />
      <RoomBlock />
      <CareersBlock />
      <AboutFinalCTA />
      <Footer />
    </div>
  );
}

Object.assign(window, { About });
