/* eslint-disable */
const { useState: useState_p, useMemo: useMemo_p, useEffect: useEffect_p } = React;

// ============================================================
// HOME
// ============================================================
function HomePage({ navigate, shop, openCart, openGarage, openQuickView }) {
  const parts = window.PARTS_DATA;
  const featured = parts.slice(0, 8);
  const [vehicleTab, setVehicleTab] = useState_p("reg");

  const categories = useMemo_p(() => {
    const map = new Map();
    parts.forEach(p => map.set(p.category, (map.get(p.category) || 0) + 1));
    return Array.from(map.entries());
  }, [parts]);

  const makes = ["Audi", "BMW", "Ford", "Mercedes-Benz", "Porsche", "Skoda", "Toyota", "Vauxhall", "Volkswagen"];
  const models = { "BMW": ["1 Series", "3 Series", "5 Series", "X1", "X3", "X5"], "Audi": ["A1", "A3", "A4", "A6", "Q3", "Q5"] };
  const years = Array.from({ length: 20 }, (_, i) => 2026 - i);
  const engines = ["1.5 TFSI", "2.0 TFSI", "2.0 TDI", "3.0 TDI", "3.0 V6"];

  const [reg, setReg] = useState_p("");
  const [make, setMake] = useState_p("");
  const [model, setModel] = useState_p("");
  const [year, setYear] = useState_p("");
  const [engine, setEngine] = useState_p("");

  // Reg-lookup state — live validation, loading, last result, and the
  // model the user picks for DVLA hits (DVLA doesn't return model).
  const [regValidation, setRegValidation] = useState_p(null);
  const [regLoading, setRegLoading] = useState_p(false);
  const [regResult, setRegResult] = useState_p(null);
  const [regModel, setRegModel] = useState_p("");

  useEffect_p(() => {
    if (!reg || !window.RegLookup) { setRegValidation(null); return; }
    setRegValidation(window.RegLookup.validate(reg));
    setRegResult(null);
    setRegModel("");
  }, [reg]);

  const handleFind = async () => {
    if (vehicleTab === "reg") {
      if (!reg || !window.RegLookup) return;
      setRegResult(null);
      setRegLoading(true);
      const result = await window.RegLookup.lookup(reg);
      setRegLoading(false);
      setRegResult(result);
      // Don't auto-add — let the user confirm the decoded vehicle below.
      return;
    }
    if (vehicleTab === "mmy" && make && model && year) {
      shop.addVehicle({ kind: "mmy", make, model, year, engine, display: `${year} ${make} ${model}${engine ? " · " + engine : ""}` });
      navigate({ name: "catalog" });
      return;
    }
    if (vehicleTab === "vin") {
      navigate({ name: "catalog" });
    }
  };

  const confirmRegVehicle = () => {
    if (!regResult || !regResult.vehicle) return;
    const v = { ...regResult.vehicle };
    // If DVLA returned make-but-no-model, fold the user's pick into the saved vehicle.
    if (v.needsModel && regModel) {
      v.model = regModel;
      v.display = `${v.year || ""} ${v.make} ${regModel}`.trim() + (v.color ? " · " + v.color : "");
      v.needsModel = false;
    }
    if (v.needsModel && !regModel) return; // require model before save
    shop.addVehicle(v);
    navigate({ name: "catalog" });
  };
  const sendRegToMMY = () => {
    if (regResult && regResult.validation && regResult.validation.year) {
      setYear(String(regResult.validation.year));
    }
    if (regResult && regResult.vehicle && regResult.vehicle.make) {
      setMake(regResult.vehicle.make);
    }
    setVehicleTab("mmy");
    setRegResult(null);
  };

  return (
    <div className="page" data-screen-label="Home">
      <TopBar route={{ name: "home" }} navigate={navigate} shop={shop} openCart={openCart} openGarage={openGarage} />

      {/* HERO */}
      <section className="shell hero">
        <div className="hero-left">
          <div className="eyebrow">Workshop-grade parts catalogue · Est. 2018</div>
          <h1>
            Right part.<br />
            Right car. <span className="accent">First time.</span>
          </h1>
          <p className="lede">
            12,000+ OE-grade and OEM part numbers, vetted by working mechanics. Drop in your reg, and we'll show you only what fits your bay job.
          </p>
          <ul className="hero-bullets">
            <li><Icons.Check /> <span>Fitment guaranteed or your money back</span></li>
            <li><Icons.Check /> <span>24-hour workshop dispatch by 5pm</span></li>
            <li><Icons.Check /> <span>Trade pricing on bulk orders</span></li>
            <li><Icons.Check /> <span>Same-day collection in 14 UK cities</span></li>
          </ul>
          <div className="hero-rating">
            <div className="hero-rating-num">4.8 <span className="stars">★★★★★</span></div>
            <div className="hero-rating-meta"><strong>Trustpilot</strong> · 47,213 reviews from buyers since 2018</div>
          </div>
        </div>

        {/* Vehicle finder */}
        <div className="vehicle-finder">
          <div className="vehicle-header">
            <div className="icon"><Icons.Tool /></div>
            <h3>Find parts for your car</h3>
            <span className="step-count">STEP 01 / 02</span>
          </div>
          <div className="vehicle-body">
            <div className="vehicle-tabs">
              <button className={"vehicle-tab" + (vehicleTab === "reg" ? " on" : "")} onClick={() => setVehicleTab("reg")}>
                <Icons.Tag /> UK Reg
              </button>
              <button className={"vehicle-tab" + (vehicleTab === "mmy" ? " on" : "")} onClick={() => setVehicleTab("mmy")}>
                <Icons.Wheels style={{ width: 14, height: 14 }} /> Make &amp; Model
              </button>
              <button className={"vehicle-tab" + (vehicleTab === "vin" ? " on" : "")} onClick={() => setVehicleTab("vin")}>
                <Icons.Search /> VIN
              </button>
            </div>

            {vehicleTab === "reg" && (
              <div className="field-row full">
                <div className="field">
                  <label>UK Registration plate</label>
                  <div className={"reg-plate"
                    + (regValidation && reg ? (regValidation.valid ? " is-valid" : " is-invalid") : "")}>
                    <span className="reg-flag" aria-hidden="true">GB</span>
                    <input
                      type="text"
                      placeholder="AB12 CDE"
                      value={reg}
                      onChange={(e) => setReg(e.target.value)}
                      onKeyDown={(e) => { if (e.key === "Enter") handleFind(); }}
                      maxLength={10}
                      autoComplete="off"
                      spellCheck={false}
                      aria-label="UK registration plate"
                    />
                  </div>
                  {reg && regValidation && (
                    <div className={"reg-hint " + (regValidation.valid ? "ok" : "err")}>
                      {regValidation.valid ? (
                        <>
                          <span className="rh-dot" /> Valid {regValidation.format === "current" ? "current-style" : "prefix-style"} plate
                          {regValidation.year ? ` · ${regValidation.year}` : ""}
                          {regValidation.period ? ` (${regValidation.period})` : ""}
                          {regValidation.region ? ` · ${regValidation.region}` : ""}
                        </>
                      ) : (
                        <>
                          <span className="rh-dot" /> Not a recognised UK plate. Try the format <code>AB12 CDE</code>.
                        </>
                      )}
                    </div>
                  )}
                  {!reg && window.RegLookup && (
                    <div className="reg-samples">
                      Try a sample:
                      {window.RegLookup.SAMPLE_PLATES.map((p) => (
                        <button
                          key={p}
                          type="button"
                          className="reg-chip"
                          onClick={() => setReg(p.slice(0, 4) + " " + p.slice(4))}
                        >
                          {p.slice(0, 4) + " " + p.slice(4)}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            )}

            {vehicleTab === "mmy" && (
              <>
                <div className="field-row">
                  <div className="field">
                    <label>Make</label>
                    <select value={make} onChange={(e) => setMake(e.target.value)}>
                      <option value="">Select…</option>
                      {makes.map(m => <option key={m}>{m}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>Model</label>
                    <select value={model} onChange={(e) => setModel(e.target.value)}>
                      <option value="">Select…</option>
                      {(models[make] || ["3 Series", "Focus", "Golf"]).map(m => <option key={m}>{m}</option>)}
                    </select>
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Year</label>
                    <select value={year} onChange={(e) => setYear(e.target.value)}>
                      <option value="">Select…</option>
                      {years.map(y => <option key={y}>{y}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>Engine</label>
                    <select value={engine} onChange={(e) => setEngine(e.target.value)}>
                      <option value="">Select…</option>
                      {engines.map(e => <option key={e}>{e}</option>)}
                    </select>
                  </div>
                </div>
              </>
            )}

            {vehicleTab === "vin" && (
              <div className="field-row full">
                <div className="field">
                  <label>17-character VIN</label>
                  <input
                    type="text"
                    placeholder="WBASA53456FB12345"
                    style={{ textTransform: "uppercase", fontFamily: "var(--mono)", fontWeight: 500 }}
                  />
                </div>
              </div>
            )}

            <button
              className="btn btn-orange"
              onClick={handleFind}
              disabled={regLoading || (vehicleTab === "reg" && (!reg || (regValidation && !regValidation.valid)))}
            >
              {regLoading
                ? <><span className="reg-spinner" /> Checking DVLA database…</>
                : <><Icons.Search style={{ width: 14, height: 14 }} /> Find my parts</>}
            </button>

            {/* Reg-lookup result card */}
            {vehicleTab === "reg" && regResult && !regLoading && (
              <div className={"reg-result " + regResult.status}>
                {regResult.status === "hit" && regResult.vehicle && (() => {
                  const v = regResult.vehicle;
                  const fromDvla = v.source === "dvla";
                  const modelOptions = (window.RegLookup && window.RegLookup.MODELS_BY_MAKE && v.make
                    ? window.RegLookup.MODELS_BY_MAKE[v.make] : null);
                  return (
                    <>
                      <div className="rr-head">
                        <span className={"rr-badge" + (fromDvla ? " dvla" : "")}>
                          {fromDvla ? "DVLA match" : "Workshop record"}
                        </span>
                        <span className="rr-plate">{v.plate}</span>
                      </div>
                      <div className="rr-title">
                        {v.year} {v.make}{v.model ? " " + v.model : (v.needsModel ? "" : "")}
                      </div>
                      <div className="rr-subtitle">
                        {[v.engine, v.trim].filter(Boolean).join(" · ") || (v.needsModel ? "Confirm your model below to continue." : "")}
                      </div>
                      <div className="rr-specs">
                        {v.color      && <div><span>Colour</span><strong>{v.color}</strong></div>}
                        {v.fuel       && <div><span>Fuel</span><strong>{v.fuel}</strong></div>}
                        {v.co2        && <div><span>CO₂</span><strong>{v.co2}</strong></div>}
                        {v.taxStatus  && <div><span>Tax</span><strong>{v.taxStatus}</strong></div>}
                        {v.motDue     && <div><span>MOT due</span><strong>{v.motDue}</strong></div>}
                        {v.region     && <div><span>Region</span><strong>{v.region}</strong></div>}
                      </div>
                      {v.needsModel && (
                        <div className="rr-model-pick">
                          <label>Confirm your {v.make} model</label>
                          {modelOptions ? (
                            <select value={regModel} onChange={(e) => setRegModel(e.target.value)}>
                              <option value="">— Choose a {v.make} model —</option>
                              {modelOptions.map(m => <option key={m} value={m}>{m}</option>)}
                              <option value="__other">Other / not listed…</option>
                            </select>
                          ) : (
                            <input type="text" placeholder={`Your ${v.make} model`} value={regModel} onChange={(e) => setRegModel(e.target.value)} />
                          )}
                          {regModel === "__other" && (
                            <input
                              type="text"
                              className="rr-model-other"
                              placeholder={`Type your ${v.make} model`}
                              onChange={(e) => setRegModel(e.target.value)}
                              autoFocus
                            />
                          )}
                          {fromDvla && (
                            <div className="rr-note">DVLA confirms make, year, colour, fuel, CO₂, tax and MOT — but not model. Pick yours above.</div>
                          )}
                        </div>
                      )}
                      <div className="rr-actions">
                        <button
                          className="btn btn-orange"
                          onClick={confirmRegVehicle}
                          disabled={v.needsModel && (!regModel || regModel === "__other")}
                        >
                          <Icons.Check /> Save &amp; shop parts
                        </button>
                        <button className="btn btn-ghost" onClick={() => { setReg(""); setRegResult(null); }}>
                          Not my car?
                        </button>
                      </div>
                    </>
                  );
                })()}

                {regResult.status === "not_registered" && (
                  <>
                    <div className="rr-head">
                      <span className="rr-badge warn">Not on DVLA records</span>
                      <span className="rr-plate">{regResult.validation.normalized}</span>
                    </div>
                    <div className="rr-title">DVLA doesn't recognise this plate.</div>
                    <div className="rr-subtitle">
                      Format is valid
                      {regResult.validation.year ? ` (decoded as ${regResult.validation.year}${regResult.validation.region ? ", " + regResult.validation.region : ""})` : ""},
                      but it's not registered. Double-check the plate, or pick your car manually.
                    </div>
                    <div className="rr-actions">
                      <button className="btn btn-dark" onClick={sendRegToMMY}>
                        Pick make &amp; model →
                      </button>
                      <button className="btn btn-ghost" onClick={() => { setReg(""); setRegResult(null); }}>
                        Try a different plate
                      </button>
                    </div>
                  </>
                )}

                {regResult.status === "unverified" && (
                  <>
                    <div className="rr-head">
                      <span className="rr-badge warn">DVLA offline</span>
                      <span className="rr-plate">{regResult.validation.normalized}</span>
                    </div>
                    <div className="rr-title">Couldn't reach DVLA to verify.</div>
                    <div className="rr-subtitle">
                      {regResult.dvla && regResult.dvla.error === "no_api_key"
                        ? <>The dev server has no <code>DVLA_API_KEY</code> set. Add it to <code>.env</code> and restart <code>dev-server.py</code>, or pick make &amp; model manually.</>
                        : (regResult.httpStatus === 0 || regResult.httpStatus === 501 || regResult.httpStatus === 405)
                          ? <>The lookup proxy isn't running. You're probably on <code>python -m http.server</code> — stop it and run <code>python dev-server.py</code> instead.</>
                          : <>DVLA returned an error ({regResult.httpStatus}). Pick make &amp; model manually to continue.</>}
                      {regResult.validation.year ? ` Plate decoded as ${regResult.validation.year}${regResult.validation.region ? ", " + regResult.validation.region : ""}.` : ""}
                    </div>
                    <div className="rr-actions">
                      <button className="btn btn-dark" onClick={sendRegToMMY}>
                        Pick make &amp; model →
                      </button>
                      <button className="btn btn-ghost" onClick={handleFind}>
                        Retry lookup
                      </button>
                    </div>
                  </>
                )}

                {regResult.status === "invalid" && (
                  <>
                    <div className="rr-head">
                      <span className="rr-badge err">Invalid plate</span>
                    </div>
                    <div className="rr-title">That doesn't look like a UK plate.</div>
                    <div className="rr-subtitle">
                      Try the current format <code>AB12 CDE</code> (2 letters, 2 digits, 3 letters)
                      or older prefix format <code>A123 BCD</code>.
                    </div>
                  </>
                )}
              </div>
            )}

            {shop.activeVehicle && (
              <div className="vehicle-saved">
                <Icons.Check /> Active vehicle: <strong>{shop.activeVehicle.display}</strong>
                <button className="vehicle-saved-btn" onClick={openGarage}>Manage garage →</button>
              </div>
            )}
            {!shop.activeVehicle && shop.garage.length > 0 && (
              <div className="vehicle-saved" style={{ background: "var(--yellow-soft)", color: "#8b6a00", borderLeftColor: "var(--yellow)" }}>
                <Icons.Wheels style={{ width: 14, height: 14 }} />
                {shop.garage.length} saved {shop.garage.length === 1 ? "vehicle" : "vehicles"}
                <button className="vehicle-saved-btn" style={{ color: "#8b6a00" }} onClick={openGarage}>Open garage →</button>
              </div>
            )}
          </div>
        </div>
      </section>

      <div className="shell">
        {/* Recently viewed */}
        {shop.recentItems.length > 0 && (
          <section className="recents">
            <div className="recents-head">
              <div>
                <div className="eyebrow">Picked up where you left off</div>
                <h3 className="recents-title">Recently viewed</h3>
              </div>
              <button className="action-link" onClick={() => navigate({ name: "catalog" })}>See catalogue →</button>
            </div>
            <div className="recents-rail">
              {shop.recentItems.map(p => (
                <div key={p.id} className="recent-card" onClick={() => navigate({ name: "detail", id: p.id })}>
                  <div className="recent-stage"><ThumbViewer part={p} /></div>
                  <div className="recent-body">
                    <div className="recent-cat">{p.category}</div>
                    <div className="recent-name">{p.name}</div>
                    <div className="recent-price">£{p.price}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Categories */}
        <div className="section-head" style={{ paddingTop: 24 }}>
          <div>
            <div className="eyebrow">Department</div>
            <h2>Shop by <span className="accent">category</span></h2>
          </div>
          <div className="more" onClick={() => navigate({ name: "catalog" })}>All departments <Icons.Arrow /></div>
        </div>
        <div className="cats-grid">
          {categories.map(([name, count]) => {
            const Icon = window.CategoryIcons[name] || window.Icons.Tool;
            return (
              <div key={name} className="cat-tile" onClick={() => navigate({ name: "catalog", filter: name })}>
                <div className="cat-icon"><Icon /></div>
                <div className="cat-name">{name}</div>
                <div className="cat-count">{String(count).padStart(2, "0")} part{count === 1 ? "" : "s"}</div>
              </div>
            );
          })}
        </div>

        {/* Featured parts */}
        <div className="section-head" style={{ marginTop: 64 }}>
          <div>
            <div className="eyebrow">This week's bestsellers</div>
            <h2>Workshop <span className="accent">favourites</span></h2>
          </div>
          <div className="more" onClick={() => navigate({ name: "catalog" })}>View all <Icons.Arrow /></div>
        </div>
        <div className="parts-grid">
          {featured.map(p => <PartCard key={p.id} part={p} navigate={navigate} shop={shop} onQuickView={openQuickView} />)}
        </div>

        {/* Interactive car atlas */}
        <window.CarExplorer navigate={navigate} shop={shop} openQuickView={openQuickView} />

        {/* How it works */}
        <section className="how-section">
          <div className="hazard-rule" />
          <div className="section-head" style={{ alignItems: "center" }}>
            <div>
              <div className="eyebrow">Three steps to the bench</div>
              <h2>From <span className="accent">reg plate</span> to fitted in 48 hours</h2>
            </div>
          </div>
          <div className="how-grid">
            <div className="how-step">
              <div className="how-num">01</div>
              <h4>Tell us what you drive</h4>
              <p>Drop in a reg, VIN, or pick make &amp; model. We cross-reference against manufacturer service data.</p>
            </div>
            <div className="how-step">
              <div className="how-num">02</div>
              <h4>See only what fits</h4>
              <p>Catalogue filters down to parts catalogued for your platform. No more wrong-part returns.</p>
            </div>
            <div className="how-step">
              <div className="how-num">03</div>
              <h4>Bench it the next morning</h4>
              <p>Order by 5pm and we dispatch overnight. Install guides, torque values, and video are on every listing.</p>
            </div>
          </div>
        </section>

        {/* Brand showcase */}
        <section className="brand-showcase">
          <div className="section-head">
            <div>
              <div className="eyebrow">Stocked at the workshop</div>
              <h2><span className="accent">OE</span> and aftermarket brands we trust</h2>
            </div>
            <div className="more" onClick={() => navigate({ name: "catalog" })}>All brands <Icons.Arrow /></div>
          </div>
          <div className="brand-grid">
            {["Bosch", "Brembo", "NGK", "Mann", "Varta", "Bilstein", "Michelin", "Castrol", "Osram", "ATE", "Bosal", "Holts"].map(b => (
              <div key={b} className="brand-tile">
                <span>{b}</span>
              </div>
            ))}
          </div>
        </section>

        {/* Stats / brand strip */}
        <div className="section">
          <div className="brand-strip">
            <div className="stat">
              <div className="num">12K+</div>
              <div className="label">Part numbers in stock</div>
            </div>
            <div className="stat">
              <div className="num">48 hrs</div>
              <div className="label">Avg. delivery time</div>
            </div>
            <div className="stat">
              <div className="num">4.8 ★</div>
              <div className="label">From 47,000 reviews</div>
            </div>
            <div className="stat">
              <div className="num">100%</div>
              <div className="label">Fitment guaranteed</div>
            </div>
            <div className="stat">
              <div className="num">12 yrs</div>
              <div className="label">Workshop trade since 2018</div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

// ============================================================
// CATALOG
// ============================================================
function CatalogPage({ navigate, initialFilter, shop, openCart, openGarage, openQuickView }) {
  const parts = window.PARTS_DATA;
  const [category, setCategory] = useState_p(initialFilter || "All");
  const [sort, setSort] = useState_p("featured");
  const [view, setView] = useState_p("grid");
  const [diff, setDiff] = useState_p("All");
  const [price, setPrice] = useState_p("All");

  const categories = useMemo_p(() => {
    const map = new Map();
    parts.forEach(p => map.set(p.category, (map.get(p.category) || 0) + 1));
    return [["All", parts.length], ...Array.from(map.entries())];
  }, [parts]);

  const filtered = useMemo_p(() => {
    let list = parts;
    if (category !== "All") list = list.filter(p => p.category === category);
    if (diff !== "All") list = list.filter(p => p.difficulty === diff);
    if (price === "Under £30")  list = list.filter(p => p.price < 30);
    if (price === "£30 – £100") list = list.filter(p => p.price >= 30 && p.price < 100);
    if (price === "£100 – £250") list = list.filter(p => p.price >= 100 && p.price < 250);
    if (price === "£250+")       list = list.filter(p => p.price >= 250);
    if (sort === "price-asc") list = [...list].sort((a, b) => a.price - b.price);
    if (sort === "price-desc") list = [...list].sort((a, b) => b.price - a.price);
    if (sort === "rating") list = [...list].sort((a, b) => b.rating - a.rating);
    return list;
  }, [parts, category, sort, diff, price]);

  const brands = ["Bosch", "Brembo", "NGK", "Mann", "Varta", "Bilstein", "Castrol", "Michelin"];
  const diffs = ["All", "Beginner", "Intermediate", "Advanced", "Workshop only"];
  const priceBands = ["All", "Under £30", "£30 – £100", "£100 – £250", "£250+"];
  const fitment = shop.activeVehicle;

  return (
    <div className="page" data-screen-label="Catalog">
      <TopBar route={{ name: "catalog" }} navigate={navigate} shop={shop} openCart={openCart} openGarage={openGarage} />

      <div className="catalog-head">
        <div className="shell catalog-head-inner">
          <div className="crumb">
            <a onClick={() => navigate({ name: "home" })}>Home</a>
            <span className="sep">/</span>
            <a onClick={() => navigate({ name: "catalog" })}>Catalogue</a>
            {category !== "All" && <><span className="sep">/</span><span>{category}</span></>}
          </div>
          <div className="catalog-title-row">
            <h1 className="catalog-title">{category === "All" ? "Shop all parts" : category}</h1>
            {fitment ? (
              <div className="fitment-pill">
                <Icons.Check />
                <span>Showing fits for: <strong>{fitment.display}</strong></span>
                <button onClick={openGarage}>Switch →</button>
              </div>
            ) : (
              <div className="fitment-pill" style={{ background: "var(--yellow-soft)", color: "#8b6a00", borderColor: "rgba(180,140,0,0.3)", borderLeftColor: "var(--yellow)" }}>
                <Icons.Tool style={{ color: "#8b6a00", width: 14, height: 14 }} />
                <span>No vehicle saved — <strong>add yours</strong> to confirm fitment</span>
                <button style={{ color: "#8b6a00" }} onClick={openGarage}>Add vehicle →</button>
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="shell catalog-body">
        <aside>
          <div className="filters-card">
            <div className="filter-group">
              <h4>Category</h4>
              <ul className="filter-list">
                {categories.map(([name, n]) => (
                  <li key={name} className={category === name ? "on" : ""} onClick={() => setCategory(name)}>
                    <span>{name}</span><span className="n">{String(n).padStart(2, "0")}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="filter-group">
              <h4>Difficulty</h4>
              <ul className="filter-list">
                {diffs.map(d => (
                  <li key={d} className={diff === d ? "on" : ""} onClick={() => setDiff(d)}>
                    <span>{d}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="filter-group">
              <h4>Price range</h4>
              <ul className="filter-list">
                {priceBands.map(p => (
                  <li key={p} className={price === p ? "on" : ""} onClick={() => setPrice(p)}>
                    <span>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="filter-group">
              <h4>Brand</h4>
              <ul className="filter-list">
                {brands.map(b => (
                  <li key={b}><span>{b}</span><span className="n">{String(Math.floor(Math.random()*20)+1).padStart(2, "0")}</span></li>
                ))}
              </ul>
            </div>
            <div className="filter-group" style={{ background: "var(--surface-2)" }}>
              <h4>Need help?</h4>
              <p style={{ fontSize: 13, color: "var(--muted)", margin: "0 0 10px", lineHeight: 1.5 }}>
                A real fitter is at the other end of the line.
              </p>
              <button className="btn btn-sm btn-ghost btn-block" style={{ padding: "8px 12px" }}>
                <Icons.Headset style={{ width: 14, height: 14 }} /> Chat to a mechanic
              </button>
            </div>
          </div>
        </aside>

        <div>
          <div className="cat-toolbar">
            <span className="count">Showing <strong>{filtered.length}</strong> of {parts.length} parts</span>
            <div className="toolbar-right">
              {shop.compare.length > 0 && (
                <span className="compare-badge">
                  <Icons.Grid style={{ width: 12, height: 12 }} /> {shop.compare.length} to compare
                </span>
              )}
              <select value={sort} onChange={e => setSort(e.target.value)}>
                <option value="featured">Sort · Featured</option>
                <option value="price-asc">Price · Low to high</option>
                <option value="price-desc">Price · High to low</option>
                <option value="rating">Top rated</option>
              </select>
              <div className="view-toggle">
                <button className={view === "grid" ? "on" : ""} onClick={() => setView("grid")} title="Grid view"><Icons.Grid /></button>
                <button className={view === "list" ? "on" : ""} onClick={() => setView("list")} title="List view"><Icons.List /></button>
              </div>
            </div>
          </div>

          {view === "grid" ? (
            <div className="parts-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
              {filtered.map(p => <PartCard key={p.id} part={p} navigate={navigate} shop={shop} onQuickView={openQuickView} />)}
            </div>
          ) : (
            <div className="parts-list">
              <div className="row-head">
                <span></span>
                <span>Part</span>
                <span>SKU</span>
                <span className="col-stock">Stock</span>
                <span className="col-fit">Fitment</span>
                <span style={{ textAlign: "right" }}>Price</span>
              </div>
              {filtered.map(p => <PartRow key={p.id} part={p} navigate={navigate} shop={shop} onQuickView={openQuickView} />)}
            </div>
          )}
        </div>
      </div>

      <Footer />
    </div>
  );
}

// ============================================================
// DETAIL
// ============================================================
function DetailPage({ navigate, partId, tweaks, setTweak, shop, openCart, openGarage, openQuickView }) {
  const parts = window.PARTS_DATA;
  const part = parts.find(p => p.id === partId) || parts[0];
  const brand = window.PartBrands[part.id] || "OEM";
  const [qty, setQty] = useState_p(1);
  const [activeThumb, setActiveThumb] = useState_p("3d");
  const [activeTab, setActiveTab] = useState_p("install");
  const [added, setAdded] = useState_p(false);
  const fitment = shop.activeVehicle;

  const related = parts.filter(p => p.category === part.category && p.id !== part.id).slice(0, 4);
  const filler = parts.filter(p => p.id !== part.id && !related.some(r => r.id === p.id)).slice(0, Math.max(0, 4 - related.length));
  const relatedFinal = [...related, ...filler].slice(0, 4);

  useEffect_p(() => {
    const variant = tweaks.variant || "workshop";
    document.body.classList.remove("detail-workshop", "detail-garage", "detail-blueprint");
    document.body.classList.add(`detail-${variant}`);
    return () => document.body.classList.remove(`detail-${variant}`);
  }, [tweaks.variant]);

  const handleAdd = () => {
    shop.addToCart(part.id, qty);
    setAdded(true);
    setTimeout(() => setAdded(false), 2400);
  };

  const inWishlist = shop.wishlist.includes(part.id);
  const inCompare = shop.compare.includes(part.id);
  const diffLevel = { "Beginner": 1, "Intermediate": 2, "Advanced": 3, "Workshop only": 4 }[part.difficulty] || 1;

  return (
    <div className="page" data-screen-label="Detail">
      <TopBar route={{ name: "detail" }} navigate={navigate} shop={shop} openCart={openCart} openGarage={openGarage} />

      <div className="detail-crumb-bar">
        <div className="shell">
          <div className="crumb">
            <a onClick={() => navigate({ name: "home" })}>Home</a>
            <span className="sep">/</span>
            <a onClick={() => navigate({ name: "catalog" })}>Catalogue</a>
            <span className="sep">/</span>
            <a onClick={() => navigate({ name: "catalog", filter: part.category })}>{part.category}</a>
            <span className="sep">/</span>
            <span style={{ color: "var(--carbon)" }}>{part.name}</span>
          </div>
        </div>
      </div>

      <div className="shell detail-main">
        {/* LEFT — 3D Viewer */}
        <div className="viewer-wrap">
          <div className="viewer-stage">
            <STLViewer
              key={part.id + (tweaks.variant || "")}
              part={part}
              autoRotate={true}
              showHotspots={tweaks.hotspots !== false}
            />
          </div>
          <div className="viewer-thumbs">
            <div className={"viewer-thumb" + (activeThumb === "3d" ? " on" : "")} onClick={() => setActiveThumb("3d")}>3D · Live</div>
            <div className={"viewer-thumb" + (activeThumb === "exploded" ? " on" : "")} onClick={() => setActiveThumb("exploded")}>Exploded</div>
            <div className={"viewer-thumb" + (activeThumb === "section" ? " on" : "")} onClick={() => setActiveThumb("section")}>Section</div>
            <div className={"viewer-thumb" + (activeThumb === "fitted" ? " on" : "")} onClick={() => setActiveThumb("fitted")}>Fitted</div>
          </div>
        </div>

        {/* RIGHT — Info */}
        <div>
          <div className="info-head">
            <span className="info-cat">{part.category}</span>
            <span className="info-sku">SKU · {part.sku}</span>
            <span className="badge badge-steel">{brand}</span>
            {part.price > 100 && <span className="badge badge-oem">OE-grade</span>}
            {part.rating >= 4.8 && <span className="badge badge-yellow">Top rated</span>}
          </div>
          <h1 className="info-title">{part.name}</h1>
          <div className="info-subtitle">{part.subtitle}</div>
          <div className="info-rating">
            <span className="stars">★★★★★</span>
            <span>{part.rating} · {part.reviews.toLocaleString()} reviews</span>
            <span style={{ color: "var(--line-dark)" }}>·</span>
            <a style={{ color: "var(--orange)", cursor: "pointer", fontWeight: 500 }} onClick={() => setActiveTab("reviews")}>Read reviews</a>
          </div>

          {fitment ? (
            <div className="fitment-banner">
              <div className="ic"><Icons.Check /></div>
              <div className="txt">
                <strong>Fits {fitment.display}</strong>
                Verified by our cross-reference database
              </div>
            </div>
          ) : (
            <div className="fitment-banner warn">
              <div className="ic"><Icons.Tool style={{ width: 18, height: 18 }} /></div>
              <div className="txt">
                <strong>Add your vehicle to confirm fitment</strong>
                <a style={{ color: "#8b6a00", cursor: "pointer", textDecoration: "underline" }} onClick={openGarage}>Open my garage →</a>
              </div>
            </div>
          )}

          <div className="quick-row">
            <div className="quick-chip">
              <div className="label"><Icons.Tool style={{ width: 12, height: 12 }} /> Difficulty</div>
              <div className="val">{part.difficulty}</div>
            </div>
            <div className="quick-chip">
              <div className="label">Install time</div>
              <div className="val">{part.minutes}<small>min</small></div>
            </div>
            <div className="quick-chip">
              <div className="label">Tools needed</div>
              <div className="val">{part.tools.length}<small>items</small></div>
            </div>
          </div>

          <div className="price-block">
            <div className="price-row">
              <span className="cur">£</span>
              <span className="num">{part.price}</span>
              <div className="vat">
                <strong>Free delivery</strong>
                inc. VAT · £{(part.price / 1.2).toFixed(2)} ex.
              </div>
            </div>
            <div className="stock-row">
              <span className="in-stock">In stock · ships in 24 hrs</span>
              <span>Order before 5pm · arrives by Wed</span>
            </div>
          </div>

          <div className="qty-row">
            <div className="qty">
              <button onClick={() => setQty(Math.max(1, qty - 1))}>−</button>
              <input value={qty} onChange={e => setQty(Math.max(1, parseInt(e.target.value) || 1))} />
              <button onClick={() => setQty(qty + 1)}>+</button>
            </div>
            <button className="btn btn-orange" onClick={handleAdd}>
              <Icons.Cart style={{ width: 16, height: 16 }} />
              {added ? "Added to cart ✓" : `Add to cart · £${(part.price * qty).toFixed(0)}`}
            </button>
          </div>
          <div className="actions-grid">
            <button className={"action-link" + (inWishlist ? " on" : "")} onClick={() => shop.toggleWishlist(part.id)}>
              <Icons.Heart /> {inWishlist ? "Saved ✓" : "Save for later"}
            </button>
            <button className={"action-link" + (inCompare ? " on" : "")} onClick={() => shop.toggleCompare(part.id)}>
              <Icons.Grid /> {inCompare ? "In compare" : "Add to compare"}
            </button>
          </div>
          <button className="action-link" style={{ width: "100%", marginBottom: 16 }}>
            <Icons.Truck /> Click &amp; collect — find a depot near you →
          </button>

          <div className="trust-mini">
            <div className="trust-mini-item">
              <Icons.Shield />
              <div>
                <strong>2-year warranty</strong>
                <span>Manufacturer</span>
              </div>
            </div>
            <div className="trust-mini-item">
              <Icons.Reload />
              <div>
                <strong>Free returns</strong>
                <span>90 days, no quibbles</span>
              </div>
            </div>
            <div className="trust-mini-item">
              <Icons.Headset />
              <div>
                <strong>Expert chat</strong>
                <span>Speak to a fitter</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* TABS section */}
      <div className="shell">
        <div className="detail-tabs-wrap">
          <div className="detail-tabs">
            <button className={"detail-tab" + (activeTab === "overview" ? " on" : "")} onClick={() => setActiveTab("overview")}>Overview</button>
            <button className={"detail-tab" + (activeTab === "specs" ? " on" : "")} onClick={() => setActiveTab("specs")}>
              Specifications <span className="badge badge-steel">{part.specs.length}</span>
            </button>
            <button className={"detail-tab" + (activeTab === "install" ? " on" : "")} onClick={() => setActiveTab("install")}>
              Installation <span className="badge badge-orange">{part.steps.length} steps</span>
            </button>
            <button className={"detail-tab" + (activeTab === "video" ? " on" : "")} onClick={() => setActiveTab("video")}>
              Video guide
            </button>
            <button className={"detail-tab" + (activeTab === "fitment" ? " on" : "")} onClick={() => setActiveTab("fitment")}>Fitment</button>
            <button className={"detail-tab" + (activeTab === "reviews" ? " on" : "")} onClick={() => setActiveTab("reviews")}>
              Reviews <span className="badge badge-steel">{part.reviews.toLocaleString()}</span>
            </button>
          </div>

          <div className="tab-panel">
            {activeTab === "overview" && (
              <>
                <h3>What this part does</h3>
                <p>{part.blurb}</p>
                <p>Manufactured by <strong>{brand}</strong> to OE-grade tolerances. Catalogued under <span className="mono" style={{ fontWeight: 600 }}>{part.sku}</span> with cross-references to the main aftermarket numbering schemes.</p>

                <h3 style={{ marginTop: 32 }}>Key features</h3>
                <ul style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "10px 24px", paddingLeft: 0, listStyle: "none" }}>
                  {part.specs.slice(0, 6).map(([k, v], i) => (
                    <li key={i} style={{ display: "flex", gap: 10, fontSize: 14 }}>
                      <Icons.Check style={{ color: "var(--orange)", flexShrink: 0, marginTop: 3 }} />
                      <span><strong style={{ fontFamily: "var(--display)", textTransform: "uppercase", letterSpacing: "0.04em", fontSize: 13 }}>{k}:</strong> {v}</span>
                    </li>
                  ))}
                </ul>
              </>
            )}

            {activeTab === "specs" && (
              <>
                <h3>Technical specifications</h3>
                <div className="specs-grid">
                  <table className="specs-table">
                    <tbody>
                      {part.specs.slice(0, Math.ceil(part.specs.length / 2)).map(([k, v], i) => (
                        <tr key={i}><td>{k}</td><td>{v}</td></tr>
                      ))}
                    </tbody>
                  </table>
                  <table className="specs-table">
                    <tbody>
                      {part.specs.slice(Math.ceil(part.specs.length / 2)).map(([k, v], i) => (
                        <tr key={i}><td>{k}</td><td>{v}</td></tr>
                      ))}
                      <tr><td>Manufacturer</td><td>{brand}</td></tr>
                      <tr><td>SKU</td><td>{part.sku}</td></tr>
                    </tbody>
                  </table>
                </div>
              </>
            )}

            {activeTab === "install" && (
              <>
                <h3>Installation procedure</h3>
                <div className="install-grid">
                  <div>
                    {part.steps.map((step, i) => (
                      <div className="step" key={i}>
                        <div className="step-num">{String(i + 1).padStart(2, "0")}</div>
                        <div className="step-body">{step}</div>
                      </div>
                    ))}
                  </div>
                  <div className="install-side">
                    <div className="panel">
                      <h4>Tools required</h4>
                      <ul className="tools-list">
                        {part.tools.map((t, i) => (
                          <li key={i}><span className="marker">{String(i + 1).padStart(2, "0")}</span><span>{t}</span></li>
                        ))}
                      </ul>
                    </div>
                    <div className="panel">
                      <h4>Difficulty rating</h4>
                      <div className="diff-row">
                        <div className="diff-meter">
                          {[1,2,3,4].map(n => <span key={n} className={n <= diffLevel ? "on" : ""} />)}
                        </div>
                        <div className="diff-label">{part.difficulty}</div>
                      </div>
                    </div>
                    <div className="panel">
                      <h4>Estimated time</h4>
                      <div className="time-display">{part.minutes}<small>min</small></div>
                    </div>
                  </div>
                </div>
              </>
            )}

            {activeTab === "video" && (
              <>
                <h3>Installation video</h3>
                <div className="video-wrap">
                  <div className="video-frame">
                    <div className="video-yt">
                      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M8 1.5C4.4 1.5 1.5 4.4 1.5 8s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5S11.6 1.5 8 1.5zM6.5 11V5l5 3z" /></svg>
                      YouTube
                    </div>
                    <div className="video-title">{part.youtube}</div>
                    <div className="video-play"><div className="circle" /></div>
                    <div className="video-duration">14:32</div>
                  </div>
                  <div className="video-meta-side">
                    <h4>Filmed in our workshop</h4>
                    <p>Every install footage is shot on a real lift, narrated by the mechanic doing the work. Torque values called out, gotchas explained, no edits skipping the awkward bit.</p>
                    <div className="video-tags">
                      <span className="badge">{part.category}</span>
                      <span className="badge badge-orange">{part.difficulty}</span>
                      <span className="badge">{part.minutes} min</span>
                      <span className="badge badge-steel">4K · Subtitled</span>
                    </div>
                    <button className="btn btn-ghost" style={{ marginTop: 18 }}>
                      <Icons.Globe /> Open on YouTube
                    </button>
                  </div>
                </div>
              </>
            )}

            {activeTab === "fitment" && (
              <>
                <h3>Vehicle fitment</h3>
                <p>This {part.name.toLowerCase()} is catalogued for the following platforms. Cross-reference verified against manufacturer service data.</p>
                <div style={{ marginTop: 18, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                  {["BMW 3 Series F30 (2012–2019)", "BMW 4 Series F32 (2013–2020)", "Audi A4 B9 (2015–2023)", "Audi A6 C7 (2011–2018)", "VW Golf Mk7 (2012–2020)", "VW Passat B8 (2014–2023)", "Skoda Superb (2015–)", "Skoda Octavia Mk3 (2013–2020)", "Porsche Macan (2014–)"].map((v, i) => (
                    <div key={i} style={{ background: "var(--surface-2)", padding: "10px 14px", borderRadius: 2, borderLeft: "3px solid var(--green)", fontSize: 13 }}>{v}</div>
                  ))}
                </div>
              </>
            )}

            {activeTab === "reviews" && (
              <>
                <h3>Reviews · {part.reviews.toLocaleString()}</h3>
                <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 32 }}>
                  <div style={{ background: "var(--surface-2)", padding: 18, borderRadius: 3 }}>
                    <div style={{ fontFamily: "var(--display)", fontSize: 56, fontWeight: 700, color: "var(--orange)", lineHeight: 1 }}>{part.rating}</div>
                    <div className="stars" style={{ fontSize: 18, margin: "6px 0" }}>★★★★★</div>
                    <div style={{ fontSize: 12, color: "var(--muted)" }}>From {part.reviews.toLocaleString()} verified buyers</div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                    {[
                      { name: "James M.", role: "Workshop owner", time: "2 weeks ago", text: "Fitted to a customer's car this morning. OE quality, sleeved boxing, came with a fresh hardware pack. No complaints." },
                      { name: "Priya S.", role: "Verified buyer", time: "1 month ago", text: "Easy enough job once I'd watched the video twice. The 3D viewer on the listing helped me understand which way it sits before I committed." },
                      { name: "Tom W.", role: "Trade account", time: "3 months ago", text: "We get through these by the dozen. Pricing's competitive and the trade portal makes reordering painless." },
                    ].map((r, i) => (
                      <div key={i} style={{ padding: 16, border: "1px solid var(--line)", borderRadius: 3, background: "var(--surface)" }}>
                        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                          <strong style={{ fontFamily: "var(--display)", textTransform: "uppercase", letterSpacing: "0.04em", fontSize: 14 }}>{r.name} <span style={{ color: "var(--orange)", marginLeft: 6, fontSize: 11 }}>· {r.role}</span></strong>
                          <span style={{ fontSize: 12, color: "var(--muted)" }}>{r.time}</span>
                        </div>
                        <div className="stars" style={{ fontSize: 13, marginBottom: 6 }}>★★★★★</div>
                        <p style={{ margin: 0, fontSize: 14, color: "var(--ink-2)" }}>{r.text}</p>
                      </div>
                    ))}
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      </div>

      {/* Related */}
      {relatedFinal.length > 0 && (
        <div className="shell section">
          <div className="section-head">
            <div>
              <div className="eyebrow">Bought together</div>
              <h2>Complete the <span className="accent">job</span></h2>
            </div>
            <div className="more" onClick={() => navigate({ name: "catalog", filter: part.category })}>All {part.category.toLowerCase()} <Icons.Arrow /></div>
          </div>
          <div className="parts-grid">
            {relatedFinal.map(p => <PartCard key={p.id} part={p} navigate={navigate} shop={shop} onQuickView={openQuickView} />)}
          </div>
        </div>
      )}

      <Footer />
    </div>
  );
}

window.HomePage = HomePage;
window.CatalogPage = CatalogPage;
window.DetailPage = DetailPage;