// ===== Product Detail page =====
const ProductDetail = ({ tireId, navigate, addToCart, favs, toggleFav }) => {
  const tire = TIRES.find((t) => t.id === tireId) || TIRES[0];
  const [size, setSize] = useState(tire.sizes[0]);
  const [qty, setQty] = useState(4);
  const [galleryView, setGalleryView] = useState('front');
  const [arOpen, setArOpen] = useState(false);
  const [tab, setTab] = useState('desc');

  const isFav = favs.includes(tire.id);
  const total = tire.price * qty;

  return (
    <div className="page-fade page">
      {/* breadcrumb */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 24, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>
        <a onClick={() => navigate('home')} style={{ cursor: 'pointer' }}>RUTA</a>
        <span>/</span>
        <a onClick={() => navigate('catalog')} style={{ cursor: 'pointer' }}>CATÁLOGO</a>
        <span>/</span>
        <span style={{ color: 'var(--text)' }}>{tire.brand} · {tire.name}</span>
      </div>

      <div className="pdp">
        {/* Gallery */}
        <div className="pdp-gallery">
          <button className="ar-btn" onClick={() => setArOpen(true)}>
            <Icon name="ar" size={14} /> VER EN MI COCHE · AR
          </button>
          <div className="spec-tag" style={{ top: 30, left: 30 }}>
            <span className="dot"></span><span className="line"></span> {size}
          </div>
          <div className="spec-tag" style={{ bottom: 110, right: 30, flexDirection: 'row-reverse' }}>
            <span className="dot"></span><span className="line"></span> {tire.brand} · {tire.name}
          </div>
          <TirePhoto tire={tire} hoverable={true} showWatermark={true} />
          <div className="gallery-thumbs">
            {['FRONT', 'SIDE', 'TREAD', 'RIM'].map((v) =>
            <button key={v} className={'gallery-thumb ' + (galleryView === v.toLowerCase() ? 'on' : '')} onClick={() => setGalleryView(v.toLowerCase())}>
                {v}
              </button>
            )}
          </div>
        </div>

        {/* Info */}
        <div className="pdp-info" data-comment-anchor="4ee609d591-div-47-9">
          <div style={{ display: 'flex', gap: 6 }}>
            {tire.tags.map((t) => <span key={t} className="chip chip-accent">{t}</span>)}
            {tire.stock === 'low' && <span className="chip" style={{ background: 'var(--accent-hot)', color: '#000', borderColor: 'var(--accent-hot)' }}>Poco stock</span>}
          </div>
          <div className="pdp-brand">{tire.brand} · {USE_LABELS[tire.use]}</div>
          <h1 className="pdp-title">{tire.name}</h1>
          <p style={{ color: 'var(--text-mute)', fontSize: 16, margin: 0 }}>{tire.tagline}</p>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 13 }}>
            <div style={{ display: 'flex', gap: 2, color: 'var(--accent)' }}>
              {Array.from({ length: 5 }).map((_, i) => <Icon key={i} name="star" size={14} />)}
            </div>
            <span style={{ color: 'var(--text-mute)', fontFamily: 'var(--font-mono)' }}>{tire.rating} · {tire.reviews} RESEÑAS</span>
            <span style={{ color: 'var(--green)', fontFamily: 'var(--font-mono)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.1em' }}>● EN STOCK</span>
          </div>

          <div className="pdp-price-row">
            <div className="pdp-price"><span className="currency">$</span>{tire.price.toLocaleString('es-MX')}</div>
            <div>
              <div className="pdp-price-each">POR LLANTA · MXN</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-mute)', marginTop: 4 }}>
                {fmt(total)} · {qty} LLANTAS
              </div>
            </div>
          </div>

          {/* Sizes */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>— MEDIDA</div>
            <div className="size-grid">
              {tire.sizes.map((s, i) =>
              <div key={s} className={'size-tile ' + (size === s ? 'on' : '')} onClick={() => setSize(s)}>
                  <span className="size">{s}</span>
                  <span className={'stock ' + (i === 2 ? 'low' : '')}>{i === 2 ? '2 disp.' : 'Disponible'}</span>
                </div>
              )}
            </div>
          </div>

          {/* Qty + Actions */}
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 6 }}>— CANTIDAD</div>
              <div className="qty">
                <button onClick={() => setQty((q) => Math.max(1, q - 1))} aria-label="Disminuir"><Icon name="minus" size={14} /></button>
                <input type="text" inputMode="numeric" value={qty} onChange={(e) => setQty(Math.max(1, parseInt(e.target.value.replace(/\D/g, '')) || 1))} />
                <button onClick={() => setQty((q) => q + 1)} aria-label="Aumentar"><Icon name="plus" size={14} /></button>
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div className="eyebrow" style={{ marginBottom: 6, opacity: 0 }}>—</div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="btn btn-primary btn-lg" style={{ flex: 1 }} onClick={() => addToCart({ ...tire, selectedSize: size, qty })}>
                  <Icon name="cart" size={18} /> AGREGAR AL CARRITO · {fmt(total)}
                </button>
                <button className="btn btn-ghost btn-lg" onClick={() => toggleFav(tire.id)}>
                  <Icon name="heart" size={18} />
                </button>
              </div>
            </div>
          </div>

          {/* Service add-ons */}
          <div className="talacha-card on" style={{ marginTop: 0 }}>
            <div className="icon"><Icon name="wrench" size={20} /></div>
            <div className="talacha-info">
              <div className="t">+ INSTALACIÓN COMPLETA</div>
              <div className="s">Monta + balanceo + válvula + N₂ · 45 min</div>
            </div>
            <div className="price-tag">{fmt(480 * qty)}</div>
          </div>

          {/* Delivery / Shop info */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div style={{ background: 'var(--bg-elev-2)', borderRadius: 10, padding: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="truck" size={20} />
              <div style={{ fontSize: 12 }}>
                <div style={{ fontWeight: 600 }}>Envío gratis</div>
                <div style={{ color: 'var(--text-mute)', fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>24-48 HR · CDMX</div>
              </div>
            </div>
            <div style={{ background: 'var(--bg-elev-2)', borderRadius: 10, padding: 14, display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="shield" size={20} />
              <div style={{ fontSize: 12 }}>
                <div style={{ fontWeight: 600 }}>Garantía RUTA</div>
                <div style={{ color: 'var(--text-mute)', fontFamily: 'var(--font-mono)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>5 AÑOS / 60K KM</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* DNA + Specs */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, marginTop: 60 }}>
        {/* DNA Card */}
        <div className="dna-card">
          <div className="dna-header">
            <div>
              <div className="tag">★ TIRE DNA · PERFIL EXCLUSIVO RUTA</div>
              <div className="t" style={{ marginTop: 4 }}>El ADN de esta llanta</div>
            </div>
            <button className="btn btn-ghost" style={{ padding: '8px 12px', fontSize: 12 }}>COMPARAR</button>
          </div>
          <div className="dna-body">
            <DnaRadar dna={tire.dna} color={tire.accent} size={240} />
            <div className="dna-legend">
              {[
              { k: 'wet', lbl: 'LLUVIA' },
              { k: 'dry', lbl: 'SECO' },
              { k: 'noise', lbl: 'SILENCIO' },
              { k: 'life', lbl: 'DURACIÓN' },
              { k: 'fuel', lbl: 'AHORRO' }].
              map((s) =>
              <div key={s.k} className="dna-stat">
                  <span className="lbl">{s.lbl}</span>
                  <div className="bar"><div className="bar-f" style={{ width: tire.dna[s.k] + '%', background: tire.accent }}></div></div>
                  <span className="num">{tire.dna[s.k]}</span>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Specs sheet */}
        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>— FICHA TÉCNICA</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
            ['Medida', size],
            ['Tipo', USE_LABELS[tire.use]],
            ['Construcción', 'Radial Asimétrica'],
            ['UTQG', '320 AA A'],
            ['Índice de carga', '91 (615 kg)'],
            ['Índice de velocidad', 'V (240 km/h)'],
            ['Profundidad', '8.0 mm'],
            ['Origen', 'Made in Germany'],
            ['Garantía', '5 años / 60,000 km']].
            map(([k, v]) =>
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderBottom: '1px solid var(--line)' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{k}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>{v}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div style={{ marginTop: 60 }}>
        <div style={{ display: 'flex', gap: 32, borderBottom: '1px solid var(--line)', marginBottom: 24 }}>
          {[
          ['desc', 'DESCRIPCIÓN'],
          ['reviews', 'RESEÑAS · 412'],
          ['mech', 'MECÁNICOS VERIFICADOS · 18'],
          ['fitment', 'COMPATIBILIDAD']].
          map(([k, l]) =>
          <button key={k} className={'nav-item ' + (tab === k ? 'active' : '')} onClick={() => setTab(k)} style={{ padding: '12px 0', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em' }}>{l}</button>
          )}
        </div>

        {tab === 'desc' &&
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48 }}>
            <div>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--text-mute)' }}>
                La {tire.brand} {tire.name} es una llanta diseñada para conductores que exigen precisión sin sacrificar confort. Su compuesto de sílice avanzado y su patrón asimétrico optimizan la adherencia en seco y lluvia mientras reducen el ruido de rodaje hasta 3 dB versus la generación anterior.
              </p>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--text-mute)' }}>
                Probada en más de 50,000 km en circuitos europeos y desarrollada en colaboración con manufactureros de coches deportivos premium. Una llanta para quienes saben que la diferencia se siente en cada curva.
              </p>
            </div>
            <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 16, padding: 24 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>— TECNOLOGÍAS</div>
              {['Compuesto Hybrid-Silica', 'Patrón asimétrico', 'Refuerzo nylon spiral', 'Cordón perimetral 0°', 'Hombros optimizados'].map((t) =>
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
                  <span style={{ width: 4, height: 4, background: 'var(--accent)', borderRadius: '50%' }}></span>
                  <span style={{ fontSize: 13 }}>{t}</span>
                </div>
            )}
            </div>
          </div>
        }

        {tab === 'reviews' &&
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {[
          { n: 'Luis M.', c: 'Civic Type R 2023', s: 5, t: 'Brutal en seco. Le ponemos pista y agarra como goma de mascar. Lo único: hace un poco más de ruido a 120+ km/h.' },
          { n: 'Andrea G.', c: 'Mazda3 2022', s: 5, t: 'Lluvia en CDMX = paz mental. Mi sustituto perfecto de las Bridgestone originales. Las RUTA me las instalaron en 38 minutos.' },
          { n: 'Carlos R.', c: 'Golf GTI MK7', s: 4, t: 'Bien, pero a la 4ta llanta noté un punto de balanceo. Volví y me lo arreglaron sin bronca. Buen servicio.' },
          { n: 'Patty L.', c: 'Tiguan R-Line 2021', s: 5, t: 'Aguantan los topes salvajes de la Anáhuac. Y rinden — llevo 18,000 km y no veo desgaste asimétrico.' }].
          map((r, i) =>
          <div key={i} style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 20 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div>
                    <div style={{ fontWeight: 600 }}>{r.n}</div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{r.c}</div>
                  </div>
                  <div style={{ display: 'flex', gap: 1, color: 'var(--accent)' }}>
                    {Array.from({ length: r.s }).map((_, i) => <Icon key={i} name="star" size={12} />)}
                  </div>
                </div>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5 }}>{r.t}</p>
              </div>
          )}
          </div>
        }

        {tab === 'mech' &&
        <div>
            <p style={{ color: 'var(--text-mute)', maxWidth: 600, marginBottom: 24 }}>
              ★ Único en RUTA: <strong style={{ color: 'var(--text)' }}>opiniones de mecánicos certificados</strong> que han instalado y dado servicio a esta llanta. Sin opiniones falsas — autoridad técnica.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
              {[
            { n: 'Mtro. Jorge "El Tigre" Vázquez', shop: 'RUTA Polanco · 22 años exp.', s: 5, t: 'Como técnico de carrera: esta hule está balanceada de fábrica casi perfecto. Rara vez requiere más de 30 gramos por rueda.' },
            { n: 'Esp. Roberto Mendoza', shop: 'RUTA Roma Nte. · 14 años exp.', s: 5, t: 'Talón se asienta limpio en rines de aluminio. He montado más de 600 pares de estas. Cero rupturas de talón.' }].
            map((r, i) =>
            <div key={i} style={{ background: 'var(--bg-elev)', border: '1px solid var(--accent)', borderRadius: 12, padding: 20, position: 'relative' }}>
                  <span className="chip chip-accent" style={{ position: 'absolute', top: -10, left: 20 }}>● MECÁNICO VERIFICADO</span>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, marginBottom: 10 }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 15 }}>{r.n}</div>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>{r.shop}</div>
                    </div>
                    <div style={{ display: 'flex', gap: 1, color: 'var(--accent)' }}>
                      {Array.from({ length: r.s }).map((_, i) => <Icon key={i} name="star" size={12} />)}
                    </div>
                  </div>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5 }}>{r.t}</p>
                </div>
            )}
            </div>
          </div>
        }

        {tab === 'fitment' &&
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {CAR_BRANDS.slice(0, 6).map((b) =>
          <div key={b.name} style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 12, padding: 16 }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>{b.name}</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {b.models.slice(0, 4).map((m) => <span key={m} className="chip chip-outline">{m}</span>)}
                </div>
              </div>
          )}
          </div>
        }
      </div>

      {/* AR Overlay */}
      {arOpen && <ARView tire={tire} onClose={() => setArOpen(false)} />}

      {/* Mobile sticky bottom CTA */}
      <div className="mobile-cta-bar">
        <div className="mobile-cta-info">
          <div className="mobile-cta-price">{fmt(tire.price)}<span> · c/u</span></div>
          <div className="mobile-cta-meta">{size} · {qty} llantas · {fmt(total)}</div>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => addToCart({ ...tire, selectedSize: size, qty })}>
          <Icon name="cart" size={16} /> AGREGAR
        </button>
      </div>
    </div>);

};

// === AR mock overlay ===
const ARView = ({ tire, onClose }) => {
  const [shot, setShot] = useState(false);
  return (
    <div className="ar-overlay" onClick={onClose}>
      <div className="ar-stage" onClick={(e) => e.stopPropagation()}>
        <button className="ar-close" onClick={onClose}><Icon name="close" size={20} /></button>
        <div className="ar-corners"><span></span></div>

        <div className="ar-chrome">
          <div className="ar-rec"><span className="blink"></span> · AR · ESCANEANDO</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent)' }}>
            {tire.brand} · {tire.name}
          </div>
        </div>

        {/* "Camera view" — gradient floor with grid */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #0a0a14 0%, #1a1a1a 50%, #0a0a0a 100%)' }}></div>
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '60%', background: 'linear-gradient(180deg, transparent, rgba(253,184,39,0.06))', perspective: '600px' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(0deg, rgba(253,184,39,0.15) 0 1px, transparent 1px 60px), repeating-linear-gradient(90deg, rgba(253,184,39,0.15) 0 1px, transparent 1px 60px)', transform: 'rotateX(60deg)', transformOrigin: 'bottom' }}></div>
        </div>

        {/* Car silhouette with rotating tire */}
        <div className="ar-car-silhouette">
          <svg viewBox="0 0 600 280" width="100%" style={{ display: 'block' }}>
            <defs>
              <linearGradient id="carGrad" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#2a2a2a" />
                <stop offset="100%" stopColor="#0a0a0a" />
              </linearGradient>
            </defs>
            {/* Car body */}
            <path d="M 50 220 L 80 160 L 180 130 L 380 120 L 480 140 L 540 170 L 560 220 L 560 250 L 50 250 Z" fill="url(#carGrad)" stroke="#444" strokeWidth="1.5" />
            <path d="M 180 130 L 230 90 L 380 80 L 430 120" fill="none" stroke="#666" strokeWidth="1" />
            {/* Windows */}
            <path d="M 195 130 L 240 95 L 305 90 L 305 130 Z" fill="#0a0a0a" stroke="#333" />
            <path d="M 315 90 L 375 88 L 425 125 L 315 130 Z" fill="#0a0a0a" stroke="#333" />
            {/* Lights */}
            <ellipse cx="510" cy="200" rx="20" ry="10" fill={tire.accent} opacity="0.7" />
            <ellipse cx="85" cy="200" rx="14" ry="8" fill="#ff5a5a" opacity="0.5" />
            {/* Highlighted wheel — installed tire */}
            <g transform="translate(160 220)">
              <circle r="55" fill="#0a0a0a" stroke={tire.accent} strokeWidth="2" strokeDasharray="4 3" opacity="0.7" />
              <circle r="48" fill="#111" />
              <g style={{ animation: 'spin 3s linear infinite', transformOrigin: 'center' }}>
                <foreignObject x="-50" y="-50" width="100" height="100">
                  <TireSVG size={100} brand={tire.brand.substring(0, 4).toUpperCase()} spec="" accent={tire.accent} />
                </foreignObject>
              </g>
            </g>
            <g transform="translate(450 220)">
              <circle r="55" fill="#0a0a0a" stroke={tire.accent} strokeWidth="2" strokeDasharray="4 3" opacity="0.7" />
              <circle r="48" fill="#111" />
              <foreignObject x="-50" y="-50" width="100" height="100">
                <TireSVG size={100} brand={tire.brand.substring(0, 4).toUpperCase()} spec="" accent={tire.accent} />
              </foreignObject>
            </g>
            {/* AR markers */}
            <g stroke={tire.accent} strokeWidth="2" fill="none">
              <path d="M 100 220 L 100 280 L 130 280" />
              <path d="M 220 220 L 220 295 L 190 295" />
              <path d="M 390 220 L 390 295 L 420 295" />
              <path d="M 510 220 L 510 280 L 480 280" />
            </g>
            <text x="160" y="305" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={tire.accent} letterSpacing="2">FRONT · LEFT</text>
            <text x="450" y="305" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={tire.accent} letterSpacing="2">FRONT · RIGHT</text>
          </svg>
        </div>

        {/* HUD */}
        <div className="ar-bottom">
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 14px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              <div style={{ color: 'var(--text-mute)', fontSize: 9, marginBottom: 2 }}>MEDIDA</div>
              {tire.sizes[0]}
            </div>
            <div style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 14px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              <div style={{ color: 'var(--text-mute)', fontSize: 9, marginBottom: 2 }}>COMPATIBILIDAD</div>
              <span style={{ color: 'var(--green)' }}>● 100% MATCH</span>
            </div>
            <div style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(8px)', border: '1px solid var(--line)', borderRadius: 8, padding: '10px 14px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              <div style={{ color: 'var(--text-mute)', fontSize: 9, marginBottom: 2 }}>OFFSET</div>
              ET 45
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-ghost" onClick={() => setShot((s) => !s)}>
              <Icon name="cam" size={14} /> {shot ? 'GUARDADA ✓' : 'CAPTURA'}
            </button>
            <button className="btn btn-primary" onClick={onClose}>
              ESTO QUIERO <Icon name="arrow" size={14} />
            </button>
          </div>
        </div>

        {/* Side panel */}
        <div style={{ position: 'absolute', top: 60, right: 16, width: 200, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(10px)', border: '1px solid var(--line)', borderRadius: 12, padding: 14 }}>
          <div className="eyebrow" style={{ marginBottom: 10, fontSize: 9 }}>— TU VEHÍCULO</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, lineHeight: 1, textTransform: 'uppercase' }}>VW Jetta</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em', marginTop: 4 }}>MK7 · 2022</div>
          <div style={{ borderTop: '1px solid var(--line)', marginTop: 10, paddingTop: 10 }}>
            {[['Rin', '16"'], ['Offset', 'ET 45'], ['Patrón', '5x112']].map(([k, v]) =>
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', fontFamily: 'var(--font-mono)', fontSize: 11 }}>
                <span style={{ color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{k}</span>
                <span>{v}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

};

Object.assign(window, { ProductDetail, ARView });