// Shared UI components for Shippers Connect

const { useState, useEffect, useRef, useMemo } = React;

// =============================================================
// LOGO — Radar mark + Shipping[italic Clarity] wordmark
// =============================================================
function SILogo({ size = 28, mono = false }) {
  const ink = mono ? "currentColor" : "var(--ink)";
  const accent = mono ? "currentColor" : "var(--red)";
  // unique gradient id so multiple logos on the page don't collide
  const sweepId = useMemo(() => `si-sweep-${Math.random().toString(36).slice(2, 9)}`, []);
  const markSize = size * 1.32;
  const wordSize = size * 0.78 * 1.32;
  return (
    <div className="si-logo" style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <svg width={markSize} height={markSize} viewBox="0 0 64 64" fill="none" aria-hidden="true">
        <defs>
          <linearGradient id={sweepId} x1="32" y1="32" x2="56" y2="14" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor={accent} stopOpacity="0.55" />
            <stop offset="100%" stopColor={accent} stopOpacity="0" />
          </linearGradient>
        </defs>
        {/* polar grid */}
        <circle cx="32" cy="32" r="26" stroke={ink} strokeWidth="1.6" fill="none" />
        <circle cx="32" cy="32" r="17" stroke={ink} strokeWidth="1" opacity="0.3" fill="none" />
        <circle cx="32" cy="32" r="8" stroke={ink} strokeWidth="1" opacity="0.3" fill="none" />
        <line x1="6" y1="32" x2="58" y2="32" stroke={ink} strokeWidth="1" opacity="0.25" />
        <line x1="32" y1="6" x2="32" y2="58" stroke={ink} strokeWidth="1" opacity="0.25" />
        {/* sweep wedge */}
        <path d="M 32 32 L 32 6 A 26 26 0 0 1 54.51 19 Z" fill={`url(#${sweepId})`} />
        {/* sweep leading edge */}
        <line x1="32" y1="32" x2="54.51" y2="19" stroke={accent} strokeWidth="2.2" strokeLinecap="round" />
        {/* pings */}
        <circle cx="44" cy="22" r="2" fill={accent} />
        <circle cx="20" cy="40" r="1.6" fill={ink} opacity="0.55" />
        <circle cx="42" cy="46" r="1.6" fill={ink} opacity="0.55" />
        {/* center dot */}
        <circle cx="32" cy="32" r="1.8" fill={ink} />
      </svg>
      <span className="si-wordmark" style={{ fontFamily: "var(--font-serif)", fontSize: wordSize, lineHeight: 1, letterSpacing: "0.01em", color: ink, fontWeight: 700 }}>
        Shipping<span style={{ fontStyle: "italic", color: accent, letterSpacing: "0.03em", marginLeft: "0.06em", fontWeight: 700 }}>Clarity</span>
      </span>
    </div>
  );
}

// =============================================================
// CIRCLE SCORE — Rotten-Tomatoes-style 0-100 with letter grade
// =============================================================
function CircleScore({ score, size = 120, animate = true, showLetter = true }) {
  const [displayScore, setDisplayScore] = useState(animate ? 0 : score);
  const radius = size * 0.42;
  const circumference = 2 * Math.PI * radius;

  useEffect(() => {
    if (!animate) { setDisplayScore(score); return; }
    let frame;
    const start = performance.now();
    const duration = 900;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setDisplayScore(Math.round(score * eased));
      if (t < 1) frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [score, animate]);

  const tier = window.SI_DATA.scoreToTier(score);
  const letter = window.SI_DATA.scoreToLetter(score);
  const offset = circumference - (displayScore / 100) * circumference;

  // Color by tier
  let strokeColor = "var(--ink)";
  if (score >= 85) strokeColor = "var(--green)";
  else if (score >= 70) strokeColor = "var(--ink)";
  else if (score >= 55) strokeColor = "var(--amber)";
  else strokeColor = "var(--red)";

  return (
    <div className="circle-score" style={{ width: size, height: size, position: "relative" }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size/2} cy={size/2} r={radius} fill="none" stroke="var(--rule-soft)" strokeWidth={size*0.06} />
        <circle cx={size/2} cy={size/2} r={radius} fill="none" stroke={strokeColor}
          strokeWidth={size*0.06} strokeDasharray={circumference} strokeDashoffset={offset}
          strokeLinecap="round" style={{ transition: animate ? "stroke-dashoffset 0.05s linear" : "none" }} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", lineHeight: 1 }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: size * 0.34, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.02em" }}>
          {displayScore}
        </div>
        {showLetter && (
          <div style={{ fontFamily: "var(--font-serif)", fontSize: size * 0.18, color: strokeColor, marginTop: size * 0.04, fontStyle: "italic" }}>
            {letter}
          </div>
        )}
      </div>
    </div>
  );
}

// =============================================================
// LETTER BADGE — compact letter-only grade pill
// =============================================================
function LetterBadge({ score, size = "md" }) {
  const letter = window.SI_DATA.scoreToLetter(score);
  let bg = "var(--ink)";
  let fg = "var(--paper)";
  if (score >= 85) { bg = "var(--green)"; }
  else if (score >= 70) { bg = "var(--ink)"; }
  else if (score >= 55) { bg = "var(--amber)"; fg = "var(--ink)"; }
  else { bg = "var(--red)"; }
  const sizes = {
    sm: { fs: 13, p: "2px 8px", w: 32 },
    md: { fs: 16, p: "4px 10px", w: 42 },
    lg: { fs: 22, p: "6px 14px", w: 58 },
    xl: { fs: 36, p: "10px 22px", w: 92 },
  };
  const s = sizes[size] || sizes.md;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      background: bg, color: fg, fontFamily: "var(--font-serif)", fontStyle: "italic",
      fontSize: s.fs, fontWeight: 400, padding: s.p, minWidth: s.w,
      borderRadius: 4, letterSpacing: "-0.02em", lineHeight: 1.1,
    }}>
      {letter}
    </span>
  );
}

// =============================================================
// METRIC BAR — horizontal score bar
// =============================================================
function MetricBar({ label, score, animate = true, delay = 0 }) {
  const hasData = score > 0;
  const [w, setW] = useState(animate ? 0 : (hasData ? score : 0));
  useEffect(() => {
    if (!hasData) { setW(0); return; }
    if (!animate) { setW(score); return; }
    const t = setTimeout(() => setW(score), 80 + delay);
    return () => clearTimeout(t);
  }, [score, animate, delay, hasData]);

  let color = "var(--ink)";
  if (score >= 85) color = "var(--green)";
  else if (score >= 55) color = "var(--ink)";
  else color = "var(--red)";

  return (
    <div className="metric-bar">
      <div className="metric-bar-row">
        <span className="metric-bar-label">{label}</span>
        <span className="metric-bar-score" style={{ color: hasData ? color : "var(--ink-faint)" }}>
          {hasData ? score : "—"}
        </span>
      </div>
      <div className="metric-bar-track">
        <div className="metric-bar-fill" style={{ width: `${w}%`, background: color, transition: "width 900ms cubic-bezier(0.16, 1, 0.3, 1)" }} />
      </div>
    </div>
  );
}

// =============================================================
// SPONSORED TAG
// =============================================================
function SponsoredTag() {
  return <span className="sponsored-tag">Sponsored</span>;
}

// =============================================================
// TREND ARROW
// =============================================================
function TrendArrow({ trend }) {
  if (trend === 0) return <span style={{ color: "var(--ink-soft)", fontFamily: "var(--font-mono)", fontSize: 12 }}>—</span>;
  const up = trend > 0;
  return (
    <span style={{
      color: up ? "var(--green)" : "var(--red)",
      fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500,
      display: "inline-flex", alignItems: "center", gap: 2,
    }}>
      {up ? "▲" : "▼"} {Math.abs(trend)}
    </span>
  );
}

// =============================================================
// UNIVERSAL SEARCH — site-wide entity lookup, dropped into the Header
// so every page has the same single search verb. Queries shippers,
// carriers, metros, and articles concurrently with a debounced fetch
// and routes to the entity page on click.
// =============================================================
function UniversalSearch({ onNav }) {
  const [q, setQ] = useState("");
  const [hits, setHits] = useState({ shippers: [], carriers: [], cities: [], articles: [] });
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    const term = q.trim();
    if (term.length < 2) { setHits({ shippers: [], carriers: [], cities: [], articles: [] }); return; }
    let alive = true;
    const t = setTimeout(async () => {
      const enc = encodeURIComponent(term);
      const ALL = (window.SI_DATA && window.SI_DATA.ALL_CITIES) || [];
      const ARTS = window.INSIGHTS_ARTICLES || [];
      // Cities: fast client-side filter
      const lower = term.toLowerCase();
      const cityHits = ALL.filter(c => c.name.toLowerCase().includes(lower)).slice(0, 4);
      const articleHits = ARTS.filter(a =>
        (a.title || "").toLowerCase().includes(lower) ||
        (a.dek || a.excerpt || "").toLowerCase().includes(lower)
      ).slice(0, 3);
      // Network calls only fire when SI_DB is wired (signed-in or anon-readable)
      let shipperHits = [], carrierHits = [];
      if (window.SI_DB && window.SI_DB.raw) {
        try {
          const [sh, ca] = await Promise.all([
            window.SI_DB.raw.select(
              "shippers",
              `select=canonical_name,slug,size_band&canonical_name=ilike.*${enc}*&limit=6`
            ).catch(() => []),
            window.SI_DB.raw.select(
              "entities",
              `select=name,slug&type=eq.carrier&name=ilike.*${enc}*&limit=4`
            ).catch(() => []),
          ]);
          shipperHits = Array.isArray(sh) ? sh : [];
          carrierHits = Array.isArray(ca) ? ca : [];
        } catch {}
      }
      if (!alive) return;
      setHits({ shippers: shipperHits, carriers: carrierHits, cities: cityHits, articles: articleHits });
    }, 220);
    return () => { alive = false; clearTimeout(t); };
  }, [q]);

  const total = hits.shippers.length + hits.carriers.length + hits.cities.length + hits.articles.length;
  const showDropdown = active && q.trim().length >= 2;

  function go(hash) {
    window.location.hash = hash;
    setQ(""); setActive(false); setOpen(false);
    if (inputRef.current) inputRef.current.blur();
  }

  return (
    <div className="si-search" style={{ position: "relative" }}>
      <input
        ref={inputRef}
        type="search"
        placeholder="Search shippers, carriers, metros, articles…"
        value={q}
        onChange={e => setQ(e.target.value)}
        onKeyDown={e => {
          if (e.key !== 'Enter') return;
          e.preventDefault();
          if (hits.shippers[0])     { go(`#/shipper/${hits.shippers[0].slug}`); return; }
          if (hits.carriers[0])     { go(`#/carrier/${hits.carriers[0].slug}`); return; }
          if (hits.cities[0])       { go(`#/report/${hits.cities[0].id}`);      return; }
          if (hits.articles[0])     { go(hits.articles[0].slug ? `#/insights/${hits.articles[0].slug}` : '#/insights'); return; }
          if (q.trim().length >= 2) { go('#/shippers'); }
        }}
        onFocus={() => setActive(true)}
        onBlur={() => setTimeout(() => setActive(false), 180)}
        className="si-search-input"
      />
      {showDropdown && (
        <div className="si-search-dropdown">
          {total === 0 ? (
            <div className="si-search-empty">No matches yet — try a shipper name, carrier, or city.</div>
          ) : (
            <>
              {hits.shippers.length > 0 && (
                <div className="si-search-group">
                  <div className="si-search-grouph">Shippers</div>
                  {hits.shippers.map(s => (
                    <button key={s.slug} className="si-search-row" onMouseDown={() => go(`#/shipper/${s.slug}`)}>
                      <span className="r-name">{s.canonical_name}</span>
                      {s.size_band && s.size_band !== "unknown" && <span className="r-meta">{s.size_band}</span>}
                    </button>
                  ))}
                </div>
              )}
              {hits.carriers.length > 0 && (
                <div className="si-search-group">
                  <div className="si-search-grouph">Carriers</div>
                  {hits.carriers.map(c => (
                    <button key={c.slug} className="si-search-row" onMouseDown={() => go(`#/carrier/${c.slug}`)}>
                      <span className="r-name">{c.name}</span>
                      <span className="r-meta">Carrier</span>
                    </button>
                  ))}
                </div>
              )}
              {hits.cities.length > 0 && (
                <div className="si-search-group">
                  <div className="si-search-grouph">Metros</div>
                  {hits.cities.map(c => (
                    <button key={c.id} className="si-search-row" onMouseDown={() => go(`#/report/${c.id}`)}>
                      <span className="r-name">{c.name}, {c.state}</span>
                      <span className="r-meta">{c.pop || "Metro"}</span>
                    </button>
                  ))}
                </div>
              )}
              {hits.articles.length > 0 && (
                <div className="si-search-group">
                  <div className="si-search-grouph">Articles</div>
                  {hits.articles.map((a, i) => (
                    <button key={a.slug || i} className="si-search-row"
                      onMouseDown={() => go(a.slug ? `#/insights/${a.slug}` : "#/insights")}>
                      <span className="r-name">{a.title}</span>
                      <span className="r-meta">{a.tag || a.category || "Article"}</span>
                    </button>
                  ))}
                </div>
              )}
            </>
          )}
        </div>
      )}
    </div>
  );
}

// =============================================================
// HEADER / NAV
// =============================================================
function Header({ currentPage, onNav }) {
  const links = [
    { id: "home", label: "Home" },
    { id: "wms-software", label: "Software" },
    { id: "wizard", label: "Wizard" },
    { id: "shippers-connect", label: "Load Board" },
    { id: "for-shippers", label: "Shippers" },
    { id: "for-carriers", label: "Carriers" },
    { id: "drivers", label: "Drivers" },
    { id: "shippers", label: "Directory" },
    { id: "top100", label: "Top 100" },
    { id: "rates", label: "Rates" },
    { id: "reefer", label: <span style={{ display: "inline-block", lineHeight: 1.05, textAlign: "center" }}>Reefer<br/>Rates</span> },
    { id: "tools", label: "Tools" },
    { id: "find-carrier", label: "Verify Carrier" },
    { id: "opportunities", label: "Opportunities" },
    { id: "report", label: "Reports" },
    { id: "clarity", label: "Pulse" },
    { id: "insights", label: "Stories" },
    { id: "videos", label: "Videos" },
  ];
  // Cheap session check — readSession is sync localStorage; safe to call on every render.
  const session = (window.SI_DB && window.SI_DB.auth) ? window.SI_DB.auth.readSession() : null;
  const signedIn = !!session;
  return (
    <header className="si-header">
      <div className="si-header-top">
        <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }} style={{ textDecoration: "none" }}>
          <SILogo size={41} />
        </a>
        <div className="si-header-actions">
          <UniversalSearch onNav={onNav} />
          {signedIn ? (
            <button className="btn-ghost" onClick={() => onNav("account")}>Account</button>
          ) : (
            <button className="btn-ghost" onClick={() => onNav("signin")}>Sign in</button>
          )}
          <button className="btn-primary" onClick={() => onNav("members")}>List your company</button>
        </div>
      </div>
      <nav className="si-nav-row">
        <div className="si-nav-row-inner">
          {links.map((l) => (
            <a key={l.id} href="#"
              className={currentPage === l.id ? "si-nav-link active" : "si-nav-link"}
              onClick={(e) => { e.preventDefault(); onNav(l.id); }}
            >{l.label}</a>
          ))}
        </div>
      </nav>
    </header>
  );
}

// =============================================================
// FOOTER
// =============================================================
function Footer({ onNav }) {
  return (
    <footer className="si-footer">
      <div className="si-footer-inner">
        <div className="si-footer-brand">
          <SILogo size={29} />
          <p className="si-footer-tag">Independent freight intelligence. The data drivers know — plus the Shippers Connect load board where shippers and carriers meet direct.</p>
          <p className="si-footer-meta">© 2026 Shipping Clarity</p>
        </div>
        <div className="si-footer-cols">
          <div>
            <div className="si-footer-h">Reports</div>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("report"); }}>City rankings</a>
            <a href="#/top100" onClick={(e) => { e.preventDefault(); onNav("top100"); }}>Carrier profiles</a>
            <a href="#/methodology" onClick={(e) => { e.preventDefault(); onNav("methodology"); }}>Methodology</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("insights"); }}>Quarterly trends</a>
            <a href="#/videos" onClick={(e) => { e.preventDefault(); onNav("videos"); }}>Video library</a>
          </div>
          <div>
            <div className="si-footer-h">Data</div>
            <a href="#/rates" onClick={(e) => { e.preventDefault(); onNav("rates"); }}>Lane rates</a>
            <a href="#/reefer" onClick={(e) => { e.preventDefault(); onNav("reefer"); }}>Produce calendar</a>
            <a href="#/tools" onClick={(e) => { e.preventDefault(); onNav("tools"); }}>Rate calculators</a>
            <a href="#/find-carrier" onClick={(e) => { e.preventDefault(); onNav("find-carrier"); }}>Verify a carrier</a>
            <a href="#/shippers" onClick={(e) => { e.preventDefault(); onNav("shippers"); }}>Shipper directory</a>
            <a href="#/opportunities" onClick={(e) => { e.preventDefault(); onNav("opportunities"); }}>Opportunities</a>
            <a href="#/risk-report" onClick={(e) => { e.preventDefault(); onNav("risk-report"); }}>Carrier Risk Report</a>
          </div>
          <div>
            <div className="si-footer-h">Carriers</div>
            <a href="#/for-carriers" onClick={(e) => { e.preventDefault(); onNav("for-carriers"); }}>Claim your profile</a>
            <a href="#/for-carriers" onClick={(e) => { e.preventDefault(); onNav("for-carriers"); }}>List your company</a>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("members"); }}>Advertise</a>
            <a href="mailto:hello@shippingclarity.com?subject=Data%20partnership">Data partnerships</a>
          </div>
          <div>
            <div className="si-footer-h">Shippers</div>
            <a href="#/for-shippers" onClick={(e) => { e.preventDefault(); onNav("for-shippers"); }}>How it works</a>
            <a href="#/for-shippers" onClick={(e) => { e.preventDefault(); onNav("for-shippers"); }}>Verify a carrier</a>
            <a href="#/for-shippers" onClick={(e) => { e.preventDefault(); onNav("for-shippers"); }}>Post a load</a>
            <a href="#/for-shippers" onClick={(e) => { e.preventDefault(); onNav("for-shippers"); }}>Get early access</a>
          </div>
          <div>
            <div className="si-footer-h">Company</div>
            <a href="#/about" onClick={(e) => { e.preventDefault(); onNav("about"); }}>About</a>
            <a href="mailto:press@shippingclarity.com">Press</a>
            <a href="#/about" onClick={(e) => { e.preventDefault(); onNav("about"); }}>Contact</a>
            <a href="#/privacy" onClick={(e) => { e.preventDefault(); onNav("privacy"); }}>Privacy</a>
            <a href="#/terms" onClick={(e) => { e.preventDefault(); onNav("terms"); }}>Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// =============================================================
// DRIVER REPORT — composite driver score, fleet stats, sentiment, quotes
// =============================================================
function DriverReport({ carrierId, carrierName }) {
  const reports = window.SI_DATA.DRIVER_REPORTS || {};
  const r = reports[carrierId] || reports._default;
  const tier = window.SI_DATA.scoreToTier(r.score);

  return (
    <div className="dr-section">
      <div className="dr-header">
        <div>
          <div className="section-eyebrow">Drivers behind the wheel</div>
          <h2 className="section-title">Who's actually delivering for {carrierName}.</h2>
          <p className="dr-sub">
            A composite of driver tenure, retention, training, sentiment, and complaint patterns —
            graded the same way as everything else on this page.
          </p>
        </div>
        <div className="dr-score-card">
          <div className="dr-score-num">{r.score}</div>
          <div className="dr-score-meta">
            <div className="dr-score-tier" style={{ color: tier.color }}>
              {tier.icon} {tier.label}
            </div>
            <div className="dr-score-trend">
              <TrendArrow trend={r.trend} /> {r.trend === 0 ? "flat" : `${r.trend > 0 ? "+" : ""}${r.trend} QoQ`}
            </div>
          </div>
          <LetterBadge score={r.score} size="sm" />
        </div>
      </div>

      <div className="dr-grid">
        <div className="dr-stat">
          <div className="dr-stat-l">Active drivers (LA)</div>
          <div className="dr-stat-num">{r.fleet.drivers}</div>
        </div>
        <div className="dr-stat">
          <div className="dr-stat-l">Avg tenure</div>
          <div className="dr-stat-num">{r.fleet.avgTenure}</div>
        </div>
        <div className="dr-stat">
          <div className="dr-stat-l">Annual retention</div>
          <div className="dr-stat-num">{r.fleet.retention}</div>
        </div>
        <div className="dr-stat">
          <div className="dr-stat-l">Employee / contractor</div>
          <div className="dr-mix">
            <div className="dr-mix-bar">
              <span className="dr-mix-emp" style={{ width: `${r.fleet.employee}%` }} />
            </div>
            <div className="dr-mix-legend">
              <span><i className="dot dot-emp" />Employee {r.fleet.employee}%</span>
              <span><i className="dot dot-con" />Contractor {r.fleet.contractor}%</span>
            </div>
          </div>
        </div>
      </div>

      <div className="dr-row">
        <div className="dr-card">
          <div className="dr-card-l">Driver sentiment</div>
          <div className="dr-sent-bar">
            <span className="seg seg-pos" style={{ width: `${r.sentiment.positive}%` }} title={`Positive ${r.sentiment.positive}%`} />
            <span className="seg seg-neu" style={{ width: `${r.sentiment.neutral}%` }} title={`Neutral ${r.sentiment.neutral}%`} />
            <span className="seg seg-neg" style={{ width: `${r.sentiment.negative}%` }} title={`Negative ${r.sentiment.negative}%`} />
          </div>
          <div className="dr-sent-legend">
            <span><i className="dot dot-pos" />Positive {r.sentiment.positive}%</span>
            <span><i className="dot dot-neu" />Neutral {r.sentiment.neutral}%</span>
            <span><i className="dot dot-neg" />Negative {r.sentiment.negative}%</span>
          </div>
          <div className="dr-card-foot">Sample: {Math.round((r.sentiment.positive + r.sentiment.neutral + r.sentiment.negative) * 14)} verified-driver responses · last 90 days</div>
        </div>
        <div className="dr-card">
          <div className="dr-card-l">Safety & complaints</div>
          <div className="dr-safety-grid">
            <div>
              <div className="dr-safety-num">{r.safety.incidents}</div>
              <div className="dr-safety-l">Incidents per million miles</div>
            </div>
            <div>
              <div className="dr-safety-num">{r.safety.complaints}</div>
              <div className="dr-safety-l">Driver-related complaints (Q1)</div>
            </div>
            <div>
              <div className="dr-safety-num">{r.safety.citations}</div>
              <div className="dr-safety-l">DOT citations (LA, Q1)</div>
            </div>
          </div>
          <div className="dr-card-foot">Training: {r.training}</div>
        </div>
      </div>

      <div className="dr-sw">
        <div>
          <div className="sw-h sw-h-good">Driver-side strengths</div>
          <ul className="sw-list-big">
            {r.strengths.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
        <div>
          <div className="sw-h sw-h-bad">Driver-side concerns</div>
          <ul className="sw-list-big">
            {r.concerns.map((s, i) => <li key={i}>{s}</li>)}
          </ul>
        </div>
      </div>

      {r.quotes && r.quotes.length > 0 && (
        <div className="dr-quotes">
          <div className="section-eyebrow">From the cab</div>
          <div className="dr-quote-grid">
            {r.quotes.map((q, i) => (
              <figure key={i} className="dr-quote">
                <blockquote>"{q.text}"</blockquote>
                <figcaption>— {q.who}</figcaption>
              </figure>
            ))}
          </div>
          <div className="dr-quote-note">Quotes anonymized at the source's request. Verified via paystub or employer email.</div>
        </div>
      )}
    </div>
  );
}

// Export
Object.assign(window, {
  SILogo, CircleScore, LetterBadge, MetricBar, SponsoredTag, TrendArrow, Header, Footer, DriverReport,
});