/* Landing page */
const { useState: lUseState, useEffect: lUseEffect, useRef: lUseRef } = React;

function HeroStatusGrid() {
  const [tick, setTick] = lUseState(0);
  lUseEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);

  const rows = [
    { id: 'ftc',   label: 'FTC SAFEGUARDS RULE',     status: 'ok',    detail: 'WISP current · QI signed' },
    { id: 'ca',    label: 'CALIFORNIA SB 766',       status: 'warn',  detail: '2 listings missing disclosure' },
    { id: 'goog',  label: 'GOOGLE VLA POLICY',       status: 'ok',    detail: 'All 47 listings match' },
    { id: 'vault', label: 'COMM. VAULT (4-YR)',      status: 'ok',    detail: '12,481 messages archived' },
    { id: 'train', label: 'EMPLOYEE TRAINING',       status: 'ok',    detail: '6 of 6 complete' },
  ];

  // animate one row's dot every tick
  return (
    <div className="sheet" style={{ padding: 0 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid var(--rule)' }}>
        <span className="label">LIVE STATUS · 04:32 PDT</span>
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>SUNRISE MOTORS · DEALER #LC-00428</span>
      </div>
      <div>
        {rows.map((r, i) => {
          const flash = tick % rows.length === i;
          return (
            <div key={r.id} className="m-hero-status-row" style={{
              display: 'grid',
              gridTemplateColumns: '14px 1.1fr 1fr 90px',
              alignItems: 'center',
              gap: 12,
              padding: '14px 16px',
              borderTop: i ? '1px solid var(--rule)' : 0,
              background: flash ? 'color-mix(in oklab, var(--signal) 6%, transparent)' : 'transparent',
              transition: 'background 1.2s',
            }}>
              <span className={'dot ' + (r.status === 'ok' ? 'dot--ok' : r.status === 'warn' ? 'dot--warn' : 'dot--alert')}></span>
              <span className="mono" style={{ fontSize: 12, letterSpacing: '0.04em' }}>{r.label}</span>
              <span className="m-hide-mobile" style={{ fontSize: 13, color: 'var(--ink-2)' }}>{r.detail}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right', textTransform: 'uppercase' }}>
                {r.status === 'ok' ? 'COMPLIANT' : r.status === 'warn' ? 'REVIEW' : 'VIOLATION'}
              </span>
            </div>
          );
        })}
      </div>
      <div style={{ padding: '10px 16px', borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--ink-3)' }} className="mono">
        <span>SCAN INTERVAL · 24h</span>
        <span>NEXT SCAN · 02:00 PDT</span>
      </div>
    </div>
  );
}

function HeroBlock() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div className="m-hero-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) minmax(0,1fr)', gap: 56, alignItems: 'end' }}>
          <div>
            <div className="label" style={{ marginBottom: 24 }}>FILE NO. 2026-LC · INDEPENDENT DEALER COMPLIANCE</div>
            <h1 className="h-display">
              Three regulators<br/>
              are now your<br/>
              <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>silent partner</span>.
            </h1>
            <p className="lede" style={{ marginTop: 32, maxWidth: 560 }}>
              The FTC, the State of California, and Google can each end your dealership in a quarter.
              Lot Copilot keeps all three off your back, for ninety-nine dollars a month.
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn" onClick={() => go('signup')}>Start 14-day trial &nbsp;→</button>
              <button className="btn btn--ghost" onClick={() => go('dashboard')}>See the dashboard</button>
            </div>
            <div style={{ display: 'flex', gap: 24, marginTop: 28, fontSize: 12, color: 'var(--ink-3)' }} className="mono">
              <span>NO CREDIT CARD</span><span>·</span>
              <span>5-MIN SETUP</span><span>·</span>
              <span>CANCEL ANYTIME</span>
            </div>
          </div>
          <HeroStatusGrid />
        </div>
      </div>
    </section>
  );
}

function StakesTicker() {
  const items = [
    'FTC · $46,517 PER VIOLATION',
    'CA SB 766 · EFFECTIVE OCT 1, 2026',
    'GOOGLE · DELIST ON FIRST OFFENSE',
    '4-YEAR RETENTION · EVERY MESSAGE',
    'WISP REQUIRED · ANNUAL UPDATE',
    'QUALIFIED INDIVIDUAL · ON RECORD',
    'DOC FEE TRANSPARENCY · MANDATORY',
    'VENDOR RISK ATTESTATIONS · YEARLY',
  ];
  return <Marquee items={items} />;
}

function ProblemSection() {
  return (
    <section style={{ padding: '96px 0' }}>
      <div className="container">
        <SectionLabel
          no="01"
          kana="THE PROBLEM"
          title="Three regulators hit your inbox in the last eighteen months."
          sub="The only tools to handle them are four-hundred-dollar-a-month enterprise platforms built for dealer groups with a hundred lots."
        />
        <div>
          <RegulatorRow
            no="01.A"
            abbr="FTC."
            name="Federal Trade Commission · Safeguards Rule"
            deadline="In effect since June 2023"
            fine="$46,517"
            status="live"
            lede="Every dealer that finances cars must maintain a Written Information Security Program, designate a Qualified Individual, and run vendor risk reviews. Audits started this year."
            items={["WISP — 12 to 18 pages, updated annually", "QI sign-off on every change", "Annual employee security training", "Vendor attestations on file"]}
          />
          <RegulatorRow
            no="01.B"
            abbr="CA."
            name="California CARS Act · Senate Bill 766"
            deadline="Effective October 1, 2026"
            fine="LICENSE"
            status="soon"
            lede="Five specific first-contact disclosures. Four-year retention of every advertisement and customer message. Pre-delivery deal-jacket review on file or you don't deliver."
            items={["5 disclosures at first contact, every channel", "4-year archive of ads + comms", "Deal-jacket review before delivery", "Audit trail on demand"]}
          />
          <RegulatorRow
            no="01.C"
            abbr="GOOGLE."
            name="Misrepresentation Policy · Vehicle Listing Ads"
            deadline="In effect since October 2025"
            fine="DELIST"
            status="live"
            lede="The price you advertise on a Vehicle Listing Ad must equal the price you sell the car at. Mismatch on inspection and Google removes the slot — sometimes the entire account."
            items={["Advertised = sold, to the dollar", "Doc-fee disclosure on listing", "Inventory crawled multiple times daily", "First strike → delisting"]}
          />
        </div>
        <div className="m-row-2col" style={{ marginTop: 48, padding: '24px 28px', background: 'var(--paper-2)', border: '1px solid var(--rule)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'center' }}>
          <p style={{ margin: 0, fontSize: 16, color: 'var(--ink-2)', maxWidth: 720 }}>
            ComplyAuto and ComplyNet charge <strong style={{ color: 'var(--ink)' }}>$300 to $500 a month</strong>. Their platforms were built for franchise groups with twelve rooftops and a compliance director.
            That's not you.
          </p>
          <button className="btn btn--ghost" onClick={() => go('pricing')}>See our pricing →</button>
        </div>
      </div>
    </section>
  );
}

const FEATURES = [
  {
    no: '02.A', tag: 'WISP GENERATOR',
    title: 'A Written Information Security Program, generated in twenty-five questions.',
    body: 'Answer the intake once. The model writes a tailored 12-to-18-page WISP in your dealership\'s name. We update it every year — you e-sign it.',
    bullets: ['25-question intake', 'Tailored to your floor plan + lender mix', 'QI signature block built in', 'Renews automatically each year'],
  },
  {
    no: '02.B', tag: 'NIGHTLY LISTING SCANNER',
    title: 'Every listing, every channel, every night.',
    body: 'We crawl your website, Cars.com, CarGurus, Facebook Marketplace, and your Google Vehicle Ads. Every line item is checked for missing disclosures, doc-fee transparency, and advertised-versus-final price.',
    bullets: ['5 channels, every 24 hours', 'Red / yellow / green per listing', 'Doc-fee deltas surfaced', 'Price-mismatch alerts in minutes'],
  },
  {
    no: '02.C', tag: 'COMMUNICATION VAULT',
    title: 'Four years of email and SMS. Searchable in seconds.',
    body: 'Connect Gmail, Outlook, your DMS, and your texting tool. We archive every customer touch with the timestamps, attachments, and metadata SB 766 actually demands.',
    bullets: ['Email + SMS + DMS notes', 'Full-text search across years', 'Per-customer threads', 'Export-ready for audit'],
  },
  {
    no: '02.D', tag: 'COMPLIANCE TRACKER',
    title: 'The boring stuff, finally tracked.',
    body: 'Qualified Individual sign-offs, vendor risk attestations, employee training records, and your incident response runbook — all in one ledger that an auditor can actually read.',
    bullets: ['QI sign-off ledger', 'Vendor attestations + renewals', 'Employee training transcripts', 'Incident runbook on file'],
  },
  {
    no: '02.E', tag: 'MONTHLY REPORT',
    title: 'One PDF your insurance carrier will accept.',
    body: 'On the first of every month we generate a single artifact you can email to your carrier, your attorney, or your DMV examiner. It proves your posture in one place.',
    bullets: ['One PDF, every month', 'Built from live evidence', 'Carrier-ready format', 'Hand it over and sleep'],
  },
];

function FeatureRow({ f, idx, total }) {
  const flip = idx % 2 === 1;
  return (
    <div className="m-feature-row" style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)',
      gap: 64,
      padding: '64px 0',
      borderTop: '1px solid var(--rule)',
      alignItems: 'center',
    }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginBottom: 10 }}>
          {f.no} · {f.tag}
        </div>
        <h3 className="display" style={{ fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1.04, letterSpacing: '-0.025em', maxWidth: 540 }}>
          {f.title}
        </h3>
        <p style={{ fontSize: 16, color: 'var(--ink-2)', maxWidth: 520, marginTop: 18, lineHeight: 1.55 }}>
          {f.body}
        </p>
        <ul className="mono" style={{ listStyle: 'none', padding: 0, margin: '20px 0 0', display: 'grid', gap: 8, fontSize: 12, color: 'var(--ink-2)' }}>
          {f.bullets.map((b, i) => (
            <li key={i} style={{ display: 'flex', gap: 10 }}>
              <span style={{ color: 'var(--signal)' }}>→</span>
              <span style={{ letterSpacing: '0.02em' }}>{b}</span>
            </li>
          ))}
        </ul>
      </div>
      <div style={{ order: flip ? 1 : 2 }}>
        <FeatureVisual idx={idx} />
      </div>
    </div>
  );
}

/* Distinctive visuals per feature — no generic "screenshot" placeholders */
function FeatureVisual({ idx }) {
  const common = { aspectRatio: '4 / 3', background: 'var(--paper-2)', border: '1px solid var(--rule)', position: 'relative', overflow: 'hidden' };
  if (idx === 0) {
    // WISP — document spread
    return (
      <div style={common}>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--rule)' }}>
          <div style={{ background: 'var(--paper)', padding: 28 }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-3)', marginBottom: 14 }}>WISP · §1 · ADMINISTRATIVE</div>
            <div className="display" style={{ fontSize: 18, lineHeight: 1.2, marginBottom: 14 }}>Written Information Security Program</div>
            {[...Array(8)].map((_, i) => (
              <div key={i} style={{ height: 4, background: 'var(--rule)', marginBottom: 6, width: `${60 + (i*7)%35}%` }}/>
            ))}
            <div style={{ height: 4 }}/>
            {[...Array(5)].map((_, i) => (
              <div key={i} style={{ height: 4, background: 'var(--rule)', marginBottom: 6, width: `${50 + (i*11)%40}%` }}/>
            ))}
          </div>
          <div style={{ background: 'var(--paper)', padding: 28 }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.1em', color: 'var(--ink-3)', marginBottom: 14 }}>WISP · §2 · TECHNICAL</div>
            {[...Array(11)].map((_, i) => (
              <div key={i} style={{ height: 4, background: 'var(--rule)', marginBottom: 6, width: `${55 + (i*13)%38}%` }}/>
            ))}
            <div style={{ marginTop: 22, padding: '10px 12px', border: '1px solid var(--ink)', display: 'inline-block' }}>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)' }}>QUALIFIED INDIVIDUAL</div>
              <div className="serif" style={{ fontStyle: 'italic', fontSize: 18, marginTop: 4 }}>D. Marquez</div>
            </div>
          </div>
        </div>
        <div style={{ position: 'absolute', top: 12, right: 12 }}><StatusPill kind="ok">Generated</StatusPill></div>
      </div>
    );
  }
  if (idx === 1) {
    // Listing scanner — animated scan line over a list
    return (
      <div style={common}>
        <div style={{ position: 'absolute', inset: 0, padding: 16, display: 'flex', flexDirection: 'column', gap: 6 }}>
          {[
            ['VIN 1HGCM82633A 2018 Honda Accord EX-L', 'ok', '$18,495'],
            ['VIN JM1NDAM77M 2021 Mazda MX-5', 'ok', '$26,900'],
            ['VIN 5YJ3E1EA9K 2019 Tesla Model 3', 'warn', '$24,300'],
            ['VIN 1FTFW1ET4E 2014 Ford F-150', 'ok', '$15,750'],
            ['VIN WBA8E9C58H 2017 BMW 330i', 'alert', '$19,995'],
            ['VIN 5NPE34AF5G 2016 Hyundai Sonata', 'ok', '$10,400'],
            ['VIN 2T1BURHE4J 2018 Toyota Corolla', 'ok', '$13,200'],
            ['VIN 1G1ZD5ST5J 2018 Chevrolet Malibu', 'ok', '$11,950'],
          ].map(([t, s, p], i) => (
            <div key={i} className="mono" style={{ display: 'grid', gridTemplateColumns: '14px 1fr 80px', gap: 8, alignItems: 'center', fontSize: 10, padding: '4px 0' }}>
              <span className={'dot ' + (s === 'ok' ? 'dot--ok' : s === 'warn' ? 'dot--warn' : 'dot--alert')} style={{ width: 6, height: 6, boxShadow: 'none' }}/>
              <span style={{ color: 'var(--ink-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t}</span>
              <span style={{ color: 'var(--ink)', textAlign: 'right' }}>{p}</span>
            </div>
          ))}
        </div>
        {/* scan beam */}
        <div style={{
          position: 'absolute', left: 0, right: 0, height: 28,
          background: 'linear-gradient(to bottom, transparent, color-mix(in oklab, var(--signal) 30%, transparent), transparent)',
          borderTop: '1px solid var(--signal)',
          borderBottom: '1px solid var(--signal)',
          animation: 'scan 4.5s linear infinite',
          mixBlendMode: 'multiply',
        }}/>
        <div style={{ position: 'absolute', top: 12, right: 12 }}><StatusPill kind="ok">Scanning · 47 listings</StatusPill></div>
      </div>
    );
  }
  if (idx === 2) {
    // Comm vault — chat-style with redaction
    return (
      <div style={common}>
        <div style={{ position: 'absolute', inset: 0, padding: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>THREAD · MARIA L. · 2026.04.18 → 2026.05.02</div>
          {[
            { who: 'Maria L.', when: 'APR 18 · 09:14', t: 'Hi — saw the 2018 Accord online. Still available?', side: 'in' },
            { who: 'Sales · Jordan', when: 'APR 18 · 09:21', t: 'Yes ma\'am. Advertised at $18,495 + $85 doc fee + tax/license.', side: 'out' },
            { who: 'Maria L.', when: 'APR 21 · 14:02', t: 'Out the door number?', side: 'in' },
            { who: 'Sales · Jordan', when: 'APR 21 · 14:08', t: 'Out-the-door $20,612.40 — full breakdown attached.', side: 'out' },
            { who: 'Maria L.', when: 'MAY 02 · 11:44', t: 'I\'ll take it. What\'s next?', side: 'in' },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: m.side === 'in' ? 'flex-start' : 'flex-end' }}>
              <div style={{ maxWidth: '78%', border: '1px solid var(--rule)', background: 'var(--paper)', padding: '6px 10px' }}>
                <div className="mono" style={{ fontSize: 8.5, color: 'var(--ink-3)', letterSpacing: '0.06em', marginBottom: 2 }}>{m.who} · {m.when}</div>
                <div style={{ fontSize: 11, color: 'var(--ink)' }}>{m.t}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', top: 12, right: 12 }}><StatusPill kind="ok">Archived · 4-yr</StatusPill></div>
      </div>
    );
  }
  if (idx === 3) {
    // Compliance tracker — ledger
    return (
      <div style={common}>
        <div style={{ position: 'absolute', inset: 0, padding: 0 }}>
          {[
            ['QI · D. MARQUEZ', 'SIGNED', '2026.05.01', 'ok'],
            ['VENDOR · CARFAX', 'ATTESTED', '2026.04.22', 'ok'],
            ['VENDOR · DEALERTRACK', 'ATTESTED', '2026.04.18', 'ok'],
            ['VENDOR · STRIPE', 'PENDING', '— DUE 05.10', 'warn'],
            ['TRAINING · J. CHEN', 'COMPLETE', '2026.03.30', 'ok'],
            ['TRAINING · A. PATEL', 'COMPLETE', '2026.03.30', 'ok'],
            ['TRAINING · M. CRUZ', 'OVERDUE', '— DUE 04.30', 'alert'],
            ['INCIDENT RUNBOOK v3', 'CURRENT', '2026.04.01', 'ok'],
          ].map(([k, v, d, s], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr .8fr .8fr 14px', gap: 10, alignItems: 'center', padding: '8px 16px', borderBottom: '1px solid var(--rule)' }}>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.04em' }}>{k}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink)', letterSpacing: '0.04em' }}>{v}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', textAlign: 'right' }}>{d}</span>
              <span className={'dot ' + (s === 'ok' ? 'dot--ok' : s === 'warn' ? 'dot--warn' : 'dot--alert')} style={{ width: 6, height: 6, boxShadow: 'none' }}/>
            </div>
          ))}
        </div>
      </div>
    );
  }
  // 4: monthly report — cover page
  return (
    <div style={common}>
      <div style={{ position: 'absolute', inset: 0, padding: 28, display: 'flex', flexDirection: 'column' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>SUNRISE MOTORS · APRIL 2026</div>
        <div className="display" style={{ fontSize: 28, lineHeight: 1.05, letterSpacing: '-0.025em', marginTop: 14 }}>
          Monthly<br/>
          Compliance<br/>
          Report.
        </div>
        <div style={{ flex: 1 }}/>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 18 }}>
          {[['FTC', '100%'], ['CA SB 766', '96%'], ['GOOGLE', '100%'], ['VENDORS', '92%']].map(([k, v], i) => (
            <div key={i} style={{ borderTop: '1px solid var(--rule)', paddingTop: 8 }}>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>{k}</div>
              <div className="display tnum" style={{ fontSize: 26, marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, fontSize: 11, color: 'var(--ink-3)' }} className="mono">
          PREPARED 2026.05.01 · 11 PAGES · SIGNED BY QUALIFIED INDIVIDUAL
        </div>
      </div>
      <div style={{ position: 'absolute', top: 12, right: 12 }}><StatusPill kind="ok">Ready · PDF</StatusPill></div>
    </div>
  );
}

function FeaturesSection() {
  return (
    <section style={{ padding: '96px 0' }}>
      <div className="container">
        <SectionLabel
          no="02"
          kana="THE PRODUCT"
          title="Five tools. One subscription. Built for the lot, not for headquarters."
        />
        <div>
          {FEATURES.map((f, i) => <FeatureRow key={i} f={f} idx={i} total={FEATURES.length} />)}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: '01', t: 'Connect', body: 'Sign in with your dealer credentials. We pull listings from your website, Cars.com, CarGurus, Facebook Marketplace, and Google. Five minutes, no IT.' },
    { n: '02', t: 'Generate', body: 'Twenty-five questions and your WISP, vendor list, and training records exist. Yearly renewals are on rails.' },
    { n: '03', t: 'Sleep', body: 'Every night we scan, archive, and reconcile. Every month we hand you a single PDF you can give to your carrier.' },
  ];
  return (
    <section style={{ padding: '96px 0', background: 'var(--paper-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container">
        <SectionLabel
          no="03"
          kana="HOW IT WORKS"
          title="Five-minute setup. No IT help required."
        />
        <div className="m-step-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 32 }}>
          {steps.map(s => (
            <div key={s.n} style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em', marginBottom: 18 }}>STEP {s.n}</div>
              <h3 className="display" style={{ fontSize: 36, lineHeight: 1, letterSpacing: '-0.03em' }}>{s.t}.</h3>
              <p style={{ marginTop: 14, fontSize: 15, color: 'var(--ink-2)', maxWidth: 380, lineHeight: 1.55 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialBlock() {
  const quotes = [
    {
      who: 'Janelle K., office manager',
      where: 'Sunrise Motors · Fontana, CA · 22 cars',
      q: 'I used to spend the last week of every month copy-pasting screenshots into a Google Doc to prove we were compliant. Now it\'s a PDF on the first.',
    },
    {
      who: 'Dave R., owner',
      where: 'Alta Cars · Glendale, AZ · 38 cars',
      q: 'My insurance carrier asked for our WISP. I had a 16-page document in my email seven minutes later. Renewed our policy without a discount fight.',
    },
    {
      who: 'Sam B., principal',
      where: 'Bayside Auto · Oakland, CA · 9 cars',
      q: 'The Google price-mismatch alert paid for the whole year in one afternoon. We were about to lose our VLA slot and didn\'t know it.',
    },
  ];
  return (
    <section style={{ padding: '96px 0' }}>
      <div className="container">
        <SectionLabel
          no="04"
          kana="THE LOT FLOOR"
          title="From the people who actually own the inbox."
        />
        <div className="m-quote-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 0, borderTop: '1px solid var(--rule)' }}>
          {quotes.map((q, i) => (
            <figure key={i} style={{ margin: 0, padding: '32px 28px 28px', borderRight: i < 2 ? '1px solid var(--rule)' : 0, borderBottom: '1px solid var(--rule)', display: 'flex', flexDirection: 'column', gap: 24 }}>
              <blockquote className="serif" style={{ margin: 0, fontSize: 22, lineHeight: 1.3, fontStyle: 'italic', color: 'var(--ink)' }}>
                "{q.q}"
              </blockquote>
              <figcaption className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em', marginTop: 'auto' }}>
                <div style={{ color: 'var(--ink)', textTransform: 'none', letterSpacing: 0, fontFamily: 'var(--sans)', fontSize: 13, marginBottom: 4 }}>{q.who}</div>
                {q.where}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const faqs = [
    { q: 'How fast is setup?', a: 'Most dealers are live in five to seven minutes. Connect your website, pick your ad platforms, answer twenty-five questions for the WISP. We do not require IT involvement, ever.' },
    { q: 'What if I do not finance cars?', a: 'You still need the listing scanner for Google\'s VLA policy and you still need SB 766 retention. The FTC Safeguards portion of Lot Copilot becomes optional, and your monthly report reflects that.' },
    { q: 'How is this different from ComplyAuto or ComplyNet?', a: 'They were designed for franchise groups with a director of compliance. We assume you have one office manager and a paper Rolodex. Our tools work end-to-end without a consultant. And we cost a fifth as much.' },
    { q: 'Will my insurance carrier accept the monthly report?', a: 'It is built specifically for that purpose, including QI signature, timestamped evidence, and the line items that carriers like Federated and Universal Underwriters check. We have a sample at /sample-report we will email you.' },
    { q: 'What happens if I cancel?', a: 'You get an export of every artifact — WISP, message vault, signed reports — within twenty-four hours. Cancel any time, in-app, no phone call.' },
    { q: 'Do you handle Texas and Florida rules?', a: 'Texas in Q3 2026, Florida in Q4. The FTC and Google portions cover you nationwide today.' },
  ];
  const [open, setOpen] = lUseState(0);
  return (
    <section style={{ padding: '96px 0', background: 'var(--paper-2)', borderTop: '1px solid var(--rule)' }}>
      <div className="container">
        <SectionLabel
          no="05"
          kana="QUESTIONS"
          title="What dealers ask before they sign up."
        />
        <div style={{ borderTop: '1px solid var(--ink)' }}>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--rule)' }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                className="m-faq-row"
                style={{ width: '100%', display: 'grid', gridTemplateColumns: '60px 1fr 24px', gap: 16, alignItems: 'center', padding: '20px 0', textAlign: 'left' }}
              >
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>0{i + 1}</span>
                <span className="display" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>{f.q}</span>
                <span className="mono" style={{ fontSize: 18, color: 'var(--ink-3)', textAlign: 'right' }}>{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div className="m-faq-row" style={{ display: 'grid', gridTemplateColumns: '60px 1fr 24px', gap: 16, padding: '0 0 24px' }}>
                  <span/>
                  <p className="page-fade" style={{ margin: 0, fontSize: 16, color: 'var(--ink-2)', maxWidth: 720, lineHeight: 1.55 }}>{f.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ padding: '120px 0', borderTop: '1px solid var(--rule)' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="label" style={{ marginBottom: 20 }}>$99/MO · 14-DAY TRIAL · CANCEL ANYTIME</div>
        <h2 className="h-display" style={{ maxWidth: 880, margin: '0 auto' }}>
          Five minutes today.<br/>
          <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>Sleep tonight.</span>
        </h2>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36, flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => go('signup')}>Start 14-day trial &nbsp;→</button>
          <button className="btn btn--ghost" onClick={() => go('pricing')}>See pricing</button>
        </div>
      </div>
    </section>
  );
}

function LandingPage() {
  return (
    <div className="page-fade">
      <HeroBlock />
      <StakesTicker />
      <ProblemSection />
      <FeaturesSection />
      <HowItWorks />
      <TestimonialBlock />
      <FAQSection />
      <FinalCTA />
    </div>
  );
}

window.LandingPage = LandingPage;