// 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: 9.49, china_price_usd: 13100, icon_one_landed_usd: 19500, lebanon_dealer_usd: 28000, savings_pct: 30, headline: "Style-first compact SUV at city-car money", image_url: "https://silkroadautomotivecdn.b-cdn.net/cars/jetour/dashing/hero-v2.png?width=800", gallery: ["https://silkroadautomotivecdn.b-cdn.net/cars/jetour/dashing/gallery-01-side-profile.jpg", "https://silkroadautomotivecdn.b-cdn.net/cars/jetour/dashing/gallery-02-rear.jpg", "https://silkroadautomotivecdn.b-cdn.net/cars/jetour/dashing/gallery-03-side-clean.jpg"] },
  { 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: 430, china_price_rmb_wan: 11.99, china_price_usd: 16600, icon_one_landed_usd: 22500, lebanon_dealer_usd: 32000, savings_pct: 30, headline: "Best-selling Chinese EV — 0% customs duty, reduced registration in Lebanon", image_url: "https://silkroadautomotivecdn.b-cdn.net/cars/byd/atto-3/hero.png?width=800" },
  { id: "rox-01", brand: "ROX", model_en: "01", model_cn: "极石01", tier: "auto_exclusive", body_type: "Premium Off-road SUV", fuel: "EREV", seats: 6, ev_range_km: 200, china_price_rmb_wan: 30, china_price_usd: 41400, icon_one_landed_usd: 58000, headline: "Range-extender Defender from Shanghai — boxy 4×4 body, EV-quiet daily driving", image_url: "https://silkroadautomotivecdn.b-cdn.net/cars/rox/01/hero.png?width=800" },
  { id: "avatr-11", brand: "Avatr", model_en: "11", model_cn: "阿维塔11", tier: "auto_exclusive", body_type: "Luxury EV SUV", fuel: "BEV / EREV", seats: 5, ev_range_km: 760, china_price_rmb_wan: 28.99, china_price_usd: 40000, icon_one_landed_usd: 52000, headline: "CATL + Huawei-backed luxury EV SUV — flagship tech, sourced from the China market" },
  { id: "geely-coolray", brand: "Geely", model_en: "Coolray", model_cn: "吉利缤越", tier: "auto", body_type: "Compact SUV", fuel: "Petrol", seats: 5, china_price_rmb_wan: 10.8, china_price_usd: 14900, icon_one_landed_usd: 20900, lebanon_dealer_usd: 31900, savings_pct: 34, headline: "Turbocharged compact SUV — Geely's global best-seller" },
];

const TIER_META = {
  auto:           { title: "Auto",           full: "China Bridge Auto",           sub: "Mainstream Chinese SUVs & sedans",        accent: "var(--amber)",  accentRgb: "232,115,46" },
  auto_electric:  { title: "Auto Electric",  full: "China Bridge Auto Electric",  sub: "BEVs & premium EVs · destination duties vary", accent: "var(--green)",  accentRgb: "109,190,126" },
  auto_exclusive: { title: "Auto Exclusive", full: "China Bridge 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"],
  "Chery":  ["#5a2a2a", "#1a0c0c"],
  "ROX":    ["#2e2a22", "#14110a"],
  "Avatr":  ["#3a2a44", "#140c1a"],
  "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 China Bridge Auto, I'd like to reserve the ${car.brand} ${car.model_en} with a deposit. Please send the next steps.`))
    : "";

  // The Reserve / Inquire buttons used to jump straight to WhatsApp with a
  // fire-and-forget lead alongside. That had two failure modes: (1) any
  // browser-cached old submitLead.js silently mis-shaped the payload and
  // the controller rejected it, (2) the customer never knew if anything
  // got recorded. The modal replaces both: explicit choice of WA/Email,
  // and the email path captures a real address with a visible confirmation.
  const [modalOpen, setModalOpen] = useStateR(false);
  const Modal = typeof window !== "undefined" ? window.InquiryModal : null;

  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>}
            <button
              type="button"
              onClick={() => setModalOpen(true)}
              className="rc-cta rc-cta-ghost"
              style={{
                borderColor: `rgba(${meta.accentRgb},0.6)`,
                color: meta.accent,
                font: "inherit",
                cursor: "pointer",
              }}
            >
              Inquire about availability →
            </button>
          </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> China 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> China Bridge Auto 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>}

            <button
              type="button"
              onClick={() => setModalOpen(true)}
              className="rc-cta"
              style={{
                background: meta.accent,
                color: car.tier === "auto_exclusive" ? "var(--bone)" : "var(--ink-0)",
                border: "none",
                font: "inherit",
                cursor: "pointer",
              }}
            >
              Reserve with deposit →
            </button>

            {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>

      {Modal && (
        <Modal
          car={car}
          isOpen={modalOpen}
          onClose={() => setModalOpen(false)}
          waUrl={wa}
        />
      )}
    </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 China Bridge Auto, 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?`;
    if (typeof window !== "undefined" && window.fireAutoLead) {
      window.fireAutoLead({
        inquiry_source: "auto_custom",
        request_kind: "Custom Request",
        subject: model,
        whatsapp: (typeof WA !== "undefined" && WA.beirut) ? WA.beirut : "",
        cargo_type: "custom: " + model,
        details: [
          "Make & model requested: " + model,
          notes.trim() ? "Notes: " + notes.trim() : null,
        ],
      });
    }
    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");
  // Mobile horizontal-swipe state: which card is in view.
  const [activeCardIdx, setActiveCardIdx] = useStateR(0);
  const gridRef = useRefR(null);
  const hintActiveRef = useRefR(true);

  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"];

  // Track horizontal scroll position so the dot indicator reflects
  // which card the user is currently centred on. Also remove the
  // initial "swipe hint" animation as soon as the user actually
  // swipes (so we don't keep nudging them).
  const totalCards = filtered.length + 1; // + RequestCard tile
  useEffectR(() => {
    const el = gridRef.current;
    if (!el) return;
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const card = el.firstElementChild;
        const stride = card ? card.getBoundingClientRect().width + 14 : el.clientWidth;
        const idx = Math.round(el.scrollLeft / Math.max(1, stride));
        setActiveCardIdx(Math.max(0, Math.min(totalCards - 1, idx)));
        if (hintActiveRef.current) {
          el.classList.remove("h-swipe-hint");
          hintActiveRef.current = false;
        }
      });
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => { el.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, [totalCards]);

  // When filter/sort changes the active card resets to the first one.
  useEffectR(() => {
    setActiveCardIdx(0);
    const el = gridRef.current;
    if (el) el.scrollTo({ left: 0, behavior: "auto" });
  }, [activeTier, sortBy]);

  // One-time mobile peek nudge — the moment the carousel scrolls
  // into view, scroll it ~40px right then back, so the user sees
  // it's swipeable. Skipped if user already interacted, on desktop,
  // or if they've asked for reduced motion.
  useEffectR(() => {
    const el = gridRef.current;
    if (!el) return;
    if (typeof window === "undefined") return;
    const isMobile = window.matchMedia("(max-width: 760px)").matches;
    if (!isMobile) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let triggered = false;
    let timers = [];
    const io = new IntersectionObserver((entries) => {
      if (triggered) return;
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        triggered = true;
        timers.push(setTimeout(() => {
          if (!hintActiveRef.current) return;
          el.scrollTo({ left: 48, behavior: "smooth" });
          timers.push(setTimeout(() => {
            if (!hintActiveRef.current) return;
            el.scrollTo({ left: 0, behavior: "smooth" });
          }, 750));
        }, 500));
      }
    }, { threshold: 0.35 });
    io.observe(el);
    return () => { io.disconnect(); timers.forEach(clearTimeout); };
  }, []);

  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 China Bridge Auto.</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 China Bridge Auto (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="h-swipe-caption" aria-hidden="true">
          Swipe <span className="arrow">→</span> through the lineup
        </div>
        <div ref={gridRef} className="rc-grid h-swipe h-swipe-hint">
          {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>
        <div className="h-swipe-dots" aria-hidden="true">
          {Array.from({ length: totalCards }).map((_, i) => (
            <span key={i} className={"h-dot " + (i === activeCardIdx ? "on" : "")} />
          ))}
        </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. China Bridge Auto landed prices include FOB sourcing, shared-container ocean freight, destination customs and VAT, registration and plates where applicable, and the China Bridge Auto 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: 760px) {
          .rc-filters { gap: 12px; }
          .rc-sort { margin-inline-start: 0; }
          .rc-count { margin-inline-start: auto; }
          /* Compact the card so each horizontal-swipe panel fits the
             viewport with little/no vertical scroll within a card. */
          .rc-card-body { padding: 16px 16px 16px; }
          .rc-model { font-size: 22px; }
          .rc-model-cn { font-size: 12px; }
          .rc-specs { margin-top: 8px; font-size: 11px; }
          .rc-prices { margin-top: 14px; padding-top: 12px; gap: 9px; }
          .rc-price-row { padding-bottom: 9px; }
          .rc-price-china { font-size: 15px; }
          .rc-price-hero { font-size: 26px; }
          .rc-price-sub { font-size: 9px; margin-top: 2px; }
          .rc-savings { padding: 8px 11px; font-size: 11px; margin-top: 2px; }
          .rc-headline {
            margin-top: 12px; font-size: 14px; line-height: 1.35;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .rc-cta { margin-top: 14px; padding: 12px 18px; font-size: 13px; }
        }

        /* 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万 to ¥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>+ China Bridge Auto 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;