/* eslint-disable */
// Montana Scammers — marketing site screens

const HomeScreen = ({ onNav }) => (
  <>
    <section className="hero hero--centered">
      <div className="ms-container hero__inner">
        <div className="hero__mark">
          <img src="assets/logo-mono-blue.png" alt="Montana Scammers badge" />
        </div>
        <h1>You pay. <em>Scammers don't.</em></h1>
        <p className="hero__kicker">This is not 'Nam. There are rules.</p>
        <p className="lead">A civic tip line for catching scofflaws who dodge California vehicle taxes with phantom out-of-state registrations. Three fields, three minutes, straight to CHP.</p>
        <div className="hero__ctas">
          <a className="btn btn--primary btn--lg" onClick={(e) => { e.preventDefault(); onNav('report'); }} href="#">Report a Vehicle →</a>
          <a className="btn btn--ghost btn--lg" onClick={(e) => { e.preventDefault(); onNav('how'); }} href="#">How it works</a>
        </div>
        <span className="hero__meta">Anonymous · ~3 minutes · No account required</span>
      </div>
    </section>

    <div className="hero__band">
      <div className="ms-container">
        <span className="item">Civic, not vigilante</span>
        <span className="item">Filed with CHP instantly</span>
        <span className="item">Anonymous by default</span>
        <span className="item">Track your report</span>
      </div>
    </div>

    <section className="section">
      <div className="ms-container">
        <div className="section__head">
          <div className="section__eyebrow">How it works</div>
          <h2>From sidewalk to submission in three minutes.</h2>
          <p className="lead">A guided form walks you through what you saw — and only what you saw. We never ask you to engage the driver or trespass for information.</p>
        </div>
        <div className="steps">
          <StepCard n="01" title="Note the vehicle" body="Make, model, color, plate number, and the state on the plate." />
          <StepCard n="02" title="Add location & sightings" body="Where you've seen it, and the dates of each sighting. Multiple sightings strengthen a report." />
          <StepCard n="03" title="Optional photo" body="Only if you can capture it safely from a public space." />
          <StepCard n="04" title="Filed instantly" body="On submit, we relay the report directly to CHP and show you the confirmation receipt. No queue. No waiting room." />
        </div>
      </div>
    </section>

    <section className="section section--ivory">
      <div className="ms-container">
        <div className="section__head">
          <div className="section__eyebrow">Responsible reporting</div>
          <h2>What to report — and what not to.</h2>
        </div>
        <p className="lead" style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 36px' }}>The single most important rule: <strong style={{ color: 'var(--ms-blue-900)' }}>only report a vehicle you've personally seen multiple times in the same area, where it's clearly not on a road trip or visit.</strong> Pattern matters. Drive-bys don't.</p>
        <div className="split">
          <div>
            <h3 style={{ color: 'var(--ms-blue-900)', marginBottom: 12 }}>Do report</h3>
            <ul className="checklist">
              <li className="do">Vehicles you've seen three or more times at the same California address, block, or workplace lot.</li>
              <li className="do">Out-of-state plates on a vehicle that clearly lives here — daily commute, regular parking spot, neighbors recognize it.</li>
              <li className="do">High-value luxury cars, sports cars, and large SUVs especially — the higher the sticker, the bigger the tax dodge, and the more likely the registration is intentional.</li>
              <li className="do">Observations made from a public street, sidewalk, or public parking area.</li>
            </ul>
          </div>
          <div>
            <h3 style={{ color: 'var(--ms-blue-900)', marginBottom: 12 }}>Don't report</h3>
            <ul className="checklist">
              <li className="dont">A vehicle you've only seen once. That's a tourist, a visitor, or a delivery.</li>
              <li className="dont">Commercial vehicles. Trucks, vans, and fleet vehicles cross state lines for work — that's interstate commerce, not evasion.</li>
              <li className="dont">Vehicles parked at hotels, short-term rentals, or campgrounds.</li>
              <li className="dont">Anything that could plausibly be a snowbird, road-tripper, or recent mover (CA gives 20 days to re-register).</li>
              <li className="dont">Personal grievances, parking disputes, or anything obtained by trespassing or following the vehicle.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="ms-narrow">
        <div className="legal-card">
          <div className="label">Important — please read before reporting</div>
          <h3>Use this tool responsibly.</h3>
          <p style={{ color: 'var(--ms-text-muted)', margin: 0, fontSize: 15, lineHeight: 1.65 }}>Montana Scammers is a documentation and submission tool for California residents. It is not a determination of wrongdoing, not a legal proceeding, and not affiliated with any government agency.</p>
          <ul>
            <li><strong style={{ color: 'var(--ms-blue-900)' }}>Pattern, not snapshot.</strong> Only report a vehicle you've personally seen multiple times — three or more — in the same area. A single sighting is a tourist or a visitor.</li>
            <li>Do not approach or confront vehicle owners.</li>
            <li>Only submit information you personally observed from a public space.</li>
            <li>Do not trespass, follow the vehicle, or break any law to collect information.</li>
            <li>A report is not a determination of wrongdoing — CHP makes the call, not us.</li>
            <li>Reports are submitted directly to CHP the moment you click submit. You'll see the confirmation receipt and get a tracking link.</li>
          </ul>
        </div>
      </div>
    </section>

    <section className="section section--ivory">
      <div className="ms-container">
        <div className="section__head">
          <div className="section__eyebrow">Common questions</div>
          <h2>FAQ</h2>
        </div>
        <div className="faq">
          <FaqItem open={true} q="When should I report a vehicle?" a="Only when you've personally seen the same vehicle multiple times — ideally three or more — in the same area, with out-of-state plates, and it's clearly not on vacation. Same parking spot week after week, same daily commute, neighbors recognize the car. Pattern is what matters." />
          <FaqItem q="What happens after I submit?" a="Your report is relayed directly to CHP's intake API in real time. You'll see the CHP confirmation receipt on the next screen, and get a tracking link that shows the same plate's full community sighting history." />
          <FaqItem q="Is reporting anonymous?" a="Yes. We don't ask for your name, email, or phone number. You'll get a tracking link with a private token — bookmark it to check status later. (We'll add optional accounts down the road for people who want to track multiple reports.)" />
          <FaqItem q="Is having a Montana plate illegal?" a="No. The plate itself is not illegal. The concern is when a vehicle is functionally garaged, used, and stored in California while registered out of state to avoid California taxes and fees. We document observations; CHP makes determinations." />
          <FaqItem q="Should I confront the driver?" a="Never. Do not approach, follow, photograph the driver, or attempt to engage. Only document the vehicle from a public location." />
        </div>
        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <a className="btn btn--secondary" href="#" onClick={(e) => { e.preventDefault(); onNav('faq'); }}>See all questions →</a>
        </div>
      </div>
    </section>

    <section className="cta-band">
      <div className="ms-container">
        <h2>Ready to file an observation?<br/>It takes about three minutes.</h2>
        <a className="btn btn--gold btn--lg" href="#" onClick={(e) => { e.preventDefault(); onNav('report'); }}>Report a Vehicle →</a>
      </div>
    </section>
  </>
);

const HowScreen = () => (
  <>
    <section className="section">
      <div className="ms-narrow">
        <div className="section__head" style={{ textAlign: 'left', maxWidth: '100%' }}>
          <div className="section__eyebrow">Detailed walkthrough</div>
          <h2>How a report moves through Montana Scammers.</h2>
          <p className="lead">Six steps, mobile-first, with civic guardrails baked in.</p>
        </div>
        <ol style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'grid', gap: 14 }}>
          {[
            ['1', 'Vehicle details', 'Make, model, color, vehicle type. We pre-fill common pickups, SUVs, and sedans.'],
            ['2', 'Plate information', 'Plate number and the state on the plate. We recognize MT, SD, WY, OR, and the rest.'],
            ['3', 'Location & time', 'Address, intersection, or a map pin. Date and approximate time observed.'],
            ['4', 'Photo (optional)', 'One or two photos taken from a public space. We strip EXIF location automatically.'],
            ['5', 'Notes', 'A short paragraph with anything else relevant — frequency observed, parking pattern, etc.'],
            ['6', 'Verify you\'re human', 'A quick image-match captcha so we keep bots out of CHP\'s inbox. Takes about five seconds.'],
            ['7', 'Filed instantly', 'On submit, the report is relayed straight to CHP\'s intake API. We show you the confirmation receipt and a tracking link with the plate\'s full sighting history.'],
          ].map(([n, t, b]) => (
            <li key={n} style={{ background: '#fff', border: '1px solid var(--ms-border)', borderLeft: '4px solid var(--ms-blue)', borderRadius: 'var(--ms-r-md)', padding: '20px 24px', display: 'grid', gridTemplateColumns: '60px 1fr', gap: 16, alignItems: 'center' }}>
              <span style={{ fontFamily: 'var(--ms-font-display)', fontSize: 36, color: 'var(--ms-gold)' }}>{n}</span>
              <div>
                <h4 style={{ margin: '0 0 4px', color: 'var(--ms-blue-900)', fontSize: 18, fontWeight: 700 }}>{t}</h4>
                <p style={{ margin: 0, color: 'var(--ms-text-muted)', fontSize: 14.5, lineHeight: 1.55 }}>{b}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  </>
);

const FaqScreen = () => (
  <section className="section">
    <div className="ms-narrow">
      <div className="section__head" style={{ textAlign: 'left', maxWidth: '100%' }}>
        <div className="section__eyebrow">Frequently asked</div>
        <h2>FAQ</h2>
        <p className="lead">Everything we get asked, in one place.</p>
      </div>
      <div className="faq">
        <FaqItem open={true} q="When should I report a vehicle?" a="Only when you've personally seen the same vehicle multiple times — ideally three or more — in the same area, with out-of-state plates, and it's clearly not on vacation. Same parking spot week after week, same daily commute, neighbors recognize the car. Pattern is what matters; a single sighting isn't enough." />
        <FaqItem q="What should I NOT report?" a="A car you've seen once. Tourists and snowbirds. Vehicles parked at hotels, Airbnbs, or campgrounds. Anyone who could plausibly be a recent mover (California gives 20 days to re-register). New plates you don't recognize. Personal grievances, parking disputes, or neighborhood feuds. Anything obtained by trespass or by following the vehicle." />
        <FaqItem q="What happens after I submit?" a="Your report is relayed directly to CHP's intake API the moment you click submit. There's no review queue and no waiting room — you'll see CHP's confirmation receipt on the next screen. We also show you the plate's full community sighting history so you can see who else has flagged it." />
        <FaqItem q="How do I track my report?" a="When you submit, you'll get a tracking link with a private token — something like montana-scammers.app/r/MS-2026-0428-A19. Bookmark it. The page shows your CHP confirmation receipt plus every community sighting filed against the same plate. No login, no email required." />
        <FaqItem q="Is this anonymous?" a="Yes. We don't ask for your name, email, or phone number. We don't store your IP. The tracking link is your only handle on the report. (If you want to manage multiple reports in one place, we'll be adding optional accounts later.)" />
        <FaqItem q="Why submit through you instead of going to CHP directly?" a="Three reasons. (1) We format reports the way CHP's intake API expects, so they don't get bounced for being incomplete. (2) We aggregate — you can see every community sighting on the same plate, which is useful context for both you and CHP. (3) We add a captcha layer to keep bot reports out of CHP's queue, which they appreciate." />
        <FaqItem q="Is a Montana plate always illegal?" a="No. The plate itself is fine — Montana welcomes out-of-state registrations. The concern is when a CA-based vehicle is registered there to avoid CA fees and emissions. That's a question for CHP, not for us, and not for you." />
        <FaqItem q="Should I confront the driver?" a="Absolutely not. This site exists specifically so that you don't have to. Document, submit, move on." />
        <FaqItem q="What if I'm unsure?" a="If you've only seen the vehicle once or twice, wait. Note the plate, watch for it again, and submit when you've established a real pattern. We'd rather have a small number of strong reports than a flood of one-offs." />
        <FaqItem q="Can I upload photos?" a="Yes — up to two. A photo of the vehicle and a clear photo of the plate are most useful. Take them from public space. Don't photograph the driver or interior. We strip EXIF location data automatically." />
        <FaqItem q="How is my data handled?" a="Minimal data collected, encrypted in transit, never sold. Reports go to one place: CHP. Tracking tokens are random and not tied to identity. Full details on our Privacy & safety page." />
      </div>
    </div>
  </section>
);

const AboutScreen = () => (
  <section className="section">
    <div className="ms-narrow">
      <div className="section__head" style={{ textAlign: 'left', maxWidth: '100%' }}>
        <div className="section__eyebrow">About</div>
        <h2>Built for residents, not crusaders.</h2>
        <p className="lead">Montana Scammers exists for one reason: it's hard to know where to send a quick observation about a vehicle that doesn't seem to belong on the street it's parked on. We make that easy, civil, and routed to the right place.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'start' }}>
        <div>
          <h3>What we do</h3>
          <p>We collect vehicle observations through a guided form, run a quick captcha to keep bots out, and relay them directly to CHP's intake API on your behalf. You get a tracking link with the CHP confirmation receipt and the plate's full community sighting history. We strip personal data. We never publish.</p>
          <h3 style={{ marginTop: 24 }}>What we don't do</h3>
          <p>We don't determine wrongdoing. We don't publish a registry. We don't share your identity. We don't engage with vehicle owners. We don't tolerate harassment.</p>
        </div>
        <div className="legal-card">
          <div className="label">Our principles</div>
          <ul style={{ paddingLeft: 18, color: 'var(--ms-text-muted)', fontSize: 14.5, lineHeight: 1.7, margin: '8px 0 0' }}>
            <li><strong style={{ color: 'var(--ms-blue-900)' }}>Civic, not vigilante.</strong> Document, then defer to authorities.</li>
            <li><strong style={{ color: 'var(--ms-blue-900)' }}>Direct, not inflammatory.</strong> Plain language, no conspiracy framing.</li>
            <li><strong style={{ color: 'var(--ms-blue-900)' }}>Documented, not accused.</strong> A report is an observation.</li>
            <li><strong style={{ color: 'var(--ms-blue-900)' }}>Privacy-aware.</strong> For reporters and subjects alike.</li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { HomeScreen, HowScreen, FaqScreen, AboutScreen });