const BOOK_HREF = 'mailto:matt@taskguard.ai?subject=TaskGuard%20platform%20intro&body=Hi%20Matt%2C%0A%0AI%27d%20like%20to%20book%20a%2030-minute%20call%20to%20talk%20about%20TaskGuard%20for%20our%20platform.%0A%0APlatform%3A%20%0AWorker%20categories%3A%20%0AAvailability%3A%20%0A%0AThanks%2C';

function useIsMobile() {
  const mq = window.matchMedia('(max-width: 768px)');
  const [mobile, setMobile] = React.useState(mq.matches);
  React.useEffect(() => {
    const handler = e => setMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);
  return mobile;
}

function makeT(mobile) {
  return mobile ? {
    display: { fontFamily: sans, fontWeight: 700, fontSize: 40, letterSpacing: '-0.035em', lineHeight: 1.02 },
    h1:      { fontFamily: sans, fontWeight: 700, fontSize: 32, letterSpacing: '-0.025em', lineHeight: 1.08 },
    h2:      { fontFamily: sans, fontWeight: 600, fontSize: 22, letterSpacing: '-0.015em', lineHeight: 1.18 },
    h3:      { fontFamily: sans, fontWeight: 600, fontSize: 17, letterSpacing: '-0.01em',  lineHeight: 1.3  },
    lead:    { fontFamily: sans, fontWeight: 400, fontSize: 16, lineHeight: 1.5  },
    body:    { fontFamily: sans, fontWeight: 400, fontSize: 14, lineHeight: 1.55 },
    small:   { fontFamily: sans, fontWeight: 400, fontSize: 12, lineHeight: 1.45 },
    eyebrow: { fontFamily: mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 },
  } : {
    display: { fontFamily: sans, fontWeight: 700, fontSize: 64, letterSpacing: '-0.04em',  lineHeight: 1.05 },
    h1:      { fontFamily: sans, fontWeight: 700, fontSize: 44, letterSpacing: '-0.025em', lineHeight: 1.1  },
    h2:      { fontFamily: sans, fontWeight: 600, fontSize: 32, letterSpacing: '-0.015em', lineHeight: 1.2  },
    h3:      { fontFamily: sans, fontWeight: 600, fontSize: 22, letterSpacing: '-0.01em',  lineHeight: 1.3  },
    lead:    { fontFamily: sans, fontWeight: 400, fontSize: 18, lineHeight: 1.55 },
    body:    { fontFamily: sans, fontWeight: 400, fontSize: 15, lineHeight: 1.6  },
    small:   { fontFamily: sans, fontWeight: 400, fontSize: 13, lineHeight: 1.45 },
    eyebrow: { fontFamily: mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600 },
  };
}

/* ---- Nav ---- */
function SiteNav({ mobile }) {
  const [open, setOpen] = React.useState(false);
  const p = mobile ? 20 : 64;
  const navLinks = [
    ['For gig platforms', '#audience'],
    ['How it works',      '#how'],
    ['Pricing model',     '#pricing'],
    ['Team',              '#team'],
  ];

  if (mobile) {
    return (
      <div style={{ position: 'sticky', top: 0, zIndex: 50 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: `14px ${p}px`,
          borderBottom: `1px solid ${TG.rule}`, background: TG.navy,
        }}>
          <a href="#top" onClick={() => setOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
            <TGIcon size={24}/>
            <span style={{ fontFamily: sans, fontWeight: 600, fontSize: 19, letterSpacing: '-0.06em', color: TG.paper, lineHeight: 1 }}>taskguard</span>
          </a>
          <button
            aria-label={open ? 'Close menu' : 'Open menu'}
            onClick={() => setOpen(v => !v)}
            style={{
              background: 'transparent', border: `1px solid ${TG.rule}`,
              borderRadius: 6, padding: 8, cursor: 'pointer',
              width: 36, height: 36,
              display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 4,
            }}>
            <span style={{ display: 'block', height: 1.5, background: TG.paper, transform: open ? 'translateY(3px) rotate(45deg)' : 'none', transition: 'transform 180ms ease' }}/>
            <span style={{ display: 'block', height: 1.5, background: TG.paper, opacity: open ? 0 : 1, transition: 'opacity 120ms ease' }}/>
            <span style={{ display: 'block', height: 1.5, background: TG.paper, transform: open ? 'translateY(-3px) rotate(-45deg)' : 'none', transition: 'transform 180ms ease' }}/>
          </button>
        </div>
        <div style={{
          background: TG.navy, borderBottom: open ? `1px solid ${TG.rule}` : 'none',
          maxHeight: open ? 480 : 0, overflow: 'hidden', transition: 'max-height 240ms ease',
        }}>
          <div style={{ padding: `4px ${p}px 20px` }}>
            {navLinks.map(([label, href]) => (
              <a key={label} href={href} onClick={() => setOpen(false)} style={{
                display: 'block', padding: '16px 0',
                borderBottom: `1px solid ${TG.rule}`,
                color: TG.paper, textDecoration: 'none', fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em',
              }}>{label}</a>
            ))}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 20 }}>
              <a href={BOOK_HREF} onClick={() => setOpen(false)} style={{
                background: TG.green, color: TG.navy, padding: '14px 18px', borderRadius: 6,
                fontFamily: sans, fontWeight: 600, fontSize: 14, textDecoration: 'none', letterSpacing: '-0.01em', textAlign: 'center',
              }}>Book a call →</a>
              <a href="#" onClick={() => setOpen(false)} style={{
                color: TG.dim, textDecoration: 'none', textAlign: 'center',
                fontFamily: mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, padding: '10px',
              }}>Sign in</a>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: `28px ${p}px`,
      borderBottom: `1px solid ${TG.rule}`,
      position: 'sticky', top: 0, zIndex: 50, background: TG.navy,
    }}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
        <TGIcon size={32}/>
        <span style={{ fontFamily: sans, fontWeight: 600, fontSize: 24, letterSpacing: '-0.06em', color: TG.paper, lineHeight: 1 }}>taskguard</span>
      </a>
      <nav style={{ display: 'flex', gap: 36 }}>
        {navLinks.map(([label, href]) => (
          <a key={label} href={href} style={{ color: TG.dim, textDecoration: 'none', fontSize: 14, fontWeight: 500 }}>{label}</a>
        ))}
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <a href="#" style={{ fontFamily: mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: TG.dim, textDecoration: 'none' }}>Sign in</a>
        <a href={BOOK_HREF} style={{
          background: TG.green, color: TG.navy, padding: '11px 18px', borderRadius: 6,
          fontFamily: sans, fontWeight: 600, fontSize: 13, textDecoration: 'none', letterSpacing: '-0.01em',
        }}>Book a call →</a>
      </div>
    </div>
  );
}

/* ---- Brand motif ---- */
function SiteBrandMotif({ mobile }) {
  const w = mobile ? 320 : 480;
  const h = mobile ? 240 : 360;
  return (
    <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: mobile ? 260 : 460, marginTop: mobile ? 8 : 0 }}>
      <div style={{
        position: 'absolute', width: w, height: w,
        background: `radial-gradient(closest-side, rgba(0,255,148,${mobile ? 0.14 : 0.12}), transparent 70%)`,
        filter: `blur(${mobile ? 18 : 24}px)`, pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', width: w, height: h }}>
        <svg viewBox="0 0 480 360" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <rect x="40" y="120" width="400" height="120" rx="60" fill="none" stroke={TG.paper} strokeWidth="6"/>
          <rect x="80" y="160" width="160" height="40" rx="20" fill={TG.green}/>
        </svg>
        <div style={{
          position: 'absolute', right: mobile ? -8 : -4, top: mobile ? 8 : 28,
          background: TG.lift, border: `1px solid ${TG.rule}`, borderRadius: 8,
          padding: mobile ? '10px 12px' : '12px 16px',
          boxShadow: `0 ${mobile ? 12 : 16}px ${mobile ? 28 : 40}px rgba(0,0,0,0.45)`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 6 : 8, marginBottom: mobile ? 3 : 4 }}>
            <GreenDot size={mobile ? 5 : 6}/>
            <span style={{ fontFamily: mono, fontSize: mobile ? 9 : 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: TG.green }}>Cover active</span>
          </div>
          <div style={{ fontFamily: mono, fontSize: mobile ? 10 : 12, color: TG.dim }}>food_delivery · 52 min</div>
        </div>
        <div style={{
          position: 'absolute', left: mobile ? -8 : -16, bottom: mobile ? 8 : 28,
          background: TG.lift, border: `1px solid ${TG.rule}`, borderRadius: 8,
          padding: mobile ? '10px 12px' : '12px 16px',
          boxShadow: `0 ${mobile ? 12 : 16}px ${mobile ? 28 : 40}px rgba(0,0,0,0.45)`,
        }}>
          <div style={{ fontFamily: mono, fontSize: mobile ? 9 : 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: TG.mute, marginBottom: mobile ? 3 : 4 }}>Premium</div>
          <div style={{ fontFamily: sans, fontWeight: 600, fontSize: mobile ? 20 : 24, letterSpacing: '-0.015em', lineHeight: 1.18, color: TG.paper }}>$0.34</div>
        </div>
      </div>
    </div>
  );
}

/* ---- Hero ---- */
function SiteHero({ mobile, T }) {
  const p = mobile ? 20 : 64;
  return (
    <section id="top" style={{ padding: `${mobile ? 44 : 120}px ${p}px ${mobile ? 56 : 140}px`, position: 'relative' }}>
      {mobile ? (
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', border: `1px solid ${TG.rule}`, borderRadius: 999, marginBottom: 28, background: TG.lift }}>
            <GreenDot size={5}/>
            <span style={{ ...T.eyebrow, color: TG.dim }}>Built for gig platforms</span>
          </div>
          <h1 style={{ ...T.display, color: TG.paper, marginBottom: 20, marginTop: 0 }}>
            Specialist<br/>underwriters<br/>for <span style={{ color: TG.green, fontWeight: 700 }}>gig work.</span>
          </h1>
          <p style={{ ...T.lead, color: TG.dim, marginBottom: 28, marginTop: 0 }}>
            Per-job cover for your workers, priced by data, not annual averages.
            A faster, fairer way to protect every worker on every job.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 40 }}>
            <PrimaryCTA href={BOOK_HREF} style={{ fontSize: 15, padding: '15px 22px', justifyContent: 'center' }}>Book a call</PrimaryCTA>
            <GhostCTA href="#pricing" style={{ fontSize: 15, padding: '15px 22px', justifyContent: 'center' }}>See how we price</GhostCTA>
          </div>
          <SiteBrandMotif mobile={true}/>
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '7px 14px', border: `1px solid ${TG.rule}`, borderRadius: 999, marginBottom: 36, background: TG.lift }}>
              <GreenDot size={6}/>
              <span style={{ ...T.eyebrow, color: TG.dim }}>Built for gig platforms</span>
            </div>
            <h1 style={{ ...T.display, lineHeight: 0.98, color: TG.paper, marginBottom: 28 }}>
              Specialist<br/>underwriters<br/>for{' '}
              <span style={{ color: TG.green, fontWeight: 700 }}>gig work.</span>
            </h1>
            <p style={{ ...T.lead, color: TG.dim, maxWidth: 580, marginBottom: 40 }}>
              Per-job cover for your workers, priced by data, not annual averages.
              We give gig platforms a faster, fairer way to protect every worker on every job.
            </p>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <PrimaryCTA href={BOOK_HREF} style={{ fontSize: 15, padding: '16px 24px' }}>Book a call</PrimaryCTA>
              <GhostCTA href="#pricing" style={{ fontSize: 15, padding: '16px 24px' }}>See how we price</GhostCTA>
            </div>
          </div>
          <SiteBrandMotif mobile={false}/>
        </div>
      )}
    </section>
  );
}

/* ---- Audience ---- */
function SiteAudience({ mobile, T }) {
  const p = mobile ? 20 : 64;
  return (
    <section id="audience" style={{ padding: `${mobile ? 40 : 56}px ${p}px`, borderTop: `1px solid ${TG.rule}`, background: TG.lift }}>
      <div style={{ maxWidth: mobile ? undefined : 920 }}>
        <div style={{ ...T.eyebrow, color: TG.green, marginBottom: 10 }}>Built for gig platforms</div>
        <div style={{ ...T.h3, color: TG.paper }}>
          If your business runs on per-job workers, delivery, rideshare, services, or trades, we built TaskGuard for you.
        </div>
      </div>
    </section>
  );
}

/* ---- How it works ---- */
function SiteHow({ mobile, T }) {
  const p = mobile ? 20 : 64;
  const steps = [
    { n: '01', t: 'A worker accepts a job on your platform',
      body: 'Your platform fires a single API call when a worker accepts a job. We read the job type, the location, the duration, the time of day, and the worker.' },
    { n: '02', t: 'We price the exact risk of that exact job',
      body: 'Our model takes twelve or more signals and returns a per-job premium in under 100 milliseconds.' },
    { n: '03', t: 'Cover activates the moment the job starts',
      body: 'The worker is covered for personal accident and medical from the second they begin, until the second they finish. No certificate. No policy admin.' },
    { n: '04', t: 'Cover ends with the job. One invoice line a month.',
      body: 'When the job ends, the cover ends. You see one consolidated line on your monthly invoice. No annual premium. No reconciliation work.' },
  ];

  return (
    <section id="how" style={{ padding: `${mobile ? 56 : 120}px ${p}px`, borderTop: `1px solid ${TG.rule}` }}>
      <div style={{ ...T.eyebrow, color: TG.green, marginBottom: mobile ? 14 : 16 }}>02 · How it works</div>
      <h2 style={{ ...T.h1, color: TG.paper, maxWidth: mobile ? undefined : 880, marginBottom: mobile ? 16 : 24, marginTop: 0 }}>
        {mobile ? 'One API call per job.' : 'One API call per job. Cover that matches the work, not the year.'}
      </h2>
      <p style={{ ...T.lead, color: TG.dim, maxWidth: mobile ? undefined : 720, marginBottom: mobile ? 36 : 72, marginTop: 0 }}>
        {mobile
          ? 'TaskGuard is the underwriting agency, the pricing engine, and the cover ledger in one. Integrate once, every job is covered, priced, and settled automatically.'
          : 'TaskGuard is the underwriting agency, the pricing engine, and the cover ledger in one. Your platform integrates once, and every job your workers accept is covered, priced, and settled automatically.'}
      </p>
      {mobile ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {steps.map(s => (
            <div key={s.n} style={{ border: `1px solid ${TG.rule}`, borderRadius: 12, padding: 22, background: TG.lift }}>
              <div style={{ ...T.display, color: TG.green, fontSize: 36, lineHeight: 1, marginBottom: 12 }}>{s.n}</div>
              <div style={{ ...T.h2, color: TG.paper, fontSize: 19, marginBottom: 10 }}>{s.t}</div>
              <div style={{ ...T.body, color: TG.dim }}>{s.body}</div>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display: 'grid', gridTemplateColumns: '100px 1fr 1fr',
              gap: 64, padding: '36px 0',
              borderBottom: i === steps.length - 1 ? 'none' : `1px solid ${TG.rule}`,
              alignItems: 'baseline',
            }}>
              <div style={{ ...T.display, color: TG.green, fontSize: 64, lineHeight: 1 }}>{s.n}</div>
              <div style={{ ...T.h2, color: TG.paper }}>{s.t}</div>
              <div style={{ ...T.body, color: TG.dim, paddingTop: 6 }}>{s.body}</div>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

/* ---- Pricing ---- */
function SitePricing({ mobile, T }) {
  const p = mobile ? 20 : 64;
  const oldWay = [
    'One annual policy covers all workers',
    'Same flat rate applied across every job',
    'Uncertainty is priced into the premium',
    'No visibility into per-job risk',
    'Worker-by-worker certificate admin',
  ];
  const signals = [
    { k: 'Location',   v: 'Suburb, route, road class' },
    { k: 'Conditions', v: 'Weather, time of day, daylight' },
    { k: 'Worker',     v: 'Tenure, claims history, rating' },
    { k: 'Fatigue',    v: 'Shift length, cumulative hours' },
    { k: 'Job',        v: 'Category, duration, value' },
    { k: 'Vehicle',    v: 'Type, age, safety rating' },
  ];

  return (
    <section id="pricing" style={{ padding: `${mobile ? 56 : 120}px ${p}px`, borderTop: `1px solid ${TG.rule}`, background: TG.lift }}>
      <div style={{ ...T.eyebrow, color: TG.green, marginBottom: mobile ? 14 : 16 }}>03 · Why our pricing is different</div>
      <h2 style={{ ...T.h1, fontSize: mobile ? undefined : 56, color: TG.paper, maxWidth: mobile ? undefined : 1000, marginBottom: mobile ? 16 : 24, marginTop: 0 }}>
        Most insurers price the average.{' '}
        <span style={{ color: TG.green }}>We price the job.</span>
      </h2>
      <p style={{ ...T.lead, color: TG.dim, maxWidth: mobile ? undefined : 720, marginBottom: mobile ? 32 : 64, marginTop: 0 }}>
        {mobile
          ? 'Annual policies and blended rates are built for full-time workforces. Gig work does not look like that. We use data to remove the uncertainty.'
          : 'Annual policies and blended rates are built for full-time workforces. Gig work does not look like that, and pricing it like it does means every platform pays for the uncertainty in the model. We use data to remove the uncertainty.'}
      </p>

      <div style={{
        display: mobile ? 'flex' : 'grid',
        flexDirection: mobile ? 'column' : undefined,
        gridTemplateColumns: mobile ? undefined : '1fr 1.15fr',
        gap: mobile ? 14 : 24, marginBottom: mobile ? 28 : 64,
      }}>
        <div style={{
          background: TG.navy, border: `1px solid ${TG.rule}`, borderRadius: mobile ? 12 : 14,
          padding: mobile ? 22 : 36, opacity: 0.92,
        }}>
          <div style={{ ...T.eyebrow, color: TG.mute, marginBottom: mobile ? 10 : 16 }}>The old way</div>
          <h3 style={{ ...T.h2, color: TG.dim, marginBottom: mobile ? 16 : 24, marginTop: 0 }}>
            Annual policies. Blended rates. Padded premiums.
          </h3>
          <div style={{ borderTop: `1px solid ${TG.rule}`, paddingTop: mobile ? 10 : 16 }}>
            {oldWay.map(item => (
              <div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: mobile ? 10 : 12, padding: `${mobile ? 8 : 10}px 0` }}>
                <span style={{ display: 'inline-block', width: mobile ? 14 : 16, height: 1.5, background: TG.mute, marginTop: mobile ? 9 : 10, flexShrink: 0 }}/>
                <span style={{ ...T.body, color: TG.dim }}>{item}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          background: TG.navy, border: `1px solid ${TG.green}`, borderRadius: mobile ? 12 : 14,
          padding: mobile ? 22 : 36,
          boxShadow: `0 0 0 ${mobile ? 4 : 6}px rgba(0,255,148,${mobile ? 0.05 : 0.06}), 0 ${mobile ? 20 : 32}px ${mobile ? 40 : 64}px rgba(0,0,0,0.3)`,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: mobile ? 10 : 16, gap: mobile ? 10 : 0 }}>
            <div style={{ ...T.eyebrow, color: TG.green }}>The TaskGuard way</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 6 : 8 }}>
              <GreenDot size={mobile ? 5 : 6}/>
              <span style={{ ...T.eyebrow, fontSize: mobile ? 9 : 10, color: TG.mute }}>{mobile ? 'Live model' : 'Live per-job model'}</span>
            </div>
          </div>
          <h3 style={{ ...T.h2, color: TG.paper, marginBottom: mobile ? 18 : 24, marginTop: 0 }}>
            {mobile ? 'Twelve+ signals per job. Real-time pricing. No padding for uncertainty.' : 'Twelve or more signals per job. Real-time pricing. No padding for uncertainty.'}
          </h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: mobile ? 8 : 10 }}>
            {signals.map(s => (
              <div key={s.k} style={{ padding: `${mobile ? 12 : 14}px ${mobile ? 12 : 16}px`, background: TG.lift, border: `1px solid ${TG.rule}`, borderRadius: 8 }}>
                <div style={{ ...T.eyebrow, fontSize: mobile ? 9 : 10, color: TG.green, marginBottom: mobile ? 4 : 6 }}>{s.k}</div>
                <div style={{ ...T.small, color: TG.dim }}>{s.v}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: mobile ? 18 : 24, paddingTop: mobile ? 14 : 18, borderTop: `1px dashed ${TG.rule}`, ...T.body, color: TG.dim }}>
            {mobile
              ? <><span style={{ color: TG.paper, fontWeight: 600 }}>Better data, better pricing, fewer surprises</span> for the platform, the underwriter, and the worker.</>
              : <>We understand the true premium risk of each job, then price it precisely. <span style={{ color: TG.paper, fontWeight: 600 }}>Better data, better pricing, fewer surprises</span> for the platform, the underwriter, and the worker.</>}
          </div>
        </div>
      </div>

      <SiteWorkedExample mobile={mobile} T={T}/>
    </section>
  );
}

/* ---- Worked example ---- */
function SiteWorkedExample({ mobile, T }) {
  const factors = [
    { label: 'Suburb · road class', val: 'Glebe · arterial, wet', weight: '+0.4×' },
    { label: 'Time · daylight',     val: '21:14 · post-dusk',     weight: '+0.3×' },
    { label: 'Weather',             val: 'Light rain · 18°C',     weight: '+0.2×' },
    { label: 'Driver tenure',       val: '413 days · 0 claims',   weight: '−0.5×' },
    { label: 'Cumulative hours',    val: '4h 12m today',          weight: '+0.1×' },
    { label: 'Vehicle',             val: '2022 Camry · 5★ ANCAP', weight: '−0.2×' },
  ];

  return (
    <div style={{ background: TG.navy, border: `1px solid ${TG.rule}`, borderRadius: mobile ? 12 : 14, padding: mobile ? 22 : 36 }}>
      {mobile ? (
        <>
          <div style={{ ...T.eyebrow, color: TG.mute, marginBottom: 8 }}>Worked example · rideshare driver</div>
          <h3 style={{ ...T.h2, color: TG.paper, marginBottom: 18, marginTop: 0, fontSize: 19 }}>
            Same driver, same hour, same suburb. Priced six different ways.
          </h3>
          <div style={{ padding: '14px 18px', background: TG.lift, border: `1px solid ${TG.green}`, borderRadius: 10, marginBottom: 18, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div style={{ ...T.eyebrow, fontSize: 10, color: TG.mute }}>This job</div>
            <div style={{ ...T.h2, color: TG.green, fontSize: 26, lineHeight: 1 }}>$1.08</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {factors.map(f => (
              <div key={f.label} style={{ padding: '14px 14px', background: TG.lift, border: `1px solid ${TG.rule}`, borderRadius: 10 }}>
                <div style={{ ...T.eyebrow, fontSize: 9, color: TG.mute, marginBottom: 6 }}>{f.label}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ ...T.body, color: TG.paper, fontWeight: 500 }}>{f.val}</span>
                  <span style={{ fontFamily: mono, fontSize: 12, fontWeight: 600, color: f.weight.startsWith('−') ? TG.green : TG.warning, flexShrink: 0 }}>{f.weight}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px dashed ${TG.rule}`, fontFamily: mono, ...T.small, color: TG.mute, letterSpacing: '0.04em' }}>
            ~30% lower premium on safe jobs, accurate loading on risky ones.
          </div>
        </>
      ) : (
        <>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
            <div>
              <div style={{ ...T.eyebrow, color: TG.mute, marginBottom: 8 }}>Worked example · rideshare driver</div>
              <h3 style={{ ...T.h2, color: TG.paper, maxWidth: 720 }}>
                The same driver, same hour, same suburb, priced six different ways depending on the actual job.
              </h3>
            </div>
            <div style={{ padding: '14px 22px', background: TG.lift, border: `1px solid ${TG.green}`, borderRadius: 10, textAlign: 'right' }}>
              <div style={{ ...T.eyebrow, fontSize: 10, color: TG.mute, marginBottom: 4 }}>This job</div>
              <div style={{ ...T.h2, color: TG.green, fontSize: 28, lineHeight: 1 }}>$1.08</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
            {factors.map(f => (
              <div key={f.label} style={{ padding: '18px 20px', background: TG.lift, border: `1px solid ${TG.rule}`, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ ...T.eyebrow, fontSize: 10, color: TG.mute }}>{f.label}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ ...T.body, color: TG.paper, fontWeight: 500 }}>{f.val}</span>
                  <span style={{ fontFamily: mono, fontSize: 13, fontWeight: 600, color: f.weight.startsWith('−') ? TG.green : TG.warning }}>{f.weight}</span>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 22, paddingTop: 18, borderTop: `1px dashed ${TG.rule}`, fontFamily: mono, ...T.small, color: TG.mute, letterSpacing: '0.04em' }}>
            An annual blended-rate policy would price this trip the same as a dry-Tuesday-noon airport run. We do not. Result: ~30% lower premium on safe jobs, accurate loading on risky ones.
          </div>
        </>
      )}
    </div>
  );
}

/* ---- Chart ---- */
function SiteChart({ mobile, T }) {
  const p = mobile ? 20 : 64;
  const max = Math.max(...INJURY_DATA.map(d => d.rate));
  return (
    <section style={{ padding: `${mobile ? 56 : 120}px ${p}px`, borderTop: `1px solid ${TG.rule}` }}>
      <div style={{ maxWidth: mobile ? undefined : 920, marginBottom: mobile ? 28 : 48 }}>
        <div style={{ ...T.eyebrow, color: TG.green, marginBottom: mobile ? 14 : 16 }}>04 · The spread we model</div>
        <h2 style={{ ...T.h1, color: TG.paper, marginBottom: mobile ? 16 : 24, marginTop: 0 }}>
          Gig risk spans an order of magnitude.
        </h2>
        <p style={{ ...T.lead, color: TG.dim, maxWidth: mobile ? undefined : 680, marginTop: 0 }}>
          {mobile
            ? 'A 45-minute food delivery and an 8-hour plumbing shift cannot be priced from the same actuarial table.'
            : 'A 45-minute food delivery and an 8-hour plumbing shift cannot be priced from the same actuarial table. The chart below is the input; our model layers job-specific signals on top.'}
        </p>
      </div>
      <div style={{ background: TG.lift, border: `1px solid ${TG.rule}`, borderRadius: mobile ? 12 : 14, padding: mobile ? 22 : 44 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', ...T.eyebrow, color: TG.mute, marginBottom: mobile ? 18 : 24 }}>
          <span>{mobile ? 'Injury rate' : 'Serious injury rate'}</span>
          <span>{mobile ? 'per 1,000 FTE' : 'per 1,000 FTE · annualised'}</span>
        </div>
        {INJURY_DATA.map(d => {
          const w = (d.rate / max) * 100;
          const highlight = d.label === 'Food delivery';
          return (
            <div key={d.label} style={{ padding: `${mobile ? 10 : 14}px 0` }}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: mobile ? '1fr auto' : '1fr auto auto',
                gap: mobile ? 12 : 24, marginBottom: mobile ? 8 : 10, alignItems: 'baseline',
              }}>
                <span style={{ ...T.body, fontWeight: highlight ? 600 : 500, color: highlight ? TG.paper : TG.dim }}>{d.label}</span>
                {!mobile && <span style={{ fontFamily: mono, fontSize: 13, color: TG.mute }}>{d.jobs}</span>}
                <span style={{ ...T.h3, color: highlight ? TG.green : TG.dim, textAlign: 'right', fontVariantNumeric: 'tabular-nums', fontSize: mobile ? 17 : undefined }}>{d.rate.toFixed(1)}</span>
              </div>
              <div style={{ height: mobile ? 6 : 8, background: TG.rule, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: `${w}%`, height: '100%', background: highlight ? TG.green : TG.hi }}/>
              </div>
              {mobile && <div style={{ fontFamily: mono, fontSize: 10, color: TG.mute, marginTop: 6 }}>{d.jobs}</div>}
            </div>
          );
        })}
        <div style={{ marginTop: mobile ? 14 : 18, paddingTop: mobile ? 12 : 14, borderTop: `1px dashed ${TG.rule}`, fontFamily: mono, ...T.small, color: TG.mute, letterSpacing: '0.04em' }}>
          {mobile
            ? 'ABS work-related injury survey 2023 + TaskGuard internal modelling. Illustrative.'
            : 'Food delivery 7.4 anchored to ABS work-related injury survey 2023 and TaskGuard internal modelling. Adjacent categories directional; illustrative of the spread.'}
        </div>
      </div>
    </section>
  );
}

/* ---- Team ---- */
function SiteTeam({ mobile, T }) {
  const p = mobile ? 20 : 64;
  const founders = [
    { id: 'mb', name: 'Matthew Buckle',    role: 'Co-founder · Underwriting',
      bio: 'Pricing and underwriting lead. Drives the actuarial methodology and the insurer panel relationship.',
      url: 'https://www.linkedin.com/in/matthew-buckle-16849837/' },
    { id: 'cg', name: 'Caroline Ghazzaoui', role: 'Co-founder',
      bio: 'Commercial and platform partnerships. Shapes the gig-platform product offering and go-to-market.',
      url: 'https://www.linkedin.com/in/caroline-ghazzaoui-0049ba110/' },
    { id: 'gk', name: 'Gregory Kahn',      role: 'Co-founder',
      bio: 'Operations, regulatory pathway, and capital partners. Translates the model into a binding-authority structure.',
      url: 'https://www.linkedin.com/in/gregorykahn/' },
  ];
  const advisors = [
    { id: 'et', name: 'Edward Tam',    role: 'Advisor · Pricing specialist',
      bio: 'Senior actuarial advisor. Independent review of pricing methodology and loss-ratio modelling.',
      url: 'https://www.linkedin.com/in/edward-tam-88a2156a/' },
    { id: 'av', name: 'Arno Verburg', role: 'Advisor · Tech specialist',
      bio: 'Platform engineering and API architecture. Independent review of the data pipeline and integration model.',
      url: 'https://www.linkedin.com/in/arnoverburg/' },
  ];
  const grid = mobile
    ? { display: 'flex', flexDirection: 'column', gap: 12 }
    : { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 };

  return (
    <section id="team" style={{ padding: `${mobile ? 56 : 120}px ${p}px`, borderTop: `1px solid ${TG.rule}`, background: TG.lift }}>
      <div style={{ ...T.eyebrow, color: TG.green, marginBottom: mobile ? 14 : 16 }}>05 · Team</div>
      <h2 style={{ ...T.h1, color: TG.paper, maxWidth: mobile ? undefined : 880, marginBottom: mobile ? 16 : 24, marginTop: 0 }}>
        {mobile ? 'Built by underwriters who know gig risk.' : 'Built by underwriters who know gig risk, and the engineers who can price it live.'}
      </h2>
      <p style={{ ...T.lead, color: TG.dim, maxWidth: mobile ? undefined : 700, marginBottom: mobile ? 36 : 72, marginTop: 0 }}>
        {mobile
          ? 'A founding team with actuarial depth and platform experience, supported by independent specialist advisors.'
          : 'A founding team with actuarial depth and platform experience, supported by independent specialist advisors on pricing and tech.'}
      </p>
      <h3 style={{ ...T.eyebrow, color: TG.mute, marginBottom: mobile ? 14 : 20 }}>Founders</h3>
      <div style={{ ...grid, marginBottom: mobile ? 36 : 64 }}>
        {founders.map(person => <PersonCard key={person.id} mobile={mobile} T={T} {...person}/>)}
      </div>
      <h3 style={{ ...T.eyebrow, color: TG.mute, marginBottom: mobile ? 14 : 20 }}>Advisory panel</h3>
      <div style={grid}>
        {advisors.map(person => <PersonCard key={person.id} mobile={mobile} T={T} {...person}/>)}
      </div>
    </section>
  );
}

function PersonCard({ mobile, T, id, name, role, bio, url }) {
  const imgSize = mobile ? 72 : 96;
  const portrait = (
    <image-slot
      id={`portrait_${id}`}
      src={(window.TG_PORTRAITS || {})[`portrait_${id}`]}
      shape="circle"
      style={{ width: imgSize, height: imgSize, display: 'block', ...(mobile ? {} : { marginBottom: 20 }) }}
      placeholder={`Drop ${name.split(' ')[0]}'s photo`}
    >
      <div slot="empty" style={{
        width: '100%', height: '100%', borderRadius: '50%',
        background: TG.lift, border: `1px solid ${TG.rule}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: sans, fontSize: mobile ? 22 : 28, fontWeight: 600,
        color: TG.dim, letterSpacing: '-0.01em',
      }}>{name.split(' ').map(n => n[0]).join('')}</div>
    </image-slot>
  );

  const info = (
    <div>
      <div style={{ ...T.h3, color: TG.paper, marginBottom: mobile ? 2 : 4 }}>{name}</div>
      <div style={{ ...T.eyebrow, fontSize: mobile ? 9 : 10, color: TG.green, marginBottom: mobile ? 10 : 16 }}>{role}</div>
      <div style={{ ...T.body, color: TG.dim, marginBottom: mobile ? 12 : 20 }}>{bio}</div>
      <a href={url} target="_blank" rel="noreferrer" style={{
        display: 'inline-flex', alignItems: 'center', gap: mobile ? 6 : 8,
        ...T.small, color: TG.green, textDecoration: 'none', fontWeight: 600, letterSpacing: '0.02em',
      }}>
        <svg width={mobile ? 12 : 14} height={mobile ? 12 : 14} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.86-3.04-1.86 0-2.15 1.45-2.15 2.94v5.67H9.34V9h3.41v1.56h.05c.47-.9 1.63-1.86 3.36-1.86 3.59 0 4.25 2.37 4.25 5.45v6.3zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM3.56 20.45h3.56V9H3.56v11.45z"/>
        </svg>
        LinkedIn
      </a>
    </div>
  );

  if (mobile) {
    return (
      <div style={{
        background: TG.navy, border: `1px solid ${TG.rule}`, borderRadius: 12, padding: 20,
        display: 'grid', gridTemplateColumns: '72px 1fr', gap: 16, alignItems: 'flex-start',
      }}>
        {portrait}
        {info}
      </div>
    );
  }
  return (
    <div style={{ background: TG.navy, border: `1px solid ${TG.rule}`, borderRadius: 14, padding: 28 }}>
      {portrait}
      {info}
    </div>
  );
}

/* ---- Closing CTA ---- */
function SiteCta({ mobile, T }) {
  const p = mobile ? 20 : 64;
  return (
    <section id="book" style={{ padding: `${mobile ? 56 : 120}px ${p}px`, borderTop: `1px solid ${TG.rule}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', right: mobile ? -100 : -160, top: '50%', transform: 'translateY(-50%)', opacity: 0.05, pointerEvents: 'none' }}>
        <TGIcon size={mobile ? 360 : 720} stroke={TG.paper} fill={TG.green}/>
      </div>
      <div style={{ position: 'relative', maxWidth: mobile ? undefined : 1100 }}>
        <h2 style={{ ...T.display, color: TG.paper, marginBottom: mobile ? 18 : 24, marginTop: 0, maxWidth: mobile ? undefined : 920 }}>
          {mobile ? 'Cover every job. At the right price.' : 'Cover every job your workers accept, at the right price.'}
        </h2>
        <p style={{ ...T.lead, color: TG.dim, maxWidth: mobile ? undefined : 680, marginBottom: mobile ? 28 : 40, marginTop: 0 }}>
          {mobile
            ? 'A 30-minute call to scope your platform and your worker categories. No deck. No pitch. Integration map and sample per-job quote inside 48 hours.'
            : 'A 30-minute call to scope your platform, your worker categories, and where TaskGuard fits. No deck, no sales pitch. We send the integration map and a sample per-job quote within 48 hours.'}
        </p>
        <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 10 : 12, alignItems: mobile ? undefined : 'center' }}>
          <PrimaryCTA href={BOOK_HREF} style={{ fontSize: mobile ? 15 : 16, padding: mobile ? '16px 22px' : '18px 28px', justifyContent: mobile ? 'center' : undefined }}>Book a call</PrimaryCTA>
          <GhostCTA style={{ fontSize: mobile ? 15 : 16, padding: mobile ? '16px 22px' : '18px 28px', justifyContent: mobile ? 'center' : undefined }}>See a sample quote</GhostCTA>
        </div>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function SiteFooter({ mobile }) {
  const p = mobile ? 20 : 64;
  const col = (title, items) => (
    <div key={title}>
      <div style={{
        fontFamily: mono, fontSize: mobile ? 10 : 11, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: TG.mute, marginBottom: mobile ? 12 : 16, fontWeight: 600,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 8 : 10 }}>
        {items.map(t => (
          <a key={t} href="#" style={{ color: TG.dim, textDecoration: 'none', fontSize: mobile ? 13 : 14 }}>{t}</a>
        ))}
      </div>
    </div>
  );

  return (
    <footer style={{ padding: `${mobile ? 48 : 80}px ${p}px ${mobile ? 36 : 48}px`, borderTop: `1px solid ${TG.rule}`, background: TG.navy }}>
      {mobile ? (
        <>
          <div style={{ marginBottom: 32 }}>
            <MiniLockup size={20}/>
            <p style={{ color: TG.dim, fontSize: 13, marginTop: 16, lineHeight: 1.55, marginBottom: 0 }}>
              A specialist underwriting agency for the Australian gig economy. Per-job cover, priced by data.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginBottom: 32 }}>
            {col('Product',   ['Platforms', 'Insurers', 'Workers', 'Methodology'])}
            {col('Company',   ['About', 'Careers', 'Contact'])}
            {col('Resources', ['Methodology', 'Compliance', 'Brand'])}
            {col('Legal',     ['AFSL pathway', 'Privacy', 'Terms'])}
          </div>
        </>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 48, marginBottom: 64 }}>
          <div>
            <MiniLockup size={22}/>
            <p style={{ color: TG.dim, fontSize: 14, marginTop: 20, maxWidth: 260, lineHeight: 1.6 }}>
              A specialist underwriting agency for the Australian gig economy. Per-job cover, priced by data.
            </p>
          </div>
          {col('Product',   ['Platforms', 'Insurers', 'Workers', 'Methodology', 'Documentation'])}
          {col('Company',   ['About', 'Careers', 'Press', 'Contact'])}
          {col('Resources', ['Pricing methodology', 'Loss ratio targets', 'Compliance', 'Brand'])}
          {col('Legal',     ['AFSL pathway', 'Privacy', 'Terms', 'Disclosure'])}
        </div>
      )}
      <div style={{
        display: 'flex', flexDirection: mobile ? 'column' : 'row',
        justifyContent: mobile ? undefined : 'space-between',
        paddingTop: mobile ? 22 : 32, borderTop: `1px solid ${TG.rule}`,
        color: TG.mute, fontSize: mobile ? 11 : 12, fontFamily: mono, letterSpacing: '0.06em',
        gap: mobile ? 6 : 0,
      }}>
        <span>© 2026 TaskGuard</span>
        <span>{mobile ? 'Sydney, AU' : 'Sydney, AU · Per-job cover, priced by data'}</span>
      </div>
    </footer>
  );
}

/* ---- Root ---- */
function TaskGuardSite() {
  const mobile = useIsMobile();
  const T = makeT(mobile);
  return (
    <div style={{ background: TG.navy, color: TG.paper, fontFamily: sans, width: '100%', WebkitFontSmoothing: 'antialiased' }}>
      <SiteNav mobile={mobile}/>
      <SiteHero mobile={mobile} T={T}/>
      <SiteAudience mobile={mobile} T={T}/>
      <SiteHow mobile={mobile} T={T}/>
      <SitePricing mobile={mobile} T={T}/>
      <SiteChart mobile={mobile} T={T}/>
      <SiteTeam mobile={mobile} T={T}/>
      <SiteCta mobile={mobile} T={T}/>
      <SiteFooter mobile={mobile}/>
    </div>
  );
}

window.TaskGuardSite = TaskGuardSite;
