// ===== Garage (Visual car selector) =====
const Garage = ({ navigate }) => {
  const [step, setStep] = useState(1); // 1: type, 2: brand, 3: model, 4: year, 5: result
  const [carType, setCarType] = useState(null);
  const [carBrand, setCarBrand] = useState(null);
  const [carModel, setCarModel] = useState(null);
  const [carYear, setCarYear] = useState(null);

  const types = [
  { id: 'sedan', lbl: 'Sedán', sub: 'Vento, Civic, Sentra' },
  { id: 'suv', lbl: 'SUV', sub: 'CR-V, Tiguan, RAV4' },
  { id: 'hatch', lbl: 'Hatchback', sub: 'Golf, Mazda3, Yaris' },
  { id: 'pickup', lbl: 'Pickup', sub: 'Hilux, Ranger, F-150' },
  { id: 'sport', lbl: 'Deportivo', sub: 'Mustang, Camaro, MX-5' },
  { id: 'truck', lbl: 'Camión / Van', sub: 'Hiace, Sprinter' }];


  const proceed = () => setStep((s) => Math.min(5, s + 1));
  const back = () => setStep((s) => Math.max(1, s - 1));
  const reset = () => {setStep(1);setCarType(null);setCarBrand(null);setCarModel(null);setCarYear(null);};

  return (
    <div className="page-fade page">
      <div style={{ marginBottom: 32 }}>
        <div className="eyebrow">— MI GARAGE · SELECTOR VISUAL</div>
        <h1 className="display" style={{ fontSize: 64, margin: '8px 0 0' }}>Elige tu coche.<br />Mira la llanta puesta.</h1>
      </div>

      <div className="garage">
        {/* Side stepper */}
        <aside className="garage-side">
          <h2>4 PASOS</h2>
          <div className="garage-step" data-state={step >= 1 ? step > 1 ? 'done' : 'active' : ''}>
            <div className={'garage-step ' + (step > 1 ? 'done' : step === 1 ? 'active' : '')} style={{ padding: 0, border: 'none', display: 'contents' }}>
              <div className="num">{step > 1 ? '✓' : '1'}</div>
              <div className="lbl">TIPO</div>
              {carType && <div className="val">{types.find((t) => t.id === carType)?.lbl}</div>}
            </div>
          </div>
          <div className={'garage-step ' + (step > 2 ? 'done' : step === 2 ? 'active' : '')}>
            <div className="num">{step > 2 ? '✓' : '2'}</div>
            <div className="lbl">MARCA</div>
            {carBrand && <div className="val">{carBrand}</div>}
          </div>
          <div className={'garage-step ' + (step > 3 ? 'done' : step === 3 ? 'active' : '')}>
            <div className="num">{step > 3 ? '✓' : '3'}</div>
            <div className="lbl">MODELO</div>
            {carModel && <div className="val">{carModel}</div>}
          </div>
          <div className={'garage-step ' + (step > 4 ? 'done' : step === 4 ? 'active' : '')}>
            <div className="num">{step > 4 ? '✓' : '4'}</div>
            <div className="lbl">AÑO</div>
            {carYear && <div className="val">{carYear}</div>}
          </div>

          {step > 1 &&
          <button className="btn btn-ghost" onClick={back}>
              <Icon name="arrowL" size={14} /> ATRÁS
            </button>
          }
          {(carBrand || carType) &&
          <button onClick={reset} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.12em', textAlign: 'left', padding: '8px 0' }}>
              REINICIAR
            </button>
          }
        </aside>

        {/* Main stage */}
        <div className="garage-main" data-comment-anchor="8a64a339d1-div-69-9">
          {step === 1 &&
          <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>PASO 1 / 4</div>
              <h2 className="display" style={{ fontSize: 40, margin: '0 0 24px' }}>¿Qué tipo de coche?</h2>
              <div className="car-select-grid">
                {types.map((t) =>
              <div key={t.id} className={'car-tile ' + (carType === t.id ? 'on' : '')} onClick={() => {setCarType(t.id);setTimeout(proceed, 200);}}>
                    <div className="car-photo">
                      <img src={`assets/cars/${t.id}.png`} alt={t.lbl} draggable="false" />
                      <span className="car-photo-tag">{t.lbl.toUpperCase()}</span>
                    </div>
                    <div className="lbl">{t.lbl}</div>
                    <div className="sub">{t.sub}</div>
                  </div>
              )}
              </div>
            </div>
          }

          {step === 2 &&
          <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>PASO 2 / 4</div>
              <h2 className="display" style={{ fontSize: 40, margin: '0 0 24px' }}>¿Qué marca?</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
                {CAR_BRANDS.map((b) =>
              <button key={b.name}
              onClick={() => {setCarBrand(b.name);setTimeout(proceed, 150);}}
              style={{
                padding: '24px 16px', background: 'var(--bg-elev-2)',
                border: '1px solid ' + (carBrand === b.name ? 'var(--accent)' : 'var(--line)'),
                borderRadius: 10, cursor: 'pointer',
                fontFamily: 'var(--font-display)', fontSize: 22, textTransform: 'uppercase',
                color: 'var(--text)', letterSpacing: '0.02em', transition: 'all 120ms'
              }}>
                    {b.name}
                  </button>
              )}
              </div>
            </div>
          }

          {step === 3 && carBrand &&
          <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>PASO 3 / 4</div>
              <h2 className="display" style={{ fontSize: 40, margin: '0 0 24px' }}>¿Qué modelo {carBrand}?</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                {CAR_BRANDS.find((b) => b.name === carBrand).models.map((m) =>
              <button key={m}
              onClick={() => {setCarModel(m);setTimeout(proceed, 150);}}
              style={{
                padding: '18px 14px', background: 'var(--bg-elev-2)',
                border: '1px solid ' + (carModel === m ? 'var(--accent)' : 'var(--line)'),
                borderRadius: 10, cursor: 'pointer',
                fontFamily: 'var(--font-display)', fontSize: 18, textTransform: 'uppercase',
                color: 'var(--text)', letterSpacing: '0.02em', textAlign: 'left'
              }}>
                    {m}
                  </button>
              )}
              </div>
            </div>
          }

          {step === 4 &&
          <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div className="eyebrow" style={{ marginBottom: 8 }}>PASO 4 / 4</div>
              <h2 className="display" style={{ fontSize: 40, margin: '0 0 24px' }}>¿Qué año?</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
                {Array.from({ length: 18 }).map((_, i) => {
                const y = 2026 - i;
                return (
                  <button key={y}
                  onClick={() => {setCarYear(y);setTimeout(proceed, 150);}}
                  style={{
                    padding: '18px 10px', background: 'var(--bg-elev-2)',
                    border: '1px solid ' + (carYear === y ? 'var(--accent)' : 'var(--line)'),
                    borderRadius: 10, cursor: 'pointer',
                    fontFamily: 'var(--font-mono)', fontSize: 16,
                    color: 'var(--text)'
                  }}>
                      {y}
                    </button>);

              })}
              </div>
            </div>
          }

          {step === 5 &&
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24, animation: 'pageFade 320ms ease both' }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8, color: 'var(--green)' }}>✓ COMPATIBILIDAD VERIFICADA</div>
                <h2 className="display" style={{ fontSize: 48, margin: 0, lineHeight: 0.9 }}>
                  TU {carBrand?.toUpperCase()}<br />
                  <span style={{ color: 'var(--accent)' }}>{carModel?.toUpperCase()} · {carYear}</span>
                </h2>
              </div>

              <div className="garage-result">
                {/* Car display with real photo + rotating wheel badges */}
                <div className="car-display car-display-photo">
                  <img src={`assets/cars/${carType || 'sedan'}.png`} alt={carModel || 'Tu coche'} className="car-display-img" />
                  <div className="car-display-badge top-left">
                    <span className="dot"></span>
                    <span>OEM SPEC · 205/55R16</span>
                  </div>
                  <div className="car-display-badge bottom-right">
                    <span className="dot green"></span>
                    <span>COMPATIBILIDAD 100%</span>
                  </div>
                  <div className="car-display-wheel" style={{ animation: 'tire-spin 4s linear infinite' }}>
                    <TireSVG size={68} brand="RUTA" spec="" accent="#fdb827" />
                  </div>
                </div>

                {/* Fitment data */}
                <div className="fitment-card">
                  <div className="eyebrow" style={{ marginBottom: 12 }}>— ESPECIFICACIONES OEM</div>
                  <div className="row"><span className="k">MEDIDA RECOMENDADA</span><span className="v" style={{ color: 'var(--accent)' }}>205/55R16</span></div>
                  <div className="row"><span className="k">MEDIDAS ALTERNAS</span><span className="v">215/50R17 · 225/45R17</span></div>
                  <div className="row"><span className="k">RIN</span><span className="v">16" · 17"</span></div>
                  <div className="row"><span className="k">PATRÓN BIRLO</span><span className="v">5x112</span></div>
                  <div className="row"><span className="k">OFFSET</span><span className="v">ET 45</span></div>
                  <div className="row"><span className="k">PRESIÓN</span><span className="v">32 / 32 PSI</span></div>
                  <div className="row"><span className="k">TPMS</span><span className="v" style={{ color: 'var(--green)' }}>● COMPATIBLE</span></div>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <button className="btn btn-primary btn-lg" onClick={() => navigate('catalog')}>
                  <Icon name="search" /> VER LLANTAS COMPATIBLES (47)
                </button>
                <button className="btn btn-ghost btn-lg">
                  <Icon name="ar" /> PROBAR EN AR
                </button>
              </div>

              {/* Recommended */}
              <div>
                <div className="eyebrow" style={{ marginBottom: 12 }}>★ RECOMENDADAS PARA TU {carModel?.toUpperCase()}</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                  {TIRES.slice(0, 3).map((t) =>
                <div key={t.id} className="card" style={{ padding: 16, cursor: 'pointer', display: 'flex', gap: 12, alignItems: 'center' }} onClick={() => navigate('product', { id: t.id })}>
                      <div style={{ width: 64, height: 64, background: 'var(--bg-elev-2)', borderRadius: 8, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                        <TireSVG size={56} brand="" spec="" accent={t.accent} />
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{t.brand}</div>
                        <div className="display" style={{ fontSize: 16, lineHeight: 1, margin: '4px 0' }}>{t.name}</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)' }}>{fmt(t.price)}</div>
                      </div>
                    </div>
                )}
                </div>
              </div>
            </div>
          }
        </div>
      </div>
    </div>);

};

Object.assign(window, { Garage });