function Hero() {
  return (
    <section style={{
      position: 'relative', minHeight: 900,
      background: 'var(--logit-gradient-hero)',
      color: '#fff', overflow: 'hidden',
    }}>
      <Nav />

      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.08 }}
        preserveAspectRatio="xMidYMid slice" viewBox="0 0 1440 900">
        <g stroke="#34CCFF" strokeWidth="1.4" fill="none">
          <circle cx="100"  cy="900" r="380" />
          <circle cx="100"  cy="900" r="500" />
          <circle cx="100"  cy="900" r="620" />
          <circle cx="1340" cy="60"  r="240" />
          <circle cx="1340" cy="60"  r="340" />
        </g>
      </svg>

      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '180px 64px 80px',
        display: 'grid', gridTemplateColumns: '1fr 480px', gap: 56, alignItems: 'center',
        position: 'relative',
      }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 28,
            padding: '6px 14px 6px 6px', borderRadius: 100,
            background: 'rgba(0,211,138,0.12)', border: '1px solid rgba(0,211,138,0.25)',
            fontSize: 13, fontWeight: 600,
          }}>
            <span style={{
              padding: '4px 10px', borderRadius: 100,
              background: 'var(--logit-business)', color: '#062b1f', fontWeight: 800,
              fontSize: 11, letterSpacing: 0.4,
            }}>ATO-COMPLIANT</span>
            <span style={{ color: 'rgba(255,255,255,0.85)' }}>For sole traders, tradies & sales reps</span>
          </div>

          <h1 style={{
            margin: 0, fontSize: 96, lineHeight: 0.95, letterSpacing: '-3.6px',
            fontWeight: 900, color: '#fff',
          }}>
            Stop losing<br/>
            money to bad<br/>
            <span style={{
              background: 'linear-gradient(120deg, var(--logit-blue-2), var(--logit-blue))',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>records.</span>
          </h1>

          <p style={{
            margin: '28px 0 0', maxWidth: 520, fontSize: 21, lineHeight: 1.5,
            color: 'rgba(255,255,255,0.7)', fontWeight: 300,
          }}>
            The ATO logbook that fills itself in. Tap start, drive, tap end —
            classify it as business or personal, and the deduction is filed.
            End of year, your accountant gets a single PDF the ATO accepts. <strong style={{ color: '#fff', fontWeight: 500 }}>From $0.</strong>
          </p>

          <div id="download" style={{ display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }}>
            <AppStoreBadge store="apple" />
            <AppStoreBadge store="google" />
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 28 }}>
            <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>
              Free tier available {'·'} no card to start
            </span>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
          <div style={{
            position: 'absolute', width: 500, height: 600,
            background: 'radial-gradient(ellipse, rgba(0,167,226,0.4) 0%, transparent 70%)',
            filter: 'blur(40px)',
          }} />
          <div style={{ position: 'relative' }}>
            <PhoneMockup screenshot="assets/screenshots/screenshot-home.png?v=2" scale={0.78} />
          </div>
        </div>
      </div>
    </section>
  );
}

function RevealStrip() {
  const items = [
    { n: '$0.88', l: 'per km deduction rate', sub: 'FY 2025-26' },
    { n: '14 sec', l: 'to classify a trip', sub: 'business or personal' },
    { n: '100%', l: 'ATO-required fields', sub: 'every PDF report' },
    { n: '12 wk', l: 'logbook sample period', sub: 'ATO-compliant' },
  ];
  return (
    <section style={{
      background: 'var(--logit-navy)', color: '#fff', position: 'relative',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 64px',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: '0 32px',
            borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.08)' : 'none',
          }}>
            <div style={{
              fontFamily: 'var(--logit-font-rounded)', fontWeight: 800,
              fontSize: 44, letterSpacing: '-2px', color: 'var(--logit-blue-2)', lineHeight: 1,
            }}>{it.n}</div>
            <div style={{ marginTop: 8, fontSize: 14, color: '#fff', fontWeight: 600 }}>{it.l}</div>
            <div style={{ marginTop: 2, fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>{it.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, RevealStrip });