// Shippers Connect — For Carriers landing + claim flow.
//
// Editorial sales surface for the free carrier profile claim. Same
// "Carriers feel invited, not exposed" tone the brand committed to
// in the pivot. Claim form at the bottom is lead-capture v1 — Kris
// follows up personally with a Stripe payment link, then flips the
// row to active and inserts the email into verified_carrier_emails
// so the green ✓ badge starts surfacing on the carrier's reach-outs.

const { useState: useStateFC, useRef: useRefFC, useEffect: useEffectFC } = React;

const FC_EQUIPMENT = [
  "Dry van", "Vented van", "Insulated van",
  "Reefer (frozen)", "Reefer (fresh)", "Reefer (temp-controlled)",
  "Flatbed", "Step deck", "RGN / lowboy", "Conestoga",
  "Tanker", "Box truck",
];

function ForCarriersPage({ onNav }) {
  const [thanks, setThanks] = useStateFC(false);
  const [pinModalOpen, setPinModalOpen] = useStateFC(false);
  const formRef = useRefFC(null);

  // Stripe redirects back here with ?subscribed=1 inside the hash on
  // successful checkout. Show the thanks state automatically.
  useEffectFC(() => {
    if (window.location.hash.includes("?subscribed=1")) setThanks(true);
  }, []);

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

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

        /* HERO */
        .fc-hero { padding: 64px 24px 40px; max-width: 1100px; margin: 0 auto; }
        .fc-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;
        }
        .fc-back:hover { color: var(--ink); }
        .fc-hero-grid {
          display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
          align-items: center;
        }
        @media (max-width: 900px) {
          .fc-hero-grid { grid-template-columns: 1fr; gap: 28px; }
        }
        .fc-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;
        }
        .fc-eyebrow .dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: oklch(0.55 0.18 145);
        }
        .fc-h1 {
          font-family: var(--font-serif); font-size: 60px; line-height: 1.02;
          letter-spacing: -0.03em; margin: 0 0 22px; color: var(--ink);
        }
        .fc-h1 em { font-style: italic; color: oklch(0.50 0.18 145); }
        @media (max-width: 900px) { .fc-h1 { font-size: 42px; } }
        @media (max-width: 600px) { .fc-h1 { font-size: 32px; } }
        .fc-dek {
          font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 28px;
          max-width: 600px;
        }
        .fc-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .fc-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;
        }
        .fc-cta-primary { background: var(--ink); color: #fff; }
        .fc-cta-primary:hover { opacity: 0.9; }
        .fc-cta-ghost { background: #fff; color: var(--ink); }
        .fc-cta-ghost:hover { background: var(--ink); color: #fff; }
        .fc-trust {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }

        /* Hero side card */
        .fc-side {
          background: linear-gradient(180deg, #fff 0%, oklch(0.99 0.015 145) 100%);
          border: 1px solid oklch(0.88 0.04 145); border-radius: 12px;
          padding: 28px; position: relative; overflow: hidden;
          border-left: 5px solid oklch(0.50 0.18 145);
          box-shadow: 0 6px 20px oklch(0.50 0.18 145 / 0.08);
        }
        .fc-side::before {
          content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, oklch(0.50 0.18 145), oklch(0.45 0.16 250));
        }
        .fc-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;
        }
        .fc-side-row {
          display: flex; justify-content: space-between; padding: 10px 0;
          border-bottom: 1px solid var(--rule); font-size: 14px;
        }
        .fc-side-row:last-child { border-bottom: 0; }
        .fc-side-label { color: var(--ink-soft); }
        .fc-side-val { color: var(--ink); font-weight: 600; }
        .fc-price-row {
          display: flex; align-items: baseline; gap: 10px; margin-top: 18px;
          padding-top: 18px; border-top: 1px solid var(--rule);
        }
        .fc-price {
          font-family: var(--font-serif); font-size: 44px; line-height: 1;
          letter-spacing: -0.02em; color: var(--ink);
        }
        .fc-price-unit {
          font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }

        /* Sections */
        .fc-section {
          padding: 56px 0; border-top: 1px solid var(--rule);
          position: relative;
        }
        .fc-section::before {
          content: ""; position: absolute; top: -1px; left: 0; width: 80px; height: 2px;
          background: oklch(0.50 0.18 145);
        }
        .fc-section-eyebrow {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: oklch(0.45 0.14 145);
          margin-bottom: 14px; font-weight: 600;
          display: inline-flex; align-items: center; gap: 8px;
        }
        .fc-section-eyebrow::before {
          content: ""; width: 6px; height: 6px; border-radius: 50%;
          background: oklch(0.50 0.18 145);
        }
        .fc-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;
        }
        .fc-section-h em { font-style: italic; color: oklch(0.50 0.18 145); }
        .fc-section-body {
          font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 24px;
          max-width: 760px;
        }

        /* How it works */
        .fc-how-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
          margin-top: 28px;
        }
        @media (max-width: 800px) { .fc-how-grid { grid-template-columns: 1fr; } }
        .fc-how-card {
          background: #fff; border: 1px solid var(--rule); border-radius: 8px;
          padding: 24px;
          border-left: 3px solid oklch(0.85 0.08 145);
          transition: border-left-color 0.18s, box-shadow 0.18s, transform 0.12s;
        }
        .fc-how-card:hover {
          border-left-color: oklch(0.50 0.18 145);
          box-shadow: 0 8px 22px oklch(0.50 0.18 145 / 0.10);
          transform: translateY(-2px);
        }
        .fc-how-n {
          font-family: var(--font-serif); font-size: 36px; line-height: 1;
          color: oklch(0.50 0.18 145); margin-bottom: 14px;
        }
        .fc-how-h {
          font-family: var(--font-serif); font-size: 19px; letter-spacing: -0.01em;
          margin: 0 0 10px;
        }
        .fc-how-body {
          font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0;
        }

        /* What you get */
        .fc-feats {
          display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
          margin-top: 28px;
        }
        @media (max-width: 700px) { .fc-feats { grid-template-columns: 1fr; } }
        .fc-feat {
          display: grid; grid-template-columns: 32px 1fr; gap: 14px;
          padding: 14px 0; border-bottom: 1px solid var(--rule);
        }
        .fc-feat:last-child, .fc-feat:nth-last-child(2) { border-bottom: 0; }
        .fc-feat-icon {
          width: 32px; height: 32px; border-radius: 50%;
          background: oklch(0.94 0.06 145); color: oklch(0.40 0.16 145);
          display: flex; align-items: center; justify-content: center;
          font-weight: 700; font-size: 14px;
        }
        .fc-feat-h {
          font-family: var(--font-serif); font-size: 17px; letter-spacing: -0.01em;
          margin: 0 0 4px; line-height: 1.3;
        }
        .fc-feat-body {
          font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0;
        }

        /* Form */
        .fc-form-wrap {
          background: linear-gradient(180deg, #fff 0%, oklch(0.99 0.01 145) 100%);
          border: 1px solid oklch(0.88 0.04 145); border-radius: 12px;
          padding: 32px; margin-top: 32px; position: relative; overflow: hidden;
          border-left: 5px solid oklch(0.50 0.18 145);
          box-shadow: 0 8px 28px oklch(0.50 0.18 145 / 0.10);
        }
        .fc-form-wrap::before {
          content: ""; position: absolute; top: 0; left: 5px; right: 0; height: 3px;
          background: linear-gradient(90deg, oklch(0.50 0.18 145), oklch(0.45 0.16 250));
        }
        .fc-form-h {
          font-family: var(--font-serif); font-size: 26px; letter-spacing: -0.015em;
          margin: 0 0 8px;
        }
        .fc-form-sub {
          color: var(--ink-soft); font-size: 14px; margin: 0 0 24px;
        }
        .fc-form-grid {
          display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
        }
        .fc-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
        @media (max-width: 600px) {
          .fc-form-grid, .fc-form-grid-3 { grid-template-columns: 1fr; }
        }
        .fc-field { display: flex; flex-direction: column; gap: 6px; }
        .fc-field > span {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft);
        }
        .fc-field input, .fc-field select, .fc-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;
        }
        .fc-field input:focus, .fc-field select:focus, .fc-field textarea:focus {
          border-color: var(--ink);
        }
        .fc-field-full { grid-column: 1 / -1; }
        .fc-equip-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
        }
        @media (max-width: 600px) { .fc-equip-grid { grid-template-columns: 1fr 1fr; } }
        .fc-equip-chip {
          display: flex; align-items: center; gap: 6px;
          padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px;
          background: var(--paper-2); cursor: pointer; font-size: 13px;
        }
        .fc-equip-chip input { margin: 0; }
        .fc-equip-chip:hover { border-color: var(--ink); }
        .fc-equip-chip.is-on {
          background: oklch(0.97 0.04 145); border-color: oklch(0.55 0.18 145);
          color: oklch(0.36 0.14 145); font-weight: 600;
          box-shadow: 0 0 0 3px oklch(0.94 0.06 145), 0 2px 8px oklch(0.50 0.18 145 / 0.18);
        }
        .fc-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;
        }
        .fc-form-meta {
          font-size: 13px; line-height: 1.55; color: var(--ink-soft); flex: 1;
        }
        .fc-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;
        }
        .fc-submit:hover:not(:disabled) { opacity: 0.9; }
        .fc-submit:disabled { opacity: 0.5; cursor: not-allowed; }
        .fc-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;
        }
        .fc-thanks {
          padding: 48px 32px; text-align: center;
        }
        .fc-thanks-mark {
          width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
          background: oklch(0.55 0.18 145); color: #fff;
          display: flex; align-items: center; justify-content: center; font-size: 28px;
        }
        .fc-thanks-h {
          font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.015em;
          margin: 0 0 12px;
        }
        .fc-thanks-body {
          font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 auto;
          max-width: 480px;
        }

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

        /* NETWORK STAT BAND */
        .fc-stat-band {
          background: linear-gradient(135deg, oklch(0.22 0.10 145) 0%, oklch(0.18 0.08 200) 100%);
          padding: 64px 24px; text-align: center;
        }
        .fc-stat-band-eyebrow {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: oklch(0.68 0.14 145); margin-bottom: 36px;
        }
        .fc-stat-tiles {
          max-width: 860px; margin: 0 auto;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        }
        @media (max-width: 700px) {
          .fc-stat-tiles { grid-template-columns: 1fr; gap: 14px; }
        }
        .fc-stat-tile {
          background: oklch(0.20 0.08 160 / 0.45);
          border: 1px solid oklch(0.50 0.18 145 / 0.35);
          border-radius: 12px; padding: 32px 24px;
        }
        .fc-stat-num {
          font-family: var(--font-serif); font-size: 48px; font-weight: 700;
          letter-spacing: -0.02em; color: #fff; line-height: 1;
        }
        .fc-stat-label {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.20em;
          text-transform: uppercase; color: oklch(0.68 0.14 145); margin-top: 10px;
        }
        .fc-stat-band-cta {
          margin-top: 40px; display: inline-flex; align-items: center; gap: 8px;
          background: oklch(0.55 0.18 145); color: #fff;
          font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
          text-transform: uppercase; border: 0; border-radius: 6px;
          padding: 14px 28px; cursor: pointer;
        }
        .fc-stat-band-cta:hover { background: oklch(0.48 0.18 145); }

        /* ─── DARK THEME OVERRIDES — same navy palette as SCE / Wizard ── */
        .page-fc { background: #0f172a; color: #e8edf5; }
        .fc-back { color: rgba(255,255,255,0.55); }
        .fc-back:hover { color: #ffffff; }
        .fc-eyebrow { color: rgba(255,255,255,0.55); }
        .fc-h1 { color: #ffffff; }
        .fc-h1 em { color: oklch(0.62 0.18 145); }
        .fc-dek { color: rgba(255,255,255,0.72); }

        /* CTAs */
        .fc-cta-primary { background: var(--red); color: #ffffff; }
        .fc-cta-primary:hover { background: oklch(0.45 0.20 250); opacity: 1; }
        .fc-cta-ghost { background: rgba(255,255,255,0.05); color: #ffffff; border: 1px solid #1f2937; }
        .fc-cta-ghost:hover { background: rgba(255,255,255,0.10); color: #ffffff; }
        .fc-trust { color: rgba(255,255,255,0.55); }

        /* Side panel */
        .fc-side {
          background: rgba(255,255,255,0.03); border-color: #1f2937; color: #e8edf5;
        }
        .fc-side-h { color: #ffffff; }
        .fc-side-row { border-bottom-color: #1f2937; }
        .fc-side-label { color: rgba(255,255,255,0.55); }
        .fc-side-val { color: #ffffff; }
        .fc-price { color: #ffffff; }
        .fc-price-unit { color: rgba(255,255,255,0.55); }

        /* Sections */
        .fc-section-eyebrow { color: rgba(255,255,255,0.55); }
        .fc-section-h { color: #ffffff; }
        .fc-section-body { color: rgba(255,255,255,0.72); }

        /* Form */
        .fc-form-wrap { background: rgba(255,255,255,0.03); border-color: #1f2937; }
        .fc-form-h { color: #ffffff; }
        .fc-form-sub { color: rgba(255,255,255,0.72); }
        .fc-field > span { color: rgba(255,255,255,0.55); }
        .fc-field input, .fc-field select, .fc-field textarea {
          background: rgba(0,0,0,0.35); border-color: #1f2937; color: #ffffff;
        }
        .fc-field input::placeholder, .fc-field textarea::placeholder { color: rgba(255,255,255,0.35); }
        .fc-field input:focus, .fc-field select:focus, .fc-field textarea:focus {
          outline-color: var(--red); border-color: var(--red);
        }
        .fc-equip-chip {
          background: rgba(0,0,0,0.30); color: #ffffff; border-color: #1f2937;
        }
        .fc-equip-chip:hover { border-color: rgba(255,255,255,0.30); }
        .fc-equip-chip.is-on { background: var(--red); border-color: var(--red); color: #ffffff; }
        .fc-form-meta { color: rgba(255,255,255,0.55); }
        .fc-submit { background: var(--red); color: #ffffff; }
        .fc-submit:hover:not(:disabled) { background: oklch(0.45 0.20 250); opacity: 1; }
        .fc-thanks { background: rgba(255,255,255,0.04); border-color: #1f2937; color: #e8edf5; }
        .fc-thanks-h { color: #ffffff; }
        .fc-thanks-body { color: rgba(255,255,255,0.78); }

        /* FAQ */
        .fc-faq-item { border-bottom-color: #1f2937; }
        .fc-faq-q { color: #ffffff; }
        .fc-faq-a { color: rgba(255,255,255,0.72); }

        /* Bottom stat band */
        .fc-stat-band { background: rgba(255,255,255,0.03); border-color: #1f2937; }
        .fc-stat-band-eyebrow { color: rgba(255,255,255,0.55); }
        .fc-stat-tile { background: rgba(255,255,255,0.04); border-color: #1f2937; }
        .fc-stat-num { color: #ffffff; }
        .fc-stat-label { color: rgba(255,255,255,0.55); }
      `}</style>

      {/* HERO */}
      <section className="fc-hero">
        <button className="fc-back" onClick={() => onNav("home")}>← Back to Shipping Clarity</button>
        <div className="fc-hero-grid">
          <div>
            <div className="fc-eyebrow"><span className="dot" /> For carriers</div>
            <h1 className="fc-h1">Welcome, carriers — <em>let's get you found.</em></h1>
            <p className="fc-dek">
              You run hard, run legal, and keep your numbers clean. We make
              sure shippers see that. Claim your profile, get cross-checked
              against the federal carrier registry, and earn the green
              Verified ✓ badge that shows up on every reach-out. No middleman.
              No commission on the handshake. Just real loads, paid honestly.
            </p>
            <div className="fc-cta-row">
              <button className="fc-cta fc-cta-primary" onClick={scrollToForm}>
                Claim your profile — Free →
              </button>
              <span className="fc-trust">No monthly fee · No long-term contract</span>
            </div>
          </div>
          <aside className="fc-side">
            <div className="fc-side-h">What you get</div>
            <div className="fc-side-row">
              <span className="fc-side-label">Verified badge</span>
              <span className="fc-side-val">On every reach-out</span>
            </div>
            <div className="fc-side-row">
              <span className="fc-side-label">Profile listing</span>
              <span className="fc-side-val">Searchable by lane + equipment</span>
            </div>
            <div className="fc-side-row">
              <span className="fc-side-label">Lead notifications</span>
              <span className="fc-side-val">Email when a load matches</span>
            </div>
            <div className="fc-side-row">
              <span className="fc-side-label">Commission</span>
              <span className="fc-side-val">$0 per load</span>
            </div>
            <div className="fc-price-row">
              <span className="fc-price">Free</span>
              <span className="fc-price-unit">no monthly fee</span>
            </div>
          </aside>
        </div>
      </section>

      {/* NETWORK STAT BAND — live counts, replaces the broken Leaflet map */}
      <FCNetworkStats onJoin={scrollToForm} />

      {/* HOW IT WORKS */}
      <section className="fc-section">
        <div className="fc-wrap">
          <div className="fc-section-eyebrow">How it works</div>
          <h2 className="fc-section-h">Three steps. <em>No broker.</em></h2>
          <div className="fc-how-grid">
            <div className="fc-how-card">
              <FCStepSign kind="mile" n={1} />
              <h3 className="fc-how-h">Claim your profile.</h3>
              <p className="fc-how-body">
                Tell us your MC, USDOT, and primary lanes. We verify
                against the FMCSA, you confirm by email, and your
                listing goes live with a green Verified ✓ badge.
              </p>
            </div>
            <div className="fc-how-card">
              <FCStepSign kind="exit" n={2} />
              <h3 className="fc-how-h">Browse open loads.</h3>
              <p className="fc-how-body">
                Filter the Connection Board by lane, equipment, pickup
                window, appointment status. Reach out directly to the
                shipper whose load matches your next available trailer.
              </p>
            </div>
            <div className="fc-how-card">
              <FCStepSign kind="arrive" n={3} />
              <h3 className="fc-how-h">Connect directly.</h3>
              <p className="fc-how-body">
                The shipper gets your message + email the moment you send
                it. They reply straight to you. No commission. No
                middleman. The handshake is yours.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT YOU GET */}
      <section className="fc-section">
        <div className="fc-wrap">
          <div className="fc-section-eyebrow">What's included</div>
          <h2 className="fc-section-h">A subscription that <em>respects your work.</em></h2>
          <div className="fc-feats">
            {[
              ["✓", "Verified badge on every reach-out", "Shippers see the green check on every message you send. Trust signal that puts you ahead of unverified competitors."],
              ["★", "Premium directory listing", "Searchable by lane, equipment, fleet size. Verified carriers rank above unverified ones on the carrier page."],
              ["✉", "Email lead alerts", "When a load posts that matches your saved lanes and equipment, we email you within minutes. First to reach out wins."],
              ["$", "Zero commission", "We don't take a cut of any deal closed on Shippers Connect. The rate the shipper offers is the rate you discuss."],
              ["?", "Public dispute response", "If a shipper posts driver-sourced feedback about your fleet, you get the right to respond on the public page."],
              ["≡", "Profile analytics", "See how many shippers viewed your profile, which lanes pulled the most interest, and where you can compete harder."],
            ].map(([icon, h, body]) => (
              <div key={h} className="fc-feat">
                <div className="fc-feat-icon">{icon}</div>
                <div>
                  <h3 className="fc-feat-h">{h}</h3>
                  <p className="fc-feat-body">{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FORM */}
      <section className="fc-section" ref={formRef}>
        <div className="fc-wrap">
          <div className="fc-section-eyebrow">Claim your profile</div>
          <h2 className="fc-section-h">Tell us about your fleet.</h2>
          <p className="fc-section-body">
            We'll verify your authority against the FMCSA and email
            you a payment link. Most carriers are live within an hour.
          </p>
          {thanks
            ? <FCThanks />
            : <FCClaimForm onDone={() => setThanks(true)} />}
        </div>
      </section>

      {/* FAQ */}
      <section className="fc-section">
        <div className="fc-wrap">
          <div className="fc-section-eyebrow">Common questions</div>
          <h2 className="fc-section-h">FAQ.</h2>
          <div className="fc-faq">
            {[
              ["Why is it free?",
               "We want every legitimate carrier in the network. The moat is coverage — the more verified carriers on the platform, the better the match for shippers. Your profile costs you nothing; what you earn from it is entirely yours."],
              ["Do you really not take commission?",
               "Correct. The shipper posts a rate, you talk directly, you book directly. We don't take a percentage and we don't add a markup. Your profile is free and the handshake costs nothing."],
              ["What's the verification process?",
               "We pull your authority from the FMCSA SAFER database (USDOT or MC) and confirm the email address you give us matches a contact on the carrier registration. Takes a few minutes."],
              ["Can I remove my profile any time?",
               "Yes. Email us and your claimed profile reverts to an unclaimed listing within 24 hours. No billing, no cancellation window — there's nothing to cancel."],
              ["Will shippers see my insurance and authority?",
               "Yes — verified profiles surface your active authority status, insurance carrier, and FMCSA inspection summary right on the listing. Transparency is the trust loop."],
              ["What if a shipper posts something unfair about us?",
               "Verified carriers get the right to respond publicly. Driver-sourced feedback is sealed by default; only the carrier and the editorial process can move it to public, and you always get to add your side."],
            ].map(([q, a]) => (
              <div key={q} className="fc-faq-item">
                <h3 className="fc-faq-q">{q}</h3>
                <p className="fc-faq-a">{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function FCThanks() {
  return (
    <div className="fc-form-wrap">
      <div className="fc-thanks">
        <div className="fc-thanks-mark">✓</div>
        <h3 className="fc-thanks-h">We got your claim.</h3>
        <p className="fc-thanks-body">
          A real person at Shippers Connect will reply within a few hours
          with a Stripe payment link and the FMCSA verification step. Most
          carriers are live within an hour of paying.
        </p>
      </div>
    </div>
  );
}

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

  const [companyName, setCompanyName] = useStateFC("");
  const [mc, setMc] = useStateFC("");
  const [usdot, setUsdot] = useStateFC("");
  const [name, setName] = useStateFC("");
  const [title, setTitle] = useStateFC("");
  const [email, setEmail] = useStateFC("");
  const [phone, setPhone] = useStateFC("");
  const [trucks, setTrucks] = useStateFC("");
  const [drivers, setDrivers] = useStateFC("");
  const [equip, setEquip] = useStateFC([]);
  const [lanes, setLanes] = useStateFC("");
  const [notes, setNotes] = useStateFC("");

  function toggleEquip(label) {
    setEquip(prev => prev.includes(label) ? prev.filter(x => x !== label) : [...prev, label]);
  }

  async function submit(e) {
    e.preventDefault();
    setErr(null);
    if (!companyName.trim()) { setErr("Company name is required."); return; }
    if (!name.trim()) { setErr("Your name is required."); return; }
    if (!email.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setErr("A valid email is required.");
      return;
    }
    setBusy(true);
    try {
      const res = await fetch("/api/claim-carrier-profile", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          company_name: companyName.trim(),
          mc_number: mc.trim() || null,
          usdot_number: usdot.trim() || null,
          contact_name: name.trim(),
          contact_title: title.trim() || null,
          contact_email: email.trim(),
          contact_phone: phone.trim() || null,
          fleet_size_trucks: trucks ? parseInt(trucks, 10) : null,
          fleet_size_drivers: drivers ? parseInt(drivers, 10) : null,
          equipment_types: equip.length ? equip : null,
          primary_lanes: lanes.trim() || 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 claim. Try again or email hello@shippingclarity.com.");
        return;
      }
      // If Stripe is configured, the API returns a checkout_url so we
      // can send the carrier straight to subscribe. Otherwise it's the
      // legacy email-then-wait 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="fc-form-wrap">
      <h3 className="fc-form-h">Carrier profile claim</h3>
      <p className="fc-form-sub">Free · no monthly fee · 24-hour activation typical</p>

      <div className="fc-form-grid">
        <label className="fc-field fc-field-full">
          <span>Company name *</span>
          <input type="text" value={companyName}
                 onChange={e => setCompanyName(e.target.value)} required />
        </label>
        <label className="fc-field">
          <span>MC number</span>
          <input type="text" value={mc} onChange={e => setMc(e.target.value)}
                 placeholder="e.g. MC-123456" />
        </label>
        <label className="fc-field">
          <span>USDOT number</span>
          <input type="text" value={usdot} onChange={e => setUsdot(e.target.value)}
                 placeholder="e.g. 1234567" />
        </label>

        <label className="fc-field">
          <span>Your name *</span>
          <input type="text" value={name}
                 onChange={e => setName(e.target.value)} required />
        </label>
        <label className="fc-field">
          <span>Title</span>
          <input type="text" value={title} onChange={e => setTitle(e.target.value)}
                 placeholder="Owner, dispatcher, ops manager…" />
        </label>
        <label className="fc-field">
          <span>Best email *</span>
          <input type="email" value={email}
                 onChange={e => setEmail(e.target.value)} required />
        </label>
        <label className="fc-field">
          <span>Phone (optional)</span>
          <input type="tel" value={phone} onChange={e => setPhone(e.target.value)} />
        </label>

        <label className="fc-field">
          <span># of trucks</span>
          <input type="number" min="1" value={trucks}
                 onChange={e => setTrucks(e.target.value)} placeholder="e.g. 12" />
        </label>
        <label className="fc-field">
          <span># of drivers</span>
          <input type="number" min="1" value={drivers}
                 onChange={e => setDrivers(e.target.value)} placeholder="e.g. 14" />
        </label>

        <label className="fc-field fc-field-full">
          <span>Equipment you run (pick all that apply)</span>
          <div className="fc-equip-grid">
            {FC_EQUIPMENT.map(label => (
              <label key={label} className={`fc-equip-chip ${equip.includes(label) ? "is-on" : ""}`}>
                <input type="checkbox" checked={equip.includes(label)}
                       onChange={() => toggleEquip(label)} />
                <span>{label}</span>
              </label>
            ))}
          </div>
        </label>

        <label className="fc-field fc-field-full">
          <span>Primary lanes</span>
          <input type="text" value={lanes} onChange={e => setLanes(e.target.value)}
                 placeholder="e.g. LA → Phoenix · Chicago → Atlanta · TX intrastate" />
        </label>
        <label className="fc-field fc-field-full">
          <span>Anything else we should know?</span>
          <textarea rows={3} value={notes}
                    onChange={e => setNotes(e.target.value)}
                    placeholder="Specialty cargo, hazmat status, owner-operator network, anything that helps shippers find you." />
        </label>
      </div>

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

      <div className="fc-form-foot">
        <p className="fc-form-meta">
          We reply within a few hours with a Stripe payment link and FMCSA
          verification step. No charge until you pay.
        </p>
        <button type="submit" className="fc-submit" disabled={busy}>
          {busy ? "Sending…" : "Submit claim →"}
        </button>
      </div>
    </form>
  );
}

// =============================================================================
// NETWORK STAT BAND — replaces the Leaflet carrier-pin map (3 PRs failed
// to fix its render bug). Shows live counts: verified carriers, shippers
// covered, active lanes. Pulls from the same SI_DB.raw.count calls used
// on the home page.
// =============================================================================

function FCNetworkStats({ onJoin }) {
  const [counts, setCounts] = useStateFC({ carriers: null, shippers: null, lanes: null });

  useEffectFC(() => {
    let alive = true;
    if (!window.SI_DB || !window.SI_DB.raw) return;
    (async () => {
      const [ca, sh, la] = await Promise.all([
        window.SI_DB.raw.count("entities", "type=eq.carrier").catch(() => null),
        window.SI_DB.raw.count("shippers", "").catch(() => null),
        window.SI_DB.raw.count("dat_lane_rates", "").catch(() => null),
      ]);
      if (!alive) return;
      setCounts({ carriers: ca, shippers: sh, lanes: la });
    })();
    return () => { alive = false; };
  }, []);

  const fmt = (n) => n == null ? "—" : n.toLocaleString();

  return (
    <section className="fc-stat-band">
      <div className="fc-stat-band-eyebrow">The network · by the numbers</div>
      <div className="fc-stat-tiles">
        <div className="fc-stat-tile">
          <div className="fc-stat-num">{fmt(counts.carriers)}</div>
          <div className="fc-stat-label">Verified carriers</div>
        </div>
        <div className="fc-stat-tile">
          <div className="fc-stat-num">{fmt(counts.shippers)}</div>
          <div className="fc-stat-label">Shippers we cover</div>
        </div>
        <div className="fc-stat-tile">
          <div className="fc-stat-num">{fmt(counts.lanes)}</div>
          <div className="fc-stat-label">Active lanes</div>
        </div>
      </div>
      <button className="fc-stat-band-cta" onClick={onJoin}>
        Join the network →
      </button>
    </section>
  );
}

// =============================================================================
// CARRIER HQ MAP — kept for reference; no longer rendered.
// =============================================================================

const STATE_CENTROIDS = {
  AL: [32.806671, -86.791130], AK: [61.370716, -152.404419], AZ: [33.729759, -111.431221],
  AR: [34.969704, -92.373123], CA: [36.116203, -119.681564], CO: [39.059811, -105.311104],
  CT: [41.597782, -72.755371], DE: [39.318523, -75.507141], FL: [27.766279, -81.686783],
  GA: [33.040619, -83.643074], HI: [21.094318, -157.498337], ID: [44.240459, -114.478828],
  IL: [40.349457, -88.986137], IN: [39.849426, -86.258278], IA: [42.011539, -93.210526],
  KS: [38.526600, -96.726486], KY: [37.668140, -84.670067], LA: [31.169546, -91.867805],
  ME: [44.693947, -69.381927], MD: [39.063946, -76.802101], MA: [42.230171, -71.530106],
  MI: [43.326618, -84.536095], MN: [45.694454, -93.900192], MS: [32.741646, -89.678696],
  MO: [38.456085, -92.288368], MT: [46.921925, -110.454353], NE: [41.125370, -98.268082],
  NV: [38.313515, -117.055374], NH: [43.452492, -71.563896], NJ: [40.298904, -74.521011],
  NM: [34.840515, -106.248482], NY: [42.165726, -74.948051], NC: [35.630066, -79.806419],
  ND: [47.528912, -99.784012], OH: [40.388783, -82.764915], OK: [35.565342, -96.928917],
  OR: [44.572021, -122.070938], PA: [40.590752, -77.209755], RI: [41.680893, -71.511780],
  SC: [33.856892, -80.945007], SD: [44.299782, -99.438828], TN: [35.747845, -86.692345],
  TX: [31.054487, -97.563461], UT: [40.150032, -111.862434], VT: [44.045876, -72.710686],
  VA: [37.769337, -78.169968], WA: [47.400902, -121.490494], WV: [38.491226, -80.954453],
  WI: [44.268543, -89.616508], WY: [42.755966, -107.302490], DC: [38.897438, -77.026817],
  // Canadian provinces (a few carriers)
  ON: [50.000000, -85.000000], QC: [52.939916, -73.549137], BC: [53.726669, -127.647621],
  AB: [55.000000, -115.000000], MB: [53.760858, -98.813873], NB: [46.498390, -66.159668],
};

// Hand-curated city centroids for the famous freight HQs — overrides the
// state centroid for visual accuracy. Anything not listed falls back to
// the state centroid + a deterministic jitter.
const FREIGHT_CITY_CENTROIDS = {
  "atlanta-ga":           [33.749, -84.388],
  "memphis-tn":           [35.149, -90.049],
  "lowell-ar":            [36.255, -94.131],
  "phoenix-az":           [33.448, -112.074],
  "greenwich-ct":         [41.027, -73.628],
  "coral-gables-fl":      [25.721, -80.268],
  "thomasville-nc":       [35.882, -80.082],
  "green-bay-wi":         [44.519, -88.019],
  "jacksonville-fl":      [30.332, -81.656],
  "richmond-va":          [37.541, -77.434],
  "fort-smith-ar":        [35.385, -94.398],
  "reading-pa":           [40.336, -75.926],
  "oak-brook-il":         [41.832, -87.929],
  "camden-nj":            [39.926, -75.119],
  "omaha-ne":             [41.257, -95.995],
  "wilmington-oh":        [39.445, -83.828],
  "johns-creek-ga":       [34.029, -84.198],
  "saint-laurent-qc":     [45.508, -73.683],
  "springfield-mo":       [37.209, -93.292],
  "north-canton-oh":      [40.876, -81.402],
  "schuylkill-haven-pa":  [40.629, -76.171],
  "des-moines-ia":        [41.587, -93.624],
  "lexington-sc":         [33.985, -81.236],
  "cookeville-tn":        [36.163, -85.501],
  "cedar-rapids-ia":      [41.974, -91.668],
  "warren-mi":            [42.491, -83.029],
  "birmingham-al":        [33.519, -86.810],
  "evansville-in":        [37.971, -87.571],
  "tampa-fl":             [27.951, -82.458],
  "dallas-tx":            [32.776, -96.797],
  "saint-cloud-mn":       [45.557, -94.163],
  "lincoln-ne":           [40.808, -96.700],
  "mondovi-wi":           [44.572, -91.667],
  "mcdonough-ga":         [33.447, -84.146],
  "chattanooga-tn":       [35.045, -85.310],
  "greeneville-tn":       [36.169, -82.831],
  "salt-lake-city-ut":    [40.760, -111.890],
  "richland-ms":          [32.232, -90.158],
  "nashville-tn":         [36.162, -86.781],
  "dayton-oh":            [39.759, -84.192],
  "winnipeg-mb":          [49.895, -97.138],
  "okotoks-ab":           [50.722, -113.975],
  "cedar-rapids-ia":      [41.974, -91.668],
  "downers-grove-il":     [41.795, -88.011],
  "city-of-industry-ca":  [34.018, -117.958],
  "wichita-ks":           [37.687, -97.330],
  "long-beach-ca":        [33.770, -118.189],
  "eagan-mn":             [44.804, -93.166],
  "tulsa-ok":             [36.154, -95.992],
  "coeur-d'alene-id":     [47.677, -116.780],
  "farmington-ny":        [42.985, -77.318],
  "tontitown-ar":         [36.180, -94.234],
  "phoenix-az":           [33.448, -112.074],
  "lafayette-la":         [30.224, -92.020],
  "auburn-wa":            [47.307, -122.230],
  "saint-louis-mo":       [38.627, -90.199],
  "oklahoma-city-ok":     [35.467, -97.516],
  "sioux-falls-sd":       [43.546, -96.731],
  "lake-success-ny":      [40.770, -73.722],
  "saint-paul-mn":        [44.954, -93.090],
  "louisville-ky":        [38.252, -85.758],
  "altoona-pa":           [40.518, -78.394],
  "liberal-ks":           [37.043, -100.921],
  "bismarck-nd":          [46.808, -100.783],
  "salem-or":             [44.943, -123.035],
  "mississauga-on":       [43.589, -79.644],
  "calgary-ab":           [51.045, -114.057],
  "chicago-il":           [41.878, -87.630],
  "pittsburgh-pa":        [40.441, -79.996],
  "seattle-wa":           [47.606, -122.332],
  "harvey-la":            [29.901, -90.077],
  "ambridge-pa":          [40.589, -80.226],
  "west-chester-pa":      [39.961, -75.605],
  "north-liberty-ia":     [41.748, -91.611],
  "dubuque-ia":           [42.500, -90.665],
  "marshfield-wi":        [44.668, -90.172],
  "edgerton-wi":          [42.836, -89.068],
  "hartland-nb":          [46.302, -67.519],
  "gore-bay-on":          [45.916, -82.464],
  "toronto-on":           [43.652, -79.383],
  "brampton-on":          [43.732, -79.762],
  "fenton-mo":            [38.512, -90.443],
  "greeley-co":           [40.423, -104.709],
  "las-cruces-nm":        [32.319, -106.764],
  "van-buren-ar":         [35.437, -94.348],
  "baltimore-md":         [39.290, -76.612],
  "romulus-mi":           [42.221, -83.396],
  "murfreesboro-tn":      [35.846, -86.392],
  "tucker-ga":            [33.854, -84.217],
  "lancaster-tx":         [32.592, -96.756],
  "chandler-az":          [33.306, -111.842],
  "braintree-ma":         [42.207, -71.001],
  "albuquerque-nm":       [35.084, -106.651],
  "billerica-ma":         [42.558, -71.269],
  "cambridge-on":         [43.360, -80.314],
};

function carrierLatLng(c, idx) {
  const slug = `${(c.hq_city || "").toLowerCase().replace(/\s+/g, "-")}-${(c.hq_state || "").toLowerCase()}`;
  if (FREIGHT_CITY_CENTROIDS[slug]) return FREIGHT_CITY_CENTROIDS[slug];
  const sc = STATE_CENTROIDS[(c.hq_state || "").toUpperCase()];
  if (!sc) return null;
  // Deterministic jitter from the slug so multiple carriers in the same
  // state spread out instead of perfectly stacking on the centroid.
  let h = 0;
  const k = c.slug || c.name || String(idx);
  for (let i = 0; i < k.length; i++) h = (h * 31 + k.charCodeAt(i)) | 0;
  const dx = ((h & 0xff) / 255 - 0.5) * 1.4;       // ±0.7°
  const dy = (((h >> 8) & 0xff) / 255 - 0.5) * 1.4;
  return [sc[0] + dx, sc[1] + dy];
}

function CarrierHQMap({ onAddPin }) {
  const mapRef = useRefFC(null);
  const containerRef = useRefFC(null);
  const [count, setCount] = useStateFC(0);

  useEffectFC(() => {
    // Defensive: any throw in this effect would crash the For Carriers
    // page (the bento sits at the top of the route), so we wrap each
    // step in try/catch. Worst case: map fails to render, the section's
    // CTA + headline still show so the user can still join the network.
    let cancelled = false;
    let map = null;
    let leafletWaitTimer = null;

    function loadPins(L) {
      const url = "https://fspqxobtsgyzzcdvpqul.supabase.co/rest/v1/carriers_top100" +
                  "?select=name,slug,hq_city,hq_state,segment,fleet_size_estimate&limit=500&order=rank.asc";
      const headers = window.SI_DB && window.SI_DB.headers
        ? window.SI_DB.headers
        : { apikey: "sb_publishable_0zNSihwdiVEKHD_HQj7Oqw_wEGGPFf6", Authorization: "Bearer sb_publishable_0zNSihwdiVEKHD_HQj7Oqw_wEGGPFf6" };
      fetch(url, { headers })
        .then((r) => r.ok ? r.json() : [])
        .then((rows) => {
          if (cancelled || !Array.isArray(rows) || !map) return;
          let placed = 0;
          rows.forEach((c, idx) => {
            try {
              const ll = carrierLatLng(c, idx);
              if (!ll) return;
              const color = ({
                reefer: "#5fa9ff", tl: "#0a3a8a", ltl: "#10643a", flatbed: "#a64119",
                tanker: "#7d2e10", drayage: "#6b00b3", parcel: "#c64bc0",
                intermodal: "#0f6b6b", dedicated: "#1a1a1a",
              })[c.segment] || "#444";
              const marker = L.circleMarker(ll, {
                radius: 5, color: "#fff", weight: 1.5,
                fillColor: color, fillOpacity: 0.85,
              }).addTo(map);
              marker.bindTooltip(
                `<strong>${c.name}</strong><br>${c.hq_city || ""}, ${c.hq_state || ""}` +
                (c.segment ? `<br><span style="color:${color};font-weight:600">${c.segment.toUpperCase()}</span>` : ""),
                { direction: "top", offset: [0, -4], opacity: 0.95 }
              );
              marker.on("click", () => { window.location.hash = `#/c/${c.slug}`; });
              placed++;
            } catch (err) {
              console.warn("[CarrierHQMap] skipped one carrier", c && c.slug, err);
            }
          });
          if (!cancelled) setCount(placed);
        })
        .catch((err) => { console.warn("[CarrierHQMap] fetch failed", err); });
    }

    function initMap() {
      if (cancelled) return;
      try {
        if (!containerRef.current) return;
        if (!window.L) {
          // Leaflet may not be fully loaded yet — retry after the event
          // loop settles. Caps implicitly via cancelled flag on unmount.
          leafletWaitTimer = setTimeout(initMap, 250);
          return;
        }
        const L = window.L;
        map = L.map(containerRef.current, {
          center: [39.5, -98.35],
          zoom: 4,
          minZoom: 3,
          scrollWheelZoom: false,
          attributionControl: false,
        });
        L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
          maxZoom: 12,
        }).addTo(map);
        mapRef.current = map;
        // Tile-render race fix — without this, a hidden / just-mounted
        // Leaflet container can stay blank because Leaflet measured 0x0
        // on first render. invalidateSize forces a re-measure once the
        // container has its real layout.
        setTimeout(() => { try { map && map.invalidateSize(); } catch (_) {} }, 100);
        loadPins(L);
      } catch (err) {
        console.error("[CarrierHQMap] init failed", err);
      }
    }

    initMap();

    return () => {
      cancelled = true;
      if (leafletWaitTimer) clearTimeout(leafletWaitTimer);
      try { if (map) map.remove(); } catch (_) {}
      mapRef.current = null;
    };
  }, []);

  return (
    <section style={{ padding: "0 24px", maxWidth: 1180, margin: "0 auto 48px" }}>
      {/* All key styles inlined directly on each element. CSS class rules
          inside <style> blocks are silently dropped by some browsers when
          ANY value in the rule is invalid (e.g. a too-new oklch() form);
          inline styles are robust against that. */}
      <div style={{
        position: "relative",
        borderRadius: 14,
        overflow: "hidden",
        border: "1px solid rgba(56,180,110,0.30)",
        background: "linear-gradient(135deg, #0a1224 0%, #1d2d52 100%)",
        boxShadow: "0 12px 36px rgba(15,23,42,0.20)",
      }}>
        {/* Map canvas — Leaflet draws into this. Light tint so a failed-
            tile state still shows a solid surface and the CTA stays readable. */}
        <div ref={containerRef} style={{
          width: "100%", height: 460, background: "#e8eef8",
        }} />

        {/* Head: eyebrow + CTA. Pointer-events scoped so it doesn't block
            map interactions where there's no actual control. */}
        <div style={{
          position: "absolute", top: 14, left: 14, right: 14, zIndex: 600,
          display: "flex", alignItems: "flex-start",
          justifyContent: "space-between",
          gap: 12, pointerEvents: "none", flexWrap: "wrap",
        }}>
          <div style={{
            background: "rgba(15,23,42,0.92)", color: "#fff",
            padding: "8px 14px", borderRadius: 6,
            fontFamily: "ui-monospace, monospace",
            fontSize: 11, letterSpacing: "0.18em",
            textTransform: "uppercase", fontWeight: 600,
            pointerEvents: "auto",
          }}>
            Carrier network · <span style={{ color: "#5fa9ff", marginLeft: 6 }}>{count}</span> pinned
          </div>
          <button onClick={onAddPin} style={{
            background: "#1aa84d", color: "#fff", border: "none",
            cursor: "pointer", padding: "10px 16px", borderRadius: 6,
            fontFamily: "inherit", fontSize: 14, fontWeight: 700,
            boxShadow: "0 6px 16px rgba(0,180,80,0.30)",
            pointerEvents: "auto",
          }}>
            📍 Add or update your pin · join the network →
          </button>
        </div>

        {/* Legend bottom-left. */}
        <div style={{
          position: "absolute", bottom: 12, left: 12, zIndex: 600,
          background: "rgba(255,255,255,0.95)", borderRadius: 6,
          padding: "8px 12px", fontSize: 11, lineHeight: 1.6,
          border: "1px solid rgba(15,23,42,0.10)", maxWidth: 220,
        }}>
          <strong style={{
            fontSize: 10, letterSpacing: "0.12em",
            textTransform: "uppercase", color: "#64748b",
            display: "block", marginBottom: 4,
          }}>Equipment</strong>
          {[
            { c: "#5fa9ff", n: "Reefer" },
            { c: "#0a3a8a", n: "TL" },
            { c: "#10643a", n: "LTL" },
            { c: "#a64119", n: "Flatbed" },
            { c: "#7d2e10", n: "Tanker" },
            { c: "#6b00b3", n: "Drayage" },
          ].map((row) => (
            <span key={row.n} style={{
              display: "inline-flex", alignItems: "center", gap: 4,
              marginRight: 10,
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: "50%",
                background: row.c, display: "inline-block",
              }} />
              {row.n}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================================
// ADD YOUR PIN MODAL — free self-onboarding form. Opens from the
// carrier-pin map CTA. Submits to /api/carrier-pin-submission for
// editor review. Different product from the paid $99/mo claim form
// — this just gets a pin on the public network map.
// =============================================================================

function AddYourPinModal({ onClose }) {
  const [submitting, setSubmitting] = useStateFC(false);
  const [error, setError]     = useStateFC("");
  const [done, setDone]       = useStateFC(false);
  const [companyName, setCompanyName] = useStateFC("");
  const [usdot, setUsdot]     = useStateFC("");
  const [mc, setMc]           = useStateFC("");
  const [city, setCity]       = useStateFC("");
  const [state, setState]     = useStateFC("");
  const [segment, setSegment] = useStateFC("");
  const [fleetSize, setFleetSize] = useStateFC("");
  const [contactName, setContactName] = useStateFC("");
  const [contactEmail, setContactEmail] = useStateFC("");
  const [contactPhone, setContactPhone] = useStateFC("");
  const [message, setMessage] = useStateFC("");

  // Trap ESC to close.
  useEffectFC(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  async function submit(e) {
    e.preventDefault();
    setError("");
    setSubmitting(true);
    try {
      const r = await fetch("/api/carrier-pin-submission", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          company_name:   companyName,
          usdot_number:   usdot || null,
          mc_number:      mc || null,
          hq_city:        city,
          hq_state:       (state || "").toUpperCase(),
          segment:        segment || null,
          fleet_size:     fleetSize ? parseInt(fleetSize, 10) : null,
          contact_name:   contactName || null,
          contact_email:  contactEmail,
          contact_phone:  contactPhone || null,
          message:        message || null,
        }),
      });
      const data = await r.json();
      if (!r.ok || !data.ok) throw new Error(data.error || "Submission failed");
      setDone(true);
    } catch (e) {
      setError(String(e.message || e));
    } finally {
      setSubmitting(false);
    }
  }

  const overlay = {
    position: "fixed", inset: 0, background: "rgba(10,18,36,0.72)",
    display: "flex", alignItems: "flex-start", justifyContent: "center",
    zIndex: 1000, padding: "32px 16px", overflowY: "auto",
    backdropFilter: "blur(2px)",
  };
  const sheet = {
    background: "#fff", borderRadius: 12, width: "100%", maxWidth: 560,
    boxShadow: "0 24px 64px rgba(0,0,0,0.30)", overflow: "hidden",
    border: "1px solid oklch(0.90 0.04 250)",
  };
  const head = {
    padding: "18px 22px", borderBottom: "1px solid oklch(0.92 0.03 250)",
    display: "flex", alignItems: "center", justifyContent: "space-between",
    gap: 16, background: "linear-gradient(135deg, rgba(95,169,255,0.08), rgba(95,169,255,0.02))",
  };
  const lbl = { display: "block", fontSize: 11, letterSpacing: "0.10em",
                textTransform: "uppercase", fontWeight: 700, color: "var(--ink-soft)",
                marginBottom: 4 };
  const inp = { width: "100%", padding: "8px 10px", fontSize: 14,
                border: "1px solid oklch(0.88 0.04 250)", borderRadius: 6,
                fontFamily: "inherit" };

  if (done) {
    return (
      <div style={overlay} onClick={onClose}>
        <div style={sheet} onClick={(e) => e.stopPropagation()}>
          <div style={{ padding: "32px 28px", textAlign: "center" }}>
            <div style={{ fontSize: 48, marginBottom: 8 }}>📍</div>
            <h2 style={{ fontFamily: "var(--font-serif)", fontSize: 24, margin: "0 0 8px" }}>
              Pin submitted — thanks!
            </h2>
            <p style={{ color: "var(--ink-soft)", fontSize: 14, lineHeight: 1.55, maxWidth: 420, margin: "0 auto 18px" }}>
              We'll cross-check the federal carrier registry against the USDOT you
              provided and add your pin to the public network map within 1 business
              day. You'll get a confirmation email at <strong>{contactEmail}</strong> when it's live.
            </p>
            <p style={{ color: "var(--ink-soft)", fontSize: 12, lineHeight: 1.55, maxWidth: 420, margin: "0 auto 22px" }}>
              Want lead notifications, a verified ✓ badge, and a directory profile
              that's searchable by lane + equipment? Check out our $99/mo carrier
              subscription on this same page.
            </p>
            <button onClick={onClose}
                    style={{ background: "#0a1224", color: "#fff", border: "none",
                             padding: "10px 22px", borderRadius: 6, fontWeight: 700,
                             fontSize: 14, cursor: "pointer" }}>
              Close
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={overlay} onClick={onClose}>
      <div style={sheet} onClick={(e) => e.stopPropagation()}>
        <div style={head}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.16em",
                          textTransform: "uppercase", color: "#0a3a8a", fontWeight: 700 }}>
              📍 Free · join the network map
            </div>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, fontWeight: 700, marginTop: 2 }}>
              Add your fleet to our public map
            </div>
          </div>
          <button onClick={onClose}
                  style={{ background: "transparent", border: "none", fontSize: 22,
                           cursor: "pointer", color: "var(--ink-soft)", padding: 4 }}>
            ×
          </button>
        </div>
        <form onSubmit={submit} style={{ padding: "20px 22px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 10, marginBottom: 12 }}>
            <div>
              <label style={lbl}>Company name *</label>
              <input style={inp} required value={companyName} onChange={(e) => setCompanyName(e.target.value)} />
            </div>
            <div>
              <label style={lbl}>USDOT</label>
              <input style={inp} value={usdot} onChange={(e) => setUsdot(e.target.value)} placeholder="e.g. 109745" />
            </div>
            <div>
              <label style={lbl}>MC #</label>
              <input style={inp} value={mc} onChange={(e) => setMc(e.target.value)} placeholder="optional" />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 10, marginBottom: 12 }}>
            <div>
              <label style={lbl}>HQ city *</label>
              <input style={inp} required value={city} onChange={(e) => setCity(e.target.value)} />
            </div>
            <div>
              <label style={lbl}>State *</label>
              <input style={inp} required maxLength={2} value={state}
                     onChange={(e) => setState(e.target.value.toUpperCase())} placeholder="TX" />
            </div>
            <div>
              <label style={lbl}>Equipment</label>
              <select style={inp} value={segment} onChange={(e) => setSegment(e.target.value)}>
                <option value="">—</option>
                <option value="reefer">Reefer</option>
                <option value="tl">Dry van</option>
                <option value="ltl">LTL</option>
                <option value="flatbed">Flatbed</option>
                <option value="tanker">Tanker</option>
                <option value="drayage">Drayage</option>
                <option value="auto-hauler">Auto hauler</option>
                <option value="parcel">Parcel</option>
                <option value="dedicated">Dedicated</option>
                <option value="mixed">Mixed</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div>
              <label style={lbl}>Fleet size</label>
              <input style={inp} type="number" min="1" value={fleetSize}
                     onChange={(e) => setFleetSize(e.target.value)} placeholder="trucks" />
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 12 }}>
            <div>
              <label style={lbl}>Your name</label>
              <input style={inp} value={contactName} onChange={(e) => setContactName(e.target.value)} />
            </div>
            <div>
              <label style={lbl}>Email *</label>
              <input style={inp} required type="email" value={contactEmail}
                     onChange={(e) => setContactEmail(e.target.value)} />
            </div>
            <div>
              <label style={lbl}>Phone</label>
              <input style={inp} type="tel" value={contactPhone}
                     onChange={(e) => setContactPhone(e.target.value)} />
            </div>
          </div>

          <div style={{ marginBottom: 14 }}>
            <label style={lbl}>Anything we should know? (optional)</label>
            <textarea style={{ ...inp, minHeight: 60, resize: "vertical" }}
                      value={message} onChange={(e) => setMessage(e.target.value)}
                      placeholder="Lanes you run, certifications, anything else…" />
          </div>

          {error && (
            <div style={{ background: "rgba(232,90,90,0.10)", border: "1px solid rgba(232,90,90,0.40)",
                          color: "#a02323", padding: "8px 12px", borderRadius: 6, fontSize: 13,
                          marginBottom: 12 }}>
              {error}
            </div>
          )}

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                        gap: 12, paddingTop: 6 }}>
            <span style={{ fontSize: 11, color: "var(--ink-soft)", lineHeight: 1.5, maxWidth: 320 }}>
              We verify against the federal carrier registry before publishing. Free; no commission.
            </span>
            <button type="submit" disabled={submitting}
                    style={{ background: submitting ? "#5b6478" : "oklch(0.50 0.18 165)",
                             color: "#fff", border: "none", padding: "10px 22px", borderRadius: 6,
                             fontWeight: 700, fontSize: 14, cursor: submitting ? "default" : "pointer",
                             whiteSpace: "nowrap" }}>
              {submitting ? "Submitting…" : "📍 Submit pin →"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// =============================================================================
// FC STEP SIGN — three different freight road signs for the "Three steps"
// section. Mile marker (start), exit sign (middle/destination), and an
// arrival/destination sign (handshake). Same playful pattern as the home
// page step icons but colored to fit the green For Carriers palette.
// =============================================================================

function FCStepSign({ kind, n }) {
  return (
    <div style={{
      width: 78, height: 96, marginBottom: 14,
      display: "flex", alignItems: "center", justifyContent: "center",
      filter: "drop-shadow(0 4px 8px rgba(15,23,42,0.12))",
    }}>
      {kind === "mile" && (
        // Highway-style mile marker — green pentagon with "MILE" + number.
        <svg viewBox="0 0 78 96" width="78" height="96">
          <path d="M6 8 H72 V62 L39 88 L6 62 Z"
                fill="oklch(0.45 0.16 145)" stroke="oklch(0.30 0.14 145)" strokeWidth="2" />
          <text x="39" y="30" textAnchor="middle" fill="#fff"
                fontFamily="Helvetica, Arial, sans-serif"
                fontSize="11" fontWeight="700" letterSpacing="0.18em">MILE</text>
          <text x="39" y="64" textAnchor="middle" fill="#fff"
                fontFamily="var(--font-serif, Georgia, serif)"
                fontSize="34" fontWeight="800" letterSpacing="-0.03em">{n}</text>
        </svg>
      )}
      {kind === "exit" && (
        // Highway exit sign — yellow EXIT tab + green field with number.
        <svg viewBox="0 0 78 96" width="78" height="96">
          <rect x="2" y="22" width="74" height="68" rx="6"
                fill="oklch(0.45 0.16 145)" stroke="oklch(0.30 0.14 145)" strokeWidth="2" />
          <rect x="14" y="6" width="50" height="22" rx="3"
                fill="#f5c945" stroke="#a17f06" strokeWidth="1.5" />
          <text x="39" y="22" textAnchor="middle" fill="#1a1a1a"
                fontFamily="Helvetica, Arial, sans-serif"
                fontSize="13" fontWeight="800" letterSpacing="0.10em">EXIT</text>
          <text x="39" y="72" textAnchor="middle" fill="#fff"
                fontFamily="var(--font-serif, Georgia, serif)"
                fontSize="38" fontWeight="800" letterSpacing="-0.03em">{n}</text>
        </svg>
      )}
      {kind === "arrive" && (
        // Arrival / destination sign — diamond shape with checkmark badge.
        // Green diamond like a "you've arrived" highway sign.
        <svg viewBox="0 0 78 96" width="78" height="96">
          <path d="M39 6 L72 48 L39 90 L6 48 Z"
                fill="oklch(0.45 0.16 145)" stroke="oklch(0.30 0.14 145)" strokeWidth="2" />
          {/* destination pin badge */}
          <circle cx="58" cy="26" r="9" fill="#f5c945" stroke="oklch(0.30 0.14 145)" strokeWidth="1.5" />
          <path d="M54 26 L57 30 L62 22" stroke="#1a1a1a" strokeWidth="2.4"
                fill="none" strokeLinecap="round" strokeLinejoin="round" />
          <text x="39" y="60" textAnchor="middle" fill="#fff"
                fontFamily="var(--font-serif, Georgia, serif)"
                fontSize="36" fontWeight="800" letterSpacing="-0.03em">{n}</text>
        </svg>
      )}
    </div>
  );
}

window.ForCarriersPage = ForCarriersPage;
