// Shippers Connect — For Shippers landing page.
//
// Pitch surface for shippers: carrier verification, rate intel,
// distress signals, direct load posting. Risk-management framing
// per Wild West thesis in brand memory.

const { useState: useStateFS, useRef: useRefFS, useEffect: useEffectFS } = React;

function ForShippersPage({ onNav }) {
  const [thanks, setThanks] = useStateFS(false);
  const formRef = useRefFS(null);

  useEffectFS(() => {
    if (window.location.hash.includes("?subscribed=1")) setThanks(true);
  }, []);

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

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

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

        /* Hero side card */
        .fs-side {
          background: linear-gradient(180deg, #fff 0%, oklch(0.99 0.015 250) 100%);
          border: 1px solid oklch(0.88 0.04 250); border-radius: 12px;
          padding: 28px; position: relative; overflow: hidden;
          border-left: 5px solid oklch(0.45 0.20 250);
          box-shadow: 0 6px 20px oklch(0.45 0.20 250 / 0.08);
        }
        .fs-side::before {
          content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
          background: linear-gradient(90deg, oklch(0.45 0.20 250), oklch(0.50 0.18 145));
        }
        .fs-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;
        }
        .fs-side-row {
          display: flex; justify-content: space-between; padding: 10px 0;
          border-bottom: 1px solid var(--rule); font-size: 14px;
        }
        .fs-side-row:last-child { border-bottom: 0; }
        .fs-side-label { color: var(--ink-soft); }
        .fs-side-val { color: var(--ink); font-weight: 600; }
        .fs-risk-tag {
          display: inline-block; font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.12em; text-transform: uppercase;
          padding: 2px 8px; border-radius: 3px; font-weight: 600;
        }
        .fs-risk-high { background: oklch(0.96 0.08 25); color: oklch(0.44 0.20 25); }
        .fs-risk-clear { background: oklch(0.94 0.06 145); color: oklch(0.36 0.14 145); }

        /* Alert/callout boxes */
        .fs-alert {
          display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
          background: oklch(0.97 0.03 25); border: 1px solid oklch(0.88 0.08 25);
          border-left: 4px solid oklch(0.55 0.20 25); border-radius: 8px;
          margin-top: 20px;
        }
        .fs-alert-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
        .fs-alert-text { font-size: 14px; line-height: 1.55; color: var(--ink); }
        .fs-alert-text strong { color: oklch(0.38 0.20 25); }

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

        /* TWO-COL content grid */
        .fs-two-col {
          display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
          margin-top: 28px; align-items: start;
        }
        @media (max-width: 800px) { .fs-two-col { grid-template-columns: 1fr; } }

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

        /* Checklist */
        .fs-checklist { list-style: none; padding: 0; margin: 20px 0 0; }
        .fs-checklist li {
          display: flex; gap: 10px; font-size: 15px; line-height: 1.5;
          padding: 8px 0; border-bottom: 1px solid var(--rule);
        }
        .fs-checklist li:last-child { border-bottom: 0; }
        .fs-check-icon { color: oklch(0.45 0.20 250); font-weight: 700; flex-shrink: 0; }

        /* Mock verification card */
        .fs-mock-card {
          background: #fff; border: 1px solid var(--rule); border-radius: 10px;
          padding: 20px 22px; box-shadow: 0 4px 16px rgba(0,0,0,0.07);
        }
        .fs-mock-carrier-name {
          font-family: var(--font-serif); font-size: 20px; letter-spacing: -0.01em;
          margin: 0 0 4px;
        }
        .fs-mock-mc {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
          color: var(--ink-soft); margin: 0 0 16px;
        }
        .fs-mock-row {
          display: flex; justify-content: space-between; padding: 8px 0;
          border-bottom: 1px solid var(--rule); font-size: 13px;
        }
        .fs-mock-row:last-child { border-bottom: 0; }
        .fs-mock-lbl { color: var(--ink-soft); }
        .fs-mock-val { font-weight: 600; color: var(--ink); }
        .fs-mock-val.good { color: oklch(0.40 0.16 145); }
        .fs-mock-val.warn { color: oklch(0.50 0.20 50); }
        .fs-mock-val.bad  { color: oklch(0.44 0.20 25); }
        .fs-mock-badge {
          display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
          padding: 8px 14px; border-radius: 6px;
          background: oklch(0.94 0.06 145); color: oklch(0.36 0.14 145);
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
          text-transform: uppercase; font-weight: 700;
        }

        /* STAT BAND */
        .fs-stat-band {
          background: linear-gradient(135deg, oklch(0.18 0.10 250) 0%, oklch(0.14 0.08 200) 100%);
          padding: 64px 24px; text-align: center;
        }
        .fs-stat-band-eyebrow {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: oklch(0.65 0.14 250); margin-bottom: 36px;
        }
        .fs-stat-tiles {
          max-width: 860px; margin: 0 auto;
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        }
        @media (max-width: 700px) { .fs-stat-tiles { grid-template-columns: 1fr; gap: 14px; } }
        .fs-stat-tile {
          background: oklch(0.18 0.08 250 / 0.45);
          border: 1px solid oklch(0.45 0.20 250 / 0.35);
          border-radius: 12px; padding: 32px 24px;
        }
        .fs-stat-num {
          font-family: var(--font-serif); font-size: 48px; font-weight: 700;
          letter-spacing: -0.02em; color: #fff; line-height: 1;
        }
        .fs-stat-label {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.20em;
          text-transform: uppercase; color: oklch(0.65 0.14 250); margin-top: 10px;
        }
        .fs-stat-cta {
          margin-top: 40px; display: inline-flex; align-items: center; gap: 8px;
          background: oklch(0.45 0.20 250); 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;
        }
        .fs-stat-cta:hover { background: oklch(0.38 0.20 250); }

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

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

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

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

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

        /* Alerts and form */
        .fs-alert { background: rgba(255,255,255,0.04); border-color: #1f2937; }
        .fs-alert-text { color: rgba(255,255,255,0.85); }

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

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

      {/* HERO */}
      <section className="fs-hero">
        <button className="fs-back" onClick={() => onNav("home")}>← Back to Shipping Clarity</button>
        <div className="fs-hero-grid">
          <div>
            <div className="fs-eyebrow"><span className="dot" /> For shippers</div>
            <h1 className="fs-h1">Is your shipment <em>really going to make it?</em></h1>
            <p className="fs-dek">
              About 20% of carriers listed on load boards don't own a truck. They
              take your freight and re-broker it to someone you've never vetted.
              Shipping Clarity cross-checks every carrier against the federal registry,
              surfaces distress signals before your load is booked, and connects you
              directly to the carriers that actually run your lane.
            </p>
            <div className="fs-cta-row">
              <button className="fs-cta fs-cta-primary" onClick={scrollToForm}>
                Get early access →
              </button>
              <button className="fs-cta fs-cta-ghost" onClick={() => onNav("rates")}>
                See lane rates
              </button>
            </div>
            <div style={{ marginTop: 16 }}>
              <span className="fs-trust">Free to start · No credit card required</span>
            </div>
          </div>
          <aside className="fs-side">
            <div className="fs-side-h">What you get</div>
            <div className="fs-side-row">
              <span className="fs-side-label">Carrier verification</span>
              <span className="fs-side-val">FMCSA + double-broker check</span>
            </div>
            <div className="fs-side-row">
              <span className="fs-side-label">Rate benchmarks</span>
              <span className="fs-side-val">Per-lane spot comparisons</span>
            </div>
            <div className="fs-side-row">
              <span className="fs-side-label">Distress alerts</span>
              <span className="fs-side-val">Bond, CSA & authority flags</span>
            </div>
            <div className="fs-side-row">
              <span className="fs-side-label">Load posting</span>
              <span className="fs-side-val">Direct to verified carriers</span>
            </div>
            <div className="fs-side-row">
              <span className="fs-side-label">Broker markup</span>
              <span className="fs-side-val">$0 — you connect direct</span>
            </div>
          </aside>
        </div>

        <div className="fs-alert">
          <span className="fs-alert-icon">⚠️</span>
          <div className="fs-alert-text">
            <strong>Double brokering now accounts for an estimated 20% of listed carriers on major load boards.</strong>{" "}
            FMCSA enforcement has loosened while the number of new MC applications has surged — the
            private market has no check system. That's what we built.
          </div>
        </div>
      </section>

      {/* STAT BAND */}
      <div className="fs-stat-band">
        <div className="fs-stat-band-eyebrow">The freight risk landscape</div>
        <div className="fs-stat-tiles">
          <div className="fs-stat-tile">
            <div className="fs-stat-num">~20%</div>
            <div className="fs-stat-label">of load-board listings show double-broker fingerprints</div>
          </div>
          <div className="fs-stat-tile">
            <div className="fs-stat-num">500k+</div>
            <div className="fs-stat-label">active carrier authorities in the FMCSA database</div>
          </div>
          <div className="fs-stat-tile">
            <div className="fs-stat-num">3 min</div>
            <div className="fs-stat-label">average time to verify a carrier before booking</div>
          </div>
        </div>
        <button className="fs-stat-cta" onClick={scrollToForm}>
          Get protected →
        </button>
      </div>

      {/* CARRIER VERIFICATION */}
      <section className="fs-section">
        <div className="fs-wrap">
          <div className="fs-section-eyebrow">Carrier verification</div>
          <h2 className="fs-section-h">Know who's <em>actually</em> moving your freight.</h2>
          <div className="fs-two-col">
            <div>
              <p className="fs-section-body">
                Before a load is tendered, Shipping Clarity runs the carrier's MC or
                USDOT against the FMCSA SAFER database. We flag authority gaps,
                inactive insurance, CSA violations above threshold, and the common
                fingerprints of double brokering — carriers with an MC number but
                no inspections, no fleet, and lanes that don't match their stated
                terminal city.
              </p>
              <ul className="fs-checklist">
                <li><span className="fs-check-icon">✓</span> Authority status &amp; operating history</li>
                <li><span className="fs-check-icon">✓</span> Insurance carrier confirmation</li>
                <li><span className="fs-check-icon">✓</span> CSA score + inspection summary</li>
                <li><span className="fs-check-icon">✓</span> Double-broker fingerprint scan</li>
                <li><span className="fs-check-icon">✓</span> Bond alert — surety cancellations flagged</li>
                <li><span className="fs-check-icon">✓</span> Verified badge visible on all reach-outs</li>
              </ul>
            </div>
            <div className="fs-mock-card">
              <div className="fs-mock-carrier-name">Granite State Transport</div>
              <div className="fs-mock-mc">MC-449231 · USDOT 1882340</div>
              <div className="fs-mock-row">
                <span className="fs-mock-lbl">Authority status</span>
                <span className="fs-mock-val good">✓ Active</span>
              </div>
              <div className="fs-mock-row">
                <span className="fs-mock-lbl">Insurance</span>
                <span className="fs-mock-val good">✓ Confirmed</span>
              </div>
              <div className="fs-mock-row">
                <span className="fs-mock-lbl">CSA percentile</span>
                <span className="fs-mock-val good">14th — low risk</span>
              </div>
              <div className="fs-mock-row">
                <span className="fs-mock-lbl">Fleet size</span>
                <span className="fs-mock-val">22 power units</span>
              </div>
              <div className="fs-mock-row">
                <span className="fs-mock-lbl">Double-broker flag</span>
                <span className="fs-mock-val good">None detected</span>
              </div>
              <div className="fs-mock-row">
                <span className="fs-mock-lbl">Surety bond</span>
                <span className="fs-mock-val good">✓ Current</span>
              </div>
              <div className="fs-mock-badge">✓ Verified carrier</div>
            </div>
          </div>
        </div>
      </section>

      {/* RATE INTEL */}
      <section className="fs-section">
        <div className="fs-wrap">
          <div className="fs-section-eyebrow">Rate intelligence</div>
          <h2 className="fs-section-h">What should you <em>actually</em> be paying?</h2>
          <p className="fs-section-body">
            Spot rates vary by lane, season, and equipment type. Shipping Clarity
            tracks reefer premiums through produce seasons, van rates on major
            corridors, and the week-over-week trend on the lanes you run most.
            Know before you negotiate — not after.
          </p>
          <div className="fs-feats">
            {[
              ["$", "Lane-level spot rates", "Van and reefer rates per mile on major US corridors, updated weekly. Filter by origin, destination, and equipment."],
              ["📈", "Seasonal reefer premiums", "Reefer rates spike when produce moves. See which lanes get expensive in which months — and plan your carrier agreements accordingly."],
              ["⚖️", "Contract vs. spot comparison", "Know when spot is cheaper than your contract rate and when to hold. Historical range gives you the floor and ceiling."],
              ["📍", "Origin market activity", "Which shipping points are actively loading? Cross-reference with rate trends to time your tenders for softer markets."],
            ].map(([icon, h, body]) => (
              <div key={h} className="fs-feat">
                <div className="fs-feat-icon">{icon}</div>
                <div>
                  <h3 className="fs-feat-h">{h}</h3>
                  <p className="fs-feat-body">{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DISTRESS SIGNALS */}
      <section className="fs-section">
        <div className="fs-wrap">
          <div className="fs-section-eyebrow">Distress signals</div>
          <h2 className="fs-section-h">Catch carrier trouble <em>before your freight moves.</em></h2>
          <p className="fs-section-body">
            A carrier that's financially stressed is a carrier that may cut corners —
            delayed maintenance, fatigued drivers, and at the extreme, a sudden
            authority revocation mid-transit. Shipping Clarity watches the federal
            data so you don't have to.
          </p>
          <div className="fs-feats">
            {[
              ["🔔", "Surety bond alerts", "BMC-84/BMC-85 cancellation filings flag carriers whose financial position is deteriorating. You see it before their next customer does."],
              ["⛔", "Authority revocations", "We track FMCSA operating-authority revocations and notify you if a carrier you've used is affected."],
              ["📉", "CSA score deterioration", "A carrier trending in the wrong direction on unsafe driving, hours-of-service, or vehicle maintenance is a risk signal. We surface the trend, not just the snapshot."],
              ["⚠️", "Civil litigation flags", "Public civil filings related to cargo loss, personal injury, or fraud show up in the carrier dossier."],
            ].map(([icon, h, body]) => (
              <div key={h} className="fs-feat">
                <div className="fs-feat-icon">{icon}</div>
                <div>
                  <h3 className="fs-feat-h">{h}</h3>
                  <p className="fs-feat-body">{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DIRECT CONNECTION */}
      <section className="fs-section">
        <div className="fs-wrap">
          <div className="fs-section-eyebrow">Direct load board</div>
          <h2 className="fs-section-h">Post to verified carriers. <em>No broker in the middle.</em></h2>
          <p className="fs-section-body">
            The Shippers Connect load board shows your loads only to carriers that
            have been verified against the federal registry. They see your lane,
            your pickup window, and your appointment status. They reach out directly.
            You talk rate, you agree, you book — no commission, no markup, no middleman.
          </p>
          <div className="fs-feats">
            {[
              ["✉", "Direct carrier reach-out", "Verified carriers see your load and message you directly. No broker relaying information and clipping the spread."],
              ["🔒", "Verified-only visibility", "Unverified carriers and double-broker flags can't see your loads. Your freight is only visible to carriers who've passed the check."],
              ["📦", "Appointment-status display", "Show your pickup window and whether an appointment slot is open. Carriers plan their next run around your dock."],
              ["📋", "Load history", "See which carriers have booked with you before, their verified scores, and any driver-sourced feedback from your facilities."],
            ].map(([icon, h, body]) => (
              <div key={h} className="fs-feat">
                <div className="fs-feat-icon">{icon}</div>
                <div>
                  <h3 className="fs-feat-h">{h}</h3>
                  <p className="fs-feat-body">{body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SIGN-UP FORM */}
      <section className="fs-section" ref={formRef}>
        <div className="fs-wrap">
          <div className="fs-section-eyebrow">Get early access</div>
          <h2 className="fs-section-h">Tell us about your shipping operation.</h2>
          <p className="fs-section-body">
            We're onboarding shippers now. Tell us your lanes and freight profile
            and we'll reach out within one business day to get you set up.
          </p>
          {thanks
            ? (
              <div className="fs-thanks">
                <div className="fs-thanks-mark">✓</div>
                <h3 className="fs-thanks-h">Got it — we'll be in touch.</h3>
                <p className="fs-thanks-body">
                  Expect an email from Kris within one business day with your
                  account setup and a walk-through of the carrier verification tools.
                </p>
              </div>
            )
            : <FSSignupForm onDone={() => setThanks(true)} />}
        </div>
      </section>

      {/* FAQ */}
      <section className="fs-section">
        <div className="fs-wrap">
          <div className="fs-section-eyebrow">Common questions</div>
          <h2 className="fs-section-h">FAQ.</h2>
          <div className="fs-faq">
            {[
              ["Is this really free to start?",
               "Yes. Basic carrier lookups, the public rate tables, and the distress-signal feed are free. The paid tier adds direct load posting, full carrier dossiers with driver-sourced feedback, and load-match email alerts. We'll walk you through pricing when we onboard you."],
              ["How do you verify carriers?",
               "We pull authority data from the FMCSA SAFER database (public federal data) and cross-reference MC numbers, operating authority status, insurance, and inspection history. Carriers with authority but no inspections, no fleet footprint, and geography mismatches get flagged for the double-broker pattern."],
              ["What is double brokering and why does it matter?",
               "Double brokering is when a carrier with no truck takes your load and quietly re-brokers it to another carrier you've never vetted. Your load is now moving on equipment that was never part of your contract. It opens liability gaps, breaks your service guarantees, and in fraud cases results in cargo theft or non-delivery."],
              ["Do you work with all freight types?",
               "Yes — dry van, reefer, flatbed, tanker, and LTL. Reefer has additional seasonal rate data and produce-calendar intel. Hazmat carriers have an additional compliance layer in the verification check."],
              ["What if I already use a 3PL or freight broker?",
               "Shipping Clarity works alongside your existing relationships. Use our verification layer to audit the carriers your broker assigns before you accept a tender. We're the independent check on the system, not a replacement for your team."],
              ["How is driver-sourced feedback used for shippers?",
               "Drivers submit tips about facilities — dock wait times, detention, restroom access. That feeds per-facility ratings on your shipper profile. If your facility has a reputation for holding drivers on detention, carriers know and price accordingly. Fixing the detention problem improves your rate, every time."],
            ].map(([q, a]) => (
              <div key={q} className="fs-faq-item">
                <h3 className="fs-faq-q">{q}</h3>
                <p className="fs-faq-a">{a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function FSSignupForm({ onDone }) {
  const [busy, setBusy] = useStateFS(false);
  const [err, setErr] = useStateFS("");
  const [data, setData] = useStateFS({
    name: "", company: "", email: "", phone: "",
    monthly_loads: "", primary_lanes: "", equipment: "", notes: "",
  });

  function set(k, v) { setData(d => ({ ...d, [k]: v })); }

  async function submit(e) {
    e.preventDefault();
    if (!data.name.trim() || !data.company.trim() || !data.email.trim()) {
      setErr("Name, company, and email are required.");
      return;
    }
    setBusy(true); setErr("");
    try {
      const SB_URL = window.SB_URL || "";
      const SB_KEY = window.SB_ANON || "";
      await fetch(`${SB_URL}/rest/v1/shipper_leads`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          apikey: SB_KEY,
          Authorization: `Bearer ${SB_KEY}`,
          Prefer: "return=minimal",
        },
        body: JSON.stringify({
          name: data.name.trim(),
          company: data.company.trim(),
          email: data.email.trim(),
          phone: data.phone.trim() || null,
          monthly_loads: data.monthly_loads.trim() || null,
          primary_lanes: data.primary_lanes.trim() || null,
          equipment: data.equipment || null,
          notes: data.notes.trim() || null,
          source: "for-shippers-page",
          submitted_at: new Date().toISOString(),
        }),
      });
      onDone();
    } catch (ex) {
      setErr("Something went wrong — email kris@shippingclarity.com directly.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="fs-form-wrap">
      <h3 className="fs-form-h">Get early access</h3>
      <p className="fs-form-sub">We onboard personally. Kris will reach out within one business day.</p>
      <form onSubmit={submit}>
        <div className="fs-form-grid">
          <div className="fs-field">
            <span>Your name *</span>
            <input value={data.name} onChange={e => set("name", e.target.value)} placeholder="Jane Smith" />
          </div>
          <div className="fs-field">
            <span>Company name *</span>
            <input value={data.company} onChange={e => set("company", e.target.value)} placeholder="Acme Foods Inc." />
          </div>
          <div className="fs-field">
            <span>Email *</span>
            <input type="email" value={data.email} onChange={e => set("email", e.target.value)} placeholder="jane@acmefoods.com" />
          </div>
          <div className="fs-field">
            <span>Phone (optional)</span>
            <input type="tel" value={data.phone} onChange={e => set("phone", e.target.value)} placeholder="(555) 000-0000" />
          </div>
          <div className="fs-field">
            <span>Monthly loads (approx.)</span>
            <select value={data.monthly_loads} onChange={e => set("monthly_loads", e.target.value)}>
              <option value="">Select range</option>
              <option value="1-10">1–10 loads</option>
              <option value="11-50">11–50 loads</option>
              <option value="51-200">51–200 loads</option>
              <option value="201-500">201–500 loads</option>
              <option value="500+">500+ loads</option>
            </select>
          </div>
          <div className="fs-field">
            <span>Primary equipment</span>
            <select value={data.equipment} onChange={e => set("equipment", e.target.value)}>
              <option value="">Select type</option>
              <option value="Dry van">Dry van</option>
              <option value="Reefer">Reefer</option>
              <option value="Flatbed">Flatbed</option>
              <option value="Mixed">Mixed equipment</option>
              <option value="LTL">LTL</option>
              <option value="Tanker">Tanker</option>
            </select>
          </div>
          <div className="fs-field fs-field-full">
            <span>Primary lanes (e.g. Chicago → Memphis, Salinas → Atlanta)</span>
            <input value={data.primary_lanes} onChange={e => set("primary_lanes", e.target.value)} placeholder="Origin → Destination, Origin → Destination" />
          </div>
          <div className="fs-field fs-field-full">
            <span>Anything else we should know?</span>
            <textarea rows={3} value={data.notes} onChange={e => set("notes", e.target.value)} placeholder="Current pain points, specific carriers you want verified, etc." style={{ resize: "vertical" }} />
          </div>
        </div>
        {err && <div className="fs-err">{err}</div>}
        <div className="fs-form-foot">
          <p className="fs-form-meta">
            No spam, no sales deck. Kris calls you himself. Unsubscribe from
            any email with one click.
          </p>
          <button className="fs-submit" type="submit" disabled={busy}>
            {busy ? "Sending…" : "Request access →"}
          </button>
        </div>
      </form>
    </div>
  );
}
