// HiLooks Partner Network — recruitment surface + portal preview
// Subcontract-led model. Sub firms install. HiLooks brings work, paperwork, and weekly pay.
// Five retention currencies: fast cash · steady flow · less admin · real career path · personal respect.

// ============================================================================
// HERO — recruitment pitch
// ============================================================================
const EngHero = () => (
  <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 100, paddingBottom: 80 }}>
    <div className="hero-glow" />
    <div className="grid-bg" />
    <div className="container" style={{ position: 'relative' }}>
      <Reveal>
        <span className="chip" style={{ marginBottom: 32 }}>
          <i className="led" /> PARTNER NETWORK · ENROLLING DERBY · NOTTS · SHEFFIELD · WEEKLY PAY
        </span>
      </Reveal>
      <Reveal delay={80}>
        <h1 className="h1-display" style={{ maxWidth: 1100 }}>
          Bring your trade.<br />
          <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>We'll bring everything else.</em>
        </h1>
      </Reveal>
      <Reveal delay={180}>
        <p className="lead" style={{ marginTop: 32, maxWidth: 640 }}>
          A heat-pump install network for MCS-certified firms who'd rather install heat pumps than chase customers, write specs, fight for the BUS grant, or wait sixty days to get paid. We line up the work and the paperwork. You install.
        </p>
      </Reveal>
      <Reveal delay={280}>
        <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button className="btn btn-accent">Apply to join the network <span className="arrow">→</span></button>
          <button className="btn btn-ghost">See the rate card</button>
        </div>
      </Reveal>
      <Reveal delay={380}>
        <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, paddingTop: 36, borderTop: '1px solid var(--line)' }}>
          {[
            { v: 32, s: '', l: 'Active partner firms' },
            { v: 4.2, p: '£', s: 'm', d: 1, l: 'Paid to partners · 2025' },
            { v: 87, s: '%', l: '12-month retention' },
            { v: 3.4, d: 1, s: '', l: 'Avg jobs / week · Gold tier' },
          ].map((s, i) => (
            <div key={i}>
              <div className="serif tnum" style={{ fontSize: 56, lineHeight: 1, color: 'var(--fg)' }}>
                <CountUp to={s.v} prefix={s.p || ''} suffix={s.s || ''} decimals={s.d || 0} />
              </div>
              <div style={{ marginTop: 10, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-4)' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

// ============================================================================
// WHAT WE BRING / WHAT YOU BRING — split-block of responsibilities
// ============================================================================
const WhatWeBring = () => {
  const we = [
    { t: 'Leads, qualified', d: 'Postcode-targeted homeowners with EPC, BUS-grant eligibility checked, deposit ready.' },
    { t: 'Survey + design', d: 'MCS 3005 heat-loss, system design, flow temps, radiator schedule. We do the calc.' },
    { t: 'MCS pack & paperwork', d: 'BUS grant claim, F-Gas log, building control notice, G99 — we file the lot.' },
    { t: 'Customer comms', d: 'Booking, prep email, post-install walkthrough, warranty calls. They never have your number.' },
    { t: 'Parts kit, pre-delivered', d: 'Full kit dropped at the property the morning of — or your van the night before. You stop at no merchants.' },
    { t: 'Weekly pay', d: 'Friday for the previous week. No 30-day terms, no factoring. Cleared before the weekend.' },
    { t: 'Aftercare + monitoring', d: 'We watch every system on MQTT. If a fault\'s heading your way we tell you before the customer notices.' },
    { t: 'Complaint handling', d: 'Angry customers go to our office. You stay on the tools.' },
  ];
  const you = [
    { t: 'Show up to a fully-prepped site', d: 'Boiler out, pipework, heat-pump in, cylinder swap. Day-one + day-two on most jobs.' },
    { t: 'Install to MCS spec', d: 'Pipework, electrical, refrigeration, controls. The bit you actually trained for.' },
    { t: 'Commission + sign off', d: 'Set flow temps, balance, weather-comp curve, hand the customer the welcome pack.' },
    { t: 'Snag list at handover', d: 'First-attempt fix on callbacks within 14 days. Anything else, we cover.' },
  ];
  return (
    <section className="section" style={{ background: 'rgba(255,255,255,0.02)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, marginBottom: 56 }}>
          <Reveal>
            <span className="eyebrow">01 / The deal</span>
            <h2 className="h2-display" style={{ marginTop: 24 }}>
              Two columns,<br />
              <em style={{ color: 'var(--accent)' }}>no overlap.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lead" style={{ alignSelf: 'end' }}>
              Most installer-principal relationships fail because the line between "yours" and "ours" is smudged. Ours is bright. Here's the whole list.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 12 }}>
          <Reveal>
            <div className="surface-2" style={{ padding: 32 }}>
              <div className="row between" style={{ marginBottom: 20 }}>
                <span className="eyebrow" style={{ color: 'var(--accent)' }}>HiLooks brings</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em' }}>8 ITEMS</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                {we.map((w, i) => (
                  <div key={i} style={{ paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                    <div className="serif" style={{ fontSize: 18, marginBottom: 6 }}>{w.t}</div>
                    <p style={{ fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.55 }}>{w.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="surface-2" style={{ padding: 32, height: '100%', borderColor: 'var(--accent)', background: 'linear-gradient(180deg, rgba(74,222,128,0.06), rgba(74,222,128,0.01))' }}>
              <div className="row between" style={{ marginBottom: 20 }}>
                <span className="eyebrow" style={{ color: 'var(--accent)' }}>You bring</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em' }}>4 ITEMS</span>
              </div>
              <div style={{ display: 'grid', gap: 20 }}>
                {you.map((y, i) => (
                  <div key={i} style={{ paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                    <div className="serif" style={{ fontSize: 20, marginBottom: 6 }}>{y.t}</div>
                    <p style={{ fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.55 }}>{y.d}</p>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, padding: 16, borderRadius: 10, background: 'rgba(74,222,128,0.08)', border: '1px solid rgba(74,222,128,0.2)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.12em', marginBottom: 4 }}>NET RESULT</div>
                <div style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.5 }}>You install ~3 jobs/week instead of 1.5, with zero admin, and you bank Fridays without chasing invoices.</div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ============================================================================
// FIVE CURRENCIES — the retention promise as a sales pitch
// ============================================================================
const FiveCurrencies = () => {
  const c = [
    { n: '01', t: 'Fast cash', d: 'Friday pay, every Friday, for the previous week\'s work. We front parts. You never fund a job from your overdraft.', m: 'WEEKLY · NEVER 30 DAYS' },
    { n: '02', t: 'Steady flow', d: 'Gold-tier partners get a guaranteed minimum 3 jobs per week. If we can\'t fill it, we pay a retainer for the dead week.', m: '3 JOBS / WK MINIMUM' },
    { n: '03', t: 'Less admin', d: 'No customer comms. No MCS pack. No grant claims. No parts runs. We do the paperwork; you do the trade.', m: 'TRADE-ONLY' },
    { n: '04', t: 'Real career path', d: 'Bronze → Silver → Gold → Partner. Each tier earns more, gets first dibs, and unlocks van decals, holiday float, and revenue share.', m: '4 TIERS · CLIMBABLE' },
    { n: '05', t: 'Personal respect', d: 'Named account manager. Quarterly partner meets. Annual awards. We answer the phone in under an hour or your account manager buys dinner.', m: 'WE KNOW YOUR NAME' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, marginBottom: 64 }}>
          <Reveal>
            <span className="eyebrow">02 / Why partners stay</span>
            <h2 className="h2-display" style={{ marginTop: 24 }}>
              Five currencies<br />
              <em style={{ color: 'var(--accent)' }}>that buy loyalty.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lead" style={{ alignSelf: 'end' }}>
              UK construction subs leave principals every fourteen months on average. The reasons are always the same five things, in the same order. We spend on all five — because the alternative (re-onboarding three subs a year) costs more.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {c.map((it, i) => (
            <Reveal key={it.n} delay={i * 60}>
              <div className="feat-tile" style={{ height: '100%', minHeight: 280, display: 'flex', flexDirection: 'column' }}>
                <div className="feat-num">{it.n}</div>
                <h3 className="serif" style={{ fontSize: 24, marginTop: 16, marginBottom: 12, fontWeight: 400 }}>{it.t}</h3>
                <p style={{ color: 'var(--fg-3)', fontSize: 13, lineHeight: 1.6, flex: 1 }}>{it.d}</p>
                <div className="mono" style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line)', fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em' }}>{it.m}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================================
// ACADEMY — two routes in, two funding options, recoupment math, cert ladder
// ============================================================================
const AcademyRoutes = () => {
  const routes = [
    {
      n: '01',
      tag: 'EXISTING MCS FIRM',
      t: 'Skip the school',
      d: 'Already MCS-certified and running a firm? You don\'t need us to teach you. Apply, onboard, claim your first job — Bronze-tier from week one, climbing on installs delivered.',
      time: '0 weeks',
      cost: 'Free',
      out: 'Bronze tier from week 1',
      featured: false,
    },
    {
      n: '02',
      tag: 'CAREER CHANGER',
      t: 'Gas, plumbing, electrical — convert to heat pumps',
      d: 'Already a tradesperson but new to heat pumps? Eight weeks of structured training — half classroom, half practical and shadowing live HiLooks installs. Most of our cohorts come from this route.',
      time: '8 weeks',
      cost: '£3,500 (or deferred — see below)',
      out: 'MCS-certified + HiLooks Foundation → Bronze',
      featured: true,
    },
  ];
  return (
    <section className="section" style={{ background: 'rgba(74,222,128,0.025)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, marginBottom: 56 }}>
          <Reveal>
            <span className="eyebrow">03 / Academy</span>
            <h2 className="h2-display" style={{ marginTop: 24 }}>
              Trained by HiLooks.<br />
              <em style={{ color: 'var(--accent)' }}>Working through HiLooks.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lead" style={{ alignSelf: 'end' }}>
              The UK has 3,000 MCS-certified heat-pump installers. It needs 30,000 by 2030. So we built our own school — two routes in, one network out. Plumbers, gas engineers, electricians, and existing MCS firms all welcome.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, maxWidth: 980, marginInline: 'auto' }}>
          {routes.map((r, i) => (
            <Reveal key={r.n} delay={i * 80}>
              <div className="surface" style={{
                padding: 32, height: '100%',
                position: 'relative',
                display: 'flex', flexDirection: 'column',
                borderColor: r.featured ? 'var(--accent)' : 'var(--line)',
                background: r.featured ? 'linear-gradient(180deg, rgba(74,222,128,0.08), rgba(74,222,128,0.01))' : undefined,
              }}>
                {r.featured && (
                  <span className="chip" style={{ position: 'absolute', top: 14, right: 14, background: 'var(--accent)', color: 'var(--bg)', borderColor: 'var(--accent)' }}>MOST POPULAR</span>
                )}
                <div className="feat-num">{r.n}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em', marginTop: 12 }}>{r.tag}</div>
                <h3 className="serif" style={{ fontSize: 24, marginTop: 10, marginBottom: 12, fontWeight: 400, lineHeight: 1.2 }}>{r.t}</h3>
                <p style={{ color: 'var(--fg-3)', fontSize: 13, lineHeight: 1.6, flex: 1 }}>{r.d}</p>
                <div style={{ marginTop: 20, paddingTop: 18, borderTop: '1px solid var(--line)', display: 'grid', gap: 10 }}>
                  <div className="row between" style={{ fontSize: 12 }}>
                    <span style={{ color: 'var(--fg-4)' }}>Time</span>
                    <span className="mono" style={{ color: 'var(--fg)' }}>{r.time}</span>
                  </div>
                  <div className="row between" style={{ fontSize: 12 }}>
                    <span style={{ color: 'var(--fg-4)' }}>Cost</span>
                    <span className="mono" style={{ color: 'var(--fg)' }}>{r.cost}</span>
                  </div>
                  <div className="row between" style={{ fontSize: 12, alignItems: 'flex-start', gap: 12 }}>
                    <span style={{ color: 'var(--fg-4)' }}>Outcome</span>
                    <span className="mono" style={{ color: 'var(--accent)', textAlign: 'right' }}>{r.out}</span>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

// === Funding stack: self-funded vs deferred-fee ===
const AcademyFunding = () => {
  const opts = [
    {
      n: 'Self-funded',
      h: '£3,500',
      hSub: 'paid up front',
      tag: 'OPTION A · SELF-FUNDED',
      d: 'Pay the £3,500 fee up front. No tie-in, no recoupment, no income threshold.',
      featured: false,
    },
    {
      n: 'Free training. You work with us.',
      h: '£0',
      hSub: 'up front',
      tag: 'OPTION B · YOU WORK WITH US',
      d: 'We front the £3,500. You pay nothing until you qualify and install.',
      featured: true,
    },
  ];
  return (
    <section className="section" style={{ paddingTop: 140, paddingBottom: 140, position: 'relative', overflow: 'hidden' }}>
      <div className="hero-glow" style={{ inset: '20% 0 -20% 0', opacity: 0.6 }} />
      <div className="grid-bg" style={{ opacity: 0.5 }} />
      <div className="container" style={{ position: 'relative' }}>
        {/* Headline */}
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <Reveal><span className="eyebrow" style={{ justifyContent: 'center' }}>04 / The deal</span></Reveal>
          <Reveal delay={120}>
            <h2 className="h1-display" style={{ marginTop: 32, maxWidth: 1100, marginInline: 'auto' }}>
              Two prices.<br/>
              <em style={{ color: 'var(--accent)', fontStyle: 'italic' }}>One promise.</em>
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ marginTop: 28, marginInline: 'auto', maxWidth: 620, textAlign: 'center' }}>
              Either you pay £3,500 and walk away clean. Or you pay nothing — and work with us through your first twenty-four installs. Same training, same network, same Bronze tier on day one.
            </p>
          </Reveal>
        </div>

        {/* The two cards + OR */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 64px 1fr',
          gap: 0,
          alignItems: 'stretch',
          maxWidth: 1240, marginInline: 'auto',
        }}>
          {/* Card A: £3,500 — restrained, clean */}
          <Reveal delay={80}>
            <div className="vellum lift" style={{ padding: 56, height: '100%', display: 'flex', flexDirection: 'column' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.18em' }}>{opts[0].tag}</div>
              <div style={{ marginTop: 32 }}>
                <div className="serif tnum" style={{ fontSize: 'clamp(80px, 10vw, 132px)', lineHeight: 0.88, color: 'var(--fg)', letterSpacing: '-0.04em' }}>£3,500</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.1em', marginTop: 14 }}>PAID UP FRONT · ONE TIME</div>
              </div>
              <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
                <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.15, letterSpacing: '-0.02em' }}>
                  Pay it.<br/>
                  Walk in <em style={{ color: 'var(--accent)' }}>clean.</em>
                </h3>
                <p style={{ fontSize: 14, color: 'var(--fg-3)', marginTop: 16, lineHeight: 1.65, maxWidth: 380 }}>
                  For people with savings who want maximum freedom on day one. No tie-in. No recoupment. No income threshold. After your eight weeks of training, you're a Bronze-tier partner with the same job board access as everyone else.
                </p>
              </div>
              <div style={{ marginTop: 32, display: 'grid', gap: 0 }}>
                {[
                  ['Cohort fee', '£3,500'],
                  ['Application fee', '£100 (refundable)'],
                  ['Tie-in', 'None'],
                  ['Income share', 'None'],
                  ['First install pays', 'Full Bronze rate · £2,400'],
                ].map(r => (
                  <div key={r[0]} className="row between" style={{ fontSize: 13, padding: '12px 0', borderTop: '1px solid var(--line)' }}>
                    <span style={{ color: 'var(--fg-3)' }}>{r[0]}</span>
                    <span className="mono" style={{ color: 'var(--fg)' }}>{r[1]}</span>
                  </div>
                ))}
              </div>
              <button className="btn btn-ghost" style={{ marginTop: 36, width: '100%', justifyContent: 'center' }}>
                Pay up front <span className="arrow">→</span>
              </button>
            </div>
          </Reveal>

          {/* OR — typographic moment between cards */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18, padding: '0 8px' }}>
            <div style={{ width: 1, flex: 1, background: 'linear-gradient(180deg, transparent, var(--line-2), transparent)' }} />
            <div className="serif" style={{
              fontSize: 30, fontStyle: 'italic',
              color: 'var(--fg-3)', letterSpacing: '-0.03em',
              padding: '8px 16px',
              border: '1px solid var(--line-2)',
              borderRadius: 999,
              background: 'rgba(255,253,248,0.6)',
              backdropFilter: 'blur(12px)',
            }}>or</div>
            <div style={{ width: 1, flex: 1, background: 'linear-gradient(180deg, transparent, var(--line-2), transparent)' }} />
          </div>

          {/* Card B: £0 — featured, dramatic, accent */}
          <Reveal delay={160}>
            <div className="vellum lift" style={{
              padding: 56, height: '100%',
              display: 'flex', flexDirection: 'column',
              borderColor: 'var(--accent)',
              background: 'linear-gradient(180deg, rgba(74,222,128,0.10), rgba(74,222,128,0.02))',
              boxShadow: '0 30px 80px -20px rgba(74,222,128,0.30), inset 0 1px 0 rgba(255,255,255,0.06), 0 60px 120px -40px rgba(74,222,128,0.15)',
              position: 'relative',
            }}>
              <span className="chip" style={{
                position: 'absolute', top: 18, right: 18,
                background: 'var(--accent)', color: 'var(--bg)', borderColor: 'var(--accent)',
                fontWeight: 600, letterSpacing: '0.1em',
              }}>
                <i className="led" style={{ background: 'var(--bg)', boxShadow: 'none' }} /> SECRET WEAPON
              </span>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.18em' }}>{opts[1].tag}</div>
              <div style={{ marginTop: 32 }}>
                <div className="serif tnum" style={{
                  fontSize: 'clamp(80px, 10vw, 132px)', lineHeight: 0.88,
                  color: 'var(--accent)', letterSpacing: '-0.04em',
                  display: 'flex', alignItems: 'baseline', gap: 18,
                }}>
                  £0
                  <span className="mono" style={{ fontSize: 14, color: 'var(--fg-3)', letterSpacing: '0.1em', fontStyle: 'normal' }}>
                    UP FRONT
                  </span>
                </div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', letterSpacing: '0.1em', marginTop: 14 }}>SETTLED VIA YOUR FIRST 24 HiLOOKS INSTALLS</div>
              </div>
              <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid rgba(74,222,128,0.25)' }}>
                <h3 className="serif" style={{ fontSize: 30, lineHeight: 1.15, letterSpacing: '-0.02em' }}>
                  Free training.<br/>
                  <em style={{ color: 'var(--accent)' }}>You work with us.</em>
                </h3>
                <p style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 16, lineHeight: 1.65, maxWidth: 420 }}>
                  We front the £3,500. You front nothing. After certification, your first twenty-four HiLooks installs each carry a £150 deferred-fee credit — settling the cost as you earn. No bank loan. No interest. No monthly payment. Just installs.
                </p>
              </div>
              <div style={{ marginTop: 32, display: 'grid', gap: 0 }}>
                {[
                  ['Cohort fee', '£0 up front'],
                  ['Settled by', '24 installs · £150 credit each'],
                  ['Time to clear', '~9 mo at 3 jobs/wk'],
                  ['Per install during', '£2,250 (£2,400 − £150)'],
                  ['After install 24', 'Full Bronze rate · climb tiers'],
                ].map(r => (
                  <div key={r[0]} className="row between" style={{ fontSize: 13, padding: '12px 0', borderTop: '1px solid rgba(74,222,128,0.18)' }}>
                    <span style={{ color: 'var(--fg-3)' }}>{r[0]}</span>
                    <span className="mono" style={{ color: 'var(--fg)' }}>{r[1]}</span>
                  </div>
                ))}
              </div>
              <button className="btn btn-accent" style={{ marginTop: 36, width: '100%', justifyContent: 'center' }}>
                Earn while you learn <span className="arrow">→</span>
              </button>
            </div>
          </Reveal>
        </div>

        {/* Both routes / one destination strip */}
        <Reveal delay={280}>
          <div style={{
            marginTop: 64, padding: '28px 40px',
            border: '1px solid var(--line)',
            borderRadius: 18,
            background: 'rgba(255,255,255,0.03)',
            display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 32,
            alignItems: 'center', maxWidth: 1240, marginInline: 'auto',
          }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.14em' }}>BOTH ROUTES LEAD TO</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 6 }}>The same network</div>
            </div>
            <div className="row" style={{ gap: 18, alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.1em' }}>
              <span>BRONZE TIER</span>
              <span style={{ color: 'var(--fg-4)' }}>·</span>
              <span>MCS-CERTIFIED</span>
              <span style={{ color: 'var(--fg-4)' }}>·</span>
              <span>WEEKLY PAY</span>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.14em' }}>SAFETY NET</div>
              <div className="serif" style={{ fontSize: 17, marginTop: 6, lineHeight: 1.25 }}>If HiLooks under-supplies — fee waived</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// === Recoupment math: how the deferred-fee actually works ===
const AcademyMath = () => {
  // 24 installs, £150 credit each → £3,500 settled (with rounding)
  const installs = Array.from({ length: 24 }, (_, i) => i + 1);
  return (
    <section className="section" style={{ background: 'linear-gradient(180deg, transparent, rgba(74,222,128,0.025))' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, marginBottom: 48 }}>
          <Reveal>
            <span className="eyebrow">05 / The deferred-fee math</span>
            <h2 className="h2-display" style={{ marginTop: 24 }}>
              How "free up front"<br />
              <em style={{ color: 'var(--accent)' }}>actually works.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lead" style={{ alignSelf: 'end' }}>
              We don't dress this up. The £3,500 fee is real, and it is settled — by you, through your work, after you qualify. Here's the whole arithmetic, including what you take home during the recoupment period.
            </p>
          </Reveal>
        </div>
        <Reveal>
          <div className="surface-2" style={{ padding: 32, marginBottom: 12 }}>
            <div className="row between" style={{ marginBottom: 22, flexWrap: 'wrap', gap: 12 }}>
              <div>
                <div className="serif" style={{ fontSize: 22 }}>Recoupment timeline · 24 installs</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>£150 CREDIT PER INSTALL · ~9 MONTHS AT 3 JOBS / WK · UNTIL £3,500 SETTLED</div>
              </div>
              <div className="row" style={{ gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>
                  <span style={{ width: 12, height: 12, borderRadius: 3, background: 'var(--warm)' }} />FEE BALANCE
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>
                  <span style={{ width: 12, height: 12, borderRadius: 3, background: 'var(--accent)' }} />YOU EARN
                </div>
              </div>
            </div>
            <svg viewBox="0 0 760 200" style={{ width: '100%', height: 200 }}>
              <defs>
                <linearGradient id="balG" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0%" stopColor="#C97A3A" stopOpacity="0.6" />
                  <stop offset="100%" stopColor="#C97A3A" stopOpacity="0.05" />
                </linearGradient>
              </defs>
              {[0, 1, 2, 3, 4].map(i => (
                <line key={i} x1="0" y1={i * 40} x2="760" y2={i * 40} stroke="rgba(255,255,255,0.05)" />
              ))}
              {installs.map((n, i) => {
                const x = 6 + (i / 24) * 740;
                const w = (740 / 24) - 4;
                const remaining = Math.max(0, 3500 - n * 150);
                const balH = (remaining / 3500) * 80;
                const earnH = ((2400 - 150) / 2400) * 80; // proportional earnings during recoupment
                return (
                  <g key={n}>
                    <rect x={x} y={100 - balH} width={w} height={balH} fill="url(#balG)" rx="2" />
                    <rect x={x} y={120} width={w} height={earnH * 0.85} fill="#4ADE80" opacity="0.85" rx="2" />
                  </g>
                );
              })}
              <line x1="0" y1="100" x2="760" y2="100" stroke="rgba(255,255,255,0.08)" />
              <text x="6" y="14" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(245,247,248,0.55)" letterSpacing="1.2">£3,500 OWED</text>
              <text x="700" y="98" fontFamily="JetBrains Mono" fontSize="10" fill="#4ADE80" letterSpacing="1.2">£0 OWED</text>
              <text x="6" y="195" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(245,247,248,0.55)" letterSpacing="1.2">INSTALL 1</text>
              <text x="690" y="195" fontFamily="JetBrains Mono" fontSize="10" fill="rgba(245,247,248,0.55)" letterSpacing="1.2">INSTALL 24</text>
            </svg>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
          {[
            { l: 'Per install during recoupment', v: '£2,250', s: '£2,400 standard − £150 credit', accent: false },
            { l: 'Per install after install 24', v: '£2,400', s: 'Full Bronze rate, no credit', accent: true },
            { l: 'Recoupment period', v: '~9 mo', s: 'At 3 jobs/wk pace', accent: false },
            { l: 'Settled total', v: '£3,500', s: '24 × £150 credit', accent: false },
          ].map((s, i) => (
            <div key={i} className="surface" style={{ padding: 20 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{s.l}</div>
              <div className="serif tnum" style={{ fontSize: 38, lineHeight: 1, marginTop: 10, color: s.accent ? 'var(--accent)' : 'var(--fg)' }}>{s.v}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 8 }}>{s.s}</div>
            </div>
          ))}
        </div>

        {/* Worked example */}
        <Reveal delay={120}>
          <div className="surface-2" style={{ padding: 32, marginTop: 24 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.14em', marginBottom: 14 }}>WORKED EXAMPLE · A CAREER-CHANGING PLUMBER, AGE 38</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
              <div>
                <div className="serif" style={{ fontSize: 20 }}>Day 1</div>
                <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 6, lineHeight: 1.6 }}>Joins cohort with no savings. Signs deferred-fee agreement. Pays £100 refundable application fee. Eight weeks of training begins.</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 20 }}>Months 3–11</div>
                <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 6, lineHeight: 1.6 }}>Qualifies. Joins Bronze tier. Installs 24 jobs at £2,250 each (£54k earned). The £150-per-install credit settles the £3,500 fee in full.</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 20 }}>Month 12+</div>
                <div style={{ fontSize: 13, color: 'var(--fg-3)', marginTop: 6, lineHeight: 1.6, color: 'var(--fg-2)' }}>Fee fully settled. Earning at full Bronze rate (£2,400/install). On track for Silver in month 18 (£2,520/install) and Gold in month 30 (£2,640/install + guaranteed flow + bonus).</div>
              </div>
            </div>
            <div style={{ marginTop: 24, padding: 16, borderRadius: 12, background: 'rgba(74,222,128,0.06)', border: '1px solid rgba(74,222,128,0.25)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em' }}>FAIRNESS SAFETY NET</div>
              <div style={{ fontSize: 13.5, color: 'var(--fg-2)', marginTop: 6, lineHeight: 1.6 }}>
                If HiLooks fails to supply enough installs to clear the fee within 24 months — the fee is waived in full. If the trainee leaves the network before recoupment, the unrecovered balance is payable in cash only on earnings above £35k/yr, spread over 36 months. No interest, no fees. <strong>If we don't deliver work, you don't owe us anything.</strong>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// === Certification ladder + next cohort ===
const AcademyCert = () => {
  const levels = [
    { n: 'Foundation', t: '4 weeks', d: 'Heat-pump theory, MCS framework, refrigerant + F-Gas awareness, customer-side fundamentals.', colour: '#A6794D' },
    { n: 'MCS-Certified', t: '8 weeks total', d: 'Full MCS heat-pump installer ticket via LCL Awards or BPEC. The qualification that opens the trade.', colour: '#B8B8B8', featured: true },
    { n: 'HiLooks Senior', t: '12 mo · 50 installs', d: 'In-network performance: SCOP delivery, callbacks, NPS. Eligible to mentor incoming Bronze-tier installers.', colour: '#4ADE80' },
    { n: 'HiLooks Master', t: '36 mo · 200 installs', d: 'Course instructor eligibility. Closes the loop — you teach the next cohort. Paid teaching at £400/day.', colour: '#C97A3A' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, marginBottom: 48 }}>
          <Reveal>
            <span className="eyebrow">06 / Certification ladder</span>
            <h2 className="h2-display" style={{ marginTop: 24 }}>
              Four levels.<br />
              <em style={{ color: 'var(--accent)' }}>The last one teaches.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lead" style={{ alignSelf: 'end' }}>
              The technical ladder runs alongside the commercial tier ladder. You climb both — qualification depth on one, jobs/pay/perks on the other. Top of both, you teach the next cohort. The flywheel.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 32 }}>
          {levels.map((l, i) => (
            <Reveal key={l.n} delay={i * 80}>
              <div className="surface" style={{
                padding: 24, height: '100%',
                display: 'flex', flexDirection: 'column',
                borderColor: l.featured ? l.colour : 'var(--line)',
                background: l.featured ? `linear-gradient(180deg, rgba(184,184,184,0.06), rgba(184,184,184,0.01))` : undefined,
                position: 'relative',
              }}>
                <div className="row" style={{ gap: 12, alignItems: 'center', marginBottom: 14 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: l.colour,
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--mono)', fontSize: 12, color: '#0a0a0a', fontWeight: 600,
                    boxShadow: `0 0 16px ${l.colour}40`,
                  }}>{i + 1}</div>
                  <div className="mono" style={{ fontSize: 10, color: l.colour, letterSpacing: '0.12em' }}>{l.t.toUpperCase()}</div>
                </div>
                <div className="serif" style={{ fontSize: 20, lineHeight: 1.2 }}>{l.n}</div>
                <p style={{ color: 'var(--fg-3)', fontSize: 12.5, lineHeight: 1.6, marginTop: 10, flex: 1 }}>{l.d}</p>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Next cohort + apply CTA */}
        <Reveal delay={120}>
          <div className="surface-2" style={{ padding: 36, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 36, alignItems: 'center', borderColor: 'var(--accent)', background: 'linear-gradient(180deg, rgba(74,222,128,0.06), rgba(74,222,128,0.005))' }}>
            <div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.14em' }}>NEXT COHORT · COHORT 04</div>
              <div className="serif" style={{ fontSize: 56, lineHeight: 1, marginTop: 10 }}>15 Apr 2027</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.08em', marginTop: 12 }}>8 PLACES · 23 ON WAITLIST · APPLICATIONS CLOSE 12 MAR</div>
            </div>
            <div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginBottom: 20 }}>
                {[
                  { l: 'Application fee', v: '£100', s: 'Refundable on completion' },
                  { l: 'Cohort size', v: '8 — 12', s: 'Small enough to get hands-on' },
                  { l: 'Selection ratio', v: '~4 : 1', s: 'Application + interview + practical' },
                  { l: 'Awarding body', v: 'LCL Awards', s: 'MCS-aligned · UK-recognised' },
                ].map((s, i) => (
                  <div key={i} style={{ padding: 14, borderRadius: 10, background: 'rgba(255,255,255,0.025)', border: '1px solid var(--line)' }}>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.1em' }}>{s.l.toUpperCase()}</div>
                    <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>{s.v}</div>
                    <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{s.s}</div>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <button className="btn btn-accent">Apply for cohort 04 <span className="arrow">→</span></button>
                <button className="btn btn-ghost">Join the waitlist</button>
                <button className="btn btn-ghost">Talk to admissions</button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================================
// TIER LADDER — Bronze → Silver → Gold → Partner
// ============================================================================
const TierLadder = () => {
  const tiers = [
    {
      n: 'Bronze',
      sub: 'Entry · first 90 days',
      colour: '#A6794D',
      need: ['Onboarded + insured', 'First 5 installs at quality threshold'],
      get: ['Standard rate', 'Weekly pay', 'Parts pre-delivered', 'Portal access'],
      flow: '1 — 2 jobs / week typical',
    },
    {
      n: 'Silver',
      sub: 'Established · 25+ installs',
      colour: '#B8B8B8',
      need: ['25 installs in network', 'NPS > 60', 'Callbacks under 5%'],
      get: ['+5% on all jobs', 'Branded uniform', 'Priority on jobs', 'Named account manager', 'Free annual CPD'],
      flow: '2 — 3 jobs / week typical',
    },
    {
      n: 'Gold',
      sub: 'Anchor partner · 50+ installs',
      colour: '#4ADE80',
      featured: true,
      need: ['50 installs', 'NPS > 70', 'SCOP > design avg', 'Callbacks under 3%'],
      get: ['+10% on all jobs', 'Guaranteed 3 jobs/wk minimum', 'Holiday + sickness float', 'Van decals + uniform', 'Profile on HiLooks site', 'First dibs on regional pipeline'],
      flow: 'Guaranteed 3+ jobs / week',
    },
    {
      n: 'Partner',
      sub: 'Top 5% · regional captain',
      colour: '#C97A3A',
      need: ['200+ installs', 'Multi-year track record', 'Mentor 2+ Bronze partners'],
      get: ['Revenue share on regional pipeline', 'Course instructor option', 'In-house career offer (optional)', 'Equity-light scheme', 'Annual awards dinner'],
      flow: 'Regional priority + share',
    },
  ];
  return (
    <section className="section" style={{ background: 'linear-gradient(180deg, transparent, rgba(74,222,128,0.02))' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <Reveal><span className="eyebrow" style={{ justifyContent: 'center' }}>07 / The tier ladder</span></Reveal>
          <Reveal delay={120}>
            <h2 className="h2-display" style={{ marginTop: 20, maxWidth: 800, marginInline: 'auto' }}>
              A real career path,<br />
              <em style={{ color: 'var(--accent)' }}>not a flat sub network.</em>
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ marginTop: 24, marginInline: 'auto' }}>
              Most principals run flat networks — every sub interchangeable, same rate, no progression. So subs constantly shop. We earn loyalty by giving you somewhere to grow.
            </p>
          </Reveal>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {tiers.map((t, i) => (
            <Reveal key={t.n} delay={i * 80}>
              <div className="surface" style={{
                padding: 28,
                height: '100%',
                borderColor: t.featured ? t.colour : 'var(--line)',
                background: t.featured ? `linear-gradient(180deg, rgba(74,222,128,0.08), rgba(74,222,128,0.01))` : undefined,
                position: 'relative',
                display: 'flex', flexDirection: 'column',
              }}>
                {t.featured && (
                  <span className="chip" style={{ position: 'absolute', top: 14, right: 14, background: t.colour, color: 'var(--bg)', borderColor: t.colour }}>POPULAR</span>
                )}
                <div className="row" style={{ alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: t.colour,
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--serif)', fontSize: 18, color: '#fff',
                    boxShadow: `0 0 20px ${t.colour}40`,
                  }}>{t.n[0]}</div>
                  <div>
                    <div className="serif" style={{ fontSize: 26, lineHeight: 1 }}>{t.n}</div>
                    <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.1em', marginTop: 4 }}>{t.sub.toUpperCase()}</div>
                  </div>
                </div>
                <div className="mono" style={{ fontSize: 11, color: t.colour, letterSpacing: '0.08em', marginTop: 18, padding: '8px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                  {t.flow.toUpperCase()}
                </div>
                <div style={{ marginTop: 18 }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', marginBottom: 10 }}>WHAT IT TAKES</div>
                  {t.need.map((n, j) => (
                    <div key={j} style={{ fontSize: 12, color: 'var(--fg-2)', padding: '4px 0', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                      <span style={{ color: t.colour, marginTop: 2 }}>·</span>{n}
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 18, paddingTop: 18, borderTop: '1px solid var(--line)' }}>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', marginBottom: 10 }}>WHAT YOU GET</div>
                  {t.get.map((g, j) => (
                    <div key={j} style={{ fontSize: 13, color: 'var(--fg)', padding: '4px 0', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                      <span style={{ color: t.colour }}>✓</span>{g}
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================================
// RATE CARD — honest, published, per-job
// ============================================================================
const RateCard = () => {
  const rows = [
    { j: '6 kW heat-pump install (1–2 day)', t: '1 day on site', s: 1950, b: 200 },
    { j: '8 kW heat-pump install (2 day)', t: '2 days on site', s: 2400, b: 200, popular: true },
    { j: '10 kW install (Vaillant / Mitsubishi)', t: '2 days on site', s: 2750, b: 250 },
    { j: '12 kW+ install (high-spec)', t: '2–3 days on site', s: 3200, b: 250 },
    { j: 'Cylinder + DHW upgrade only', t: 'Half day', s: 680, b: null },
    { j: 'Annual service visit', t: '90 mins', s: 85, b: null },
    { j: 'Commissioning only (we install)', t: '2 hrs', s: 420, b: null },
    { j: 'Callback / fault diagnosis', t: 'Per visit', s: 180, b: null },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, marginBottom: 48 }}>
          <Reveal>
            <span className="eyebrow">08 / Rate card</span>
            <h2 className="h2-display" style={{ marginTop: 24 }}>
              Published.<br />
              <em style={{ color: 'var(--accent)' }}>No haggling.</em>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="lead" style={{ alignSelf: 'end' }}>
              Every partner sees the same rates. Tier multipliers are added on top — Silver +5%, Gold +10%. The quality bonus pays out 12 months after install if SCOP delivery hits the target.
            </p>
          </Reveal>
        </div>
        <Reveal>
          <div className="surface-2" style={{ overflow: 'hidden' }}>
            <div className="mono" style={{
              display: 'grid', gridTemplateColumns: '2.6fr 1fr 1fr 1fr 80px',
              gap: 16, padding: '16px 28px', fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em',
              borderBottom: '1px solid var(--line)',
              background: 'rgba(255,255,255,0.02)',
            }}>
              <span>JOB TYPE</span>
              <span>EFFORT</span>
              <span style={{ textAlign: 'right' }}>BRONZE</span>
              <span style={{ textAlign: 'right' }}>GOLD (+10%)</span>
              <span style={{ textAlign: 'right' }}>BONUS</span>
            </div>
            {rows.map((r, i) => {
              const gold = Math.round(r.s * 1.1);
              return (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '2.6fr 1fr 1fr 1fr 80px',
                  gap: 16, padding: '18px 28px', fontSize: 14, alignItems: 'center',
                  borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none',
                  background: r.popular ? 'rgba(74,222,128,0.04)' : 'transparent',
                }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    {r.popular && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', boxShadow: '0 0 8px var(--accent-glow)' }} />}
                    <span style={{ fontWeight: 500 }}>{r.j}</span>
                  </span>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--fg-3)' }}>{r.t}</span>
                  <span className="mono tnum" style={{ textAlign: 'right' }}>£{r.s.toLocaleString()}</span>
                  <span className="mono tnum" style={{ textAlign: 'right', color: 'var(--accent)', fontWeight: 500 }}>£{gold.toLocaleString()}</span>
                  <span className="mono tnum" style={{ textAlign: 'right', color: r.b ? 'var(--warm)' : 'var(--fg-4)', fontSize: 13 }}>{r.b ? `+£${r.b}` : '—'}</span>
                </div>
              );
            })}
            <div style={{ padding: '14px 28px', background: 'rgba(255,255,255,0.02)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, color: 'var(--fg-4)', fontFamily: 'var(--mono)', letterSpacing: '0.06em', flexWrap: 'wrap', gap: 8 }}>
              <span>QUALITY BONUS PAID 12 MO POST-INSTALL · SCOP ≥ 4.0 ON MQTT FLEET DATA</span>
              <span>RATES REVIEWED Q1 ANNUALLY</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================================
// PAY CADENCE — visual contrast vs industry default
// ============================================================================
const PayCadence = () => (
  <section className="section">
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }}>
        <Reveal>
          <span className="eyebrow">09 / Pay cadence</span>
          <h2 className="h2-display" style={{ marginTop: 24 }}>
            Friday is<br />
            <em style={{ color: 'var(--accent)' }}>pay day.</em>
          </h2>
          <p className="lead" style={{ marginTop: 24 }}>
            UK construction default is 30–60 days net. Most subbies survive on overdrafts and factoring. We pay weekly via UK Faster Payments — so you bank your week's work before the weekend, not next quarter.
          </p>
          <div style={{ marginTop: 24, display: 'grid', gap: 10, fontSize: 13 }}>
            {[
              ['Pay run cuts', 'Thu 17:00'],
              ['Faster Payment cleared', 'Fri 09:00'],
              ['Cash in your account', 'Friday morning · always'],
              ['Late pay incidents 2024–25', 'Zero'],
            ].map(r => (
              <div key={r[0]} className="row between" style={{ padding: '10px 0', borderTop: '1px solid var(--line)' }}>
                <span style={{ color: 'var(--fg-3)' }}>{r[0]}</span><span className="mono">{r[1]}</span>
              </div>
            ))}
          </div>
        </Reveal>
        <Reveal delay={200}>
          <div className="surface-2" style={{ padding: 28 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', marginBottom: 18 }}>WAITING TIME · DAYS FROM JOB COMPLETE TO CASH IN ACCOUNT</div>
            {[
              { l: 'HiLooks', d: 4, c: 'var(--accent)', n: 'Weekly · UK FPS' },
              { l: 'Industry standard', d: 30, c: 'var(--warn)', n: '30 days net' },
              { l: 'Major housebuilder subs', d: 60, c: 'var(--danger)', n: '60 days net' },
              { l: 'Distressed principal', d: 90, c: 'var(--danger)', n: '90+ days · factoring' },
            ].map((row, i) => (
              <div key={i} style={{ marginBottom: 18 }}>
                <div className="row between" style={{ marginBottom: 6 }}>
                  <span style={{ fontSize: 14, fontWeight: 500, color: i === 0 ? 'var(--accent)' : 'var(--fg)' }}>{row.l}</span>
                  <span className="mono tnum" style={{ fontSize: 13, color: row.c }}>{row.d} days</span>
                </div>
                <div style={{ height: 8, background: 'rgba(255,255,255,0.04)', borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${(row.d / 90) * 100}%`, background: row.c, transition: 'width 800ms' }} />
                </div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.08em', marginTop: 4 }}>{row.n.toUpperCase()}</div>
              </div>
            ))}
            <div style={{ marginTop: 24, padding: 16, borderRadius: 12, background: 'rgba(74,222,128,0.05)', border: '1px solid rgba(74,222,128,0.2)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.12em' }}>WORKING-CAPITAL EFFECT</div>
              <div style={{ fontSize: 13, color: 'var(--fg-2)', marginTop: 6, lineHeight: 1.6 }}>
                A typical 4-engineer firm on 30-day terms carries ~£24k of work-in-progress at any time. With us, that drops to ~£3.5k. The other £20k stays in your bank, not ours.
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

// ============================================================================
// PARTNER PORTAL PREVIEW — the operating system for the network
// ============================================================================
const KPI = ({ l, v, sub, accent, warm }) => (
  <div className="surface" style={{ padding: 18 }}>
    <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{l}</div>
    <div className="serif tnum" style={{ fontSize: 36, lineHeight: 1, marginTop: 10, color: accent ? 'var(--accent)' : warm ? 'var(--warm)' : 'var(--fg)' }}>{v}</div>
    <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 6 }}>{sub}</div>
  </div>
);

const PortalToday = () => (
  <div>
    <div className="row between" style={{ marginBottom: 18 }}>
      <div>
        <div className="serif" style={{ fontSize: 28 }}>Morning, Ryan</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', marginTop: 6, letterSpacing: '0.08em' }}>WED 12 NOV · ALLESTREE D2 · 06:42 SUNRISE · 4°C</div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button className="btn btn-ghost btn-sm">Message HQ</button>
        <button className="btn btn-accent btn-sm">Open today's pack <span className="arrow">→</span></button>
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
      <KPI l="This Friday's pay" v="£4,820" sub="Cleared 09:00 · 4 jobs" accent />
      <KPI l="Bonus pending Q4" v="£1,200" sub="6 installs hit SCOP target" warm />
      <KPI l="Quality this month" v="4.34" sub="SCOP fleet avg · target 4.0" />
      <KPI l="Tier · Gold" v="50/50" sub="98% of Partner threshold" />
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, marginTop: 12 }}>
      <div className="surface" style={{ padding: 22 }}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <div>
            <div className="serif" style={{ fontSize: 20 }}>Today's job · Allestree DE22 2HP</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 2 }}>1972 SEMI · 96M² · 8KW DAIKIN · DAY 2 OF 2</div>
          </div>
          <span className="chip"><i className="led" /> KIT ON VAN</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 16 }}>
          {[
            { l: 'Pack ready', v: '✓' },
            { l: 'Customer briefed', v: '✓' },
            { l: 'Parts delivered', v: '✓' },
          ].map((x, i) => (
            <div key={i} style={{ padding: '10px 14px', borderRadius: 10, border: '1px solid rgba(74,222,128,0.2)', background: 'rgba(74,222,128,0.05)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em' }}>{x.l.toUpperCase()}</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 4, color: 'var(--accent)' }}>{x.v}</div>
            </div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 12 }}>
          {[
            ['Job ref', 'AVL-3091'],
            ['Sub fee', '£2,640 (Gold +10%)'],
            ['Bonus eligible', '£200 if SCOP ≥ 4.0 by Nov 2027'],
            ['Account manager', 'Sarah K · 07700 900 318'],
            ['Next step', 'Commission @ 14:00 · weather-comp curve'],
            ['Customer never has', 'your phone number'],
          ].map(r => (
            <div key={r[0]} className="row between" style={{ padding: '8px 0', borderBottom: '1px solid var(--line)' }}>
              <span style={{ color: 'var(--fg-3)' }}>{r[0]}</span>
              <span className="mono" style={{ color: 'var(--fg)' }}>{r[1]}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="surface" style={{ padding: 22 }}>
        <div className="serif" style={{ fontSize: 18, marginBottom: 12 }}>Notifications</div>
        {[
          { t: 'Sheffield S11 commissioning passed · SCOP 4.21 — bonus locked in 12mo.', d: '2h', c: 'var(--accent)' },
          { t: 'Friday pay run: £4,820 confirmed. Cleared via Modulr.', d: '5h', c: 'var(--accent)' },
          { t: 'New Gold-tier job available · Long Eaton 8kW · claim before 17:00.', d: '6h', c: 'var(--warm)' },
          { t: 'Q4 partner meet · Curry @ Mughli, Sheffield · Thurs 27th.', d: '1d', c: 'var(--fg-3)' },
          { t: 'CPD slot booked · Vaillant Advanced · 18 Dec.', d: '2d', c: 'var(--fg-3)' },
        ].map((n, i) => (
          <div key={i} style={{ padding: '12px 0', borderTop: i ? '1px solid var(--line)' : 'none', display: 'flex', gap: 10 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: n.c, marginTop: 6, flexShrink: 0 }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, lineHeight: 1.5 }}>{n.t}</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>{n.d.toUpperCase()} AGO</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const PortalJobs = () => {
  const jobs = [
    { ref: 'AVL-3094', area: 'Long Eaton NG10', size: '8 kW Daikin', days: 2, fee: 2640, bonus: 200, dist: '14 mi', kit: 'Ready', nps: '— new', tier: 'Gold-only' },
    { ref: 'AVL-3097', area: 'West Bridgford NG2', size: '10 kW Vaillant', days: 2, fee: 3025, bonus: 250, dist: '24 mi', kit: 'Wed AM', nps: '— new', tier: 'Silver+' },
    { ref: 'AVL-3098', area: 'Sheffield S11', size: '6 kW Daikin', days: 1, fee: 2145, bonus: 200, dist: '38 mi', kit: 'Thu AM', nps: '— new', tier: 'Gold+ priority' },
    { ref: 'AVL-3101', area: 'Belper DE56', size: '12 kW Mitsubishi', days: 3, fee: 3520, bonus: 250, dist: '8 mi', kit: 'Fri AM', nps: 'returning · NPS 9', tier: 'Open' },
    { ref: 'AVL-3104', area: 'Mansfield NG18', size: 'Cylinder swap', days: 0.5, fee: 680, bonus: null, dist: '22 mi', kit: 'Day-of', nps: '— new', tier: 'Open' },
    { ref: 'AVL-3105', area: 'Chesterfield S40', size: 'Service ×3 day', days: 1, fee: 255, bonus: null, dist: '18 mi', kit: 'Day-of', nps: 'service contracts', tier: 'Open' },
    { ref: 'AVL-3107', area: 'Beeston NG9', size: 'Commissioning only', days: 0.25, fee: 462, bonus: null, dist: '12 mi', kit: 'On site', nps: '— new', tier: 'Silver+' },
  ];
  return (
    <div>
      <div className="row between" style={{ marginBottom: 14 }}>
        <div>
          <div className="serif" style={{ fontSize: 24 }}>Available jobs · 7 open</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>ALL ASSIGNED BEFORE FRIDAY · CLAIM ORDER BY TIER</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['All', 'Install', 'Commission', 'Service'].map((t, i) => (
            <span key={t} className="chip" style={{ background: i === 0 ? 'var(--accent)' : 'transparent', color: i === 0 ? 'var(--bg)' : 'var(--fg-2)', borderColor: i === 0 ? 'var(--accent)' : 'var(--line)' }}>{t}</span>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gap: 8 }}>
        {jobs.map((j, i) => (
          <div key={j.ref} className="surface" style={{ padding: 18, display: 'grid', gridTemplateColumns: '90px 1.4fr 1fr 1fr 100px 110px', gap: 16, alignItems: 'center' }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em' }}>{j.ref}</span>
            <div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{j.area} · {j.size}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 2 }}>{j.dist} · {j.days >= 1 ? `${j.days} day${j.days > 1 ? 's' : ''}` : 'half day'} · KIT {j.kit.toUpperCase()}</div>
            </div>
            <span className="mono" style={{ fontSize: 12, color: 'var(--fg-3)' }}>{j.tier}</span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--fg-3)' }}>{j.nps}</span>
            <div style={{ textAlign: 'right' }}>
              <div className="mono tnum" style={{ fontSize: 14, fontWeight: 500 }}>£{j.fee.toLocaleString()}</div>
              {j.bonus && <div className="mono tnum" style={{ fontSize: 11, color: 'var(--warm)', marginTop: 2 }}>+£{j.bonus} bonus</div>}
            </div>
            <button className="btn btn-accent btn-sm" style={{ width: '100%', justifyContent: 'center' }}>Claim</button>
          </div>
        ))}
      </div>
      <div className="mono" style={{ marginTop: 18, fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em' }}>
        GOLD-TIER 24H PRIORITY · SILVER 12H · BRONZE OPEN BAND
      </div>
    </div>
  );
};

const PortalPay = () => {
  const weeks = React.useMemo(() => Array.from({ length: 12 }, (_, i) => 3200 + Math.sin(i * 0.6) * 800 + Math.random() * 400), []);
  const ytd = Math.round(weeks.reduce((a, b) => a + b, 0) + 88400);
  const w = 600, h = 140;
  const max = Math.max(...weeks);
  const bars = weeks.map((v, i) => ({ x: (i / 12) * w + 6, y: h - (v / max) * (h - 20), height: (v / max) * (h - 20), v: Math.round(v) }));
  return (
    <div>
      <div className="row between" style={{ marginBottom: 14 }}>
        <div>
          <div className="serif" style={{ fontSize: 24 }}>My pay</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>HOLT RENEWABLES LTD · MODULR · UK FASTER PAYMENTS</div>
        </div>
        <button className="btn btn-ghost btn-sm">Download CSV · 12mo</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, marginBottom: 12 }}>
        <div className="surface" style={{ padding: 24, background: 'linear-gradient(180deg, rgba(74,222,128,0.06), rgba(74,222,128,0.01))', borderColor: 'var(--accent)' }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.12em' }}>THIS FRIDAY · 14 NOV · 09:00</div>
          <div className="serif tnum" style={{ fontSize: 72, lineHeight: 1, marginTop: 10, color: 'var(--accent)' }}>£4,820</div>
          <div style={{ fontSize: 13, color: 'var(--fg-2)', marginTop: 10 }}>4 jobs cleared · Allestree D1+D2, Beeston commissioning, Sheffield D1.</div>
          <div style={{ marginTop: 14, padding: '10px 14px', borderRadius: 10, background: 'rgba(74,222,128,0.05)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em' }}>
            <span>FASTER PAYMENT · CLEARS &lt; 30 SEC</span>
            <span>REF: HL-WK46-HOLT</span>
          </div>
        </div>
        <div className="surface" style={{ padding: 22 }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em' }}>YEAR TO DATE</div>
          <div className="serif tnum" style={{ fontSize: 48, lineHeight: 1, marginTop: 10 }}>£{ytd.toLocaleString()}</div>
          <div style={{ marginTop: 14, display: 'grid', gap: 8, fontSize: 12 }}>
            {[
              ['Install fees', '£128,400'],
              ['Tier multiplier (Gold +10%)', '£12,840'],
              ['Quality bonuses paid', '£3,800'],
              ['Holiday float Aug', '£1,200'],
            ].map(r => (
              <div key={r[0]} className="row between"><span style={{ color: 'var(--fg-3)' }}>{r[0]}</span><span className="mono tnum">{r[1]}</span></div>
            ))}
          </div>
        </div>
      </div>
      <div className="surface" style={{ padding: 24 }}>
        <div className="row between" style={{ marginBottom: 16 }}>
          <div>
            <div className="serif" style={{ fontSize: 18 }}>Last 12 weeks</div>
            <div style={{ fontSize: 12, color: 'var(--fg-4)' }}>Friday clears · before parts/admin · before bonus</div>
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '0.06em' }}>AVG £{Math.round(weeks.reduce((a,b)=>a+b,0)/12).toLocaleString()} / WEEK</div>
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 140 }}>
          <defs>
            <linearGradient id="bar" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#4ADE80" stopOpacity="0.95" />
              <stop offset="100%" stopColor="#22C55E" stopOpacity="0.65" />
            </linearGradient>
          </defs>
          {[0, 1, 2, 3].map(i => <line key={i} x1="0" y1={i * h / 3} x2={w} y2={i * h / 3} stroke="rgba(255,255,255,0.04)" />)}
          {bars.map((b, i) => (
            <g key={i}>
              <rect x={b.x} y={b.y} width={(w / 12) - 14} height={b.height} fill="url(#bar)" rx="3" />
              {i === bars.length - 1 && <rect x={b.x - 2} y={b.y - 4} width={(w / 12) - 10} height={b.height + 4} fill="none" stroke="#4ADE80" strokeWidth="1.5" rx="4" />}
            </g>
          ))}
        </svg>
      </div>
    </div>
  );
};

const PortalQuality = () => {
  const w = 600, h = 160;
  const data = React.useMemo(() => Array.from({ length: 24 }, (_, i) => 4.0 + Math.sin(i * 0.4) * 0.25 + Math.random() * 0.15), []);
  const min = 3.6, max = 4.6;
  const pts = data.map((v, i) => [(i / 23) * w, h - ((v - min) / (max - min)) * (h - 20) - 10]);
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  const target = h - ((4.0 - min) / (max - min)) * (h - 20) - 10;
  return (
    <div>
      <div className="row between" style={{ marginBottom: 14 }}>
        <div>
          <div className="serif" style={{ fontSize: 24 }}>Quality scorecard</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>HOLT RENEWABLES · 50 INSTALLS · 12-MONTH ROLLING</div>
        </div>
        <span className="chip" style={{ background: 'var(--accent)', color: 'var(--bg)', borderColor: 'var(--accent)' }}>GOLD STANDARD MAINTAINED</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 12 }}>
        <KPI l="SCOP fleet avg" v="4.34" sub="Target ≥ 4.0 · ↑ 0.06 vs Q3" accent />
        <KPI l="Customer NPS" v="78" sub="Target ≥ 70 · 50 surveys" />
        <KPI l="Callback rate" v="2.1%" sub="Target ≤ 3% · 1 of 47" />
        <KPI l="On-time delivery" v="96%" sub="Target ≥ 90%" />
      </div>
      <div className="surface" style={{ padding: 24, marginBottom: 12 }}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <div>
            <div className="serif" style={{ fontSize: 18 }}>SCOP delivery vs design</div>
            <div style={{ fontSize: 12, color: 'var(--fg-4)' }}>Last 24 installs · MQTT 12mo data · target line at 4.0</div>
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--accent)' }}>+0.34 ABOVE TARGET</div>
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 160 }}>
          <defs>
            <linearGradient id="qg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#4ADE80" stopOpacity="0.4" />
              <stop offset="100%" stopColor="#4ADE80" stopOpacity="0" />
            </linearGradient>
          </defs>
          {[0, 1, 2, 3].map(i => <line key={i} x1="0" y1={i * h / 3} x2={w} y2={i * h / 3} stroke="rgba(255,255,255,0.04)" />)}
          <line x1="0" y1={target} x2={w} y2={target} stroke="#F5A524" strokeDasharray="4 4" strokeWidth="1" opacity="0.5" />
          <text x={w - 80} y={target - 6} fontFamily="JetBrains Mono" fontSize="10" fill="#F5A524" letterSpacing="1">TARGET 4.0</text>
          <path d={`${path} L ${w} ${h} L 0 ${h} Z`} fill="url(#qg)" />
          <path d={path} fill="none" stroke="#4ADE80" strokeWidth="2" />
          {pts.map((p, i) => (
            <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="#4ADE80" />
          ))}
          <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="6" fill="#4ADE80" opacity="0.3" />
          <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="3" fill="#4ADE80" />
        </svg>
      </div>
      <div className="surface" style={{ padding: 22 }}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <div className="serif" style={{ fontSize: 18 }}>Bonus ledger · this quarter</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--warm)', letterSpacing: '0.06em' }}>£1,200 PENDING · £2,600 LOCKED IN</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '90px 1.6fr 1fr 80px 90px', gap: 12, padding: '8px 0', fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--fg-4)', letterSpacing: '0.1em', borderBottom: '1px solid var(--line)' }}>
          <span>JOB</span><span>CUSTOMER</span><span>SCOP @ 12MO</span><span style={{ textAlign: 'right' }}>BONUS</span><span style={{ textAlign: 'right' }}>STATUS</span>
        </div>
        {[
          { j: 'AVL-2941', cust: 'Mosley · DE22', s: '4.41', b: 200, st: 'Paid', col: 'var(--accent)' },
          { j: 'AVL-2952', cust: 'Patel · S11', s: '4.21', b: 200, st: 'Paid', col: 'var(--accent)' },
          { j: 'AVL-2967', cust: 'Wilson · NG9', s: '4.18', b: 200, st: 'Paid', col: 'var(--accent)' },
          { j: 'AVL-3001', cust: 'Khan · NG2', s: '4.04', b: 200, st: 'Paid', col: 'var(--accent)' },
          { j: 'AVL-3018', cust: 'Reilly · DN12', s: '— at 8mo', b: 250, st: 'Pending', col: 'var(--warm)' },
          { j: 'AVL-3024', cust: 'Goodman · DE56', s: '— at 6mo', b: 200, st: 'Pending', col: 'var(--warm)' },
        ].map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 1.6fr 1fr 80px 90px', gap: 12, padding: '12px 0', fontSize: 13, borderBottom: '1px solid var(--line)', alignItems: 'center' }}>
            <span className="mono" style={{ color: 'var(--fg-4)' }}>{r.j}</span>
            <span style={{ fontWeight: 500 }}>{r.cust}</span>
            <span className="mono tnum" style={{ color: r.s.startsWith('—') ? 'var(--fg-4)' : 'var(--accent)' }}>{r.s}</span>
            <span className="mono tnum" style={{ textAlign: 'right' }}>£{r.b}</span>
            <span className="mono" style={{ textAlign: 'right', color: r.col, fontSize: 11, letterSpacing: '0.08em' }}>{r.st.toUpperCase()}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const PortalPipeline = () => {
  const weeks = ['Wk 46', 'Wk 47', 'Wk 48', 'Wk 49', 'Wk 50', 'Wk 51'];
  const slots = [
    [{ d: 'Mon-Tue', t: 'Allestree · 8kW Daikin', s: 'confirmed' }, { d: 'Wed', t: 'Beeston · commission', s: 'confirmed' }, { d: 'Thu-Fri', t: 'Sheffield · 10kW Vaillant', s: 'confirmed' }],
    [{ d: 'Mon-Tue', t: 'Long Eaton · 8kW', s: 'claim ready' }, { d: 'Wed', t: 'service ×3', s: 'claim ready' }, { d: 'Thu-Fri', t: 'Belper · 12kW', s: 'provisional' }],
    [{ d: 'Mon-Tue', t: 'West Bridgford · 10kW', s: 'provisional' }, { d: 'Wed-Thu', t: 'Mansfield · 8kW', s: 'provisional' }],
    [{ d: 'Mon-Tue', t: 'Chesterfield · 8kW', s: 'forecast' }, { d: 'Wed', t: 'commission ×2', s: 'forecast' }, { d: 'Thu-Fri', t: 'Open slot', s: 'open' }],
    [{ d: 'Mon-Wed', t: 'Holiday · paid float £600', s: 'holiday' }, { d: 'Thu-Fri', t: 'Open slot', s: 'open' }],
    [{ d: 'Mon-Tue', t: 'Open slot', s: 'open' }, { d: 'Wed', t: 'Open slot', s: 'open' }, { d: 'Thu-Fri', t: 'Open slot', s: 'open' }],
  ];
  const tone = (s) => ({
    confirmed: { bg: 'rgba(74,222,128,0.1)', bd: 'rgba(74,222,128,0.3)', c: 'var(--accent)' },
    'claim ready': { bg: 'rgba(245,165,36,0.1)', bd: 'rgba(245,165,36,0.3)', c: 'var(--warn)' },
    provisional: { bg: 'rgba(255,255,255,0.04)', bd: 'rgba(255,255,255,0.1)', c: 'var(--fg-2)' },
    forecast: { bg: 'rgba(255,255,255,0.02)', bd: 'rgba(255,255,255,0.06)', c: 'var(--fg-3)' },
    holiday: { bg: 'rgba(201,122,58,0.1)', bd: 'rgba(201,122,58,0.3)', c: 'var(--warm)' },
    open: { bg: 'transparent', bd: 'rgba(255,255,255,0.08)', c: 'var(--fg-4)' },
  })[s];
  return (
    <div>
      <div className="row between" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div className="serif" style={{ fontSize: 24 }}>Forward pipeline · 6 weeks</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>GOLD-TIER MIN 3 JOBS / WK · RETAINER £600 IF GAP</div>
        </div>
        <div className="row" style={{ gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          {[['confirmed','var(--accent)'],['claim ready','var(--warn)'],['provisional','var(--fg-2)'],['open','var(--fg-4)']].map(k => (
            <div key={k[0]} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: k[1] }} />{k[0].toUpperCase()}
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
        {weeks.map((w, wi) => (
          <div key={w} className="surface" style={{ padding: 14, minHeight: 240 }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', marginBottom: 12 }}>{w.toUpperCase()}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {(slots[wi] || []).map((s, si) => {
                const t = tone(s.s);
                return (
                  <div key={si} style={{ padding: '8px 10px', borderRadius: 8, background: t.bg, border: `1px solid ${t.bd}` }}>
                    <div className="mono" style={{ fontSize: 9, color: t.c, letterSpacing: '0.08em' }}>{s.d.toUpperCase()}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--fg)', marginTop: 2 }}>{s.t}</div>
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const PortalTier = () => {
  const reqs = [
    { l: 'Total installs', cur: 50, tgt: 200, unit: '' },
    { l: 'Customer NPS rolling', cur: 78, tgt: 75, unit: '' },
    { l: 'SCOP fleet avg', cur: 4.34, tgt: 4.1, unit: '' },
    { l: 'Callback rate', cur: 2.1, tgt: 3, unit: '%', invert: true },
    { l: 'Years in network', cur: 1.2, tgt: 2, unit: 'y' },
    { l: 'Bronze partners mentored', cur: 0, tgt: 2, unit: '' },
  ];
  return (
    <div>
      <div className="row between" style={{ marginBottom: 18 }}>
        <div>
          <div className="serif" style={{ fontSize: 24 }}>My tier · Gold</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>HOLDING SINCE MAR 2025 · ELIGIBLE FOR PARTNER REVIEW Q2 2027</div>
        </div>
        <span className="chip" style={{ background: 'var(--accent)', color: 'var(--bg)', borderColor: 'var(--accent)' }}>● ALL GOLD CRITERIA MAINTAINED</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 12, marginBottom: 12 }}>
        <div className="surface" style={{ padding: 24, background: 'linear-gradient(180deg, rgba(74,222,128,0.06), rgba(74,222,128,0.01))', borderColor: 'var(--accent)' }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.12em' }}>NEXT TIER · PARTNER (TOP 5%)</div>
          <div className="serif" style={{ fontSize: 28, marginTop: 8 }}>You're 25% there.</div>
          <p style={{ fontSize: 13, color: 'var(--fg-2)', marginTop: 10, lineHeight: 1.55, maxWidth: 480 }}>
            Partner is the top tier — regional captain, revenue share on regional pipeline, and a permanent in-house career offer if you ever want it. Six gates to clear.
          </p>
          <div style={{ marginTop: 18, display: 'grid', gap: 12 }}>
            {reqs.map((r, i) => {
              const ratio = r.invert ? Math.min(1, r.tgt / Math.max(r.cur, 0.01)) : Math.min(1, r.cur / r.tgt);
              const met = ratio >= 1;
              return (
                <div key={i}>
                  <div className="row between" style={{ fontSize: 12, marginBottom: 4 }}>
                    <span style={{ color: 'var(--fg-2)' }}>{r.l}</span>
                    <span className="mono tnum" style={{ color: met ? 'var(--accent)' : 'var(--fg-3)' }}>
                      {r.cur}{r.unit} <span style={{ color: 'var(--fg-4)' }}>/ {r.tgt}{r.unit}</span>
                    </span>
                  </div>
                  <div style={{ height: 4, background: 'rgba(255,255,255,0.05)', borderRadius: 2, overflow: 'hidden' }}>
                    <div style={{ height: '100%', width: `${ratio * 100}%`, background: met ? 'var(--accent)' : 'var(--warn)', transition: 'width 600ms' }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="surface" style={{ padding: 22 }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em' }}>WHAT PARTNER UNLOCKS</div>
          <div style={{ display: 'grid', gap: 14, marginTop: 14 }}>
            {[
              { t: 'Regional revenue share', d: '5% of HiLooks gross margin on your region\'s pipeline.' },
              { t: 'In-house career option', d: 'Permanent role offer at Director/Head Engineer level, optional.' },
              { t: 'Course instructor slot', d: 'Paid teaching when training launches Q2 2027.' },
              { t: 'Equity-light scheme', d: 'Phantom share allocation, vesting over 4 years.' },
              { t: 'Annual partner awards dinner', d: 'You + plus-one. Recognition in front of the network.' },
            ].map(p => (
              <div key={p.t} style={{ paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                <div className="serif" style={{ fontSize: 16 }}>{p.t}</div>
                <p style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4, lineHeight: 1.5 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

const PortalDocs = () => (
  <div>
    <div className="row between" style={{ marginBottom: 14 }}>
      <div>
        <div className="serif" style={{ fontSize: 24 }}>Document handoff</div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>3 ACTIVE JOBS · ALL PACKS HiLOOKS-PREPARED</div>
      </div>
      <button className="btn btn-ghost btn-sm">Download all packs</button>
    </div>
    {[
      { ref: 'AVL-3091', cust: 'Mosley · Allestree DE22', items: [
        { n: 'MCS heat-loss calc', s: 'done' },
        { n: 'System design + flow temps', s: 'done' },
        { n: 'BUS grant voucher (£7,500)', s: 'done' },
        { n: 'Customer welcome pack', s: 'done' },
        { n: 'Parts kit manifest', s: 'done' },
        { n: 'Building control notice', s: 'done' },
        { n: 'F-Gas log entry (you sign)', s: 'wait' },
        { n: 'MCS001 + MCS003 (you sign)', s: 'wait' },
      ]},
      { ref: 'AVL-3094', cust: 'Long Eaton NG10', items: [
        { n: 'MCS heat-loss calc', s: 'done' },
        { n: 'System design', s: 'done' },
        { n: 'BUS voucher', s: 'done' },
        { n: 'Welcome pack', s: 'done' },
        { n: 'Parts kit', s: 'wip' },
      ]},
      { ref: 'AVL-3097', cust: 'West Bridgford NG2', items: [
        { n: 'Heat-loss calc', s: 'wip' },
        { n: 'Survey scheduled', s: 'done' },
      ]},
    ].map(j => (
      <div key={j.ref} className="surface" style={{ padding: 22, marginBottom: 10 }}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <div>
            <div className="serif" style={{ fontSize: 18 }}>{j.ref} · {j.cust}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.1em', marginTop: 4 }}>{j.items.filter(i => i.s === 'done').length} of {j.items.length} ready</div>
          </div>
          <button className="btn btn-ghost btn-sm">Open pack</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          {j.items.map((it, i) => {
            const c = it.s === 'done' ? 'var(--accent)' : it.s === 'wip' ? 'var(--warn)' : 'var(--fg-4)';
            return (
              <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '6px 10px', borderRadius: 6, background: it.s === 'done' ? 'rgba(74,222,128,0.05)' : 'rgba(255,255,255,0.02)' }}>
                <span style={{ width: 16, height: 16, borderRadius: 4, background: it.s === 'done' ? c : 'transparent', border: `1px solid ${c}`, color: 'var(--bg)', display: 'grid', placeItems: 'center', fontSize: 10 }}>{it.s === 'done' ? '✓' : ''}</span>
                <span style={{ fontSize: 12.5, color: it.s === 'wait' ? 'var(--fg-3)' : 'var(--fg)' }}>{it.n}</span>
              </div>
            );
          })}
        </div>
      </div>
    ))}
  </div>
);

const PortalNetwork = () => {
  const partners = [
    { n: 'Holt Renewables', r: 'Manchester', t: 'Gold', e: 4, j: 50, s: '4.34', you: true },
    { n: 'Foxglove Heating', r: 'Sheffield', t: 'Gold', e: 3, j: 47, s: '4.28' },
    { n: 'Trent Heat Co.', r: 'Notts', t: 'Silver', e: 2, j: 31, s: '4.18' },
    { n: 'Allerton & Sons', r: 'Derby', t: 'Gold', e: 5, j: 64, s: '4.42' },
    { n: 'Peak District HP', r: 'Bakewell', t: 'Silver', e: 2, j: 28, s: '4.12' },
    { n: 'Chatsworth Renew.', r: 'Chesterfield', t: 'Bronze', e: 1, j: 6, s: '— new' },
    { n: 'Wessex Heat North', r: 'Mansfield', t: 'Silver', e: 3, j: 22, s: '4.04' },
    { n: 'Otter Energy', r: 'Notts', t: 'Bronze', e: 2, j: 11, s: '— new' },
  ];
  const tCol = { Gold: 'var(--accent)', Silver: '#B8B8B8', Bronze: '#A6794D' };
  return (
    <div>
      <div className="row between" style={{ marginBottom: 14, flexWrap: 'wrap', gap: 10 }}>
        <div>
          <div className="serif" style={{ fontSize: 24 }}>Partner network · 32 firms</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>NEAR ME · WHATSAPP · QUARTERLY MEETS</div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <button className="btn btn-ghost btn-sm">Open WhatsApp</button>
          <button className="btn btn-accent btn-sm">RSVP · Q4 meet · 27 Nov</button>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        {partners.map((p, i) => (
          <div key={i} className="surface" style={{
            padding: 16,
            borderColor: p.you ? 'var(--accent)' : 'var(--line)',
            background: p.you ? 'rgba(74,222,128,0.05)' : undefined,
          }}>
            <div className="row between" style={{ marginBottom: 10 }}>
              <div className="mono" style={{ fontSize: 10, color: tCol[p.t], letterSpacing: '0.12em' }}>{p.t.toUpperCase()}</div>
              {p.you && <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', letterSpacing: '0.1em' }}>· YOU</span>}
            </div>
            <div className="serif" style={{ fontSize: 16, lineHeight: 1.2 }}>{p.n}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.06em', marginTop: 4 }}>{p.r.toUpperCase()}</div>
            <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, fontSize: 11 }}>
              <div><div style={{ color: 'var(--fg-4)' }}>Eng</div><div className="mono tnum" style={{ marginTop: 2 }}>{p.e}</div></div>
              <div><div style={{ color: 'var(--fg-4)' }}>Jobs</div><div className="mono tnum" style={{ marginTop: 2 }}>{p.j}</div></div>
              <div><div style={{ color: 'var(--fg-4)' }}>SCOP</div><div className="mono tnum" style={{ marginTop: 2, color: p.s.startsWith('—') ? 'var(--fg-4)' : 'var(--accent)' }}>{p.s}</div></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

const PartnerPortal = () => {
  const [tab, setTab] = React.useState('today');
  return (
    <section style={{ padding: '0 0 120px' }}>
      <div className="container">
        <div style={{ marginBottom: 32, textAlign: 'center' }}>
          <Reveal><span className="eyebrow" style={{ justifyContent: 'center' }}>10 / The partner portal</span></Reveal>
          <Reveal delay={120}>
            <h2 className="h2-display" style={{ marginTop: 20 }}>
              Your operating system,<br />
              <em style={{ color: 'var(--accent)' }}>built around the install.</em>
            </h2>
          </Reveal>
        </div>
        <Reveal>
          <div className="surface-2" style={{
            borderRadius: 24, overflow: 'hidden',
            border: '1px solid var(--line-2)',
            boxShadow: '0 30px 100px rgba(0,0,0,0.5), 0 0 80px rgba(74,222,128,0.05)',
          }}>
            <div style={{ height: 44, borderBottom: '1px solid var(--line)', display: 'flex', alignItems: 'center', padding: '0 16px', gap: 12, background: 'rgba(255,255,255,0.02)' }}>
              <div style={{ display: 'flex', gap: 6 }}>
                {['#F75555','#F5A524','#4ADE80'].map(c => <span key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c, opacity: 0.7 }} />)}
              </div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--fg-4)', marginLeft: 16, letterSpacing: '0.05em' }}>partners.hilooks.uk / holt-renewables / today</div>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 16, fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--fg-4)' }}>
                <span style={{ color: 'var(--accent)' }}>● GOLD TIER</span><span>·</span><span>RH</span>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', minHeight: 720 }}>
              <aside style={{ borderRight: '1px solid var(--line)', padding: 20, display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', padding: '0 8px 12px' }}>WORKSPACE</div>
                {[
                  { id: 'today', l: 'Today', c: '·' },
                  { id: 'jobs', l: 'Jobs available', c: 7 },
                  { id: 'pay', l: 'My pay', c: 'Fri' },
                  { id: 'quality', l: 'Quality scorecard', c: 4.32 },
                  { id: 'pipeline', l: 'Pipeline', c: '6w' },
                  { id: 'tier', l: 'My tier · Gold', c: null },
                  { id: 'docs', l: 'Documents', c: 3 },
                  { id: 'network', l: 'Network', c: 31 },
                ].map(it => (
                  <button key={it.id} onClick={() => setTab(it.id)}
                    style={{
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      padding: '10px 12px', borderRadius: 8,
                      background: tab === it.id ? 'rgba(74,222,128,0.1)' : 'transparent',
                      color: tab === it.id ? 'var(--accent)' : 'var(--fg-2)',
                      border: 'none', textAlign: 'left',
                      fontSize: 13, fontWeight: 500,
                      transition: 'all 200ms',
                    }}>
                    <span>{it.l}</span>
                    {it.c !== null && <span className="mono tnum" style={{ fontSize: 10, color: 'var(--fg-4)' }}>{it.c}</span>}
                  </button>
                ))}
                <div className="divider" style={{ margin: '16px 0' }} />
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.12em', padding: '0 8px 12px' }}>THIS WEEK</div>
                {[
                  { d: 'Mon', s: 'Allestree · 8kW Daikin · D1', c: 'var(--accent)' },
                  { d: 'Tue', s: 'Allestree · 8kW Daikin · D2', c: 'var(--accent)' },
                  { d: 'Wed', s: 'Beeston · commission only', c: 'var(--fg-2)' },
                  { d: 'Thu', s: 'Sheffield · 10kW Vaillant · D1', c: 'var(--accent)' },
                  { d: 'Fri', s: 'Sheffield · D2 + pay run', c: 'var(--warm)' },
                ].map((s, i) => (
                  <div key={i} style={{ padding: '6px 12px', fontSize: 11, display: 'flex', gap: 10, alignItems: 'center', color: 'var(--fg-3)' }}>
                    <span className="mono" style={{ width: 28, color: s.c, fontSize: 10, letterSpacing: '0.05em' }}>{s.d.toUpperCase()}</span>
                    <span style={{ flex: 1, color: 'var(--fg-3)' }}>{s.s}</span>
                  </div>
                ))}
              </aside>
              <div style={{ padding: 28 }}>
                {tab === 'today' && <PortalToday />}
                {tab === 'jobs' && <PortalJobs />}
                {tab === 'pay' && <PortalPay />}
                {tab === 'quality' && <PortalQuality />}
                {tab === 'pipeline' && <PortalPipeline />}
                {tab === 'tier' && <PortalTier />}
                {tab === 'docs' && <PortalDocs />}
                {tab === 'network' && <PortalNetwork />}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================================
// SUB STORY — testimonial
// ============================================================================
const SubStory = () => (
  <section className="section" style={{ paddingTop: 80, paddingBottom: 80 }}>
    <div className="container">
      <div className="surface-2" style={{ padding: 56, display: 'grid', gridTemplateColumns: '320px 1fr', gap: 56, alignItems: 'center' }}>
        <div style={{
          aspectRatio: '1/1', borderRadius: 20, overflow: 'hidden',
          border: '1px solid var(--line-2)',
          background: 'linear-gradient(180deg, rgba(74,222,128,0.14), rgba(74,222,128,0.02))',
          display: 'grid', placeItems: 'center', position: 'relative',
        }}>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 80, color: 'var(--accent)' }}>RH</div>
          <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.08em' }}>
            <span>HOLT RENEWABLES</span>
            <span>· GOLD ·</span>
            <span>2 YR</span>
          </div>
        </div>
        <div>
          <span className="eyebrow">Partner story</span>
          <h3 className="serif" style={{ fontSize: 'clamp(24px, 2.4vw, 36px)', lineHeight: 1.25, marginTop: 20, fontWeight: 400, letterSpacing: '-0.02em', maxWidth: 760 }}>
            "Used to spend Sundays chasing invoices and Mondays at the merchants. Joined HiLooks, got Gold within a year. Now I install three jobs a week, the parts arrive, and Friday I get paid. I gave my engineers a £4k pay rise out of the savings on admin alone."
          </h3>
          <div style={{ marginTop: 24, display: 'flex', gap: 16, alignItems: 'center', fontSize: 13, color: 'var(--fg-3)', flexWrap: 'wrap' }}>
            <span style={{ fontWeight: 500, color: 'var(--fg)' }}>Ryan Holt</span>
            <span>·</span>
            <span>Director, Holt Renewables · Manchester</span>
            <span>·</span>
            <span>4 engineers · 50 installs in network</span>
          </div>
          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
            {[
              ['Avg jobs/wk before', '1.4'],
              ['Avg jobs/wk now', '3.2'],
              ['Days to get paid', '4'],
              ['Admin hours/wk saved', '~14'],
            ].map(r => (
              <div key={r[0]}>
                <div className="serif tnum" style={{ fontSize: 28, color: 'var(--accent)' }}>{r[1]}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.1em', marginTop: 4 }}>{r[0].toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============================================================================
// NETWORK NUMBERS
// ============================================================================
const NetworkNumbers = () => (
  <section className="section" style={{ paddingTop: 60, paddingBottom: 60 }}>
    <div className="container">
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <Reveal><span className="eyebrow" style={{ justifyContent: 'center' }}>11 / Network in numbers</span></Reveal>
        <Reveal delay={100}>
          <h2 className="h2-display" style={{ marginTop: 16, maxWidth: 800, marginInline: 'auto' }}>
            We track what<br />
            <em style={{ color: 'var(--accent)' }}>actually retains.</em>
          </h2>
        </Reveal>
      </div>
      <Reveal delay={200}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
          {[
            { v: 32, l: 'Active partner firms', d: 'Across 3 regions' },
            { v: 87, s: '%', l: '12-month retention', d: 'Industry: ~58%' },
            { v: 99.6, d: 1, s: '%', l: 'Pay run accuracy', d: 'On time + correct' },
            { v: 3.4, d: 1, l: 'Avg jobs/wk · Gold', d: 'Vs 1.4 industry' },
            { v: 4.21, d: 2, l: 'SCOP fleet avg', d: 'Bonus threshold 4.0' },
            { v: 4, l: 'Days paid', d: 'Vs 30–60 industry' },
          ].map((s, i) => (
            <div key={i} className="surface" style={{ padding: 20 }}>
              <div className="serif tnum" style={{ fontSize: 40, lineHeight: 1, color: 'var(--fg)' }}>
                <CountUp to={s.v} suffix={s.s || ''} decimals={s.d || 0} />
              </div>
              <div style={{ marginTop: 10, fontSize: 13, color: 'var(--fg-2)' }}>{s.l}</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.08em', marginTop: 4 }}>{s.d.toUpperCase()}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  </section>
);

// ============================================================================
// FAQ — sub-specific objections
// ============================================================================
const EngFAQ = () => {
  const items = [
    { q: 'Do I need MCS certification to join?', a: 'Yes — your firm needs MCS heat-pump installer certification. We handle the per-install MCS001/MCS003 paperwork, but the underlying accreditation has to be yours. If you\'re Gas Safe and considering MCS, we can fund your certification on a 12-month payback for top performers.' },
    { q: 'Can I keep my own customers and direct work?', a: 'Yes. The network is non-exclusive at Bronze and Silver. At Gold tier you commit to first-refusal on HiLooks jobs (because we guarantee your minimum flow); your existing customer base is yours forever, untouched.' },
    { q: 'How fast can I move up tiers?', a: 'Bronze → Silver typically 4–8 months at 2 jobs/week with quality maintained. Silver → Gold typically 9–14 months. Partner is by invitation after multi-year track record. The portal shows your live progress against every gate.' },
    { q: 'What happens if a customer complains?', a: 'It comes to our office, not yours. We investigate. If it\'s a fair complaint and you fix it on first attempt within 14 days, no impact on your scorecard. If it\'s a recurring issue, your account manager works with you before it ever touches your tier status.' },
    { q: 'What if HiLooks underdelivers on flow?', a: 'Gold tier carries a guaranteed minimum 3 jobs/week. If we fail to fill the slots, you get a £600 retainer for the gap week, paid the same Friday. Silver and Bronze are best-effort — but in 2025, Silver averaged 2.4 and Bronze 1.6.' },
    { q: 'Can my engineers do their own commissioning?', a: 'Yes — and that\'s preferred. The pre-prepared design pack tells you the exact flow temps, weather-comp curve, and DHW settings. Hand-off and commissioning is part of the rate, not a separate visit.' },
    { q: 'Who owns the customer relationship?', a: 'HiLooks does the customer-facing brand work; the homeowner experience is HiLooks-branded. You\'re the engineer who built it, and Gold/Partner-tier firms get a "Certified by HiLooks" page profile on the public site. Customer contact details are HiLooks\'s — but performance data, photos, and jobs delivered are exportable to you any time.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }}>
          <div>
            <Reveal><span className="eyebrow">12 / Common questions</span></Reveal>
            <Reveal delay={120}>
              <h2 className="h2-display" style={{ marginTop: 24 }}>
                The ones<br />
                <em style={{ color: 'var(--accent)' }}>partners actually ask.</em>
              </h2>
            </Reveal>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--line)' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left',
                    padding: '24px 0',
                    background: 'transparent', border: 'none',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                    color: 'var(--fg)',
                  }}>
                  <span className="serif" style={{ fontSize: 22, lineHeight: 1.3 }}>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 999, flexShrink: 0,
                    border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center',
                    color: 'var(--accent)', fontSize: 18,
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 240ms',
                  }}>+</span>
                </button>
                <div style={{ maxHeight: open === i ? 320 : 0, overflow: 'hidden', transition: 'max-height 320ms ease' }}>
                  <p style={{ paddingBottom: 24, color: 'var(--fg-3)', fontSize: 15, lineHeight: 1.65, maxWidth: 720 }}>{it.a}</p>
                </div>
              </div>
            ))}
            <div style={{ borderTop: '1px solid var(--line)' }} />
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================================
// CTA — apply
// ============================================================================
const EngCTA = () => (
  <section style={{ position: 'relative', overflow: 'hidden', padding: '160px 0' }}>
    <div className="hero-glow" style={{ inset: '0 0 -40% 0' }} />
    <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
      <Reveal><span className="eyebrow" style={{ justifyContent: 'center' }}>Apply to join</span></Reveal>
      <Reveal delay={120}>
        <h2 className="h1-display" style={{ marginTop: 32 }}>
          Bring your trade.<br />
          <em style={{ color: 'var(--accent)' }}>We'll bring everything else.</em>
        </h2>
      </Reveal>
      <Reveal delay={220}>
        <p className="lead" style={{ margin: '32px auto 0', textAlign: 'center' }}>
          We onboard 2–3 partner firms per region, per year. Apply takes 8 minutes. We reply within 4 working hours.
        </p>
      </Reveal>
      <Reveal delay={320}>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
          <button className="btn btn-accent btn-lg">Start application <span className="arrow">→</span></button>
          <button className="btn btn-ghost btn-lg">Talk to a partner manager</button>
        </div>
      </Reveal>
      <Reveal delay={420}>
        <div className="mono" style={{ marginTop: 36, fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.1em' }}>
          MCS · GAS SAFE · F-GAS · PUBLIC LIABILITY £5M+ · UK ONLY
        </div>
      </Reveal>
    </div>
  </section>
);

// ============================================================================
// Page composition
// ============================================================================
const Engineer = () => (
  <main>
    <EngHero />
    <WhatWeBring />
    <FiveCurrencies />
    <AcademyRoutes />
    <AcademyFunding />
    <AcademyMath />
    <AcademyCert />
    <TierLadder />
    <RateCard />
    <PayCadence />
    <PartnerPortal />
    <SubStory />
    <NetworkNumbers />
    <EngFAQ />
    <EngCTA />
    <Footer />
  </main>
);

window.Engineer = Engineer;