// =============================================================
// page-opportunities.jsx — what the data tells us is actionable
//
// Beyond findings, this page surfaces concrete revenue + risk
// opportunities our data has revealed. Every card maps a finding
// to a specific actor (shipper / carrier / broker) and tells them
// what to do about it.
//
// Route: /#/opportunities
// =============================================================

const { useState: useStateOp, useEffect: useEffectOp } = React;

function OpportunitiesPage({ onNav }) {
  return (
    <div className="op-page">
      <style>{`
        .op-page { background: var(--paper, #fff); min-height: 100vh; }
        .op-hero { max-width: 1180px; margin: 0 auto; padding: 64px 24px 32px; }
        .op-eyebrow {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 18px;
          display: inline-flex; align-items: center; gap: 10px;
        }
        .op-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%;
          background: oklch(0.55 0.20 60); animation: op-pulse 1.6s infinite; }
        @keyframes op-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
        .op-h1 {
          font-family: var(--font-serif); font-size: 56px; line-height: 1.04;
          letter-spacing: -0.025em; margin: 0; font-weight: 500; color: var(--ink); max-width: 920px;
        }
        @media (max-width: 700px) { .op-h1 { font-size: 36px; } }
        .op-sub { margin-top: 18px; font-size: 18px; line-height: 1.5; color: var(--ink-soft); max-width: 780px; }

        .op-section { max-width: 1180px; margin: 48px auto; padding: 0 24px; }
        .op-section-h {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: var(--ink-soft);
          padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 24px;
          display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px;
        }
        .op-section-title {
          font-family: var(--font-serif); font-size: 28px; line-height: 1.15;
          letter-spacing: -0.015em; margin: 0 0 10px; color: var(--ink); font-weight: 600;
        }
        .op-section-sub {
          color: var(--ink-soft); font-size: 15px; line-height: 1.5;
          margin: 0 0 24px; max-width: 720px;
        }

        .op-card {
          background: #fff; border: 1px solid var(--rule); border-radius: 10px;
          padding: 28px; margin-bottom: 18px; position: relative; overflow: hidden;
          display: grid; grid-template-columns: 200px 1fr 180px; gap: 28px;
          align-items: center;
        }
        @media (max-width: 880px) {
          .op-card { grid-template-columns: 1fr; gap: 16px; }
          .op-card-cta { justify-self: start !important; }
        }
        .op-card::before {
          content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px;
          background: var(--accent, var(--ink));
        }
        .op-card-num {
          font-family: var(--font-serif); font-size: 56px; line-height: 1;
          letter-spacing: -0.025em; color: var(--accent, var(--ink)); font-weight: 600;
        }
        .op-card-num-sub {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em;
          color: var(--ink-soft); text-transform: uppercase; margin-top: 6px;
        }
        .op-card-tag {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--accent, var(--ink-soft));
          font-weight: 700; margin-bottom: 8px;
        }
        .op-card-h {
          font-family: var(--font-serif); font-size: 22px; line-height: 1.25;
          letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink);
        }
        .op-card-body {
          color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0;
        }
        .op-card-body strong { color: var(--ink); }
        .op-card-cta {
          display: inline-flex; align-items: center; gap: 6px;
          font: inherit; font-size: 13px; padding: 12px 18px;
          background: var(--ink); color: #fff; border: none; border-radius: 6px;
          cursor: pointer; font-weight: 600; letter-spacing: 0.02em;
          justify-self: end;
        }
        .op-card-cta:hover { opacity: 0.9; }
      `}</style>

      <section className="op-hero">
        <div className="op-eyebrow"><span className="dot" /> Opportunities · live data</div>
        <h1 className="op-h1">What our data tells us is actionable.</h1>
        <p className="op-sub">
          Findings are interesting; opportunities pay. Every card below maps a
          specific data finding from this week's pipeline runs to a concrete
          action a shipper, carrier, or broker can take. Click into any of
          them to see the supporting data.
        </p>
      </section>

      {/* CARRIER OPPORTUNITIES */}
      <section className="op-section">
        <div className="op-section-h">
          <span>For carriers</span>
          <span style={{fontSize:10, letterSpacing:"0.16em"}}>Revenue maximization</span>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.55 0.20 25)" }}>
          <div>
            <div className="op-card-num">+$1,311</div>
            <div className="op-card-num-sub">per truck saved</div>
          </div>
          <div>
            <div className="op-card-tag">Backhaul matching</div>
            <h3 className="op-card-h">Stop running empty back from Dallas.</h3>
            <p className="op-card-body">
              <strong>LA→Dallas headhaul: $2.64/mi.</strong> Dallas→LA backhaul: <strong>$1.73/mi (−34%).</strong> Carriers running this round-trip and dispatching Dallas→LA empty are leaving $1,311 per truck on the table. Pair with a Dallas-origin headhaul shipper through our Connection Board to cover the return.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("rates")}>See the asymmetry</button>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.50 0.18 145)" }}>
          <div>
            <div className="op-card-num">+51%</div>
            <div className="op-card-num-sub">reefer premium</div>
          </div>
          <div>
            <div className="op-card-tag">Equipment arbitrage</div>
            <h3 className="op-card-h">Switch to reefer on the same lanes you already run.</h3>
            <p className="op-card-body">
              <strong>Salinas→Chicago dry van: $1.95/mi.</strong> Same lane in reefer: <strong>$2.95/mi.</strong> McAllen→Atlanta reefer at <strong>$4.41/mi (+43% vs van).</strong> If you have or can convert capacity to refrigerated, the cold-chain premium pays for the conversion in a quarter or two.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("rates")}>See reefer rates</button>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.50 0.22 25)" }}>
          <div>
            <div className="op-card-num">$4.06</div>
            <div className="op-card-num-sub">/mi · Chicago→Detroit</div>
          </div>
          <div>
            <div className="op-card-tag">Hot-corridor capacity</div>
            <h3 className="op-card-h">The auto industry is paying premium for capacity into Detroit.</h3>
            <p className="op-card-body">
              <strong>1,303 similar loads available, $4.06/mi rate, 71% above the dry-van national median.</strong> A Midwest dispatcher who can position trucks Chicago-side picks up the highest-paying short-haul corridor in our dataset. Sustain it through the auto-quarter cycle.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("rates")}>Map the corridor</button>
        </div>
      </section>

      {/* SHIPPER OPPORTUNITIES */}
      <section className="op-section">
        <div className="op-section-h">
          <span>For shippers</span>
          <span style={{fontSize:10, letterSpacing:"0.16em"}}>Cost containment + diversification</span>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.45 0.22 60)" }}>
          <div>
            <div className="op-card-num">8</div>
            <div className="op-card-num-sub">CPG cos · Walmart at top</div>
          </div>
          <div>
            <div className="op-card-tag">Concentration risk · diversification</div>
            <h3 className="op-card-h">Your competitors all depend on Walmart. Be the one that doesn't.</h3>
            <p className="op-card-body">
              <strong>Tyson 18.7%, General Mills 22%, Kraft Heinz 21%, P&G 16%, Kimberly-Clark 16%, Hormel 15.6%, Colgate 11%, PepsiCo 14%</strong> — these are the public-record disclosures. If you're a CPG, your concentration risk is identical to your competitors'. Your investors notice. Diversifying to Target / Costco / Kroger / regional grocers reduces single-customer exposure.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("shippers")}>See the directory</button>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.40 0.16 250)" }}>
          <div>
            <div className="op-card-num">?</div>
            <div className="op-card-num-sub">verify before you tender</div>
          </div>
          <div>
            <div className="op-card-tag">Risk mitigation · cargo + chain-of-custody</div>
            <h3 className="op-card-h">How do you know the carrier you're booking is actually legal?</h3>
            <p className="op-card-body">
              Lapsed MC. No MC at all. Broker-only operations posting trucks they don't own. When a load is re-tendered through an unauthorized chain, your insurance can deny the claim because the chain-of-custody is broken. We run the federal carrier-registry check before you tender — free on the directory, real-time API on the broker tier.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("find-carrier")}>Verify a carrier</button>
        </div>
      </section>

      {/* BROKER OPPORTUNITIES */}
      <section className="op-section">
        <div className="op-section-h">
          <span>For brokers</span>
          <span style={{fontSize:10, letterSpacing:"0.16em"}}>Margin + risk + customer pipeline</span>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.50 0.20 250)" }}>
          <div>
            <div className="op-card-num">19</div>
            <div className="op-card-num-sub">customers in distress</div>
          </div>
          <div>
            <div className="op-card-tag">Customer pipeline · Hub Group exposure</div>
            <h3 className="op-card-h">Hub Group's customer book has 19+ names with public distress signals.</h3>
            <p className="op-card-body">
              <strong>13 customers already in Chapter 11 since March 2024</strong> (JOANN, Red Lobster Supply, True Value, Franchise Group, At Home, STG Logistics, +7 others) per Hub's own 10-K. <strong>Plus 6 likely top-10 customers with material 8-K filings in last 6 months</strong> — Kroger, Lamb Weston, Hormel, Owens Corning, Ford, Packaging Corp. Hub Group's intermodal customer base is reshuffling. Brokers who pitch Hub's customers right now find them more responsive than usual.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("insights")}>Read the investigation</button>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.50 0.22 25)" }}>
          <div>
            <div className="op-card-num">25%</div>
            <div className="op-card-num-sub">Chicago metro carrier density</div>
          </div>
          <div>
            <div className="op-card-tag">Recruiting territory</div>
            <h3 className="op-card-h">A quarter of DAT-active carriers HQ in greater Chicago.</h3>
            <p className="op-card-body">
              <strong>~38 of 150 sampled carriers are in Chicago, Elgin, Darien, Willowbrook, Joliet, Bensenville, Schaumburg, Burr Ridge, Wheeling, Hoffman Estates, Grayslake, Elk Grove Village.</strong> If you're staffing a brokerage or expanding capacity, the densest hiring + partnership pool in the country is in the Chicago suburbs. Visualized on the carrier-HQ map.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("find-carrier")}>See carrier map</button>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.55 0.18 145)" }}>
          <div>
            <div className="op-card-num">11%</div>
            <div className="op-card-num-sub">Werner · Dollar General</div>
          </div>
          <div>
            <div className="op-card-tag">Single-customer exposure</div>
            <h3 className="op-card-h">Werner discloses 11% revenue concentration in Dollar General.</h3>
            <p className="op-card-body">
              <strong>Werner's 10-K names Dollar General as their largest customer at 11% of revenue, three years running (2023, 2024, 2025).</strong> Dollar General has had multiple negative quarters and an SEC inquiry into store conditions. If Werner loses this account, that's an immediate 11% revenue hole — and a capacity gap brokers can fill. Werner's overflow is your opportunity.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("shippers")}>Browse carriers</button>
        </div>
      </section>

      {/* MARKET-LEVEL OPPORTUNITIES */}
      <section className="op-section">
        <div className="op-section-h">
          <span>Market-level</span>
          <span style={{fontSize:10, letterSpacing:"0.16em"}}>Strategic positioning</span>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.45 0.20 25)" }}>
          <div>
            <div className="op-card-num">$5,014</div>
            <div className="op-card-num-sub">McAllen→Atlanta · reefer</div>
          </div>
          <div>
            <div className="op-card-tag">Seasonal capacity · produce season opens</div>
            <h3 className="op-card-h">Texas-Mexico produce season just opened at premium reefer rates.</h3>
            <p className="op-card-body">
              <strong>$4.41/mi reefer May 1 — the highest captured rate in our dataset.</strong> Mexico-Texas produce flows from McAllen ramp through May-September. Carriers + brokers who position reefer capacity in the Rio Grande Valley + South Texas right now ride the seasonal premium for 4 months. Lakeland, FL produce season runs in parallel for citrus + strawberries at $2.39/mi reefer.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("rates")}>See the food lanes</button>
        </div>

        <div className="op-card" style={{ ["--accent"]: "oklch(0.40 0.18 145)" }}>
          <div>
            <div className="op-card-num">8,299</div>
            <div className="op-card-num-sub">food shippers tagged</div>
          </div>
          <div>
            <div className="op-card-tag">Sales TAM · small-food-shipper play</div>
            <h3 className="op-card-h">8,300 small food shippers in our directory who don't have logistics teams.</h3>
            <p className="op-card-body">
              <strong>10,000 craft breweries, regional dairies, frozen-food specialists, candy makers, sauce/spice/condiment producers, ethnic-food brands.</strong> They feel every bad delivery, they don't have logistics departments, they're the perfect ICP for the $499 Risk Report and $99/mo verification API. Filter the directory by "Food" and start the prospect list.
            </p>
          </div>
          <button className="op-card-cta" onClick={() => onNav("shippers")}>Filter to food</button>
        </div>
      </section>

      <div style={{ height: 64 }} />
    </div>
  );
}

window.OpportunitiesPage = OpportunitiesPage;