function WhoForBlock() {
  return (
    <section id="for-who" style={{
      background: 'var(--logit-navy)', color: '#fff', padding: '120px 0',
      position: 'relative', overflow: 'hidden',
    }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, opacity: 0.06 }}
        preserveAspectRatio="xMidYMid slice" viewBox="0 0 1440 900">
        <g stroke="#34CCFF" strokeWidth="1.4" fill="none">
          <circle cx="200" cy="700" r="280" />
          <circle cx="200" cy="700" r="400" />
        </g>
      </svg>

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 64px', position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div style={{
            fontSize: 13, fontWeight: 700, letterSpacing: 1.56,
            color: 'var(--logit-blue-2)', marginBottom: 14,
          }}>WHO'S CLAIMING WITH IT</div>
          <h2 style={{
            margin: 0, fontSize: 60, lineHeight: 1, letterSpacing: '-1.8px',
            fontWeight: 900, color: '#fff',
          }}>
            If you drive for work, it's for you.
          </h2>
          <p style={{
            margin: '20px 0 0', fontSize: 19, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.6)', maxWidth: 580, fontWeight: 300,
          }}>
            Tradies, sales reps, couriers, real estate agents, allied health,
            anyone with a ute and an ABN. The deductions add up.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          <PersonaCard
            role="Plumber · Sydney"
            name="Jack H."
            quote="I used to scribble trips on the back of receipts. First year with LogIt my deduction tripled — the trips I forgot to log were the ones eating the claim."
            deduction="$5,820"
          />
          <PersonaCard
            role="Sales rep · Melbourne"
            name="Priya M."
            quote="My territory's six suburbs. Forty-plus trips a week. There's no way I'd write that down. I log each trip in LogIt, classify at the end of the day, and my accountant doesn't email me."
            deduction="$7,140"
          />
          <PersonaCard
            role="Courier · Brisbane"
            name="Tane W."
            quote="The 12-week sample period would've taken me out at the knees. Set it once in LogIt, logged my trips each day, generated the PDF. Done. Refund landed 11 days later."
            deduction="$4,360"
          />
        </div>

        <div style={{
          marginTop: 56, display: 'flex', gap: 10, flexWrap: 'wrap',
          padding: '24px 28px', borderRadius: 20,
          background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
        }}>
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', fontWeight: 600,
            marginRight: 4, alignSelf: 'center' }}>Also for:</span>
          {[
            'Tradies', 'Real estate agents', 'Electricians', 'Mortgage brokers',
            'Allied health', 'Mobile mechanics', 'Cleaners', 'Photographers',
            'Carpenters', 'Auditors', 'Locksmiths', 'Driving instructors',
          ].map((p) => (
            <span key={p} style={{
              padding: '7px 14px', borderRadius: 100,
              background: 'rgba(255,255,255,0.06)', color: '#fff',
              fontSize: 13, fontWeight: 500,
              border: '1px solid rgba(255,255,255,0.08)',
            }}>{p}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqBlock() {
  return (
    <section id="faq" style={{ background: '#fff', padding: '120px 0' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 64px',
        display: 'grid', gridTemplateColumns: '400px 1fr', gap: 80,
      }}>
        <div>
          <div style={{
            fontSize: 13, fontWeight: 700, letterSpacing: 1.56,
            color: 'var(--logit-blue)', marginBottom: 14,
          }}>QUESTIONS</div>
          <h2 style={{
            margin: 0, fontSize: 52, lineHeight: 1.02, letterSpacing: '-1.6px',
            fontWeight: 900, color: 'var(--logit-ink)',
          }}>
            What if I...?
          </h2>
          <p style={{
            margin: '20px 0 28px', fontSize: 16, lineHeight: 1.6,
            color: 'var(--logit-grey-500)',
          }}>
            Eight things we get asked the most. If yours isn't here, the team
            is in Sydney and answers within the day.
          </p>
        </div>
        <div>
          <FaqRow
            q="Will the ATO actually accept this?"
            a="Yes. The PDF export includes every field the ATO requires for the logbook method — odometer at start and end, date, route, purpose, total km, vehicle ID, business-use percentage, plus a 12-week sample period. We've cross-checked the format with three Australian CPAs and our compliance partner."
            open={true}
          />
          <FaqRow
            q="What about my battery?"
            a="LogIt only uses GPS while you're actively tracking a trip — it doesn't run in the background monitoring for motion. When you're not tracking, battery impact is zero."
          />
          <FaqRow
            q="Does it work offline / out of mobile coverage?"
            a="Yes. All trip data is stored locally on your device in a SQLite database. GPS works without mobile data. There's no cloud sync — your data stays on your phone."
          />
          <FaqRow
            q="Can I share the report with my accountant?"
            a="Yes. Generate the PDF from the Reports tab, then share it via email, AirDrop, or any app on your phone. You can also export trips as CSV."
          />
          <FaqRow
            q="What if I accidentally log the wrong trip?"
            a="You're in full control — trips only start when you tap Start Trip. If you log a trip by mistake, you can discard it from the trip summary screen before saving."
          />
          <FaqRow
            q="Can I track more than one vehicle?"
            a="Yes — the Pro plan ($4.99/mo) supports up to 10 vehicles. Select which vehicle you're driving before starting a trip. Each vehicle gets its own logbook and PDF export. The Free and Starter plans support one vehicle."
          />
          <FaqRow
            q="Is there a free version? What's behind the paywall?"
            a="The Free tier gives you up to 10 trips per month with one vehicle — enough to try it out. Starter ($1.99/mo) unlocks unlimited trips and PDF/CSV exports. Pro ($4.99/mo) adds up to 10 vehicles, audit simulation, and database backup."
          />
          <FaqRow
            q="Where is my data stored?"
            a="All data — trip routes, GPS coordinates, expenses — is stored locally on your device in a SQLite database. Nothing is sent to the cloud. Your data only leaves your phone when you explicitly export a PDF or CSV."
          />
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{
      background: 'var(--logit-gradient-deep)', color: '#fff',
      padding: '120px 64px', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        maxWidth: 1000, margin: '0 auto', textAlign: 'center', position: 'relative',
      }}>
        <div style={{
          display: 'inline-block', borderRadius: 22, overflow: 'hidden',
          boxShadow: '0 12px 32px rgba(0,0,0,0.4)', marginBottom: 28,
        }}>
          <IconE size={96} />
        </div>
        <h2 style={{
          margin: 0, fontSize: 88, lineHeight: 0.96, letterSpacing: '-3.2px',
          fontWeight: 900, color: '#fff',
        }}>
          Your next trip<br/>
          <span style={{
            background: 'linear-gradient(120deg, var(--logit-blue-2), var(--logit-blue))',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>could be the first one.</span>
        </h2>
        <p style={{
          margin: '28px auto 0', maxWidth: 600, fontSize: 20, lineHeight: 1.5,
          color: 'rgba(255,255,255,0.7)', fontWeight: 300,
        }}>
          Free tier, no card required. Upgrade anytime, cancel from the app.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 40 }}>
          <AppStoreBadge store="apple" />
          <AppStoreBadge store="google" />
        </div>
        <div style={{
          marginTop: 32, fontSize: 14, color: 'rgba(255,255,255,0.5)',
          display: 'flex', justifyContent: 'center', gap: 24, flexWrap: 'wrap',
        }}>
          <span>{'·'} Free tier: 10 trips/month</span>
          <span>{'·'} Starter $1.99/mo {'·'} Pro $4.99/mo</span>
          <span>{'·'} Cancel anytime</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      background: 'var(--logit-navy)', color: 'rgba(255,255,255,0.7)',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      padding: '64px 64px 32px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 48 }}>
        <div>
          <Wordmark onDark={true} />
          <p style={{
            margin: '20px 0 24px', fontSize: 14, lineHeight: 1.6, maxWidth: 320,
            color: 'rgba(255,255,255,0.55)',
          }}>
            LogIt is a sub-brand of <span style={{ color: 'var(--logit-blue-2)', fontWeight: 600 }}>Locate2u</span>,
            owned by Locate Technologies Ltd (NZX:LOC). Built in Sydney for Australian sole traders.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <AppStoreBadge store="apple" />
            <AppStoreBadge store="google" />
          </div>
        </div>
        {[
          { h: 'Product', l: [
            { t: 'Features', u: '#features' },
            { t: 'For tradies', u: '#for-who' },
            { t: 'For sales reps', u: '#for-who' },
          ]},
          { h: 'Support', l: [
            { t: 'Help centre', u: '#' },
            { t: 'Contact support', u: '#' },
            { t: 'Submit feedback', u: '#' },
          ]},
          { h: 'Compliance', l: [
            { t: 'ATO logbook method', u: '#features' },
            { t: 'Privacy policy', u: 'https://www.locate2u.com/privacy/' },
            { t: 'Terms of service', u: 'https://www.locate2u.com/legal/terms/' },
          ]},
          { h: 'Locate2u family', l: [
            { t: 'Locate2u', u: 'https://www.locate2u.com' },
            { t: 'Zoom2u', u: 'https://www.zoom2u.com' },
            { t: 'Careers', u: 'https://www.locate2u.com/careers/' },
            { t: 'Investor relations', u: 'https://www.locate2u.com/investors/' },
          ]},
        ].map((col) => (
          <div key={col.h}>
            <div style={{
              fontSize: 12, fontWeight: 700, letterSpacing: 1.2,
              color: '#fff', marginBottom: 16, textTransform: 'uppercase',
            }}>{col.h}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 12 }}>
              {col.l.map(item => (
                <li key={item.t}>
                  <a href={item.u} target={item.u.startsWith('http') ? '_blank' : undefined}
                    rel={item.u.startsWith('http') ? 'noopener noreferrer' : undefined}
                    style={{
                    color: 'rgba(255,255,255,0.55)', textDecoration: 'none',
                    fontSize: 14, fontWeight: 400,
                  }}>{item.t}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 56, paddingTop: 28, borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap',
      }}>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
          {'©'} 2026 Locate Technologies Ltd {'·'} Sydney, NSW
        </div>
        <div style={{ display: 'flex', gap: 20, fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
          <a href="https://www.locate2u.com/privacy/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Privacy</a>
          <a href="https://www.locate2u.com/legal/terms/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none' }}>Terms</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { WhoForBlock, FaqBlock, FinalCTA, Footer });