// Pages for Partixauto

// Access via window.PARTIX_DATA to avoid classic-script const collisions
const PX = window.PARTIX_DATA;
const _CARS = PX.CARS;
const _PARTS_BY_CAR = PX.PARTS_BY_CAR;
const _POPULAR_SEARCHES = PX.POPULAR_SEARCHES;

// ─── Home page ──────────────────────────────────────────────────────────
function HomePage({ onNav, onOpenCar, onOpenSearch, tier, company }) {
  const featuredCars = _CARS.slice(0, 6);
  const totalAvail = Object.values(_PARTS_BY_CAR).flat().filter(p => p.status === "disponibil").length;

  return (
    <main>
      {/* Hero */}
      <section className="hero">
        <div className="hero-inner">
          <div className="hero-badge">
            <span className="dot" /> 8 masini in dezmembrare · {totalAvail}+ piese disponibile acum
          </div>
          <h1>
            Piese auto din dezmembrari.<br />
            <em>Direct de la noi.</em>
          </h1>
          <p className="hero-sub">
            Cauta masina sau piesa de care ai nevoie. Daca este disponibila, ti-o trimitem azi prin curier. Un mesaj pe WhatsApp si rezolvi.
          </p>
          <div className="hero-searchbox" onClick={onOpenSearch}>
            <Icon.Search size={20} />
            <input placeholder="Ex: far dreapta golf 5, motor 1.9 tdi, bara fata logan..." readOnly />
            <button className="btn btn-primary">
              <Icon.Search size={16} /> Cauta
            </button>
          </div>
          {tier === "premium" && (
            <div className="popular-chips">
              <span className="label">Populare:</span>
              {_POPULAR_SEARCHES.slice(0, 5).map(q => (
                <button key={q} className="chip" onClick={onOpenSearch}>{q}</button>
              ))}
            </div>
          )}
          <div className="hero-stats">
            <div>
              <div className="stat-num">8<span>+</span></div>
              <div className="stat-label">Masini dezmembrate</div>
            </div>
            <div>
              <div className="stat-num">{totalAvail}<span>+</span></div>
              <div className="stat-label">Piese in stoc</div>
            </div>
            <div>
              <div className="stat-num">24<span>h</span></div>
              <div className="stat-label">Raspuns WhatsApp</div>
            </div>
            <div>
              <div className="stat-num">RO</div>
              <div className="stat-label">Livrare nationala</div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured cars */}
      <section className="section">
        <div className="section-inner">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Catalog · Adaugate recent</div>
              <h2 className="section-title">Masini in dezmembrare</h2>
              <p className="section-desc">
                Alege masina si vezi toate piesele disponibile. Statusul se actualizeaza in timp real - daca scrie disponibil, mai este.
              </p>
            </div>
            <a className="section-link" onClick={() => onNav("catalog")}>
              Vezi tot catalogul <Icon.ArrowRight size={14} />
            </a>
          </div>
          <div className="cars-grid">
            {featuredCars.map(c => (
              <CarCard key={c.id} car={c} tier={tier} onClick={() => onOpenCar(c.id)} />
            ))}
          </div>
        </div>
      </section>

      {/* How to buy */}
      <section className="section howto">
        <div className="section-inner">
          <div className="section-head">
            <div>
              <div className="section-eyebrow">Simplu · 3 pasi</div>
              <h2 className="section-title">Cum cumperi de la noi</h2>
            </div>
          </div>
          <div className="howto-grid">
            <div className="howto-card">
              <div className="howto-num">01</div>
              <h3>Cauta sau alege masina</h3>
              <p>Foloseste cautarea sau intra in catalog. Fiecare masina are toate piesele ei cu poze si pret. Filtrezi dupa marca, an, combustibil.</p>
            </div>
            <div className="howto-card">
              <div className="howto-num">02</div>
              <h3>Apesi "Cumpar" pe WhatsApp</h3>
              <p>Iti raspundem rapid, confirmam ca piesa mai este in stoc, trimitem poze suplimentare daca vrei si stabilim plata si livrarea.</p>
            </div>
            <div className="howto-card">
              <div className="howto-num">03</div>
              <h3>Primesti piesa acasa</h3>
              <p>Trimitem prin curier in toata tara, de obicei in 24-48h. Sau ridici de la curte. Plata: ramburs, transfer sau cash la sediu.</p>
            </div>
          </div>
        </div>
      </section>

      {/* TikTok strip - premium only */}
      {tier === "premium" && (
        <section className="section tiktok-strip">
          <div className="section-inner">
            <div className="section-head">
              <div>
                <div className="section-eyebrow"><Icon.TikTok size={12} /> {company.tiktok} · TikTok</div>
                <h2 className="section-title">Vezi-ne in actiune</h2>
                <p className="section-desc">Cum dezmembram, ce piese descoperim, ce masini intra in curte. Aproape zilnic.</p>
              </div>
              <a className="section-link" target="_blank">
                Urmareste pe TikTok <Icon.ArrowRight size={14} />
              </a>
            </div>
            <div className="tiktok-grid">
              {[
                { caption: "Golf 5 1.9 TDI - desfacem motor", views: "24.8K" },
                { caption: "Cum verificam un alternator", views: "12.3K" },
                { caption: "BMW E90 - intra in curte", views: "8.9K" },
                { caption: "Far Logan, montaj rapid", views: "31.2K" },
                { caption: "Pret piese vs magazin nou", views: "47.1K" },
              ].map((t, i) => (
                <div className="tiktok-card" key={i}>
                  <div className={`car-cover-tint tint-${["golf-gri","octavia-negru","bmw-alb","logan-blue","passat-negru"][i]}`} style={{position:"absolute", inset:0, opacity:0.5}} />
                  <div className="tiktok-card-stripes" />
                  <div className="play"><Icon.Play size={14} /></div>
                  <div className="overlay">
                    <div className="views">▶ {t.views} vizualizari</div>
                    <div className="caption">{t.caption}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* FAQ - premium only */}
      {tier === "premium" && (
        <section className="section">
          <div className="section-inner">
            <div className="faq-grid">
              <div>
                <div className="section-eyebrow">Intrebari frecvente</div>
                <h2 className="section-title">Ce trebuie sa stii inainte sa cumperi</h2>
                <p className="section-desc">Nu gasesti raspunsul? Suna sau scrie pe WhatsApp - raspundem rapid.</p>
              </div>
              <FAQ items={[
                { q: "Cum stiu ca o piesa mai este in stoc?", a: "Pe site, fiecare piesa are status afisat in timp real: Disponibil, Rezervat sau Vandut. Cand apesi 'Cumpar', mesajul de WhatsApp confirma cu noi inainte de plata." },
                { q: "Cat dureaza livrarea?", a: "Trimitem prin curier de obicei in aceeasi zi sau a doua zi. In Bucuresti si Ilfov ajunge in 24h. In tara, 24-48h prin Fan/Sameday/DPD." },
                { q: "Ofera garantie pentru piese?", a: "Da, oferim garantie 14 zile pentru orice piesa, sau 30 zile pentru piese mai scumpe (motoare, cutii viteze). Daca piesa nu este compatibila sau defecta, banii inapoi." },
                { q: "Cum platesc?", a: "La curier (ramburs), transfer bancar in avans (cu 5% reducere) sau cash la sediul nostru din Chiajna." },
                { q: "Pot veni sa vad piesa inainte?", a: "Da, oricand in programul de curte (L-V 09-18, S 09-14). Da-ne un telefon inainte ca sa stim sa o avem pregatita." },
                { q: "Daca piesa nu este pe site, o aveti?", a: "Posibil. Avem foarte multe piese inca neincarcate. Suna sau scrie pe WhatsApp ce cauti - verificam in curte." },
              ]} />
            </div>
          </div>
        </section>
      )}
    </main>
  );
}

function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq-list">
      {items.map((it, i) => (
        <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <span className="plus">+</span>
          </button>
          <div className="faq-a">{it.a}</div>
        </div>
      ))}
    </div>
  );
}

// ─── Catalog page ──────────────────────────────────────────────────────
function CatalogPage({ onNav, onOpenCar, tier }) {
  const [brand, setBrand] = React.useState("all");
  const [fuel, setFuel] = React.useState("all");
  const [bodyType, setBodyType] = React.useState("all");
  const [sort, setSort] = React.useState("recent");

  const brands = Array.from(new Set(_CARS.map(c => c.brand)));
  const fuels = Array.from(new Set(_CARS.map(c => c.fuel)));
  const bodies = Array.from(new Set(_CARS.map(c => c.bodyType)));
  const countBy = (key, val) => _CARS.filter(c => c[key] === val).length;

  let filtered = _CARS.filter(c =>
    (brand === "all" || c.brand === brand) &&
    (fuel === "all" || c.fuel === fuel) &&
    (bodyType === "all" || c.bodyType === bodyType)
  );
  if (sort === "newest") filtered = [...filtered].sort((a, b) => b.year - a.year);
  if (sort === "parts") filtered = [...filtered].sort((a, b) => b.parts - a.parts);

  return (
    <main>
      <div className="page-head">
        <div className="page-head-inner">
          <div className="breadcrumb">
            <a onClick={() => onNav("home")}>Acasa</a>
            <span className="sep">/</span>
            <span>Catalog masini</span>
          </div>
          <h1 className="page-title">Catalog masini dezmembrate</h1>
          <p className="page-sub">{_CARS.length} masini in curte · {Object.values(_PARTS_BY_CAR).flat().length} piese listate</p>
        </div>
      </div>

      <div className="catalog-wrap">
        <aside className="filter-sidebar">
          <FilterGroup label="Marca">
            <FilterOption label="Toate" count={_CARS.length} active={brand === "all"} onClick={() => setBrand("all")} />
            {brands.map(b => (
              <FilterOption key={b} label={b} count={countBy("brand", b)} active={brand === b} onClick={() => setBrand(b)} />
            ))}
          </FilterGroup>
          <FilterGroup label="Combustibil">
            <FilterOption label="Toate" count={_CARS.length} active={fuel === "all"} onClick={() => setFuel("all")} />
            {fuels.map(f => (
              <FilterOption key={f} label={f} count={countBy("fuel", f)} active={fuel === f} onClick={() => setFuel(f)} />
            ))}
          </FilterGroup>
          {tier === "premium" && (
            <FilterGroup label="Caroserie">
              <FilterOption label="Toate" count={_CARS.length} active={bodyType === "all"} onClick={() => setBodyType("all")} />
              {bodies.map(b => (
                <FilterOption key={b} label={b} count={countBy("bodyType", b)} active={bodyType === b} onClick={() => setBodyType(b)} />
              ))}
            </FilterGroup>
          )}
          <FilterGroup label="Status">
            <FilterOption label="In dezmembrare" count={_CARS.filter(c => c.status === "in-dezmembrare").length} />
            <FilterOption label="Aproape gata" count={_CARS.filter(c => c.status === "aproape-gata").length} />
          </FilterGroup>
        </aside>

        <div className="catalog-results">
          <div className="results-bar">
            <div className="results-count">
              <strong>{filtered.length}</strong> masini gasite
              {brand !== "all" && <> · marca: <strong>{brand}</strong></>}
              {fuel !== "all" && <> · {fuel.toLowerCase()}</>}
            </div>
            <select className="sort-select" value={sort} onChange={e => setSort(e.target.value)}>
              <option value="recent">Cele mai recente</option>
              <option value="newest">An fabricatie (nou)</option>
              <option value="parts">Numar piese</option>
            </select>
          </div>
          <div className="cars-grid">
            {filtered.map(c => (
              <CarCard key={c.id} car={c} tier={tier} onClick={() => onOpenCar(c.id)} />
            ))}
          </div>
          {filtered.length === 0 && (
            <div style={{textAlign: "center", padding: "60px 20px", color: "var(--text-dim)"}}>
              <p>Nicio masina nu corespunde filtrelor selectate.</p>
              <button className="btn btn-ghost" style={{marginTop: 16}} onClick={() => { setBrand("all"); setFuel("all"); setBodyType("all"); }}>
                Reseteaza filtrele
              </button>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}

function FilterGroup({ label, children }) {
  return (
    <div className="filter-group">
      <h4>{label}</h4>
      <div className="filter-options">{children}</div>
    </div>
  );
}

function FilterOption({ label, count, active, onClick }) {
  return (
    <div className={`filter-option ${active ? "active" : ""}`} onClick={onClick}>
      <span>{label}</span>
      <span className="count">{count}</span>
    </div>
  );
}

// ─── Car detail page ──────────────────────────────────────────────────
function CarDetailPage({ carId, onNav, tier, company }) {
  const car = _CARS.find(c => c.id === carId);
  const parts = _PARTS_BY_CAR[carId] || [];
  const [cat, setCat] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [showOnlyAvail, setShowOnlyAvail] = React.useState(false);

  if (!car) return <main><div className="section-inner" style={{padding: 60}}>Masina nu a fost gasita.</div></main>;

  const cats = ["all", ...Array.from(new Set(parts.map(p => p.category)))];
  let filtered = parts.filter(p =>
    (cat === "all" || p.category === cat) &&
    (q === "" || p.name.toLowerCase().includes(q.toLowerCase())) &&
    (!showOnlyAvail || p.status === "disponibil")
  );

  const waText = encodeURIComponent(
    `Buna ziua, sunt interesat de ${car.brand} ${car.model} ${car.year} (${car.engine}). As vrea sa intreb despre piese disponibile.`
  );

  return (
    <main>
      <div className="page-head">
        <div className="page-head-inner">
          <div className="breadcrumb">
            <a onClick={() => onNav("home")}>Acasa</a>
            <span className="sep">/</span>
            <a onClick={() => onNav("catalog")}>Catalog</a>
            <span className="sep">/</span>
            <span>{car.brand} {car.model} {car.year}</span>
          </div>
        </div>
      </div>

      <div className="car-detail">
        {tier === "premium" ? (
          <div className="car-gallery">
            <div className="gallery-tile">
              <div className={`car-cover-tint tint-${car.cover}`} style={{position:"absolute", inset:0, opacity:0.5}} />
              <div className="car-cover-stripes" />
              <div className="car-cover-watermark" style={{fontSize: "clamp(48px, 6vw, 80px)"}}>{car.brand.toUpperCase()}</div>
              <span className="gallery-tile-label">[ exterior · fata ]</span>
            </div>
            <div className="gallery-tile">
              <div className={`car-cover-tint tint-${car.cover}`} style={{position:"absolute", inset:0, opacity:0.35}} />
              <div className="car-cover-stripes" />
              <span className="gallery-tile-label">[ exterior · spate ]</span>
            </div>
            <div className="gallery-tile">
              <div className={`car-cover-tint tint-${car.cover}`} style={{position:"absolute", inset:0, opacity:0.3}} />
              <div className="car-cover-stripes" />
              <span className="gallery-tile-label">[ motor ]</span>
            </div>
          </div>
        ) : (
          <div className="car-gallery" style={{display:"block", aspectRatio: "16/10"}}>
            <div className="gallery-tile" style={{height:"100%"}}>
              <div className={`car-cover-tint tint-${car.cover}`} style={{position:"absolute", inset:0, opacity:0.5}} />
              <div className="car-cover-stripes" />
              <span className="gallery-tile-label">[ poza · {car.brand} {car.model} ]</span>
            </div>
          </div>
        )}

        <aside className="car-sidecard">
          <div className={`status-pill ${car.status}`} style={{position:"static", display:"inline-flex", marginBottom: 14}}>
            <span className="dot" />
            {car.status === "in-dezmembrare" ? "In dezmembrare activa" : "Aproape gata"}
          </div>
          <h2>{car.brand} {car.model}</h2>
          <div className="car-detail-year">{car.gen} · {car.year}</div>

          <div className="spec-list">
            <div className="spec-row"><span className="k">Motor</span><span className="v">{car.engine}</span></div>
            <div className="spec-row"><span className="k">Putere</span><span className="v">{car.power}</span></div>
            <div className="spec-row"><span className="k">Combustibil</span><span className="v">{car.fuel}</span></div>
            <div className="spec-row"><span className="k">Cutie viteze</span><span className="v">{car.transmission}</span></div>
            <div className="spec-row"><span className="k">Caroserie</span><span className="v">{car.bodyType}</span></div>
            <div className="spec-row"><span className="k">Culoare</span><span className="v">{car.color}</span></div>
            <div className="spec-row"><span className="k">Kilometri</span><span className="v">{car.km.toLocaleString("ro")} km</span></div>
            <div className="spec-row"><span className="k">Intrare in curte</span><span className="v">{car.intrare}</span></div>
            <div className="spec-row"><span className="k">VIN</span><span className="v" style={{fontSize: 11}}>{car.vin}</span></div>
            <div className="spec-row"><span className="k">Piese listate</span><span className="v">{car.parts} ({parts.filter(p=>p.status==="disponibil").length} disp.)</span></div>
          </div>

          <div className="car-cta">
            <a className="btn btn-primary btn-lg" href={`https://wa.me/${company.whatsapp}?text=${waText}`} target="_blank" rel="noopener">
              <Icon.Whatsapp size={16} /> Intreaba pe WhatsApp
            </a>
            <a className="btn btn-ghost" href={`tel:${company.phone}`}>
              <Icon.Phone size={14} /> {company.phoneDisplay}
            </a>
            <div className="small">Iti raspundem in 1-2 ore in program. Trimitem poze suplimentare la cerere.</div>
          </div>
        </aside>
      </div>

      {/* Parts list */}
      <div className="parts-section">
        <div className="parts-head">
          <h2>Piese disponibile <span>· {parts.length} total</span></h2>
          <div className="parts-toolbar">
            {tier === "premium" && (
              <div className="parts-search">
                <Icon.Search size={14} />
                <input value={q} onChange={e => setQ(e.target.value)} placeholder="Cauta piesa in aceasta masina..." />
              </div>
            )}
            <button className={`btn ${showOnlyAvail ? "btn-primary" : "btn-ghost"}`} onClick={() => setShowOnlyAvail(!showOnlyAvail)} style={{padding: "9px 14px", fontSize: 13.5}}>
              <Icon.Filter /> Doar disponibile
            </button>
          </div>
        </div>

        <div className="cat-tabs">
          {cats.map(c => {
            const n = c === "all" ? parts.length : parts.filter(p => p.category === c).length;
            return (
              <button key={c} className={`cat-tab ${cat === c ? "active" : ""}`} onClick={() => setCat(c)}>
                {c === "all" ? "Toate" : c}
                <span className="count">{n}</span>
              </button>
            );
          })}
        </div>

        <div className="parts-grid">
          {filtered.map(p => (
            <PartCard key={p.id} part={p} car={car} company={company} />
          ))}
        </div>
        {filtered.length === 0 && (
          <div style={{textAlign: "center", padding: "60px 20px", color: "var(--text-dim)"}}>
            <p>Nicio piesa nu corespunde filtrelor.</p>
          </div>
        )}
      </div>
    </main>
  );
}

// ─── Contact page ──────────────────────────────────────────────────────
function ContactPage({ onNav, company }) {
  return (
    <main>
      <div className="page-head">
        <div className="page-head-inner">
          <div className="breadcrumb">
            <a onClick={() => onNav("home")}>Acasa</a>
            <span className="sep">/</span>
            <span>Contact</span>
          </div>
          <h1 className="page-title">Contact & program</h1>
          <p className="page-sub">Scrie-ne pe WhatsApp pentru raspuns rapid. Sau vino direct in curte in program.</p>
        </div>
      </div>

      <div className="contact-wrap">
        <div className="contact-card">
          <div className="contact-row">
            <div className="icon"><Icon.Whatsapp size={16} /></div>
            <div>
              <div className="k">WhatsApp</div>
              <div className="v mono">{company.phoneDisplay}</div>
              <small>Raspuns 24h · Cel mai rapid mod sa ne contactezi</small>
              <a className="btn btn-primary" href={`https://wa.me/${company.whatsapp}`} target="_blank" style={{marginTop: 12}}>
                <Icon.Whatsapp size={14} /> Deschide WhatsApp
              </a>
            </div>
          </div>
          <div className="contact-row">
            <div className="icon"><Icon.Phone size={16} /></div>
            <div>
              <div className="k">Telefon</div>
              <div className="v mono">{company.phoneDisplay}</div>
              <small>In program: Luni-Vineri 09-18, Sambata 09-14</small>
            </div>
          </div>
          <div className="contact-row">
            <div className="icon"><Icon.Mail size={16} /></div>
            <div>
              <div className="k">Email</div>
              <div className="v">{company.email}</div>
              <small>Pentru documente, facturi, intrebari mai complexe</small>
            </div>
          </div>
          <div className="contact-row">
            <div className="icon"><Icon.MapPin size={16} /></div>
            <div>
              <div className="k">Curte / Sediu</div>
              <div className="v">{company.address}</div>
              <small>Acces auto cu masina, zona industriala. Vino sa vezi piesele inainte.</small>
            </div>
          </div>
          <div className="contact-row">
            <div className="icon"><Icon.Clock size={16} /></div>
            <div>
              <div className="k">Program</div>
              {company.schedule.map(s => (
                <div key={s.day} style={{display: "flex", justifyContent: "space-between", maxWidth: 320, fontSize: 14, padding: "3px 0"}}>
                  <span style={{color: "var(--text-dim)"}}>{s.day}</span>
                  <span className="mono" style={{color: "var(--text)"}}>{s.hours}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="contact-row">
            <div className="icon"><Icon.TikTok size={16} /></div>
            <div>
              <div className="k">Social</div>
              <div className="v mono">{company.tiktok}</div>
              <small>Postam zilnic pe TikTok cu masini noi si piese disponibile</small>
            </div>
          </div>
        </div>

        <div>
          <div className="map-block">
            <div className="map-block-stripes" />
            <div className="pin" />
            <div className="map-label">{company.address}</div>
          </div>
          <div className="contact-card" style={{marginTop: 20}}>
            <div className="section-eyebrow" style={{margin: 0, marginBottom: 8}}>Date firma</div>
            <h3 style={{margin: "0 0 16px", fontFamily: "var(--font-display)", fontSize: 22, letterSpacing: "-0.01em"}}>Partixauto SRL</h3>
            <div className="spec-list" style={{margin: 0, borderTop: 0}}>
              <div className="spec-row"><span className="k">CIF</span><span className="v">{company.cif}</span></div>
              <div className="spec-row"><span className="k">Reg. com.</span><span className="v">{company.reg}</span></div>
              <div className="spec-row"><span className="k">Sediu</span><span className="v" style={{textAlign:"right", fontSize: 12}}>{company.address}</span></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
}

// ─── Search overlay ───────────────────────────────────────────────────
function SearchOverlay({ onClose, onOpenCar, onNav }) {
  const [q, setQ] = React.useState("");
  const inputRef = React.useRef();

  React.useEffect(() => {
    inputRef.current?.focus();
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const allParts = Object.entries(_PARTS_BY_CAR).flatMap(([carId, parts]) =>
    parts.map(p => ({ ...p, carId, car: _CARS.find(c => c.id === carId) }))
  );

  const tokens = q.toLowerCase().trim().split(/\s+/).filter(Boolean);
  const matchScore = (text) => {
    if (tokens.length === 0) return 0;
    let s = 0;
    const t = text.toLowerCase();
    tokens.forEach(tk => { if (t.includes(tk)) s += 1; });
    return s;
  };

  const carResults = q ? _CARS.map(c => ({
    c, score: matchScore(`${c.brand} ${c.model} ${c.gen} ${c.year} ${c.engine} ${c.fuel}`)
  })).filter(r => r.score > 0).sort((a,b) => b.score - a.score).slice(0, 4) : [];

  const partResults = q ? allParts.map(p => ({
    p, score: matchScore(`${p.name} ${p.category} ${p.car.brand} ${p.car.model} ${p.car.gen} ${p.car.year}`)
  })).filter(r => r.score > 0).sort((a,b) => b.score - a.score).slice(0, 8) : [];

  const total = carResults.length + partResults.length;

  return (
    <div className="search-overlay" onClick={onClose}>
      <div className="search-modal" onClick={e => e.stopPropagation()}>
        <div className="search-modal-input">
          <Icon.Search size={20} />
          <input ref={inputRef} value={q} onChange={e => setQ(e.target.value)} placeholder="Cauta o piesa, marca, model... ex: far golf 5, bara logan" />
          <kbd>ESC</kbd>
        </div>

        {q === "" && (
          <>
            <div className="search-section-title">Cautari populare</div>
            <div className="search-popular">
              {_POPULAR_SEARCHES.map(s => (
                <button key={s} className="chip" onClick={() => setQ(s)}>{s}</button>
              ))}
            </div>
          </>
        )}

        {q !== "" && total === 0 && (
          <div className="search-empty">
            <p>Nu am gasit nimic pentru <strong>"{q}"</strong>.</p>
            <p style={{fontSize: 13, marginTop: 10}}>Scrie-ne pe WhatsApp - poate avem piesa, dar inca neincarcata pe site.</p>
          </div>
        )}

        {carResults.length > 0 && (
          <>
            <div className="search-section-title">Masini ({carResults.length})</div>
            <div className="search-results">
              {carResults.map(({c}) => (
                <div key={c.id} className="search-result" onClick={() => { onOpenCar(c.id); onClose(); }}>
                  <div className="search-result-icon"><Icon.Car size={16} /></div>
                  <div className="search-result-text">
                    <div className="search-result-title">{c.brand} {c.model} {c.year}</div>
                    <div className="search-result-meta">{c.engine} · {c.fuel} · {(c.km/1000).toFixed(0)}k km</div>
                  </div>
                  <Icon.ChevronRight />
                </div>
              ))}
            </div>
          </>
        )}

        {partResults.length > 0 && (
          <>
            <div className="search-section-title">Piese ({partResults.length})</div>
            <div className="search-results">
              {partResults.map(({p}) => (
                <div key={p.id} className="search-result" onClick={() => { onOpenCar(p.carId); onClose(); }}>
                  <div className="search-result-icon"><Icon.Wrench size={14} /></div>
                  <div className="search-result-text">
                    <div className="search-result-title">{p.name}</div>
                    <div className="search-result-meta">{p.car.brand} {p.car.model} {p.car.year} · {p.price} RON</div>
                  </div>
                  <span className={`search-result-status part-status ${p.status}`}>
                    {p.status === "disponibil" ? "Disp." : p.status === "rezervat" ? "Rez." : "Vandut"}
                  </span>
                </div>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  HomePage, CatalogPage, CarDetailPage, ContactPage, SearchOverlay,
});