// Expanded Insights Page — editorial hub + community + deep dives

const { useState: useStateI, useMemo: useMemoI } = React;

// ============= INSIGHTS DATA =============
const INSIGHTS_FEATURED = {
  tag: "Q1 2026 Investigation",
  category: "Deep Dive",
  title: "Inside the LTL pricing reset: why 2026 is the year of the General Rate Increase",
  dek: "Five major carriers raised rates between 4.9% and 7.9% this quarter. We pulled 14 months of pricing data, talked to 23 shippers, and read 400+ forum threads to understand what's really happening — and what to do about it.",
  author: "Maya Chen",
  authorRole: "Senior Editor",
  date: "Apr 24, 2026",
  read: "14 min",
  imageColor: "oklch(0.55 0.18 25)",
  stats: [
    { v: "+6.4%", l: "Avg LTL increase" },
    { v: "23", l: "Shippers interviewed" },
    { v: "412", l: "Forum threads analyzed" },
    { v: "5", l: "Carriers raising rates" },
  ],
};

const INSIGHTS_ARTICLES = [
  { tag: "Q1 2026 Report", category: "Report", title: "UPS reclaims #1 in LA small-package — by a hair", excerpt: "After two quarters of FedEx leading on transit time, UPS is back on top thanks to a 2-point gain in tracking accuracy.", author: "Maya Chen", date: "Apr 22", read: "4 min" },
  { tag: "Trend", category: "Analysis", title: "Why USPS scores are dropping in major metros — and where it's worst", excerpt: "Service times are up, tracking gaps are widening, and complaints are at a 3-year high. We dig into the regional postal performance crisis.", author: "Devon Hayes", date: "Apr 18", read: "6 min" },
  { tag: "Buyer's Guide", category: "Guide", title: "How to pick an LTL carrier when price isn't everything", excerpt: "Damage rates, pickup reliability, and claims handling matter more than most shippers realize. A practical framework.", author: "Priya Ramani", date: "Apr 12", read: "8 min" },
  { tag: "Spotlight", category: "Profile", title: "Saia's quiet rise: what they're getting right that others aren't", excerpt: "Three quarters of consistent gains across every metric we track. Drivers, dispatchers, and ops VPs explain the playbook.", author: "Marcus Webb", date: "Apr 08", read: "5 min" },
  { tag: "Methodology", category: "Behind the Scenes", title: "How we calculate the Clarity Score, fully explained", excerpt: "Eight weighted metrics, 14M+ shipments, and zero pay-to-play. The math behind every grade.", author: "Maya Chen", date: "Apr 02", read: "7 min" },
  { tag: "Q1 2026 Report", category: "Report", title: "The fastest-improving courier in every metro this quarter", excerpt: "Same-day is heating up. These are the carriers gaining ground in your city, ranked.", author: "Devon Hayes", date: "Mar 28", read: "5 min" },
  { tag: "Industry", category: "Analysis", title: "Amazon Logistics quietly passes FedEx Ground in West Coast volume", excerpt: "It happened in February and almost nobody noticed. What it means for shippers, drivers, and the long-term competitive landscape.", author: "Marcus Webb", date: "Mar 25", read: "9 min" },
  { tag: "Driver Voices", category: "Reported", title: "Why so many independent FedEx Ground contractors are walking away", excerpt: "We talked to 11 former contractor terminals. The pattern is unmistakable — and shippers should be paying attention.", author: "Priya Ramani", date: "Mar 21", read: "11 min" },
  { tag: "Buyer's Guide", category: "Guide", title: "Negotiating your small-parcel contract: what 2026 looks like", excerpt: "DIM weight, fuel surcharges, peak-season fees — what to push back on this year and what's table stakes.", author: "Maya Chen", date: "Mar 18", read: "10 min" },
];

const REDDIT_THREADS = [
  {
    sub: "r/Logistics", title: "Anyone else seeing OD-FL refuse pickups in LA basin lately?",
    karma: 847, comments: 312, age: "2 days ago",
    snippet: "Three pickups missed this week, dispatcher says capacity. Old Dominion has always been my A-list carrier. What's going on?",
    sentiment: "negative", carrier: "Old Dominion", category: "LTL",
  },
  {
    sub: "r/UPSers", title: "Driver perspective: why our on-time numbers are actually up YoY",
    karma: 1240, comments: 487, age: "5 days ago",
    snippet: "Been on the same route in Pasadena for 11 years. New routing software is genuinely better. Here's what changed in the last 6 months...",
    sentiment: "positive", carrier: "UPS", category: "Small Package",
  },
  {
    sub: "r/freight", title: "Saia rep called me unprompted to fix a pricing error. Has hell frozen over?",
    karma: 612, comments: 198, age: "1 week ago",
    snippet: "I've been shipping LTL for 22 years. I have NEVER had a carrier rep proactively call me about ANYTHING. Saia is doing something right.",
    sentiment: "positive", carrier: "Saia", category: "LTL",
  },
  {
    sub: "r/USPS", title: "What's actually causing the tracking blackholes? An insider take",
    karma: 2103, comments: 891, age: "3 days ago",
    snippet: "Work in a regional facility. The honest answer involves three different scanning systems that don't talk to each other. Long post incoming...",
    sentiment: "neutral", carrier: "USPS", category: "Small Package",
  },
  {
    sub: "r/Truckers", title: "Knight-Swift detention pay finally above $100/hr after 2 hours — about time",
    karma: 941, comments: 234, age: "4 days ago",
    snippet: "Memo went out yesterday. Effective May 1. This is significant for those of us running their lanes.",
    sentiment: "positive", carrier: "Knight-Swift", category: "FTL",
  },
  {
    sub: "r/ecommerce", title: "Switching from FedEx to UPS in Q2 — share your experience",
    karma: 478, comments: 156, age: "6 days ago",
    snippet: "Small Shopify store, ~800 packages/week. FedEx Ground reliability has been brutal in Southern California. Anyone made the switch recently?",
    sentiment: "neutral", carrier: "FedEx", category: "Small Package",
  },
];

const COMMUNITY_QUOTES = [
  {
    quote: "OnTrac has genuinely become my default for B2C in California. Three years ago I wouldn't have said that. Their tracking is cleaner than UPS now, full stop.",
    author: "u/parcelhound", source: "r/ecommerce", date: "Apr 19",
    upvotes: 423,
  },
  {
    quote: "Spent 90 minutes on hold with USPS yesterday. The IVR loops you back to the menu. There is no human. There hasn't been one for months.",
    author: "u/rurmail_shipper", source: "r/USPS", date: "Apr 16",
    upvotes: 1847,
  },
  {
    quote: "Old Dominion is still the gold standard for damage-free LTL. I'll pay 12% more for a carrier that doesn't show up with crushed pallets. Math is easy.",
    author: "u/freightnerd_42", source: "r/Logistics", date: "Apr 14",
    upvotes: 612,
  },
  {
    quote: "Uber Direct is incredible if you're inside the 405 and useless if you're not. Same-day delivery is hyper-local now in a way nobody talks about.",
    author: "u/lastmile_la", source: "r/Logistics", date: "Apr 11",
    upvotes: 287,
  },
  {
    quote: "Amazon Logistics damage rate isn't worse — it's just visible. Other carriers hide it in claims pipelines. Amazon shows you photos. People can't handle that.",
    author: "u/dispatch_ops", source: "r/AmazonDSPDrivers", date: "Apr 09",
    upvotes: 891,
  },
];

const TRENDING_TOPICS = [
  { topic: "LTL General Rate Increase", change: "+412%", direction: "up", desc: "Mentions across logistics forums in last 30 days" },
  { topic: "USPS tracking blackholes", change: "+187%", direction: "up", desc: "Up sharply since February nationwide" },
  { topic: "Saia capacity availability", change: "+94%", direction: "up", desc: "Shippers asking about new lanes" },
  { topic: "FedEx Ground contractor exits", change: "+68%", direction: "up", desc: "Concentrated in TX, GA, FL" },
  { topic: "Amazon Logistics expansion", change: "+41%", direction: "up", desc: "B2B inquiries up sharply" },
  { topic: "Peak season surcharge prep", change: "—", direction: "flat", desc: "Steady — annual cycle" },
];

const GUIDES = [
  {
    title: "The complete LTL buyer's guide", chapters: 8, time: "32 min", level: "Comprehensive",
    desc: "From class codes to claims — everything a shipper needs to know about less-than-truckload, written for humans.",
  },
  {
    title: "Small parcel contract negotiation playbook", chapters: 6, time: "24 min", level: "Intermediate",
    desc: "DIM weight, fuel surcharges, residential fees, GRI clauses. What to push on, what to accept, what to walk from.",
  },
  {
    title: "Choosing your first 3PL", chapters: 5, time: "18 min", level: "Beginner",
    desc: "When to outsource fulfillment, what questions to ask, and the red flags that mean run.",
  },
  {
    title: "International shipping from a US warehouse", chapters: 7, time: "28 min", level: "Intermediate",
    desc: "Customs, brokerage, DDP vs DDU, prohibited items, and how to actually estimate landed cost.",
  },
];

const CARRIER_PULSE = [
  { carrier: "UPS", chatter: 4280, sentiment: 72, trend: +3, color: "#8B5A1A" },
  { carrier: "FedEx", chatter: 3914, sentiment: 64, trend: -2, color: "#5A2C8C" },
  { carrier: "USPS", chatter: 5102, sentiment: 38, trend: -7, color: "#1E3A8A" },
  { carrier: "Amazon Logistics", chatter: 2847, sentiment: 58, trend: +4, color: "#E8A33D" },
  { carrier: "Old Dominion", chatter: 891, sentiment: 84, trend: +1, color: "#1A4D2E" },
  { carrier: "Saia", chatter: 612, sentiment: 79, trend: +6, color: "#2563EB" },
  { carrier: "OnTrac", chatter: 487, sentiment: 71, trend: +2, color: "#C53030" },
  { carrier: "DHL", chatter: 1024, sentiment: 61, trend: 0, color: "#D4A017" },
];

// =============================================================
// MAIN INSIGHTS PAGE
// =============================================================
function InsightsPage({ onNav }) {
  const [activeFilter, setActiveFilter] = useStateI("All");
  const [activeTab, setActiveTab] = useStateI("editorial");

  const filters = ["All", "Report", "Analysis", "Guide", "Profile", "Reported", "Behind the Scenes"];
  const filtered = useMemoI(() => {
    if (activeFilter === "All") return INSIGHTS_ARTICLES;
    return INSIGHTS_ARTICLES.filter(a => a.category === activeFilter);
  }, [activeFilter]);

  return (
    <div className="page-insights-v2">
      {/* HERO */}
      <section className="ins-hero">
        <div className="ins-hero-inner">
          <div className="ins-hero-grid">
            <div className="ins-hero-left">
              <div className="hero-eyebrow"><span className="eyebrow-dot" />Clarity · Updated daily</div>
              <h1 className="hero-title">The shipping<br/>industry, <em>told straight</em>.</h1>
              <p className="hero-sub">
                Deep-dive investigations, quarterly trend reports, hands-on buyer's guides, and the unfiltered
                voice of the shippers, drivers, and dispatchers who actually move the freight.
              </p>
              <div className="ins-hero-stats">
                <div><span className="ins-stat-num">340+</span><span className="ins-stat-l">Articles published</span></div>
                <div><span className="ins-stat-num">28</span><span className="ins-stat-l">Carriers covered</span></div>
                <div><span className="ins-stat-num">14K</span><span className="ins-stat-l">Reader subscribers</span></div>
              </div>
            </div>
            <div className="ins-hero-right">
              <div className="newsletter-card">
                <div className="newsletter-eyebrow">The Loading Dock · Weekly</div>
                <div className="newsletter-h">Get the carrier roundup every Tuesday.</div>
                <div className="newsletter-form">
                  <input type="email" placeholder="you@company.com" />
                  <button className="btn-primary">Subscribe</button>
                </div>
                <div className="newsletter-fine">
                  Trusted by ops leads at 1,400+ shippers · No spam · Unsubscribe anytime
                </div>
                <div className="newsletter-logos">
                  <span>SHOPIFY</span><span>WAYFAIR</span><span>1‑800‑FLOWERS</span><span>WEEE!</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TAB BAR — primary content modes */}
      <section className="ins-tabs">
        <div className="ins-tabs-inner">
          {[
            { id: "editorial", label: "Editorial", count: 340 },
            { id: "community", label: "From the Community", count: 1240 },
            { id: "trends", label: "Trending Now", count: 18 },
            { id: "guides", label: "Buyer's Guides", count: 24 },
            { id: "data", label: "Data Center", count: 7 },
          ].map(t => (
            <button key={t.id}
              className={`ins-tab ${activeTab === t.id ? "active" : ""}`}
              onClick={() => setActiveTab(t.id)}>
              <span>{t.label}</span>
              <span className="ins-tab-count">{t.count}</span>
            </button>
          ))}
        </div>
      </section>

      {/* TAB CONTENT */}
      {activeTab === "editorial" && <EditorialTab featured={INSIGHTS_FEATURED} articles={filtered} filters={filters} activeFilter={activeFilter} setActiveFilter={setActiveFilter} />}
      {activeTab === "community" && <CommunityTab threads={REDDIT_THREADS} quotes={COMMUNITY_QUOTES} pulse={CARRIER_PULSE} />}
      {activeTab === "trends" && <TrendsTab topics={TRENDING_TOPICS} pulse={CARRIER_PULSE} />}
      {activeTab === "guides" && <GuidesTab guides={GUIDES} />}
      {activeTab === "data" && <DataTab />}

      {/* CTA */}
      <section className="ins-cta">
        <div className="ins-cta-inner">
          <div className="section-eyebrow">Stay sharp</div>
          <h2 className="section-title">The Loading Dock — every Tuesday morning.</h2>
          <p className="ins-cta-p">
            One email. Five minutes. The most important shipping stories, scored by what actually changed for shippers this week.
          </p>
          <div className="ins-cta-form">
            <input type="email" placeholder="you@company.com" />
            <button className="btn-primary-lg">Subscribe free →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================================
// EDITORIAL TAB
// =============================================================
function EditorialTab({ featured, articles, filters, activeFilter, setActiveFilter }) {
  return (
    <>
      {/* FEATURED */}
      <section className="ins-featured">
        <div className="ins-featured-inner">
          <article className="ins-feature-article">
            <div className="ins-feature-img" style={{ background: featured.imageColor }}>
              <div className="ins-feature-img-pattern" />
              <div className="ins-feature-img-tag">{featured.tag}</div>
            </div>
            <div className="ins-feature-body">
              <div className="ins-feature-cat">— {featured.category}</div>
              <h2 className="ins-feature-title">{featured.title}</h2>
              <p className="ins-feature-dek">{featured.dek}</p>
              <div className="ins-feature-meta">
                <span className="author-dot" />
                <span><strong>{featured.author}</strong> · {featured.authorRole}</span>
                <span className="dot-sep">·</span>
                <span>{featured.date}</span>
                <span className="dot-sep">·</span>
                <span>{featured.read} read</span>
              </div>
              <div className="ins-feature-stats">
                {featured.stats.map((s, i) => (
                  <div key={i} className="ins-fs">
                    <div className="ins-fs-v">{s.v}</div>
                    <div className="ins-fs-l">{s.l}</div>
                  </div>
                ))}
              </div>
              <button className="btn-primary">Read the full investigation →</button>
            </div>
          </article>
        </div>
      </section>

      {/* FILTER + GRID */}
      <section className="ins-grid-section">
        <div className="ins-grid-inner">
          <div className="ins-grid-head">
            <h3 className="ins-grid-h">Latest from the desk</h3>
            <div className="ins-filters">
              {filters.map(f => (
                <button key={f} className={`ins-filter ${activeFilter === f ? "active" : ""}`} onClick={() => setActiveFilter(f)}>
                  {f}
                </button>
              ))}
            </div>
          </div>
          <div className="ins-articles-grid">
            {articles.map((a, i) => (
              <article key={i} className="ins-article-card">
                <div className="ins-article-cat-row">
                  <span className="insight-tag">{a.tag}</span>
                  <span className="ins-article-cat">{a.category}</span>
                </div>
                <h3 className="ins-article-title">{a.title}</h3>
                <p className="ins-article-excerpt">{a.excerpt}</p>
                <div className="ins-article-foot">
                  <span><strong>{a.author}</strong></span>
                  <span className="dot-sep">·</span>
                  <span>{a.date}</span>
                  <span className="dot-sep">·</span>
                  <span>{a.read} read</span>
                </div>
              </article>
            ))}
          </div>
          <div className="ins-load-more">
            <button className="btn-ghost-lg">Load more articles →</button>
          </div>
        </div>
      </section>
    </>
  );
}

// =============================================================
// COMMUNITY TAB — reddit, forums, voices
// =============================================================
function CommunityTab({ threads, quotes, pulse }) {
  const [carrierFilter, setCarrierFilter] = useStateI("All");
  const carriers = ["All", ...new Set(threads.map(t => t.carrier))];
  const filteredThreads = carrierFilter === "All" ? threads : threads.filter(t => t.carrier === carrierFilter);

  return (
    <>
      {/* DISCLAIMER STRIP */}
      <section className="comm-disclaimer">
        <div className="comm-disclaimer-inner">
          <div className="comm-disc-icon">ⓘ</div>
          <div>
            <strong>What you're reading:</strong> aggregated public discussion from r/Logistics, r/freight, r/USPS,
            r/UPSers, r/Truckers, r/ecommerce, and other open communities — paraphrased, attributed by username, and curated for signal.
            We don't repost full threads. We summarize patterns and link out.
          </div>
        </div>
      </section>

      {/* CARRIER PULSE */}
      <section className="pulse-section">
        <div className="pulse-inner">
          <div className="ins-grid-head">
            <div>
              <div className="section-eyebrow">Carrier pulse · 30-day window</div>
              <h2 className="section-title">What people are saying.</h2>
            </div>
            <div className="pulse-legend">
              <span><span className="pulse-dot" style={{ background: "var(--green)" }}/>Positive sentiment</span>
              <span><span className="pulse-dot" style={{ background: "var(--amber)" }}/>Mixed</span>
              <span><span className="pulse-dot" style={{ background: "var(--red)" }}/>Negative</span>
            </div>
          </div>
          <div className="pulse-grid">
            {pulse.map(p => {
              let sColor = "var(--ink)";
              if (p.sentiment >= 70) sColor = "var(--green)";
              else if (p.sentiment >= 50) sColor = "var(--amber)";
              else sColor = "var(--red)";
              return (
                <div key={p.carrier} className="pulse-card">
                  <div className="pulse-head">
                    <span className="pulse-carrier-dot" style={{ background: p.color }}>{p.carrier[0]}</span>
                    <div className="pulse-name">{p.carrier}</div>
                  </div>
                  <div className="pulse-metrics">
                    <div>
                      <div className="pulse-l">Mentions</div>
                      <div className="pulse-v">{p.chatter.toLocaleString()}</div>
                    </div>
                    <div>
                      <div className="pulse-l">Sentiment</div>
                      <div className="pulse-v" style={{ color: sColor }}>{p.sentiment}<span className="pulse-pct">/100</span></div>
                    </div>
                    <div>
                      <div className="pulse-l">QoQ</div>
                      <div className="pulse-v"><TrendArrow trend={p.trend} /></div>
                    </div>
                  </div>
                  <div className="pulse-bar"><span className="pulse-bar-fill" style={{ width: `${p.sentiment}%`, background: sColor }} /></div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* THREADS */}
      <section className="threads-section">
        <div className="threads-inner">
          <div className="ins-grid-head">
            <div>
              <div className="section-eyebrow">Top community threads</div>
              <h2 className="section-title">From the front lines.</h2>
            </div>
            <div className="ins-filters">
              {carriers.map(c => (
                <button key={c} className={`ins-filter ${carrierFilter === c ? "active" : ""}`} onClick={() => setCarrierFilter(c)}>
                  {c}
                </button>
              ))}
            </div>
          </div>
          <div className="threads-grid">
            {filteredThreads.map((t, i) => (
              <article key={i} className="thread-card">
                <div className="thread-head">
                  <span className="thread-sub">{t.sub}</span>
                  <span className={`thread-sent thread-sent-${t.sentiment}`}>
                    {t.sentiment === "positive" ? "▲" : t.sentiment === "negative" ? "▼" : "—"} {t.sentiment}
                  </span>
                </div>
                <h3 className="thread-title">{t.title}</h3>
                <p className="thread-snippet">"{t.snippet}"</p>
                <div className="thread-foot">
                  <span className="thread-stat">↑ {t.karma.toLocaleString()}</span>
                  <span className="thread-stat">💬 {t.comments}</span>
                  <span className="thread-stat">{t.age}</span>
                  <span className="thread-tag">{t.carrier} · {t.category}</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* QUOTE WALL */}
      <section className="quotes-section">
        <div className="quotes-inner">
          <div className="section-eyebrow">Voices</div>
          <h2 className="section-title">What shippers and drivers told us this month.</h2>
          <div className="quotes-grid">
            {quotes.map((q, i) => (
              <figure key={i} className="quote-card">
                <blockquote className="quote-text">"{q.quote}"</blockquote>
                <figcaption className="quote-cite">
                  <span className="quote-author">{q.author}</span>
                  <span className="dot-sep">·</span>
                  <span>{q.source}</span>
                  <span className="dot-sep">·</span>
                  <span>↑ {q.upvotes.toLocaleString()}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// =============================================================
// TRENDS TAB
// =============================================================
function TrendsTab({ topics, pulse }) {
  return (
    <>
      <section className="trends-section">
        <div className="trends-inner">
          <div className="section-eyebrow">Trending now · last 30 days</div>
          <h2 className="section-title">What's heating up.</h2>
          <p className="trends-p">Topics gaining momentum across forums, comments, social, and our shipper network — ranked by velocity, not raw volume.</p>
          <div className="trends-list">
            {topics.map((t, i) => (
              <div key={i} className="trend-row">
                <span className="trend-rank">{String(i+1).padStart(2,"0")}</span>
                <div className="trend-mid">
                  <div className="trend-topic">{t.topic}</div>
                  <div className="trend-desc">{t.desc}</div>
                </div>
                <div className={`trend-change trend-change-${t.direction}`}>{t.change}</div>
                <button className="btn-ghost trend-cta">Investigate →</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="heatmap-section">
        <div className="heatmap-inner">
          <div className="section-eyebrow">Sentiment heatmap</div>
          <h2 className="section-title">Carrier mood, by category, this quarter.</h2>
          <div className="heatmap-grid">
            <div className="heatmap-col-h"></div>
            {["Small Pkg", "LTL", "FTL", "Courier", "Intl"].map(c => (
              <div key={c} className="heatmap-col-h">{c}</div>
            ))}
            {[
              { name: "UPS", row: [82, 76, 70, 65, 78] },
              { name: "FedEx", row: [74, 68, 71, 60, 79] },
              { name: "USPS", row: [38, null, null, 42, 45] },
              { name: "Amazon", row: [62, null, null, 70, null] },
              { name: "Old Dominion", row: [null, 88, 76, null, null] },
              { name: "Saia", row: [null, 81, 72, null, null] },
              { name: "OnTrac", row: [71, null, null, 68, null] },
              { name: "DHL", row: [56, null, null, null, 84] },
            ].map(r => (
              <React.Fragment key={r.name}>
                <div className="heatmap-row-h">{r.name}</div>
                {r.row.map((v, j) => {
                  if (v === null) return <div key={j} className="heatmap-cell heatmap-cell-na">—</div>;
                  let bg = "var(--ink)";
                  if (v >= 75) bg = "var(--green)";
                  else if (v >= 60) bg = "oklch(0.7 0.10 145)";
                  else if (v >= 50) bg = "var(--amber)";
                  else bg = "var(--red)";
                  return <div key={j} className="heatmap-cell" style={{ background: bg, color: v >= 60 ? "white" : v >= 50 ? "var(--ink)" : "white" }}>{v}</div>;
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// =============================================================
// GUIDES TAB
// =============================================================
function GuidesTab({ guides }) {
  return (
    <section className="guides-section">
      <div className="guides-inner">
        <div className="section-eyebrow">Buyer's guides · Plain English, no fluff</div>
        <h2 className="section-title">Learn shipping like an operator.</h2>
        <p className="guides-p">Long-form, practical guides from people who've actually negotiated the contracts and run the routes. Read end-to-end or jump to a chapter.</p>
        <div className="guides-grid">
          {guides.map((g, i) => (
            <article key={i} className="guide-card">
              <div className="guide-num">G·{String(i+1).padStart(2,"0")}</div>
              <h3 className="guide-title">{g.title}</h3>
              <p className="guide-desc">{g.desc}</p>
              <div className="guide-meta">
                <span><strong>{g.chapters}</strong> chapters</span>
                <span className="dot-sep">·</span>
                <span>{g.time}</span>
                <span className="dot-sep">·</span>
                <span className="guide-level">{g.level}</span>
              </div>
              <button className="btn-ghost guide-cta">Start reading →</button>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================
// DATA TAB
// =============================================================
function DataTab() {
  const datasets = [
    { name: "Q1 2026 Carrier Performance Dataset", desc: "47 metros, 128 carriers, 8 metrics. The complete underlying dataset for this quarter's report cards.", size: "2.4MB CSV", access: "Verified" },
    { name: "5-year LTL pricing index", desc: "Quarterly LTL pricing data across the top 10 carriers, normalized by lane and weight class.", size: "1.1MB CSV", access: "Spotlight" },
    { name: "Reddit shipping sentiment archive", desc: "12 months of categorized shipping discussions from 14 subreddits, anonymized and tagged.", size: "8.2MB JSON", access: "Spotlight" },
    { name: "Damage & claims rate by category", desc: "Reported damage and claim outcomes across all five shipping categories, last 8 quarters.", size: "640KB CSV", access: "Verified" },
    { name: "Driver-reported carrier conditions", desc: "Aggregated driver feedback on dispatchers, routing, pay, and equipment by carrier.", size: "1.8MB CSV", access: "Spotlight" },
  ];
  return (
    <section className="data-section">
      <div className="data-inner">
        <div className="section-eyebrow">Data center · For researchers, journalists, and ops teams</div>
        <h2 className="section-title">The underlying data, available.</h2>
        <p className="data-p">Verified and Spotlight members can access the raw datasets behind every grade and report. Methodology, schemas, and sample rows below.</p>
        <div className="data-list">
          {datasets.map((d, i) => (
            <div key={i} className="data-row">
              <div className="data-row-icon">DB</div>
              <div className="data-row-mid">
                <div className="data-row-name">{d.name}</div>
                <div className="data-row-desc">{d.desc}</div>
              </div>
              <div className="data-row-meta">
                <span className="data-size">{d.size}</span>
                <span className={`data-access data-access-${d.access.toLowerCase()}`}>{d.access}+</span>
              </div>
              <button className="btn-ghost">Request →</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.InsightsPage = InsightsPage;