// Carrier Risk Report — $499 deep-dive sales + lead-capture page.
//
// v1 = lead capture, no Stripe at form-submit. The form POSTs to
// /api/risk-report-order which stores the order and emails Kris so
// he can follow up with a Stripe payment link personally. That fits
// the price point and the audience (a VP of Logistics responding to
// a cold pitch wants a human, not a card form).
//
// Design: editorial. Serif headlines, mono accents, real receipts.
// No stock photos, no fabricated testimonials.

const { useState: useStateRR, useEffect: useEffectRR, useRef: useRefRR } = React;

function RiskReportPage({ onNav }) {
  const [showThanks, setShowThanks] = useStateRR(false);
  const formRef = useRefRR(null);

  useEffectRR(() => {
    if (window.location.hash.includes("?paid=1")) setShowThanks(true);
  }, []);

  function scrollToForm() {
    if (formRef.current) {
      formRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }

  return (
    <div className="page-rr">
      <style>{`
        .page-rr { background: var(--paper); padding-bottom: 96px; }
        .rr-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

        /* HERO */
        .rr-hero { padding: 64px 24px 40px; max-width: 1100px; margin: 0 auto; }
        .rr-back {
          display: inline-flex; gap: 6px; font-family: var(--font-mono);
          font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
          color: var(--ink-soft); background: transparent; border: 0;
          cursor: pointer; padding: 0 0 24px;
        }
        .rr-back:hover { color: var(--ink); }
        .rr-hero-grid {
          display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
          align-items: center;
        }
        @media (max-width: 900px) {
          .rr-hero-grid { grid-template-columns: 1fr; gap: 28px; }
        }
        .rr-eyebrow {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px;
          display: inline-flex; align-items: center; gap: 10px;
        }
        .rr-eyebrow .dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: oklch(0.50 0.18 250);
        }
        .rr-h1 {
          font-family: var(--font-serif); font-size: 64px; line-height: 1.02;
          letter-spacing: -0.03em; margin: 0 0 22px; color: var(--ink);
        }
        .rr-h1 em { font-style: italic; color: oklch(0.50 0.18 250); }
        @media (max-width: 900px) { .rr-h1 { font-size: 44px; } }
        @media (max-width: 600px) { .rr-h1 { font-size: 34px; } }
        .rr-dek {
          font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px;
          max-width: 600px;
        }
        .rr-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .rr-cta {
          font-family: inherit; font-size: 16px; padding: 16px 28px;
          border-radius: 6px; cursor: pointer; font-weight: 600;
          border: 1px solid var(--ink); transition: all 0.15s;
        }
        .rr-cta-primary { background: var(--ink); color: #fff; }
        .rr-cta-primary:hover { opacity: 0.9; }
        .rr-cta-ghost { background: #fff; color: var(--ink); }
        .rr-cta-ghost:hover { background: var(--ink); color: #fff; }
        .rr-trust {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }

        /* Hero side card */
        .rr-side {
          background: #fff; border: 1px solid var(--rule); border-radius: 12px;
          padding: 28px; position: relative; overflow: hidden;
        }
        .rr-side::before {
          content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, oklch(0.50 0.18 250), oklch(0.50 0.18 145));
        }
        .rr-side-h {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px;
        }
        .rr-side-row {
          display: flex; justify-content: space-between; padding: 10px 0;
          border-bottom: 1px solid var(--rule); font-size: 14px;
        }
        .rr-side-row:last-child { border-bottom: 0; }
        .rr-side-label { color: var(--ink-soft); }
        .rr-side-val { color: var(--ink); font-weight: 600; }
        .rr-price-row {
          display: flex; align-items: baseline; gap: 10px; margin-top: 18px;
          padding-top: 18px; border-top: 1px solid var(--rule);
        }
        .rr-price {
          font-family: var(--font-serif); font-size: 44px; line-height: 1;
          letter-spacing: -0.02em; color: var(--ink);
        }
        .rr-price-unit {
          font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }

        /* PROOF section */
        .rr-section { padding: 56px 0; border-top: 1px solid var(--rule); }
        .rr-section-eyebrow {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px;
        }
        .rr-section-h {
          font-family: var(--font-serif); font-size: 38px; letter-spacing: -0.025em;
          line-height: 1.08; margin: 0 0 22px; max-width: 820px;
        }
        .rr-section-h em { font-style: italic; color: oklch(0.50 0.18 250); }
        .rr-section-body {
          font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 24px;
          max-width: 760px;
        }
        .rr-section-body em { font-style: italic; color: var(--ink-soft); }

        .rr-receipts {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
          margin: 28px 0 24px;
        }
        @media (max-width: 800px) { .rr-receipts { grid-template-columns: 1fr; } }
        .rr-receipt {
          background: #fff; border: 1px solid var(--rule); border-radius: 8px;
          padding: 18px 20px;
        }
        .rr-receipt-date {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
          text-transform: uppercase; color: oklch(0.40 0.16 250); margin-bottom: 8px;
          font-weight: 700;
        }
        .rr-receipt-body {
          font-size: 14px; line-height: 1.5; color: var(--ink);
        }
        .rr-sources-note {
          font-style: italic; font-size: 13px; color: var(--ink-soft);
          line-height: 1.6; max-width: 760px;
        }

        /* WHATS IN — 10 features */
        .rr-features {
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
          margin-top: 28px;
        }
        @media (max-width: 700px) { .rr-features { grid-template-columns: 1fr; } }
        .rr-feature {
          display: grid; grid-template-columns: 36px 1fr; gap: 14px;
          padding: 14px 0; border-bottom: 1px solid var(--rule);
        }
        .rr-feature:last-child, .rr-feature:nth-last-child(2) { border-bottom: 0; }
        .rr-feature-n {
          font-family: var(--font-serif); font-size: 22px; line-height: 1;
          color: oklch(0.50 0.18 250); font-style: italic;
        }
        .rr-feature-h {
          font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.01em;
          margin: 0 0 4px; line-height: 1.3;
        }
        .rr-feature-body {
          font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0;
        }

        /* HOW IT WORKS */
        .rr-how-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
          margin-top: 28px;
        }
        @media (max-width: 800px) { .rr-how-grid { grid-template-columns: 1fr; } }
        .rr-how-card {
          background: #fff; border: 1px solid var(--rule); border-radius: 8px;
          padding: 24px;
        }
        .rr-how-n {
          font-family: var(--font-serif); font-size: 36px; line-height: 1;
          color: oklch(0.50 0.18 250); margin-bottom: 14px;
        }
        .rr-how-h {
          font-family: var(--font-serif); font-size: 19px; letter-spacing: -0.01em;
          margin: 0 0 10px;
        }
        .rr-how-body {
          font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0;
        }

        /* GUARANTEES */
        .rr-guarantees {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
          margin-top: 28px;
        }
        @media (max-width: 800px) { .rr-guarantees { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 500px) { .rr-guarantees { grid-template-columns: 1fr; } }
        .rr-guarantee {
          background: var(--paper-2); border: 1px solid var(--rule);
          border-radius: 8px; padding: 18px;
        }
        .rr-guarantee-h {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
          text-transform: uppercase; color: oklch(0.40 0.16 250); margin-bottom: 6px;
        }
        .rr-guarantee-body {
          font-size: 13px; line-height: 1.5; color: var(--ink); margin: 0;
        }

        /* FORM */
        .rr-form-wrap {
          background: #fff; border: 1px solid var(--rule); border-radius: 12px;
          padding: 32px; margin-top: 32px; position: relative; overflow: hidden;
        }
        .rr-form-wrap::before {
          content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: oklch(0.50 0.18 250);
        }
        .rr-form-h {
          font-family: var(--font-serif); font-size: 26px; letter-spacing: -0.015em;
          margin: 0 0 8px;
        }
        .rr-form-sub {
          color: var(--ink-soft); font-size: 14px; margin: 0 0 24px;
        }
        .rr-form-grid {
          display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
        }
        @media (max-width: 600px) { .rr-form-grid { grid-template-columns: 1fr; } }
        .rr-field { display: flex; flex-direction: column; gap: 6px; }
        .rr-field > span {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }
        .rr-field input, .rr-field select, .rr-field textarea {
          font-family: inherit; font-size: 14px; padding: 11px 12px;
          border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
          color: var(--ink); outline: none;
        }
        .rr-field input:focus, .rr-field select:focus, .rr-field textarea:focus {
          border-color: var(--ink);
        }
        .rr-field-full { grid-column: 1 / -1; }
        .rr-form-foot {
          display: flex; justify-content: space-between; align-items: center;
          margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule);
          gap: 16px; flex-wrap: wrap;
        }
        .rr-form-meta {
          font-size: 13px; line-height: 1.55; color: var(--ink-soft); flex: 1;
        }
        .rr-submit {
          font-family: inherit; font-size: 15px; padding: 14px 28px;
          border-radius: 6px; cursor: pointer; font-weight: 600;
          border: 1px solid var(--ink); background: var(--ink); color: #fff;
        }
        .rr-submit:hover:not(:disabled) { opacity: 0.9; }
        .rr-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .rr-err {
          background: oklch(0.96 0.05 25); border: 1px solid oklch(0.85 0.10 25);
          color: oklch(0.40 0.18 25); padding: 10px 14px; border-radius: 6px;
          font-size: 13px; margin-top: 14px;
        }
        .rr-thanks {
          padding: 48px 32px; text-align: center;
        }
        .rr-thanks-mark {
          width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
          background: oklch(0.50 0.18 145); color: #fff;
          display: flex; align-items: center; justify-content: center;
          font-size: 28px;
        }
        .rr-thanks-h {
          font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.015em;
          margin: 0 0 12px;
        }
        .rr-thanks-body {
          font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 auto;
          max-width: 480px;
        }

        /* FAQ */
        .rr-faq { margin-top: 24px; }
        .rr-faq-item {
          border-bottom: 1px solid var(--rule); padding: 18px 0;
        }
        .rr-faq-q {
          font-family: var(--font-serif); font-size: 18px; letter-spacing: -0.01em;
          margin: 0 0 8px;
        }
        .rr-faq-a {
          font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0;
        }
      `}</style>

      {/* HERO */}
      <section className="rr-hero">
        <button className="rr-back" onClick={() => onNav("home")}>← Back to Shipping Clarity</button>
        <div className="rr-hero-grid">
          <div>
            <div className="rr-eyebrow"><span className="dot" /> Carrier Risk Report</div>
            <h1 className="rr-h1">Know what your carrier looks like — <em>before</em> you book the freight.</h1>
            <p className="rr-dek">
              Ten pages. Public records, synthesized. SEC filings, court dockets,
              listing-status changes, operational signal patterns. The picture
              that takes a research team three days to assemble — in your inbox
              tomorrow morning.
            </p>
            <div className="rr-cta-row">
              <button className="rr-cta rr-cta-primary" onClick={scrollToForm}>
                Order a report — $499 →
              </button>
              <span className="rr-trust">24-hour delivery · Money-back if we can't help</span>
            </div>
          </div>
          <aside className="rr-side">
            <div className="rr-side-h">What you get</div>
            <div className="rr-side-row">
              <span className="rr-side-label">Length</span>
              <span className="rr-side-val">10 pages, PDF</span>
            </div>
            <div className="rr-side-row">
              <span className="rr-side-label">Delivery</span>
              <span className="rr-side-val">Within 24 hours</span>
            </div>
            <div className="rr-side-row">
              <span className="rr-side-label">Sources</span>
              <span className="rr-side-val">Public records only</span>
            </div>
            <div className="rr-side-row">
              <span className="rr-side-label">Confidentiality</span>
              <span className="rr-side-val">We never tell the carrier</span>
            </div>
            <div className="rr-price-row">
              <span className="rr-price">$499</span>
              <span className="rr-price-unit">per carrier</span>
            </div>
          </aside>
        </div>
      </section>

      {/* PROOF */}
      <section className="rr-section">
        <div className="rr-wrap">
          <div className="rr-section-eyebrow">Proof · April 28, 2026</div>
          <h2 className="rr-section-h">We saw the picture <em>three weeks</em> before the trade press did.</h2>
          <p className="rr-section-body">
            On the morning of April 28, 2026, our system flagged a public freight
            carrier whose recent SEC filings, exchange notices, and credit-agreement
            activity formed a pattern our automated synthesizer recognizes as
            distress. The work isn't in finding any single signal — those are public.
            The work is in cross-referencing them. By the time mainstream trade press
            wrote it up three weeks later, our subscribers had already seen the read.
          </p>
          <div className="rr-receipts">
            <div className="rr-receipt">
              <div className="rr-receipt-date">SEC EDGAR</div>
              <div className="rr-receipt-body">
                Form 8-K, Item 4.02 — restating $77M of underreported payables to underlying carriers. Internal controls assessed as not effective.
              </div>
            </div>
            <div className="rr-receipt">
              <div className="rr-receipt-date">Exchange notice</div>
              <div className="rr-receipt-body">
                Nasdaq deficiency notice issued · cure deadline mid-September. Late 10-K, Form NT.
              </div>
            </div>
            <div className="rr-receipt">
              <div className="rr-receipt-date">Lender activity</div>
              <div className="rr-receipt-body">
                First Amendment to Credit Agreement and Waiver. Signal: covenant tripwire, lenders renegotiating in real time.
              </div>
            </div>
          </div>
          <p className="rr-sources-note">
            Every input above is a public record on EDGAR or in the lender's own
            filings. Most readers never see them assembled because the synthesis
            isn't anyone's job. We made it ours.
          </p>
        </div>
      </section>

      {/* WHATS IN */}
      <section className="rr-section">
        <div className="rr-wrap">
          <div className="rr-section-eyebrow">What's in the report</div>
          <h2 className="rr-section-h">Ten pages. <em>Sourced.</em> Built to be read on a phone.</h2>
          <p className="rr-section-body">
            Each section pulls from a specific public-record stream and tells you
            what we found, what it means, and how confident we are. Citations on
            every page so your legal team can verify what we cite.
          </p>
          <div className="rr-features">
            {[
              ["1", "Bankruptcy & lien check", "Federal + state court dockets, judgment liens, mechanic's liens, federal tax liens."],
              ["2", "SEC filing scan", "Last 24 months of 10-K, 10-Q, 8-K, NT-10-K, S-1 amendments. Restatements flagged."],
              ["3", "Listing & exchange compliance", "Active listing status, deficiency notices, cure timelines, going-concern language."],
              ["4", "Auditor & officer history", "Auditor changes, CFO turnover, Item 5.02 officer departures, late filings."],
              ["5", "Operational signal cluster", "Public forum signal, news-cluster patterns, port flow disruptions, lane-level capacity."],
              ["6", "Customer concentration", "Per their public filings — what % of revenue rides on their top 1, 5, and 10 customers."],
              ["7", "Independent contractor exposure", "O-O fleet share, AB-5 / California risk, contractor litigation history."],
              ["8", "Lane density + market rate", "How dense their network actually is on the lane you care about — terminals, gateways, depth — plus the current DAT market $/mi for that lane vs national median, with headhaul-vs-backhaul asymmetry."],
              ["9", "Insurance + double-brokering check", "Federal crash + inspection records, OOS rate, BASIC scores, insurance filings, plus a real-time check for the double-brokering fingerprint: lapsed MC, no MC at all, or a broker-only operation posting trucks it doesn't own. We answer the question 'is this carrier actually legal to haul this freight?' before you book."],
              ["10", "Risk verdict + monitoring cadence", "What we'd watch next, how often, what triggers a re-pull. Plain-English recommendation."],
            ].map(([n, h, body]) => (
              <div key={n} className="rr-feature">
                <div className="rr-feature-n">{n}</div>
                <div>
                  <h3 className="rr-feature-h">{h}</h3>
                  <p className="rr-feature-body">{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="rr-section">
        <div className="rr-wrap">
          <div className="rr-section-eyebrow">How it works</div>
          <h2 className="rr-section-h">Three steps. <em>No subscription.</em></h2>
          <div className="rr-how-grid">
            <div className="rr-how-card">
              <div className="rr-how-n">1</div>
              <h3 className="rr-how-h">Tell us the carrier.</h3>
              <p className="rr-how-body">
                Name, USDOT or MC if you have it, why you're asking. We read every
                request personally. If there's not enough public record to build a
                useful read, we tell you that before you pay.
              </p>
            </div>
            <div className="rr-how-card">
              <div className="rr-how-n">2</div>
              <h3 className="rr-how-h">We synthesize.</h3>
              <p className="rr-how-body">
                A real analyst runs the playbook against EDGAR, court dockets,
                lender filings, FMCSA, and our operational dataset. Cross-references
                everything. Cites every claim. Drafts the verdict.
              </p>
            </div>
            <div className="rr-how-card">
              <div className="rr-how-n">3</div>
              <h3 className="rr-how-h">PDF in your inbox.</h3>
              <p className="rr-how-body">
                Within 24 hours of payment. Ten pages. Sourced. Built to be read on
                a phone or forwarded to your team without redaction.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* GUARANTEES */}
      <section className="rr-section">
        <div className="rr-wrap">
          <div className="rr-section-eyebrow">Our promise</div>
          <h2 className="rr-section-h">Four things we will <em>never</em> do.</h2>
          <div className="rr-guarantees">
            <div className="rr-guarantee">
              <div className="rr-guarantee-h">Tell the carrier</div>
              <p className="rr-guarantee-body">Your name, your company, the fact you asked — none of it reaches the carrier. Ever.</p>
            </div>
            <div className="rr-guarantee">
              <div className="rr-guarantee-h">Sell findings back</div>
              <p className="rr-guarantee-body">We don't take payments from carriers to bury reports or shape verdicts. Not at any price.</p>
            </div>
            <div className="rr-guarantee">
              <div className="rr-guarantee-h">Charge if we can't help</div>
              <p className="rr-guarantee-body">If there's not enough public record for an actionable read, you don't pay. We say so up front.</p>
            </div>
            <div className="rr-guarantee">
              <div className="rr-guarantee-h">Lock you into a subscription</div>
              <p className="rr-guarantee-body">One report, one price. Buy as many as you need; we never auto-renew anything.</p>
            </div>
          </div>
        </div>
      </section>

      {/* ORDER FORM */}
      <section className="rr-section" ref={formRef}>
        <div className="rr-wrap">
          <div className="rr-section-eyebrow">Order a report</div>
          <h2 className="rr-section-h">Tell us about the carrier.</h2>
          <p className="rr-section-body">
            We'll reply within a few hours with a Stripe payment link and a
            delivery estimate. Reports typically land in your inbox within 24 hours
            of payment. Anything you tell us stays confidential.
          </p>
          {showThanks
            ? <ThanksBlock />
            : <RiskOrderForm onDone={() => setShowThanks(true)} />}
        </div>
      </section>

      {/* FAQ */}
      <section className="rr-section">
        <div className="rr-wrap">
          <div className="rr-section-eyebrow">Common questions</div>
          <h2 className="rr-section-h">FAQ.</h2>
          <div className="rr-faq">
            {[
              ["Why $499?",
               "It's less than a single delayed shipment costs a midmarket shipper, and an order of magnitude less than the average enterprise carrier-risk subscription. We can do it because the synthesis is methodical and the public records are free."],
              ["What if there isn't enough public record?",
               "We'll tell you before you pay. You can name a different carrier on the same order, or we won't charge."],
              ["Will the carrier find out we asked?",
               "No. We don't contact them. We don't list our customers anywhere. Reports leave our system in your inbox and ours, that's it."],
              ["Can I order more than one carrier at a time?",
               "Yes. $499 each up to 4 carriers; volume pricing for 5+ in a single order. Mention it in the order notes and we'll quote on reply."],
              ["What payment methods do you accept?",
               "Stripe — major credit cards, Apple Pay, Google Pay, ACH on request. We send the payment link by email after you place the order."],
              ["Can I see a sample report?",
               "Yes. Mention 'sample please' in the order notes when you submit and we'll email a redacted sample with your follow-up."],
            ].map(([q, a]) => (
              <div key={q} className="rr-faq-item">
                <h3 className="rr-faq-q">{q}</h3>
                <p className="rr-faq-a">{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ThanksBlock() {
  return (
    <div className="rr-form-wrap">
      <div className="rr-thanks">
        <div className="rr-thanks-mark">✓</div>
        <h3 className="rr-thanks-h">We got your request.</h3>
        <p className="rr-thanks-body">
          A real person at Shippers Connect will reply within a few hours with a
          payment link and a delivery estimate. Reports typically land in your inbox
          within 24 hours of payment.
        </p>
      </div>
    </div>
  );
}

function RiskOrderForm({ onDone }) {
  const [busy, setBusy] = useStateRR(false);
  const [err, setErr] = useStateRR(null);

  const [carrierName, setCarrierName] = useStateRR("");
  const [carrierUsdot, setCarrierUsdot] = useStateRR("");
  const [carrierMc, setCarrierMc] = useStateRR("");
  const [name, setName] = useStateRR("");
  const [title, setTitle] = useStateRR("");
  const [company, setCompany] = useStateRR("");
  const [email, setEmail] = useStateRR("");
  const [phone, setPhone] = useStateRR("");
  const [useCase, setUseCase] = useStateRR("evaluating_new");
  const [notes, setNotes] = useStateRR("");

  async function submit(e) {
    e.preventDefault();
    setErr(null);
    if (!carrierName.trim()) { setErr("Tell us which carrier you'd like a report on."); return; }
    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setErr("We need a valid email to send the payment link.");
      return;
    }
    setBusy(true);
    try {
      const res = await fetch("/api/risk-report-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          carrier_name: carrierName.trim(),
          carrier_usdot: carrierUsdot.trim() || null,
          carrier_mc: carrierMc.trim() || null,
          customer_name: name.trim() || null,
          customer_title: title.trim() || null,
          customer_company: company.trim() || null,
          customer_email: email.trim(),
          customer_phone: phone.trim() || null,
          use_case: useCase || null,
          notes: notes.trim() || null,
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        setErr(body && body.error
          ? `Sorry — ${body.error.replace(/_/g, " ")}.`
          : "Sorry — something went wrong saving your request. Try again or email hello@shippingclarity.com.");
        return;
      }
      // If Stripe is configured, the API returns a checkout_url and we
      // send the customer straight to Stripe-hosted checkout. Otherwise
      // we fall through to the email-based thank-you (legacy flow).
      const ok = await res.json().catch(() => ({}));
      if (ok && ok.checkout_url) {
        window.location.href = ok.checkout_url;
        return;
      }
      onDone();
    } catch (e) {
      setErr("Sorry — couldn't reach the server. Try again or email hello@shippingclarity.com.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <form onSubmit={submit} className="rr-form-wrap">
      <h3 className="rr-form-h">Carrier Risk Report</h3>
      <p className="rr-form-sub">$499 · 10 pages · 24-hour delivery</p>

      <div className="rr-form-grid">
        <label className="rr-field rr-field-full">
          <span>Carrier name *</span>
          <input type="text" value={carrierName}
                 onChange={e => setCarrierName(e.target.value)}
                 placeholder="e.g. Acme Trucking, Inc."
                 required />
        </label>
        <label className="rr-field">
          <span>USDOT number (if you have it)</span>
          <input type="text" value={carrierUsdot}
                 onChange={e => setCarrierUsdot(e.target.value)}
                 placeholder="optional" />
        </label>
        <label className="rr-field">
          <span>MC number (if you have it)</span>
          <input type="text" value={carrierMc}
                 onChange={e => setCarrierMc(e.target.value)}
                 placeholder="optional" />
        </label>

        <label className="rr-field rr-field-full">
          <span>Why are you asking?</span>
          <select value={useCase} onChange={e => setUseCase(e.target.value)}>
            <option value="evaluating_new">Evaluating a new vendor</option>
            <option value="recheck_current">Re-checking a current carrier</option>
            <option value="post_incident">Following up on a service issue</option>
            <option value="rfp_qualification">Qualifying for an RFP</option>
            <option value="curiosity">Just want a read</option>
            <option value="other">Other (explain in notes)</option>
          </select>
        </label>

        <label className="rr-field">
          <span>Your name *</span>
          <input type="text" value={name}
                 onChange={e => setName(e.target.value)} required />
        </label>
        <label className="rr-field">
          <span>Title</span>
          <input type="text" value={title}
                 onChange={e => setTitle(e.target.value)}
                 placeholder="VP Logistics, Director Trans, etc." />
        </label>
        <label className="rr-field">
          <span>Company</span>
          <input type="text" value={company}
                 onChange={e => setCompany(e.target.value)} />
        </label>
        <label className="rr-field">
          <span>Phone (optional)</span>
          <input type="tel" value={phone}
                 onChange={e => setPhone(e.target.value)}
                 placeholder="we'll use email unless you tell us otherwise" />
        </label>
        <label className="rr-field rr-field-full">
          <span>Best email *</span>
          <input type="email" value={email}
                 onChange={e => setEmail(e.target.value)} required />
        </label>
        <label className="rr-field rr-field-full">
          <span>Anything else we should know?</span>
          <textarea rows={4} value={notes}
                    onChange={e => setNotes(e.target.value)}
                    placeholder="Specific risk you're worried about · lanes the carrier runs for you · sample please · ordering more than one carrier · anything." />
        </label>
      </div>

      {err && <div className="rr-err">{err}</div>}

      <div className="rr-form-foot">
        <p className="rr-form-meta">
          We reply with a payment link within a few hours. No charge until you pay.
          Confidential — we never tell the carrier.
        </p>
        <button type="submit" className="rr-submit" disabled={busy}>
          {busy ? "Sending…" : "Submit request →"}
        </button>
      </div>
    </form>
  );
}

window.RiskReportPage = RiskReportPage;
