// ===== Home page =====
const Home = ({ navigate, addToCart, favs, toggleFav }) => {
  const [carBrand, setCarBrand] = useState('Volkswagen');
  const [carModel, setCarModel] = useState('Jetta');
  const [carYear, setCarYear] = useState('2022');
  const [tireSize, setTireSize] = useState('205/55R16');

  const featuredTires = TIRES.slice(0, 4);

  return (
    <div className="page-fade">
      {/* HERO */}
      <section className="hero" data-comment-anchor="9de60bb96b-section-13-7">
        <div className="hero-left" data-comment-anchor="9a5c079e30-div-14-9">
          <div>
            <div style={{ display: 'flex', gap: 10, marginBottom: 32 }}>
              <span className="chip chip-accent"><span className="chip-dot" style={{ background: '#000' }}></span>NUEVA TEMPORADA · 2026</span>
              <span className="chip chip-outline">Envío 24h CDMX</span>
            </div>
            <h1 className="hero-title">
              LLANTAS<br />
              <span className="accent">Y</span> TALACHA<br />
              <span className="outline">SIN</span> ROLLO.
            </h1>
            <p style={{ maxWidth: 480, marginTop: 32, color: 'var(--text-mute)', fontSize: 16, lineHeight: 1.5 }}>
              Compra, programa instalación y rastrea tu servicio. Más de 800 modelos en stock, montaje en 45 minutos, garantía de por vida en mano de obra.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 28 }}>
              <button className="btn btn-primary btn-lg" onClick={() => navigate('garage')}>
                <Icon name="car" /> ELIGE TU COCHE
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => navigate('quiz')}>
                <Icon name="chat" /> NO SÉ QUÉ NECESITO
              </button>
            </div>
          </div>
          <div className="hero-meta">
            <div className="item"><div className="k">EN STOCK</div><div className="v">12,400+</div></div>
            <div className="item"><div className="k">TALLERES</div><div className="v">18 CDMX</div></div>
            <div className="item"><div className="k">CLIENTES</div><div className="v">87K ★ 4.8</div></div>
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-spec top-left">205/55R16 · 91V</div>
          <div className="hero-spec top-right">UTQG · 320 AA A</div>
          <div className="hero-spec bottom-left">RIM Ø 16"</div>
          <div className="hero-spec bottom-right">DOT · ENE2026</div>
          <div className="hero-tire">
            <TirePhoto tire={{ ...TIRES[0], id: 'hero', use: 'sport', brand: 'RUTA', name: 'Pilot Sport', sizes: ['205/55R16'], accent: '#fdb827' }} hoverable={false} drift={true} />
          </div>
        </div>
      </section>

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>

      {/* Quick search */}
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '0 28px' }}>
        <div className="quicksearch">
          <div className="label-col">
            <div className="eyebrow">BUSCAR POR</div>
            <div className="t">TU COCHE</div>
          </div>
          <div className="selects">
            <select value={carBrand} onChange={(e) => {setCarBrand(e.target.value);setCarModel(CAR_BRANDS.find((b) => b.name === e.target.value).models[0]);}}>
              {CAR_BRANDS.map((b) => <option key={b.name}>{b.name}</option>)}
            </select>
            <select value={carModel} onChange={(e) => setCarModel(e.target.value)}>
              {(CAR_BRANDS.find((b) => b.name === carBrand)?.models || []).map((m) => <option key={m}>{m}</option>)}
            </select>
            <select value={carYear} onChange={(e) => setCarYear(e.target.value)}>
              {Array.from({ length: 20 }).map((_, i) => {
                const y = 2026 - i;
                return <option key={y}>{y}</option>;
              })}
            </select>
            <select value={tireSize} onChange={(e) => setTireSize(e.target.value)}>
              {['185/65R15', '195/65R15', '205/55R16', '215/55R17', '225/45R17', '235/40R18'].map((s) => <option key={s}>{s}</option>)}
            </select>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => navigate('catalog')}>
            <Icon name="search" /> VER LLANTAS
          </button>
        </div>
      </div>

      {/* Marquee */}
      <div className="marquee" style={{ marginTop: 80 }}>
        <div className="marquee-track">
          {Array.from({ length: 12 }).map((_, i) => <span key={i}>Instalación en 45 min</span>)}
        </div>
      </div>

      {/* FEATURES — the "novel" experiences */}
      <section className="page">
        <div className="section-head">
          <div>
            <div className="s">04 EXPERIENCIAS RUTA</div>
            <div className="t">Comprar llantas<br />nunca fue así.</div>
          </div>
          <p style={{ maxWidth: 360, color: 'var(--text-mute)', fontSize: 14, margin: 0 }}>
            Cuatro maneras de encontrar la llanta perfecta. Elige cómo quieres explorar — visual, conversacional, técnico o con tu cámara.
          </p>
        </div>
        <div className="feature-grid">
          <div className="feature-card" onClick={() => navigate('garage')}>
            <div className="feature-num">— 01</div>
            <div className="feature-art"><Icon name="car" size={56} stroke={1.4} /></div>
            <h3>Mi Garage<br />3D</h3>
            <p>Elige tu coche en silueta y mira la llanta montada en vivo.</p>
            <span className="go">EXPLORAR <Icon name="arrow" size={14} /></span>
          </div>
          <div className="feature-card" onClick={() => navigate('quiz')}>
            <div className="feature-num">— 02</div>
            <div className="feature-art"><Icon name="chat" size={56} stroke={1.4} /></div>
            <h3>Asesor<br />Conversacional</h3>
            <p>Responde 6 preguntas y te recomendamos la llanta ideal.</p>
            <span className="go">EMPEZAR <Icon name="arrow" size={14} /></span>
          </div>
          <div className="feature-card" onClick={() => navigate('catalog')}>
            <div className="feature-num">— 03</div>
            <div className="feature-art"><Icon name="spark" size={56} stroke={1.4} /></div>
            <h3>Tire DNA<br />Radar</h3>
            <p>Compara llantas con perfiles visuales: lluvia, seco, ruido, vida útil.</p>
            <span className="go">COMPARAR <Icon name="arrow" size={14} /></span>
          </div>
          <div className="feature-card" onClick={() => navigate('product', { id: TIRES[0].id })}>
            <div className="feature-num">— 04</div>
            <div className="feature-art"><Icon name="ar" size={56} stroke={1.4} /></div>
            <h3>AR<br />Visualizador</h3>
            <p>Apunta tu cámara y mira cómo se verá la llanta en tu coche.</p>
            <span className="go">PROBAR <Icon name="arrow" size={14} /></span>
          </div>
        </div>
      </section>

      {/* Featured products */}
      <section className="page">
        <div className="section-head">
          <div>
            <div className="s">— DESTACADOS DE LA SEMANA</div>
            <div className="t">Top sellers<br />de marzo.</div>
          </div>
          <button className="btn btn-ghost" onClick={() => navigate('catalog')}>
            VER TODO EL CATÁLOGO <Icon name="arrow" size={14} />
          </button>
        </div>
        <div className="scroller-row">
          {featuredTires.map((t) =>
          <ProductCard key={t.id} tire={t} navigate={navigate} onAdd={addToCart} onFav={toggleFav} isFav={favs.includes(t.id)} />
          )}
        </div>
      </section>

      {/* Brand strip */}
      <section className="page" style={{ paddingTop: 0 }}>
        <div style={{ padding: '40px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
          <div className="eyebrow" style={{ marginBottom: 24 }}>— DISTRIBUIDOR AUTORIZADO</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 32, alignItems: 'center' }}>
            {BRANDS.map((b) =>
            <div key={b} style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--text-mute)', textTransform: 'uppercase', letterSpacing: '0.04em', textAlign: 'center' }}>
                {b}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Services preview */}
      <section className="page">
        <div className="section-head">
          <div>
            <div className="s">— LA TALACHA</div>
            <div className="t">No solo vendemos.<br />Las montamos.</div>
          </div>
          <button className="btn btn-ghost" onClick={() => navigate('services')}>
            TODOS LOS SERVICIOS <Icon name="arrow" size={14} />
          </button>
        </div>
        <div className="service-grid">
          {SERVICES.slice(0, 3).map((s) =>
          <div key={s.id} className="service-tile" onClick={() => navigate('services')}>
              <div className="num">{s.num}</div>
              <h3>{s.name}</h3>
              <p>{s.sub}</p>
              <div className="price">{fmt(s.price)}<span style={{ fontSize: 14, color: 'var(--text-mute)', marginLeft: 6 }}>MXN</span></div>
            </div>
          )}
        </div>
      </section>

      {/* Stats */}
      <section className="page" style={{ paddingTop: 0 }}>
        <div className="stats-strip">
          <div className="stat-cell">
            <div className="num"><span className="accent">12K+</span></div>
            <div className="lbl">LLANTAS EN STOCK</div>
          </div>
          <div className="stat-cell">
            <div className="num">45<span className="accent">'</span></div>
            <div className="lbl">MIN. PROM. INSTALACIÓN</div>
          </div>
          <div className="stat-cell">
            <div className="num">18</div>
            <div className="lbl">TALLERES EN CDMX</div>
          </div>
          <div className="stat-cell">
            <div className="num">4.<span className="accent">8</span></div>
            <div className="lbl">★ 87,000 CLIENTES</div>
          </div>
        </div>
      </section>

      {/* Newsletter / CTA */}
      <section className="page">
        <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 24, padding: 48, display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— GARAGE CLUB</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 48, textTransform: 'uppercase', margin: '0 0 12px', lineHeight: 0.9 }}>Suscríbete y recibe<br /><span style={{ color: 'var(--accent)' }}>$500 MXN</span> en tu primera compra.</h2>
            <p style={{ color: 'var(--text-mute)', margin: 0, fontSize: 14 }}>Avisos de stock, ofertas relámpago y alertas de tu próxima rotación.</p>
          </div>
          <div style={{ display: 'flex', gap: 8, minWidth: 280, flexWrap: 'wrap' }}>
            <input type="email" inputMode="email" autoComplete="email" placeholder="tu@correo.com" style={{ flex: '1 1 200px', padding: '16px 18px', background: 'var(--bg)', border: '1px solid var(--line-strong)', borderRadius: 10, color: 'var(--text)', fontSize: 14, outline: 'none' }} />
            <button className="btn btn-primary btn-lg">SUSCRIBIR</button>
          </div>
        </div>
      </section>
    </div>);

};

Object.assign(window, { Home });