// Carrier profile + Members/Advertise + Insights pages

const { useState: useStateC } = React;

function CarrierPage({ onNav, onReport, carrierId = "ups" }) {
  const { LA_REPORT, METRICS } = window.SI_DATA;
  // find carrier across all categories
  let carrier = null, catId = null;
  for (const cat of Object.keys(LA_REPORT.carriers)) {
    const found = LA_REPORT.carriers[cat].find(c => c.id === carrierId);
    if (found) { carrier = found; catId = cat; break; }
  }
  if (!carrier) { carrier = LA_REPORT.carriers.small[0]; catId = "small"; }

  // Mock multi-city grades for this carrier
  const cityGrades = [
    { city: "Los Angeles", score: carrier.score },
    { city: "New York", score: Math.max(40, carrier.score - 4) },
    { city: "Chicago", score: Math.min(99, carrier.score + 3) },
    { city: "Dallas", score: carrier.score - 2 },
    { city: "Atlanta", score: carrier.score + 1 },
    { city: "Phoenix", score: carrier.score - 6 },
    { city: "Seattle", score: carrier.score - 1 },
    { city: "Miami", score: carrier.score - 8 },
  ];

  return (
    <div className="page-carrier">
      <section className="carrier-hero">
        <div className="carrier-hero-inner">
          <div className="report-breadcrumb">
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("home"); }}>Home</a>
            <span>/</span>
            <a href="#" onClick={(e) => { e.preventDefault(); onNav("carriers"); }}>Carriers</a>
            <span>/</span>
            <span className="current">{carrier.name}</span>
          </div>

          <div className="carrier-hero-grid">
            <div className="carrier-hero-left">
              <div className="carrier-id-row">
                <span className="carrier-logo-big" style={{ background: window.carrierColor(carrier.id) }}>
                  {carrier.name[0]}
                </span>
                <div>
                  <div className="report-eyebrow">{catId === "small" ? "Small Package" : catId === "ltl" ? "LTL Freight" : catId === "ftl" ? "Truckload (FTL)" : catId === "courier" ? "Last-Mile Courier" : "International"} Carrier</div>
                  <h1 className="carrier-name-big">{carrier.name}</h1>
                  <div className="carrier-meta">
                    <span>{carrier.shipments} LA shipments · Q1 2026</span>
                    <span className="dot-sep">·</span>
                    <span>{carrier.complaints} complaints filed</span>
                  </div>
                </div>
              </div>
              <p className="carrier-verdict-big">"{carrier.verdict}"</p>
              <div className="carrier-action-row">
                <button className="btn-primary" onClick={() => onReport()}>See LA report</button>
                <button className="btn-ghost">Compare with another →</button>
              </div>
            </div>
            <div className="carrier-hero-right">
              <CircleScore score={carrier.score} size={200} />
              <div className="carrier-overall-meta">
                <span>National avg: {carrier.score - 2}</span>
                <span><TrendArrow trend={carrier.trend} /> QoQ</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="carrier-body">
        <div className="carrier-body-inner">
          <div className="carrier-section">
            <div className="section-eyebrow">Metric breakdown</div>
            <h2 className="section-title">Where {carrier.name} excels — and where it doesn't.</h2>
            <div className="carrier-metrics-grid">
              {METRICS.map((m, i) => (
                <MetricBar key={m.id} label={m.label} score={carrier.scores[m.id]} delay={i * 60} />
              ))}
            </div>
          </div>

          <div className="carrier-section">
            <div className="section-eyebrow">Across the country</div>
            <h2 className="section-title">{carrier.name} grades by metro.</h2>
            <div className="city-grades-grid">
              {cityGrades.map(g => (
                <div key={g.city} className="city-grade-cell">
                  <div className="city-grade-name">{g.city}</div>
                  <div className="city-grade-score">{g.score}</div>
                  <LetterBadge score={g.score} size="sm" />
                </div>
              ))}
            </div>
          </div>

          <div className="carrier-section sw-section">
            <div className="sw-grid-big">
              <div>
                <div className="sw-h sw-h-good">What works</div>
                <ul className="sw-list-big">
                  {carrier.strengths.map((s, i) => <li key={i}>{s}</li>)}
                </ul>
              </div>
              <div>
                <div className="sw-h sw-h-bad">What doesn't</div>
                <ul className="sw-list-big">
                  {carrier.weaknesses.map((s, i) => <li key={i}>{s}</li>)}
                </ul>
              </div>
            </div>
          </div>

          <div className="carrier-section">
            <DriverReport carrierId={carrier.id} carrierName={carrier.name} />
          </div>

          {/* Claim banner */}
          <div className="claim-banner">
            <div>
              <div className="claim-eyebrow">Are you {carrier.name}?</div>
              <h3 className="claim-h">Claim your profile.</h3>
              <p className="claim-p">Respond to grades, share updates, and reach shippers actively comparing carriers.</p>
            </div>
            <button className="btn-primary-lg" onClick={() => onNav("members")}>Claim profile →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================================
// MEMBERS / ADVERTISE PAGE
// =============================================================
function MembersPage({ onNav }) {
  const [tier, setTier] = useStateC("pro");
  const tiers = [
    {
      id: "free",
      name: "Listed",
      price: "Free",
      sub: "Basic profile",
      features: [
        "Public carrier profile",
        "Quarterly grade visibility",
        "Basic metric data",
        "Read-only complaint summary",
      ],
      cta: "Claim listing",
    },
    {
      id: "pro",
      name: "Verified",
      price: "$1,200",
      period: "/ month",
      sub: "Recommended for active carriers",
      featured: true,
      features: [
        "Verified badge on profile",
        "Respond to grades publicly",
        "Detailed metric breakdowns",
        "Lead inbox from shippers",
        "Quarterly performance briefing",
        "API access to your data",
      ],
      cta: "Get Verified",
    },
    {
      id: "ad",
      name: "Spotlight",
      price: "Custom",
      sub: "Premium ad placement",
      features: [
        "Everything in Verified",
        "Sponsored placement on city reports",
        "Featured in search results",
        "Newsletter sponsorship slots",
        "Co-branded research reports",
        "Dedicated account manager",
      ],
      cta: "Contact sales",
    },
  ];

  return (
    <div className="page-members">
      <section className="members-hero">
        <div className="members-hero-inner">
          <div className="hero-eyebrow"><span className="eyebrow-dot" />For carriers, couriers & freight companies</div>
          <h1 className="hero-title">Get found by shippers<br/><em>actually looking</em> for you.</h1>
          <p className="hero-sub">Shipping Clarity is where shippers go to compare. List your company, claim your grades, and put your service record in front of the people choosing carriers right now.</p>
          <div className="members-stat-row">
            <div className="members-stat">
              <div className="ms-num">340K</div>
              <div className="ms-label">Monthly shipper visitors</div>
            </div>
            <div className="members-stat">
              <div className="ms-num">128</div>
              <div className="ms-label">Carriers listed</div>
            </div>
            <div className="members-stat">
              <div className="ms-num">62%</div>
              <div className="ms-label">Of visitors are decision-makers</div>
            </div>
          </div>
        </div>
      </section>

      <section className="pricing-section">
        <div className="pricing-inner">
          <div className="section-eyebrow">Plans</div>
          <h2 className="section-title">Three ways to be on Shipping Clarity.</h2>
          <div className="pricing-grid">
            {tiers.map(t => (
              <div key={t.id} className={`pricing-card ${t.featured ? "featured" : ""} ${tier === t.id ? "selected" : ""}`}
                onClick={() => setTier(t.id)}>
                {t.featured && <div className="pricing-badge">Most popular</div>}
                <div className="pricing-name">{t.name}</div>
                <div className="pricing-price">
                  {t.price}
                  {t.period && <span className="pricing-period">{t.period}</span>}
                </div>
                <div className="pricing-sub">{t.sub}</div>
                <ul className="pricing-features">
                  {t.features.map((f, i) => (
                    <li key={i}><span className="check">✓</span>{f}</li>
                  ))}
                </ul>
                <button className={t.featured ? "btn-primary-lg full-w" : "btn-ghost-lg full-w"}>
                  {t.cta}
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="signup-section">
        <div className="signup-inner">
          <div className="signup-left">
            <div className="section-eyebrow">Get started</div>
            <h2 className="section-title">List your company in minutes.</h2>
            <p className="signup-p">Tell us a bit about your operation. We'll verify your DOT, MC, or USPS Mailer ID and have your profile live within 48 hours.</p>
            <ul className="signup-bullets">
              <li><span className="check">✓</span>No long-term commitment</li>
              <li><span className="check">✓</span>Editorial integrity — sponsored never affects grades</li>
              <li><span className="check">✓</span>Cancel anytime</li>
            </ul>
          </div>
          <div className="signup-form">
            <div className="form-h">Quick start</div>
            <div className="form-field">
              <label>Company name</label>
              <input type="text" placeholder="e.g. Acme Logistics" />
            </div>
            <div className="form-field">
              <label>Category</label>
              <select>
                <option>Small Package</option>
                <option>LTL Freight</option>
                <option>Truckload (FTL)</option>
                <option>Last-Mile Courier</option>
                <option>International</option>
              </select>
            </div>
            <div className="form-field">
              <label>DOT or MC Number</label>
              <input type="text" placeholder="DOT-1234567" />
            </div>
            <div className="form-field">
              <label>Work email</label>
              <input type="email" placeholder="you@company.com" />
            </div>
            <div className="form-field">
              <label>Plan</label>
              <div className="form-pills">
                {tiers.map(t => (
                  <button key={t.id}
                    className={`form-pill ${tier === t.id ? "active" : ""}`}
                    onClick={() => setTier(t.id)}>
                    {t.name}
                  </button>
                ))}
              </div>
            </div>
            <button className="btn-primary-lg full-w">Start verification →</button>
            <p className="form-fine">By continuing you agree to our editorial policy. Sponsored placements are always disclosed.</p>
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================================
// INSIGHTS PAGE — moved to page-insights.jsx (richer version)
// =============================================================
function _InsightsPageLegacy({ onNav }) {
  const articles = [
    { tag: "Q1 2026 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.", date: "Apr 22", read: "4 min" },
    { tag: "Trend", title: "Why USPS scores are dropping in major metros", excerpt: "Service times are up, tracking gaps are widening, and complaints are at a 3-year high. We dig into why.", date: "Apr 18", read: "6 min" },
    { tag: "Buyer's 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.", date: "Apr 12", read: "8 min" },
    { tag: "Spotlight", title: "Saia's quiet rise: what they're getting right", excerpt: "Three quarters of consistent gains across every metric we track. Here's the playbook.", date: "Apr 08", read: "5 min" },
    { tag: "Methodology", title: "How we calculate the Clarity Score, explained", excerpt: "Eight weighted metrics, 14M+ shipments, and zero pay-to-play. The math behind every grade.", date: "Apr 02", read: "7 min" },
    { tag: "Q1 2026 Report", title: "The fastest-improving courier in every metro", excerpt: "Same-day is heating up. These are the carriers gaining ground in your city.", date: "Mar 28", read: "5 min" },
  ];
  return (
    <div className="page-insights">
      <section className="insights-hero">
        <div className="insights-hero-inner">
          <div className="hero-eyebrow"><span className="eyebrow-dot" />Editorial</div>
          <h1 className="hero-title">Insights from the loading dock.</h1>
          <p className="hero-sub">Quarterly trends, buyer's guides, and the stories behind the grades. Written by people who actually ship things.</p>
        </div>
      </section>
      <section className="articles-section">
        <div className="articles-inner">
          <article className="article-feature">
            <div className="insight-tag">{articles[0].tag}</div>
            <h2 className="article-feature-title">{articles[0].title}</h2>
            <p className="article-feature-excerpt">{articles[0].excerpt}</p>
            <div className="insight-meta"><span>{articles[0].date}</span><span className="dot-sep">·</span><span>{articles[0].read} read</span></div>
          </article>
          <div className="articles-grid">
            {articles.slice(1).map((a, i) => (
              <article key={i} className="article-card">
                <div className="insight-tag">{a.tag}</div>
                <h3 className="article-h">{a.title}</h3>
                <p className="article-p">{a.excerpt}</p>
                <div className="insight-meta"><span>{a.date}</span><span className="dot-sep">·</span><span>{a.read} read</span></div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================================
// CARRIERS DIRECTORY PAGE — list
// =============================================================
function CarriersPage({ onNav, onCarrier }) {
  const { LA_REPORT, SHIPPING_CATEGORIES } = window.SI_DATA;
  const allCarriers = Object.entries(LA_REPORT.carriers).flatMap(([cat, list]) =>
    list.map(c => ({ ...c, cat }))
  ).sort((a, b) => b.score - a.score);
  return (
    <div className="page-carriers">
      <section className="carriers-hero">
        <div className="carriers-hero-inner">
          <div className="hero-eyebrow"><span className="eyebrow-dot" />128 companies tracked</div>
          <h1 className="hero-title">Every carrier. Every grade.</h1>
          <p className="hero-sub">From national giants to regional specialists. Click any carrier for a full national profile.</p>
        </div>
      </section>
      <section className="carriers-list-section">
        <div className="carriers-list-inner">
          <div className="carriers-list-head">
            <div>{allCarriers.length} carriers · sorted by Clarity Score</div>
          </div>
          <div className="carriers-list">
            {allCarriers.map((c, i) => {
              const catLabel = SHIPPING_CATEGORIES.find(s => s.id === c.cat)?.short;
              return (
                <button key={c.id + c.cat} className="carrier-list-row" onClick={() => onCarrier(c.id)}>
                  <span className="rank-num">{String(i+1).padStart(2,"0")}</span>
                  <span className="carrier-logo-dot" style={{ background: window.carrierColor(c.id) }}>{c.name[0]}</span>
                  <div className="cl-name">
                    <div className="cl-name-main">{c.name} {c.sponsored && <SponsoredTag />}</div>
                    <div className="cl-name-sub">{catLabel} · {c.shipments} shipments tracked in LA</div>
                  </div>
                  <span className="cl-trend"><TrendArrow trend={c.trend} /></span>
                  <span className="cl-score">{c.score}</span>
                  <LetterBadge score={c.score} size="md" />
                  <span className="cl-arrow">→</span>
                </button>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CarrierPage, MembersPage, CarriersPage });