// China showroom price receipts + sourcing provenance.
// Two sections, dark editorial theme, slots after CarsGrid.

const { useState: useStateR, useMemo: useMemoR, useEffect: useEffectR, useRef: useRefR } = React;

// Inlined from data/cars.json so the page works offline.
const RECEIPTS_CARS = [
  { id: "jetour-dashing", brand: "Jetour", model_en: "Dashing", model_cn: "捷途大圣", tier: "auto", body_type: "Compact SUV", fuel: "Petrol", seats: 5, china_price_rmb_wan: 5.5, china_price_usd: 7600, icon_one_landed_usd: 14500, lebanon_dealer_usd: 28000, savings_pct: 48, headline: "Style-first compact SUV at city-car money" },
  { id: "jetour-t2", brand: "Jetour", model_en: "T2", model_cn: "捷途旅行者", tier: "auto", body_type: "Adventure SUV", fuel: "Petrol", seats: 5, china_price_rmb_wan: 8.5, china_price_usd: 11700, icon_one_landed_usd: 20700, lebanon_dealer_usd: 41800, savings_pct: 50, headline: "Hardcore boxy adventure SUV — Defender vibes, half the price" },
  { id: "jetour-t2-idm", brand: "Jetour", model_en: "T2 i-DM", model_cn: "捷途山海T2", tier: "auto", body_type: "Adventure SUV", fuel: "PHEV", seats: 5, ev_range_km: 211, china_price_rmb_wan: 10.94, china_price_usd: 15100, icon_one_landed_usd: 23200, lebanon_dealer_usd: 45000, savings_pct: 48, headline: "Plug-in hybrid Defender-style SUV — PHEV incentives in many markets" },
  { id: "jetour-t1", brand: "Jetour", model_en: "T1", model_cn: "捷途山海T1", tier: "auto", body_type: "Mid SUV", fuel: "PHEV", seats: 5, ev_range_km: 150, china_price_rmb_wan: 10, china_price_usd: 13800, icon_one_landed_usd: 20500, lebanon_dealer_usd: 38000, savings_pct: 46, headline: "150 km of pure EV range — daily commute, zero fuel" },
  { id: "jetour-x70", brand: "Jetour", model_en: "X70", model_cn: "捷途X70", tier: "auto", body_type: "Mid SUV", fuel: "Petrol", seats: "5/7", china_price_rmb_wan: 6.55, china_price_usd: 9000, icon_one_landed_usd: 16600, lebanon_dealer_usd: 32000, savings_pct: 48, headline: "All-round family SUV with 5 or 7 seats" },
  { id: "jetour-x70-plus", brand: "Jetour", model_en: "X70 Plus", model_cn: "捷途X70 PLUS", tier: "auto", body_type: "Mid SUV", fuel: "Petrol", seats: "5/7", china_price_rmb_wan: 6.3, china_price_usd: 8700, icon_one_landed_usd: 16100, lebanon_dealer_usd: 30000, savings_pct: 46, headline: "Step-up X70 with chrome detailing and tech upgrades" },
  { id: "jetour-x90-plus", brand: "Jetour", model_en: "X90 Plus", model_cn: "捷途X90 PLUS", tier: "auto", body_type: "Large SUV", fuel: "Petrol", seats: 7, china_price_rmb_wan: 9.28, china_price_usd: 12800, icon_one_landed_usd: 22400, lebanon_dealer_usd: 42000, savings_pct: 47, headline: "Big-family 7-seater — Middle East diaspora favorite" },
  { id: "jetour-g700", brand: "Jetour", model_en: "G700", model_cn: "捷途纵横G700", tier: "auto_exclusive", body_type: "Premium Off-road SUV", fuel: "PHEV", seats: 6, ev_range_km: 150, china_price_rmb_wan: 23.69, china_price_usd: 32700, icon_one_landed_usd: 45500, lebanon_dealer_usd: 75000, savings_pct: 39, headline: "Premium boxy off-roader — Defender 110 alternative at half the cost" },
  { id: "byd-dolphin", brand: "BYD", model_en: "Dolphin", model_cn: "比亚迪海豚", tier: "auto_electric", body_type: "City Hatch", fuel: "BEV", seats: 5, ev_range_km: 420, china_price_rmb_wan: 6, china_price_usd: 8300, icon_one_landed_usd: 12600, lebanon_dealer_usd: 22000, savings_pct: 43, headline: "Entry electric — 0% customs duty, 70% reduced registration" },
  { id: "byd-atto3", brand: "BYD", model_en: "Atto 3", model_cn: "比亚迪元PLUS", tier: "auto_electric", body_type: "Compact EV SUV", fuel: "BEV", seats: 5, ev_range_km: 510, china_price_rmb_wan: 7, china_price_usd: 9700, icon_one_landed_usd: 14400, lebanon_dealer_usd: 27900, savings_pct: 48, headline: "Best-selling Chinese EV globally — landed and registered at your door" },
  { id: "byd-han", brand: "BYD", model_en: "Han", model_cn: "比亚迪汉", tier: "auto_electric", body_type: "Premium Sedan", fuel: "BEV", seats: 5, ev_range_km: 705, china_price_rmb_wan: 10.28, china_price_usd: 14200, icon_one_landed_usd: 20100, lebanon_dealer_usd: 38000, savings_pct: 47, saudi_dealer_usd: 62640, headline: "Tesla Model S alternative at a third of the Saudi dealer price" },
  { id: "byd-tang", brand: "BYD", model_en: "Tang", model_cn: "比亚迪唐", tier: "auto_electric", body_type: "7-seat SUV", fuel: "PHEV / BEV", seats: 7, ev_range_km: "175 / 670", china_price_rmb_wan: 15.48, china_price_usd: 21400, icon_one_landed_usd: 30500, lebanon_dealer_usd: 49900, savings_pct: 39, headline: "7-seat family flagship — fattest margin model in BYD's lineup" },
  { id: "geely-geometry-a", brand: "Geely", model_en: "Geometry A", model_cn: "几何A", tier: "auto_electric", body_type: "Compact Sedan", fuel: "BEV", seats: 5, ev_range_km: 600, china_price_rmb_wan: 12.68, china_price_usd: 17500, icon_one_landed_usd: 24300, lebanon_dealer_usd: 35000, savings_pct: 31, headline: "Geely's flagship EV sedan — proven Chinese export brand" },
  { id: "geely-geometry-e", brand: "Geely", model_en: "Geometry E", model_cn: "几何E萤火虫", tier: "auto_electric", body_type: "City EV SUV", fuel: "BEV", seats: 5, ev_range_km: 401, china_price_rmb_wan: 5.98, china_price_usd: 8300, icon_one_landed_usd: 12600, lebanon_dealer_usd: 18000, savings_pct: 30, competitor_note: "Other importers sell this segment from $9,999 CIF — Icon One delivers cleared and registered.", headline: "City EV at city-car money" },
  { id: "bmw-3-series", brand: "BMW", model_en: "3 Series", model_cn: "宝马3系", tier: "auto_exclusive", body_type: "Premium Sedan", fuel: "Petrol", seats: 5, china_price_rmb_wan: 17.8, china_price_usd: 24600, icon_one_landed_usd: 42300, lebanon_dealer_usd: 58000, savings_pct: 27, warranty_note: "Parallel import — official dealer warranty may not apply. Icon One provides third-party warranty.", headline: "China-domestic 3 Series — same car, dealer-tier savings" },
  { id: "jetour-x50-note", brand: "Jetour", model_en: "X50", model_cn: "捷途X50", tier: "auto", body_type: "Compact SUV", fuel: "Petrol", seats: 5, china_price_usd: null, icon_one_landed_usd: null, data_flag: "Export-only — not sold in Chinese domestic market. Pricing via OEM export channel.", headline: "Russia / MENA-market exclusive — sourced via Jetour authorized export channel" },
];

const TIER_META = {
  auto:           { title: "Auto",           full: "Icon One Auto",           sub: "Mainstream Chinese SUVs & sedans",        accent: "var(--amber)",  accentRgb: "232,115,46" },
  auto_electric:  { title: "Auto Electric",  full: "Icon One Auto Electric",  sub: "BEVs & premium EVs · destination duties vary", accent: "var(--green)",  accentRgb: "109,190,126" },
  auto_exclusive: { title: "Auto Exclusive", full: "Icon One Auto Exclusive", sub: "China-only luxury & LWB variants",        accent: "var(--navy-2)", accentRgb: "47,77,199" },
};

function fmtUSD(n) { return "$" + n.toLocaleString("en-US"); }

// Brand → palette map for the silhouette body fill.
// Pulled to feel close to each maker's signature color.
const BRAND_PALETTE = {
  "Jetour": ["#3a4a6a", "#0c1118"],
  "BYD":    ["#1d3aa8", "#0c1530"],
  "Geely":  ["#2a4a3e", "#0c1a16"],
  "BMW":    ["#1f2a3a", "#08101c"],
};

// Card art: real car if image_url provided, else a stylized side-profile
// silhouette colored to the brand. Replaces the model-name placeholder.
function ReceiptCardArt({ car, accent, accentRgb }) {
  const palette = BRAND_PALETTE[car.brand] || ["#26262d", "#0c0c0e"];
  const variant = car.body_type || "sedan";
  return (
    <div className="rc-art" aria-hidden="true">
      <div
        className="rc-art-bg"
        style={{
          background: `radial-gradient(ellipse at 75% 28%, rgba(${accentRgb},0.18), transparent 55%), radial-gradient(ellipse at 15% 100%, rgba(${accentRgb},0.08), transparent 60%), linear-gradient(160deg, #16161b 0%, #0c0c0e 100%)`,
        }}
      />
      <div className="rc-art-grid" />
      {car.image_url ? (
        <img className="rc-art-photo" src={car.image_url} alt={`${car.brand} ${car.model_en}`} />
      ) : (
        <image-slot
          id={`car-photo-${car.id}`}
          class="rc-art-slot"
          shape="rect"
          placeholder={`Drop a ${car.brand} ${car.model_en} photo`}
        ></image-slot>
      )}
      <div className="rc-art-floor" />
    </div>
  );
}

function ReceiptCard({ car }) {
  const meta = TIER_META[car.tier];
  const unpriced = car.china_price_usd == null;
  const wa = (typeof WA !== "undefined" && WA.beirut)
    ? WA.beirut.replace(/text=.*$/, "text=" + encodeURIComponent(`Hi Icon One, I'd like to reserve the ${car.brand} ${car.model_en} with a deposit. Please send the next steps.`))
    : "#";

  return (
    <article className="rc-card" data-tier={car.tier}>
      <ReceiptCardArt car={car} accent={meta.accent} accentRgb={meta.accentRgb} />

      <div className="rc-card-badges">
        <span className="rc-tier-badge" style={{ background: meta.accent, color: car.tier === "auto_electric" ? "#0a0a0b" : "#0a0a0b" }}>
          {meta.title}
        </span>
        <span className="rc-fuel-badge">{car.fuel}</span>
      </div>

      <div className="rc-card-body">
        <div className="rc-eyebrow">{car.brand}</div>
        <h3 className="rc-model serif">{car.model_en}</h3>
        <div className="rc-model-cn" lang="zh">{car.model_cn}</div>

        <div className="rc-specs">
          <span>{car.body_type}</span>
          <span className="rc-dot">·</span>
          <span>{typeof car.seats === "number" ? `${car.seats} seats` : `${car.seats} seats`}</span>
          {car.ev_range_km && (
            <>
              <span className="rc-dot">·</span>
              <span>{car.ev_range_km} km</span>
            </>
          )}
        </div>

        {unpriced ? (
          <div className="rc-unpriced">
            <div className="rc-eyebrow" style={{ color: meta.accent, marginBottom: 8 }}>Export-only model</div>
            <p className="rc-flag">{car.data_flag}</p>
            {car.headline && <p className="rc-headline">{car.headline}</p>}
            <a href={wa} target="_blank" rel="noopener" className="rc-cta rc-cta-ghost" style={{ borderColor: `rgba(${meta.accentRgb},0.6)`, color: meta.accent }}>
              Inquire about availability →
            </a>
          </div>
        ) : (
          <>
            <div className="rc-prices">
              <div className="rc-price-row">
                <div className="rc-price-meta">
                  <div className="rc-eyebrow rc-flag-row">
                    <span className="rc-flagicon" aria-hidden="true">🇨🇳</span> Shenzhen showroom
                  </div>
                  <div className="rc-price-sub">{car.china_price_rmb_wan}万 RMB · <span lang="zh">真实成交价</span></div>
                </div>
                <div className="rc-price-china num">{fmtUSD(car.china_price_usd)}</div>
              </div>

              <div className="rc-price-row rc-price-row--hero">
                <div className="rc-price-meta">
                  <div className="rc-eyebrow rc-flag-row" style={{ color: meta.accent }}>
                    <span className="rc-flagicon" aria-hidden="true">🇱🇧</span> Icon One delivered
                  </div>
                  <div className="rc-price-sub">Cleared, plated, ready</div>
                </div>
                <div className="rc-price-hero serif num" style={{ color: meta.accent }}>
                  {fmtUSD(car.icon_one_landed_usd)}
                </div>
              </div>

              {car.lebanon_dealer_usd && (
                <div className="rc-savings" style={{ borderColor: `rgba(${meta.accentRgb},0.22)`, background: `rgba(${meta.accentRgb},0.05)` }}>
                  <span className="rc-savings-label">
                    Local dealer asks <span className="rc-strike num">{fmtUSD(car.lebanon_dealer_usd)}</span>
                  </span>
                  <span className="rc-savings-pct mono">Save {car.savings_pct}%</span>
                </div>
              )}
            </div>

            {car.headline && <p className="rc-headline">{car.headline}</p>}

            <a href={wa} target="_blank" rel="noopener" className="rc-cta" style={{ background: meta.accent, color: car.tier === "auto_exclusive" ? "var(--bone)" : "var(--ink-0)" }}>
              Reserve with deposit →
            </a>

            {car.warranty_note && <p className="rc-foot-note">{car.warranty_note}</p>}
            {car.competitor_note && <p className="rc-foot-note">{car.competitor_note}</p>}
          </>
        )}
      </div>
    </article>
  );
}

// Empty "source any car" tile — opens a small request panel inline,
// then fires a prefilled WhatsApp message with the requested model.
function RequestCard({ tier }) {
  const [open, setOpen] = useStateR(false);
  const [model, setModel] = useStateR("");
  const [notes, setNotes] = useStateR("");
  const inputRef = useRefR(null);

  useEffectR(() => {
    if (open && inputRef.current) inputRef.current.focus();
  }, [open]);

  const submit = (e) => {
    e && e.preventDefault();
    if (!model.trim()) {
      inputRef.current && inputRef.current.focus();
      return;
    }
    const msg = `Hi Icon One, I'd like a quote on a car that isn't in the catalog.\n\nMake & model: ${model}${notes.trim() ? `\nNotes: ${notes}` : ""}\n\nCan you source it from China and tell me the landed price in Beirut?`;
    const base = (typeof WA !== "undefined" && WA.beirut) ? WA.beirut.split("?")[0] : "https://wa.me/";
    const url = base + "?text=" + encodeURIComponent(msg);
    window.open(url, "_blank", "noopener");
  };

  if (!open) {
    return (
      <button
        type="button"
        className="rc-request rc-request-idle"
        onClick={() => setOpen(true)}
        aria-label="Request a car not in the catalog"
      >
        <div className="rc-request-plus" aria-hidden="true">
          <span /><span />
        </div>
        <div className="rc-request-idle-title serif">Don't see your car?</div>
        <div className="rc-request-idle-sub">
          Tap to request any make and model from China — we'll quote landed price to your door.
        </div>
        <div className="rc-request-idle-cta mono">SOURCE ANY CAR →</div>
      </button>
    );
  }

  return (
    <form className="rc-request rc-request-open" onSubmit={submit}>
      <div className="rc-request-head">
        <div className="rc-eyebrow" style={{ color: "var(--amber)" }}>Custom sourcing request</div>
        <button type="button" className="rc-request-close" onClick={() => setOpen(false)} aria-label="Close">×</button>
      </div>
      <h3 className="rc-model serif" style={{ marginTop: 8 }}>Tell us the car.</h3>

      <label className="rc-request-field">
        <span className="rc-request-label mono">Make & model</span>
        <input
          ref={inputRef}
          type="text"
          value={model}
          onChange={(e) => setModel(e.target.value)}
          placeholder="e.g. Li Auto L9, NIO ET5, Avatr 12…"
          className="rc-request-input"
        />
      </label>

      <label className="rc-request-field">
        <span className="rc-request-label mono">Notes <span style={{ color: "var(--mute-2)", textTransform: "none", letterSpacing: 0 }}>(trim, color, year — optional)</span></span>
        <textarea
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          placeholder="Long-range trim, white exterior, 2026 model year…"
          rows={3}
          className="rc-request-input rc-request-textarea"
        />
      </label>

      <button type="submit" className="rc-cta rc-request-submit" style={{ background: "var(--amber)", color: "var(--ink-0)" }}>
        Send request on WhatsApp →
      </button>

      <p className="rc-foot-note" style={{ marginTop: 14 }}>
        We respond within 24 hours with the China showroom price and an estimated landed cost to your door. No commitment.
      </p>
    </form>
  );
}

function ChinaReceipts() {
  const [activeTier, setActiveTier] = useStateR("all");
  const [sortBy, setSortBy] = useStateR("savings");

  const filtered = useMemoR(() => {
    const list = RECEIPTS_CARS.filter((c) => activeTier === "all" ? true : c.tier === activeTier);
    return [...list].sort((a, b) => {
      // Always push unpriced cars (export-only) to the end.
      if (a.china_price_usd == null && b.china_price_usd != null) return 1;
      if (b.china_price_usd == null && a.china_price_usd != null) return -1;
      if (a.china_price_usd == null && b.china_price_usd == null) return 0;
      if (sortBy === "price-asc")  return (a.icon_one_landed_usd || 0) - (b.icon_one_landed_usd || 0);
      if (sortBy === "price-desc") return (b.icon_one_landed_usd || 0) - (a.icon_one_landed_usd || 0);
      return (b.savings_pct || 0) - (a.savings_pct || 0);
    });
  }, [activeTier, sortBy]);

  const tiers = ["all", "auto", "auto_electric", "auto_exclusive"];

  return (
    <section id="receipts" style={{ padding: "120px 0", borderTop: "1px solid var(--line)", background: "var(--ink-0)", position: "relative" }}>
      <div className="wrap">
        <div className="rc-header" data-reveal>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span style={{ color: "var(--amber)" }}>The catalog</span> · Real Chinese showroom prices
          </div>
          <h2 className="serif rc-title">
            What you pay in China.<br />
            <em style={{ color: "var(--amber)" }}>What you pay through Icon One.</em>
          </h2>
          <p className="rc-sub">
            Browse the lineup we currently source. Each card shows the live Chinese showroom price, what it costs to land with Icon One — cleared, registered, ready — and what the same car asks at a local dealer. Don't see what you want? <span style={{ color: "var(--bone)" }}>Tap the “source any car” tile</span> at the end of the grid and we'll quote it.
          </p>
        </div>

        <div className="rc-filters" data-reveal data-delay="100">
          <div className="rc-tier-row" role="tablist" aria-label="Filter by tier">
            {tiers.map((tier) => {
              const isActive = activeTier === tier;
              const meta = tier === "all" ? null : TIER_META[tier];
              return (
                <button
                  key={tier}
                  role="tab"
                  aria-selected={isActive}
                  onClick={() => setActiveTier(tier)}
                  className="rc-chip calc-chip"
                  style={{
                    background: isActive ? "var(--bone)" : "transparent",
                    color: isActive ? "var(--ink-0)" : "var(--bone)",
                    borderColor: isActive ? "var(--bone)" : "var(--line-2)",
                  }}
                >
                  {meta && (
                    <span className="rc-chip-dot" style={{ background: meta.accent, opacity: isActive ? 1 : 0.85 }} />
                  )}
                  {tier === "all" ? "All models" : meta.title}
                </button>
              );
            })}
          </div>

          <div className="rc-sort">
            <span className="mono rc-sort-label">Sort</span>
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
              className="rc-select"
              aria-label="Sort cars"
            >
              <option value="savings">Biggest savings</option>
              <option value="price-asc">Price ↑</option>
              <option value="price-desc">Price ↓</option>
            </select>
          </div>

          <div className="rc-count mono">{filtered.length} models</div>
        </div>

        <div className="rc-grid">
          {filtered.map((car, i) => (
            <div key={car.id} className="rc-grid-item" data-reveal data-delay={String(Math.min(((i % 3) * 100) + 100, 600))}>
              <ReceiptCard car={car} />
            </div>
          ))}
          <div className="rc-grid-item" data-reveal data-delay="200">
            <RequestCard tier={activeTier} />
          </div>
        </div>

        <p className="rc-foot" data-reveal>
          China prices reflect <span lang="zh">真实成交价</span> (real transaction price) at entry trim, sourced from public Chinese marketplaces. Icon One landed prices include FOB sourcing, shared-container ocean freight, destination customs and VAT, registration and plates where applicable, and the Icon One service fee. Final invoice depends on trim, color, and destination. Made-to-order — customer deposit confirms the buy.
        </p>
      </div>

      <style>{`
        .rc-header { max-width: 880px; margin-bottom: 56px; }
        .rc-title { font-size: clamp(38px, 5.5vw, 64px); line-height: 1.02; letter-spacing: -0.015em; color: var(--bone); margin: 0 0 22px; font-weight: 400; }
        .rc-title em { font-style: italic; }
        .rc-sub { font-size: 16px; line-height: 1.65; color: var(--mute); max-width: 720px; margin: 0; }

        .rc-filters {
          display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
          margin-bottom: 40px; padding-bottom: 22px;
          border-bottom: 1px solid var(--line);
        }
        .rc-tier-row { display: flex; flex-wrap: wrap; gap: 8px; }
        .rc-chip {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 16px; border-radius: 999px;
          border: 1px solid var(--line-2);
          background: transparent; color: var(--bone);
          font-family: var(--sans); font-size: 13px; font-weight: 500;
          letter-spacing: 0.01em; cursor: pointer;
          transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
        }
        .rc-chip:hover { border-color: var(--bone); transform: translateY(-1px); }
        .rc-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

        .rc-sort { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
        .rc-sort-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute-2); }
        .rc-select {
          background: transparent; color: var(--bone);
          border: 1px solid var(--line-2); border-radius: 999px;
          padding: 9px 32px 9px 14px; font-family: var(--sans); font-size: 13px;
          cursor: pointer; appearance: none; -webkit-appearance: none;
          background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
          background-position: calc(100% - 16px) center, calc(100% - 11px) center;
          background-size: 5px 5px, 5px 5px;
          background-repeat: no-repeat;
          transition: border-color .25s ease;
        }
        .rc-select:hover { border-color: var(--bone); }
        .rc-select option { background: var(--ink-1); color: var(--bone); }
        .rc-count { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute-2); }

        .rc-grid {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 24px;
        }
        @media (max-width: 1100px) { .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 680px)  { .rc-grid { grid-template-columns: 1fr; gap: 16px; } }

        .rc-grid-item { display: flex; }

        .rc-card {
          position: relative; display: flex; flex-direction: column; width: 100%;
          background: linear-gradient(160deg, #16161b 0%, #0c0c0e 100%);
          border: 1px solid var(--line);
          border-radius: 6px;
          overflow: hidden;
          transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease;
        }
        .rc-card:hover {
          transform: translateY(-4px);
          border-color: var(--line-2);
          box-shadow: 0 24px 60px -28px rgba(0,0,0,0.7);
        }
        .rc-card[data-tier="auto"]:hover           { border-color: rgba(232,115,46,0.32); }
        .rc-card[data-tier="auto_electric"]:hover  { border-color: rgba(109,190,126,0.32); }
        .rc-card[data-tier="auto_exclusive"]:hover { border-color: rgba(47,77,199,0.36); }

        /* Art block */
        .rc-art {
          position: relative; aspect-ratio: 16 / 9;
          overflow: hidden;
          border-bottom: 1px solid var(--line);
        }
        .rc-art-bg { position: absolute; inset: 0; }
        .rc-art-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
          background-size: 40px 40px;
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
        }
        .rc-art-silhouette {
          position: absolute; inset: 8% 6% 12% 6%;
          display: flex; align-items: center; justify-content: center;
          filter: drop-shadow(0 18px 24px rgba(0,0,0,0.55));
        }
        .rc-art-slot {
          position: absolute; inset: 0;
          display: block; width: 100%; height: 100%;
        }
        .rc-art-photo {
          position: absolute; inset: 0;
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
        }
        .rc-art-floor {
          position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
          background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.6) 70%, rgba(10,10,11,0.85) 100%);
          pointer-events: none;
        }

        .rc-card-badges {
          position: absolute; top: 14px; left: 14px; right: 14px;
          display: flex; justify-content: space-between; gap: 8px;
          z-index: 2;
        }
        .rc-tier-badge {
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
          text-transform: uppercase; font-weight: 500;
          padding: 5px 10px; border-radius: 999px;
        }
        .rc-fuel-badge {
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
          text-transform: uppercase; color: var(--bone);
          background: rgba(10,10,11,0.6);
          border: 1px solid var(--line-2);
          padding: 4px 10px; border-radius: 999px;
          backdrop-filter: blur(6px);
        }

        .rc-card-body { padding: 24px 22px 22px; display: flex; flex-direction: column; }

        .rc-eyebrow {
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--mute-2);
        }
        .rc-model { font-size: 30px; line-height: 1.05; margin: 4px 0 2px; color: var(--bone); letter-spacing: -0.01em; }
        .rc-model-cn { font-size: 13px; color: var(--mute-2); letter-spacing: 0.04em; }
        .rc-specs {
          margin-top: 14px;
          display: flex; flex-wrap: wrap; gap: 8px;
          font-family: var(--mono); font-size: 11px;
          color: var(--mute); letter-spacing: 0.04em;
        }
        .rc-dot { color: var(--mute-2); }

        .rc-prices { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
        .rc-price-row {
          display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
          padding-bottom: 14px;
          border-bottom: 1px dashed rgba(255,255,255,0.07);
        }
        .rc-price-row--hero { border-bottom: 0; padding-bottom: 0; }
        .rc-price-meta { min-width: 0; }
        .rc-flag-row { display: inline-flex; align-items: center; gap: 6px; }
        .rc-flagicon { font-size: 11px; line-height: 1; filter: saturate(0.85); }
        .rc-price-sub { font-family: var(--mono); font-size: 10px; color: var(--mute-2); margin-top: 4px; letter-spacing: 0.02em; }
        .rc-price-china {
          font-family: var(--mono);
          font-size: 18px;
          color: var(--mute);
          font-variant-numeric: tabular-nums;
        }
        .rc-price-hero {
          font-size: 32px;
          line-height: 1;
          font-variant-numeric: tabular-nums;
          letter-spacing: -0.01em;
          white-space: nowrap;
        }

        .rc-savings {
          margin-top: 4px;
          display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
          padding: 11px 14px;
          border: 1px solid;
          border-radius: 4px;
          font-size: 12px;
        }
        .rc-savings-label { color: var(--mute); }
        .rc-strike { color: var(--mute-2); text-decoration: line-through; font-variant-numeric: tabular-nums; }
        .rc-savings-pct { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); font-weight: 500; white-space: nowrap; }

        .rc-headline {
          margin: 20px 0 0;
          font-family: var(--serif);
          font-style: italic;
          font-size: 17px;
          line-height: 1.4;
          color: var(--bone);
          letter-spacing: -0.005em;
        }

        .rc-cta {
          margin-top: 22px;
          display: inline-flex; align-items: center; justify-content: center;
          padding: 14px 20px;
          border-radius: 999px;
          font-family: var(--sans); font-size: 13px; font-weight: 600;
          letter-spacing: 0.01em;
          text-decoration: none;
          transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
        }
        .rc-cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 24px -10px rgba(0,0,0,0.6); }
        .rc-cta-ghost { background: transparent; border: 1px solid; }
        .rc-cta-ghost:hover { filter: none; }

        .rc-foot-note {
          margin: 12px 0 0;
          font-size: 11px;
          line-height: 1.5;
          color: var(--mute-2);
        }

        .rc-unpriced { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
        .rc-flag { font-size: 13px; color: var(--mute); line-height: 1.55; margin: 0 0 8px; }

        .rc-foot {
          margin-top: 48px;
          font-family: var(--sans); font-style: italic;
          font-size: 12px; line-height: 1.65; color: var(--mute-2);
          max-width: 920px;
        }

        @media (max-width: 680px) {
          .rc-filters { gap: 12px; }
          .rc-sort { margin-inline-start: 0; }
          .rc-count { margin-inline-start: auto; }
          .rc-card-body { padding: 22px 20px 20px; }
          .rc-model { font-size: 26px; }
          .rc-price-hero { font-size: 28px; }
        }

        /* Request-a-car tile */
        .rc-request {
          position: relative; display: flex; flex-direction: column; width: 100%;
          border-radius: 6px;
          padding: 32px 24px;
          font-family: var(--sans);
          text-align: start;
        }
        .rc-request-idle {
          align-items: flex-start; justify-content: center;
          background:
            repeating-linear-gradient(135deg, rgba(232,115,46,0.05) 0 10px, transparent 10px 22px),
            linear-gradient(160deg, #16161b 0%, #0c0c0e 100%);
          border: 1.5px dashed rgba(232,115,46,0.4);
          color: var(--bone);
          cursor: pointer;
          min-height: 100%;
          transition: border-color .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, background .4s ease;
        }
        .rc-request-idle:hover {
          border-color: var(--amber);
          transform: translateY(-4px);
          box-shadow: 0 24px 60px -28px rgba(232,115,46,0.4);
        }
        .rc-request-idle:hover .rc-request-plus {
          transform: rotate(90deg);
          background: rgba(232,115,46,0.18);
        }
        .rc-request-plus {
          position: relative;
          width: 56px; height: 56px;
          border-radius: 50%;
          background: rgba(232,115,46,0.10);
          border: 1px solid rgba(232,115,46,0.4);
          margin-bottom: 26px;
          transition: transform .5s cubic-bezier(.16,1,.3,1), background .3s ease;
        }
        .rc-request-plus span {
          position: absolute; top: 50%; left: 50%; background: var(--amber);
          transform: translate(-50%, -50%);
        }
        .rc-request-plus span:first-child { width: 22px; height: 1.5px; }
        .rc-request-plus span:last-child  { width: 1.5px; height: 22px; }

        .rc-request-idle-title {
          font-size: 28px; line-height: 1.1; color: var(--bone);
          letter-spacing: -0.01em; margin-bottom: 12px;
        }
        .rc-request-idle-sub {
          font-size: 14px; line-height: 1.55; color: var(--mute);
          max-width: 320px; margin-bottom: 24px;
        }
        .rc-request-idle-cta {
          margin-top: auto;
          font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--amber); font-weight: 500;
        }

        /* Open form */
        .rc-request-open {
          background: linear-gradient(160deg, #1a1a1f 0%, #0e0e10 100%);
          border: 1px solid rgba(232,115,46,0.45);
          box-shadow: 0 24px 60px -20px rgba(232,115,46,0.18);
        }
        .rc-request-head {
          display: flex; align-items: center; justify-content: space-between;
        }
        .rc-request-close {
          background: transparent; border: 1px solid var(--line-2);
          color: var(--bone); width: 30px; height: 30px; border-radius: 50%;
          font-size: 18px; line-height: 1; cursor: pointer;
          display: inline-flex; align-items: center; justify-content: center;
          transition: border-color .25s ease, color .25s ease, background .25s ease;
        }
        .rc-request-close:hover { border-color: var(--amber); color: var(--amber); background: rgba(232,115,46,0.08); }

        .rc-request-field { display: block; margin-top: 18px; }
        .rc-request-label {
          display: block; font-size: 10px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--mute-2);
          margin-bottom: 8px;
        }
        .rc-request-input {
          width: 100%;
          background: rgba(10,10,11,0.55);
          border: 1px solid var(--line-2);
          border-radius: 4px;
          color: var(--bone);
          font-family: var(--sans);
          font-size: 14px;
          padding: 11px 14px;
          transition: border-color .25s ease, background .25s ease;
          outline: none;
        }
        .rc-request-input:focus {
          border-color: var(--amber);
          background: rgba(10,10,11,0.85);
        }
        .rc-request-textarea {
          resize: vertical;
          min-height: 70px;
          line-height: 1.5;
        }
        .rc-request-submit {
          margin-top: 24px;
          width: 100%;
          padding: 14px 20px;
        }
      `}</style>
    </section>
  );
}

// ─── Companion section: provenance / "where these numbers come from" ───
function SourcingProof() {
  return (
    <section id="provenance" style={{ padding: "120px 0", borderTop: "1px solid var(--line)", background: "var(--ink-1)" }}>
      <div className="wrap">
        <div className="sp-header" data-reveal>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Where these numbers come from</div>
          <h2 className="serif sp-title">
            We don't invent prices. <em style={{ color: "var(--amber)" }}>We screenshot them.</em>
          </h2>
          <p className="sp-sub">
            Three things make the math above defensible: a public Chinese marketplace, a fixed exchange-rate methodology, and the 2024 Lebanese Budget Law that rewrites duty on every car we land.
          </p>
        </div>

        <div className="sp-grid">
          {/* Left: mock Autohome listing card */}
          <div className="sp-source" data-reveal data-delay="100">
            <div className="sp-source-window">
              <div className="sp-source-chrome">
                <div className="sp-source-dots"><span /><span /><span /></div>
                <div className="sp-source-url mono"><span style={{ color: "var(--mute-2)" }}>autohome.com.cn</span> / che/3170 / koubei</div>
              </div>
              <div className="sp-source-body">
                <div className="sp-source-brandline">
                  <div lang="zh" className="serif" style={{ fontSize: 22, color: "var(--bone)", letterSpacing: "-0.01em" }}>比亚迪汉 EV 智驾版</div>
                  <span className="sp-source-tag mono">真实成交价</span>
                </div>
                <div className="sp-source-priceline">
                  <div>
                    <div className="mono" style={{ fontSize: 10, letterSpacing: ".18em", color: "var(--mute-2)", textTransform: "uppercase" }}>Real transaction · entry trim</div>
                    <div className="serif num" style={{ fontSize: 44, lineHeight: 1.05, color: "var(--bone)", marginTop: 6 }}>
                      <span style={{ color: "var(--amber)" }}>¥</span>10.28<span style={{ fontSize: 22, color: "var(--mute)", marginInlineStart: 6 }}>万</span>
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--mute)", marginTop: 4 }}>≈ $14,200 USD @ 0.1379</div>
                  </div>
                  <div className="sp-source-msrp">
                    <div className="mono" style={{ fontSize: 9, letterSpacing: ".18em", color: "var(--mute-2)", textTransform: "uppercase" }}>Sticker MSRP</div>
                    <div className="num" style={{ fontFamily: "var(--mono)", fontSize: 14, color: "var(--mute)", textDecoration: "line-through", marginTop: 4 }}>¥14.68万 — ¥20.58万</div>
                  </div>
                </div>
                <div className="sp-source-meta">
                  <div className="sp-source-meta-row">
                    <span className="mono" style={{ color: "var(--mute-2)" }}>Source</span>
                    <span>Autohome 汽车之家 · china's #1 auto marketplace</span>
                  </div>
                  <div className="sp-source-meta-row">
                    <span className="mono" style={{ color: "var(--mute-2)" }}>Refreshed</span>
                    <span>Quarterly · last May 2026</span>
                  </div>
                  <div className="sp-source-meta-row">
                    <span className="mono" style={{ color: "var(--mute-2)" }}>FX rate</span>
                    <span>¥1 = $0.1379 (RMB → USD)</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="sp-source-caption">
              <span className="serif" style={{ fontSize: 17, fontStyle: "italic", color: "var(--bone)" }}>"Real transaction price"</span>
              <span style={{ display: "block", marginTop: 6 }}>— not the showroom sticker, not a media review. The number Chinese buyers actually walked out paying, scraped from the platform Chinese buyers use to research before they buy.</span>
            </div>
          </div>

          {/* Right: cost stack + Article 69 */}
          <div className="sp-math">
            <div className="sp-card" data-reveal data-delay="200">
              <div className="mono sp-card-eyebrow">02 · The cost stack</div>
              <div className="sp-stack">
                <div className="sp-stack-row">
                  <span>Autohome <span lang="zh">真实成交价</span></span>
                  <span className="num">FOB China</span>
                </div>
                <div className="sp-stack-row sp-stack-add">
                  <span>+ Exporter premium</span>
                  <span className="mono sp-stack-pct">5–8%</span>
                </div>
                <div className="sp-stack-row sp-stack-add">
                  <span>+ 40HQ container share + insurance</span>
                  <span className="mono sp-stack-pct">~$1,000</span>
                </div>
                <div className="sp-stack-row sp-stack-add">
                  <span>+ Beirut port handling + clearance</span>
                  <span className="mono sp-stack-pct">~$250</span>
                </div>
                <div className="sp-stack-row sp-stack-add">
                  <span>+ Lebanese customs · VAT · plates</span>
                  <span className="mono sp-stack-pct">Article 69</span>
                </div>
                <div className="sp-stack-row sp-stack-add">
                  <span>+ Icon One service fee</span>
                  <span className="mono sp-stack-pct">7%</span>
                </div>
                <div className="sp-stack-total">
                  <span className="serif" style={{ fontSize: 22, color: "var(--bone)" }}>= your landed quote</span>
                  <span className="mono" style={{ fontSize: 10, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--amber)" }}>Cleared · Plated · Ready</span>
                </div>
              </div>
            </div>

            <div className="sp-card sp-card-law" data-reveal data-delay="300">
              <div className="mono sp-card-eyebrow">03 · Article 69 · 2024 Lebanese Budget Law</div>
              <div className="sp-law-grid">
                <div className="sp-law-cell">
                  <div className="mono sp-law-tag" style={{ color: "var(--green)" }}>BEV</div>
                  <div className="serif num sp-law-num" style={{ color: "var(--green)" }}>0%</div>
                  <div className="sp-law-note">customs duty · 11% VAT · 70% reduced plates</div>
                </div>
                <div className="sp-law-cell">
                  <div className="mono sp-law-tag" style={{ color: "var(--amber)" }}>PHEV</div>
                  <div className="serif num sp-law-num" style={{ color: "var(--amber)" }}>4.4%</div>
                  <div className="sp-law-note">effective duty (80% reduction) · 11% VAT · 70% reduced plates</div>
                </div>
                <div className="sp-law-cell">
                  <div className="mono sp-law-tag" style={{ color: "var(--bone)" }}>ICE</div>
                  <div className="serif num sp-law-num" style={{ color: "var(--bone)" }}>22%</div>
                  <div className="sp-law-note">+ 3% additional · 11% VAT · full registration</div>
                </div>
              </div>
              <p className="sp-law-foot">
                The 2024 reform makes EVs and plug-in hybrids structurally cheaper to land than ICE — that's why the savings % on our BEV cards is bigger than the badge alone suggests.
              </p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .sp-header { max-width: 880px; margin-bottom: 56px; }
        .sp-title { font-size: clamp(38px, 5.5vw, 64px); line-height: 1.02; letter-spacing: -0.015em; color: var(--bone); margin: 0 0 22px; font-weight: 400; }
        .sp-title em { font-style: italic; }
        .sp-sub { font-size: 16px; line-height: 1.65; color: var(--mute); max-width: 720px; margin: 0; }

        .sp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 32px; align-items: start; }
        @media (max-width: 980px) { .sp-grid { grid-template-columns: 1fr; gap: 24px; } }

        .sp-source-window {
          background: linear-gradient(160deg, #1a1a1f 0%, #0c0c0e 100%);
          border: 1px solid var(--line-2);
          border-radius: 6px;
          overflow: hidden;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7);
        }
        .sp-source-chrome {
          display: flex; align-items: center; gap: 14px;
          padding: 12px 14px;
          background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
          border-bottom: 1px solid var(--line);
        }
        .sp-source-dots { display: flex; gap: 6px; }
        .sp-source-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.10); display: block; }
        .sp-source-url {
          flex: 1;
          font-size: 11px;
          color: var(--mute);
          padding: 5px 12px;
          background: rgba(10,10,11,0.6);
          border: 1px solid var(--line);
          border-radius: 999px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .sp-source-body { padding: 26px 26px 24px; }
        .sp-source-brandline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
        .sp-source-tag {
          font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
          padding: 5px 9px; border-radius: 4px;
          color: var(--amber);
          background: rgba(232,115,46,0.10);
          border: 1px solid rgba(232,115,46,0.32);
        }
        .sp-source-priceline { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px dashed var(--line); }
        .sp-source-msrp { text-align: end; }
        .sp-source-meta { margin-top: 18px; display: grid; gap: 10px; }
        .sp-source-meta-row {
          display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline;
          font-size: 13px; color: var(--bone);
        }
        .sp-source-meta-row .mono { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
        .sp-source-caption {
          margin-top: 22px;
          font-size: 13px; line-height: 1.6; color: var(--mute);
          padding-inline-start: 18px;
          border-inline-start: 1px solid var(--line-2);
        }

        .sp-math { display: flex; flex-direction: column; gap: 20px; }
        .sp-card {
          background: linear-gradient(160deg, #15151a 0%, #0e0e10 100%);
          border: 1px solid var(--line-2);
          border-radius: 6px;
          padding: 26px 26px 24px;
        }
        .sp-card-eyebrow {
          font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--mute-2);
          margin-bottom: 18px;
        }

        .sp-stack { display: flex; flex-direction: column; gap: 0; }
        .sp-stack-row {
          display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
          padding: 11px 0;
          font-size: 13px; color: var(--bone);
          border-bottom: 1px dashed rgba(255,255,255,0.07);
        }
        .sp-stack-row .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-2); }
        .sp-stack-add { color: var(--mute); }
        .sp-stack-add .sp-stack-pct { color: var(--bone); font-size: 12px; letter-spacing: 0; text-transform: none; }
        .sp-stack-total {
          display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
          margin-top: 16px; padding-top: 18px;
          border-top: 1px solid var(--line-2);
        }

        .sp-card-law {}
        .sp-law-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .sp-law-cell {
          padding: 18px 16px;
          border-inline-end: 1px solid var(--line);
          min-width: 0;
        }
        .sp-law-cell:last-child { border-inline-end: 0; }
        .sp-law-tag { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; }
        .sp-law-num { font-size: 36px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
        .sp-law-note { margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--mute); }
        .sp-law-foot { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--mute); font-style: italic; }

        @media (max-width: 560px) {
          .sp-law-grid { grid-template-columns: 1fr; }
          .sp-law-cell { border-inline-end: 0; border-bottom: 1px solid var(--line); }
          .sp-law-cell:last-child { border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

window.ChinaReceipts = ChinaReceipts;
window.SourcingProof = SourcingProof;