function ATOComplianceBlock() {
  return (
    <section id="features" style={{
      background: 'var(--logit-paper)', position: 'relative', overflow: 'hidden',
      padding: '120px 0',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 47px,
          rgba(30,90,140,0.14) 47px,
          rgba(30,90,140,0.14) 48px
        )`,
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 'calc(50% - 480px)',
        width: 2, background: 'var(--logit-margin-red)', opacity: 0.5,
      }} />
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: 'calc(50% - 540px)',
        width: 22, display: 'flex', flexDirection: 'column', gap: 100, paddingTop: 120,
      }}>
        {[0,1,2,3,4].map(i => (
          <div key={i} style={{ width: 22, height: 22, borderRadius: '50%',
            background: '#F2F4F7', boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)' }} />
        ))}
      </div>

      <div style={{
        maxWidth: 960, margin: '0 auto', padding: '0 64px 0 96px', position: 'relative',
      }}>
        <div style={{
          fontSize: 13, fontWeight: 700, letterSpacing: 1.56,
          color: 'var(--logit-margin-red)', marginBottom: 16,
        }}>{'↪'} AUSTRALIAN TAXATION OFFICE {'·'} LOGBOOK METHOD</div>

        <h2 style={{
          margin: 0, fontSize: 76, lineHeight: 0.98, letterSpacing: '-2.5px',
          fontWeight: 900, color: 'var(--logit-ink)',
          fontFamily: 'Georgia, "Times New Roman", serif',
        }}>
          The logbook the ATO actually wants.
        </h2>
        <p style={{
          margin: '28px 0 40px', fontSize: 20, lineHeight: 1.55,
          color: 'var(--logit-navy-2)', maxWidth: 680, fontWeight: 400,
        }}>
          To claim car expenses with the logbook method, the ATO requires a 12-week
          sample that captures <em>every trip's</em> date, odometer, distance, route, and
          purpose. Miss a field, lose the claim. LogIt captures all of them — for every
          trip, every day.
        </p>

        <div style={{
          background: '#fff', borderRadius: 18,
          border: '1px solid var(--logit-grey-200)',
          padding: '32px 36px',
          boxShadow: '0 12px 32px rgba(15,30,46,0.08)',
        }}>
          <div style={{
            fontSize: 12, fontWeight: 800, letterSpacing: 1.4,
            color: 'var(--logit-grey-500)', marginBottom: 18, textTransform: 'uppercase',
          }}>ATO logbook checklist {'·'} every PDF includes</div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {[
              'Date of every trip',
              'Odometer reading (start and end)',
              'Total km driven',
              'Route — origin and destination',
              'Reason for the trip',
              'Vehicle make, model, rego',
              '12-week sample period',
              'Business-use percentage',
            ].map((line) => (
              <div key={line} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 24, height: 24, borderRadius: '50%',
                  background: 'var(--logit-business)', color: '#062b1f', flexShrink: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 900, fontSize: 14,
                }}>{'✓'}</div>
                <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--logit-ink)' }}>{line}</span>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 24, paddingTop: 20, borderTop: '1px dashed var(--logit-grey-300)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          }}>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--logit-ink)' }}>
                Also: cents-per-km method, GST-eligible kilometres, multi-vehicle.
              </div>
              <div style={{ fontSize: 13, color: 'var(--logit-grey-500)', marginTop: 4 }}>
                If the ATO updates the rules, the export updates with them.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Tap start, drive your route.',
      body: 'Open LogIt, tap Start Trip, and drive. GPS tracks your route in real time — distance, speed, and elapsed time all recorded. Tap End Trip when you arrive.',
      img: 'assets/screenshots/screenshot-home.png?v=2',
    },
    {
      n: '02',
      title: 'Tap business or personal.',
      body: 'After the trip, tap Business or Personal and add a short purpose. Done in fourteen seconds while the engine cools.',
      img: 'assets/screenshots/screenshot-classify.png?v=2',
    },
    {
      n: '03',
      title: 'Tax time, one PDF.',
      body: 'Hit Generate on the Reports tab. An ATO-formatted logbook PDF is ready to share with your accountant. No spreadsheets, no panic.',
      img: 'assets/screenshots/screenshot-reports.png?v=2',
    },
  ];

  return (
    <section style={{ background: '#fff', padding: '120px 0', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 64px' }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 72px' }}>
          <div style={{
            fontSize: 13, fontWeight: 700, letterSpacing: 1.56,
            color: 'var(--logit-blue)', marginBottom: 14,
          }}>HOW IT WORKS</div>
          <h2 style={{
            margin: 0, fontSize: 60, lineHeight: 1, letterSpacing: '-1.8px',
            fontWeight: 900, color: 'var(--logit-ink)',
          }}>
            Start. Drive. Classify.
          </h2>
          <p style={{
            margin: '20px auto 0', fontSize: 19, lineHeight: 1.55,
            color: 'var(--logit-grey-500)', maxWidth: 580, fontWeight: 300,
          }}>
            Two taps to track, one tap to classify. Tax-time stops being a panic.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {steps.map((step) => (
            <div key={step.n} style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <div style={{
                height: 440, background: 'var(--logit-grey-50)',
                borderRadius: 24, border: '1px solid var(--logit-grey-200)',
                overflow: 'hidden', position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', top: 24, left: 24, zIndex: 5,
                  fontSize: 64, fontWeight: 900, color: 'var(--logit-blue)',
                  letterSpacing: '-2.5px', lineHeight: 0.9, opacity: 0.95,
                }}>{step.n}</div>
                <div style={{
                  position: 'absolute', bottom: -120, left: '50%',
                  transform: 'translateX(-50%) scale(0.6)', transformOrigin: 'center bottom',
                }}>
                  <PhoneMockup screenshot={step.img} scale={1} />
                </div>
              </div>
              <div>
                <h3 style={{
                  margin: 0, fontSize: 26, fontWeight: 800, color: 'var(--logit-ink)',
                  letterSpacing: '-0.6px', lineHeight: 1.15,
                }}>{step.title}</h3>
                <p style={{
                  margin: '10px 0 0', fontSize: 15, lineHeight: 1.6,
                  color: 'var(--logit-grey-500)',
                }}>{step.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturesGrid() {
  return (
    <section style={{ background: 'var(--logit-grey-50)', padding: '120px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 64px' }}>
        <div style={{ maxWidth: 760, marginBottom: 64 }}>
          <div style={{
            fontSize: 13, fontWeight: 700, letterSpacing: 1.56,
            color: 'var(--logit-blue)', marginBottom: 14,
          }}>WHAT'S IN THE BOX</div>
          <h2 style={{
            margin: 0, fontSize: 60, lineHeight: 1, letterSpacing: '-1.8px',
            fontWeight: 900, color: 'var(--logit-ink)',
          }}>
            Every trip logged. Every field, ATO-ready.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          <FeatureCard
            eyebrow="ONE-TAP TRACKING"
            title="Start a trip in one tap."
            body="Open LogIt, tap Start Trip, and GPS tracks your route in real time. Distance, speed, and elapsed time — all captured. Tap End Trip when you arrive. You can also add past trips manually."
            accent="blue"
          >
            <div style={{
              display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px',
              background: 'var(--logit-blue-tint)', borderRadius: 100, alignSelf: 'flex-start',
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--logit-blue)',
                boxShadow: '0 0 0 4px rgba(0,167,226,0.2)' }} />
              <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--logit-blue-deep)' }}>Tracking now</span>
            </div>
          </FeatureCard>

          <FeatureCard
            eyebrow="ONE-TAP CLASSIFY"
            title="Business or personal in 14 seconds."
            body="After each trip, tap Business or Personal and type a short purpose. That's it — every field the ATO needs is filled."
            accent="green"
          >
            <div style={{ display: 'flex', gap: 8 }}>
              <div style={{ flex: 1, padding: '10px 12px', background: 'var(--logit-business-soft)',
                color: '#006A4A', borderRadius: 10, fontSize: 12, fontWeight: 800, textAlign: 'center' }}>
                BUSINESS
              </div>
              <div style={{ flex: 1, padding: '10px 12px', background: 'var(--logit-personal-soft)',
                color: '#8A5400', borderRadius: 10, fontSize: 12, fontWeight: 800, textAlign: 'center' }}>
                PERSONAL
              </div>
            </div>
          </FeatureCard>

          <FeatureCard
            eyebrow="LIVE DEDUCTION TALLY"
            title="See the money rack up."
            body="Every business trip updates a live financial-year tally. Watch your deduction grow from $0 in July to four-figures by Christmas — the motivation that fixes the habit."
            accent="amber"
          >
            <div style={{
              padding: '12px 14px', background: '#fff', borderRadius: 12,
              border: '1px solid var(--logit-grey-200)', display: 'flex',
              alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--logit-grey-500)', letterSpacing: 0.5 }}>FY 25-26 YTD</div>
                <div style={{ fontSize: 22, fontWeight: 900, color: 'var(--logit-ink)', letterSpacing: '-0.5px' }}>$6,142.80</div>
              </div>
              <div style={{
                padding: '3px 8px', borderRadius: 100, background: 'var(--logit-business-soft)',
                color: '#006A4A', fontSize: 11, fontWeight: 700,
              }}>{'↑'} 18%</div>
            </div>
          </FeatureCard>

          <FeatureCard
            eyebrow="EVERY VEHICLE"
            title="Multi-vehicle support."
            body="One ute, one Camry, a third vehicle for the kids? Add up to 10 vehicles on the Pro plan and switch between them. Each gets its own logbook and PDF."
            accent="blue"
          >
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {['HiAce · ABC 123', 'Ranger · DEF 456', 'Camry · GHI 789'].map((v) => (
                <span key={v} style={{
                  padding: '6px 12px', background: '#fff', border: '1px solid var(--logit-grey-200)',
                  borderRadius: 100, fontSize: 12, fontWeight: 600, color: 'var(--logit-ink)',
                }}>{v}</span>
              ))}
            </div>
          </FeatureCard>

          <FeatureCard
            eyebrow="ACCOUNTANT-READY"
            title="One PDF, no chase emails."
            body="July rolls around, you tap Generate, and share the PDF with your accountant via email, AirDrop, or any app on your phone. The 'where's your logbook?' email never arrives."
            accent="green"
          >
            <div style={{
              padding: '12px 14px', background: '#fff', borderRadius: 12,
              border: '1px solid var(--logit-grey-200)', display: 'flex',
              alignItems: 'center', gap: 10,
            }}>
              <div style={{ width: 32, height: 38, borderRadius: 4, background: 'var(--logit-blue-tint)',
                color: 'var(--logit-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16, fontWeight: 900 }}>PDF</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--logit-ink)' }}>FY25-26-Logbook.pdf</div>
                <div style={{ fontSize: 11, color: 'var(--logit-grey-500)' }}>ATO-compliant format</div>
              </div>
            </div>
          </FeatureCard>

          <FeatureCard
            eyebrow="PRIVACY-FIRST"
            title="Your data stays on your phone."
            body="All trip data is stored locally on your device in a SQLite database — nothing is sent to the cloud. Routes never leave your phone unless you explicitly export them."
            accent="amber"
          >
            <div style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px',
              background: '#fff', borderRadius: 12, border: '1px solid var(--logit-grey-200)',
            }}>
              <span style={{ fontSize: 22 }}>{'🔒'}</span>
              <div>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--logit-ink)' }}>100% local storage</div>
                <div style={{ fontSize: 11, color: 'var(--logit-grey-500)' }}>No cloud sync, no tracking</div>
              </div>
            </div>
          </FeatureCard>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ATOComplianceBlock, HowItWorks, FeaturesGrid });