// Home page

function HeroVideo({ children }) {
  const [url, setUrl] = React.useState(typeof window !== 'undefined' ? (window.__heroVideoUrl || '') : '');
  React.useEffect(() => {
    const h = () => setUrl(window.__heroVideoUrl || '');
    window.addEventListener('herovideochange', h);
    return () => window.removeEventListener('herovideochange', h);
  }, []);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: 'var(--bg-sunk)' }}>
      {url ? (
        <>
          <video
            key={url}
            src={url}
            autoPlay muted loop playsInline
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
          />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%)' }}/>
        </>
      ) : (
        <>
          <PH tall="100%" tag="HERO · VIDEO" label="Custom .mp4 loop · drop URL in Tweaks" style={{ height: '100%', border: 0 }}/>
          <div style={{ position: 'absolute', top: 16, right: 16, display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(0,0,0,0.55)', color: '#fff', padding: '6px 10px', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#ff4444', animation: 'rec 1.4s infinite' }}/>
            VIDEO LOOP · SIN FUENTE
          </div>
          <style>{`@keyframes rec{0%,50%{opacity:1}51%,100%{opacity:0.2}}`}</style>
        </>
      )}
      {children}
    </div>
  );
}

function PageHome({ mobile }) {
  const { go } = useApp();
  const featured = PRODUCTS.slice(0, 4);
  const editorial = PRODUCTS.slice(4, 8);

  if (mobile) return <PageHomeMobile />;

  return (
    <main>
      {/* Hero — split editorial */}
      <section style={{ padding: '0 40px', paddingTop: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, minHeight: 620 }}>
          <div style={{ position: 'relative', background: 'var(--bg-sunk)', overflow: 'hidden' }}>
            <HeroVideo/>
            <div style={{ position: 'absolute', left: 40, bottom: 40, color: '#fff', maxWidth: 480, zIndex: 2 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 16, opacity: 0.85 }}>
                CAPITOLO 01 · OTOÑO 2026
              </div>
              <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em', margin: 0, textShadow: '0 1px 30px rgba(0,0,0,0.35)' }}>
                L'arte della<br/><em>velocità.</em>
              </h1>
              <p style={{ marginTop: 20, fontSize: 15, lineHeight: 1.6, maxWidth: 380, opacity: 0.9, textShadow: '0 1px 20px rgba(0,0,0,0.35)' }}>
                La nueva temporada de AGV y Dainese, importada directamente desde Italia. Ediciones limitadas disponibles en boutique CDMX.
              </p>
              <div style={{ marginTop: 28, display: 'flex', gap: 12 }}>
                <button onClick={() => go('collection')} className="btn" style={{ background: 'var(--bg)', color: 'var(--ink)' }}>Comprar moto</button>
                <button onClick={() => go('brand')} className="btn" style={{ border: '1px solid var(--bg)', color: 'var(--bg)' }}>Ver editorial</button>
              </div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateRows: '1fr 1fr', gap: 24 }}>
            <div style={{ position: 'relative', background: 'var(--bg-sunk)' }}>
              <PH tall="100%" tag="HERO · CICLISMO" label="Road cyclist · dolomites" style={{ height: '100%', border: 0 }}/>
              <div style={{ position: 'absolute', left: 24, bottom: 24, color: 'var(--bg)' }}>
                <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)', marginBottom: 8 }}>CICLISMO</div>
                <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 34, lineHeight: 1 }}>Strada Bianca</div>
                <button onClick={() => go('collection')} style={{ marginTop: 12, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', borderBottom: '1px solid currentColor', paddingBottom: 2 }}>
                  Explorar →
                </button>
              </div>
            </div>
            <div style={{ background: 'var(--ink)', color: 'var(--bg)', padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div className="eyebrow eyebrow-accent" style={{ color: 'var(--it-red)', marginBottom: 16 }}>CAPSULA EXCLUSIVA</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, lineHeight: 1, letterSpacing: '-0.01em' }}>
                  Pista GP RR <em>Mono Carbon</em>
                </div>
                <p style={{ marginTop: 14, fontSize: 13, color: 'oklch(0.85 0.01 80)', lineHeight: 1.6 }}>
                  Solo 48 unidades para México. Homologación FIM, construcción 100% carbono.
                </p>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div className="font-mono" style={{ fontSize: 12, letterSpacing: '0.1em' }}>DESDE <span style={{ fontSize: 18 }}>$34,990 MXN</span></div>
                <button onClick={() => go('pdp', { id: 'agv-pista-gp-rr' })} style={{ fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', borderBottom: '1px solid currentColor', paddingBottom: 2 }}>Reservar →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Categories — horizontal marquee */}
      <section style={{ padding: '96px 40px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>— Categorías</div>
            <h2 className="font-display" style={{ fontSize: 48, fontWeight: 400, letterSpacing: '-0.01em', margin: 0 }}>
              Elige tu <em>disciplina</em>
            </h2>
          </div>
          <button onClick={() => go('collection')} className="eyebrow" style={{ borderBottom: '1px solid var(--ink)', paddingBottom: 4 }}>VER TODO →</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {[
            { t: 'Cascos', s: '218 productos', img: 'HELMET' },
            { t: 'Chamarras', s: '142 productos', img: 'JACKET' },
            { t: 'Ciclismo', s: '386 productos', img: 'CYCLING' },
            { t: 'Accesorios', s: '520 productos', img: 'ACCESSORY' },
          ].map((c, i) => (
            <button key={i} onClick={() => go('collection')} style={{ textAlign: 'left' }}>
              <PH ratio="3/4" tag={`0${i+1}`} label={c.img}/>
              <div style={{ paddingTop: 14 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontStyle: 'italic', letterSpacing: '-0.01em' }}>{c.t}</div>
                <div className="font-mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>{c.s.toUpperCase()}</div>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* Scroll-driven exploded view */}
      <ScrollExplode/>

      {/* Featured products */}
      <section style={{ padding: '96px 40px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>— Nuovi Arrivi</div>
            <h2 className="font-display" style={{ fontSize: 48, fontWeight: 400, letterSpacing: '-0.01em', margin: 0 }}>
              Lo último del <em>atelier</em>
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn btn-outline btn-sm">Moto</button>
            <button className="btn btn-ghost btn-sm">Ciclismo</button>
            <button className="btn btn-ghost btn-sm">Lifestyle</button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {featured.map(p => <ProductCard key={p.id} product={p}/>)}
        </div>
      </section>

      {/* Brand strip */}
      <section style={{ padding: '96px 0 0' }}>
        <div style={{ borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '28px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 40 }}>
          <div className="eyebrow" style={{ whiteSpace: 'nowrap' }}>MARCAS OFICIALES ·</div>
          {['AGV', 'DAINESE', 'SIDI', 'RUDY PROJECT', 'ALPINESTARS', 'SANTINI', 'PREMIER'].map(b => (
            <div key={b} className="font-display" style={{ fontSize: 22, fontStyle: 'italic', color: 'var(--ink-2)', letterSpacing: '0.02em' }}>{b}</div>
          ))}
        </div>
      </section>

      {/* Editorial split — story */}
      <section style={{ padding: '96px 40px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <PH ratio="4/5" tag="EDITORIAL 01" label="Workshop · CDMX · B&W"/>
          <div style={{ maxWidth: 480 }}>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— Editorial N°12</div>
            <h2 className="font-display" style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0, fontWeight: 400 }}>
              28 años importando <em>lo mejor</em> de Italia.
            </h2>
            <p style={{ marginTop: 24, fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)' }}>
              Desde 1998, CiaoItalia ha sido la casa de los pilotos mexicanos que buscan equipo fabricado a mano en Italia. Visita nuestra boutique en Polanco y conoce la colección completa con asesoría personalizada de nuestros especialistas.
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
              <button onClick={() => go('brand')} className="btn btn-outline">Conoce la historia</button>
              <button className="btn btn-ghost">Agenda una visita →</button>
            </div>
            <div style={{ marginTop: 40, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, paddingTop: 32, borderTop: '1px solid var(--rule)' }}>
              <div>
                <div className="font-display" style={{ fontSize: 36, lineHeight: 1 }}>28</div>
                <div className="eyebrow" style={{ marginTop: 4 }}>AÑOS</div>
              </div>
              <div>
                <div className="font-display" style={{ fontSize: 36, lineHeight: 1 }}>1,600+</div>
                <div className="eyebrow" style={{ marginTop: 4 }}>PRODUCTOS</div>
              </div>
              <div>
                <div className="font-display" style={{ fontSize: 36, lineHeight: 1 }}>12</div>
                <div className="eyebrow" style={{ marginTop: 4 }}>MARCAS OFICIALES</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Bestsellers */}
      <section style={{ padding: '96px 40px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 10 }}>— I più amati</div>
            <h2 className="font-display" style={{ fontSize: 48, fontWeight: 400, letterSpacing: '-0.01em', margin: 0 }}>
              Los favoritos de la <em>casa</em>
            </h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {editorial.map(p => <ProductCard key={p.id} product={p}/>)}
        </div>
      </section>

      {/* Boutique callout */}
      <section style={{ padding: '96px 40px 0' }}>
        <div style={{ background: 'var(--bg-sunk)', padding: '64px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="eyebrow eyebrow-accent" style={{ marginBottom: 16 }}>BOUTIQUE CIAO ITALIA</div>
            <h2 className="font-display" style={{ fontSize: 44, fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.01em', margin: 0 }}>
              Visítanos en <em>Polanco.</em>
            </h2>
            <p style={{ marginTop: 20, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6 }}>
              Horacio 1234, Polanco IV, CDMX.<br/>
              Lunes a Sábado · 11:00 – 20:00
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <button className="btn btn-primary">Cómo llegar</button>
              <button className="btn btn-ghost">+52 55 0000 0000</button>
            </div>
          </div>
          <PH ratio="16/10" tag="MAPA · POLANCO" label="Map · interior boutique"/>
        </div>
      </section>

      <Footer/>
    </main>
  );
}

function PageHomeMobile() {
  const { go } = useApp();
  return (
    <main>
      <section style={{ padding: '0 16px 40px' }}>
        <div style={{ position: 'relative', marginTop: 12, overflow: 'hidden' }}>
          <div style={{ aspectRatio: '4/5', position: 'relative' }}>
            <HeroVideo/>
          </div>
          <div style={{ position: 'absolute', inset: 'auto 16px 20px 16px', color: '#fff', zIndex: 2 }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.8)', marginBottom: 8 }}>OTOÑO 2026</div>
            <div className="font-display" style={{ fontSize: 36, lineHeight: 1, textShadow: '0 1px 20px rgba(0,0,0,0.4)' }}>
              L'arte della<br/><em>velocità.</em>
            </div>
            <button onClick={() => go('collection')} className="btn" style={{ marginTop: 14, background: 'var(--bg)', color: 'var(--ink)' }}>Comprar</button>
          </div>
        </div>
      </section>

      <section style={{ padding: '0 16px 40px' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>— Categorías</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {['Moto', 'Ciclismo', 'Cascos', 'Accesorios'].map((c, i) => (
            <button key={c} onClick={() => go('collection')} style={{ textAlign: 'left' }}>
              <PH ratio="1/1" tag={`0${i+1}`} label={c.toUpperCase()}/>
              <div style={{ padding: '10px 0', fontFamily: 'var(--font-display)', fontSize: 20, fontStyle: 'italic' }}>{c}</div>
            </button>
          ))}
        </div>
      </section>

      <section style={{ padding: '0 16px 40px' }}>
        <div style={{ marginBottom: 16 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>— Nuovi Arrivi</div>
          <h2 className="font-display" style={{ fontSize: 32, margin: 0, fontWeight: 400 }}>Lo último</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {PRODUCTS.slice(0, 4).map(p => <ProductCard key={p.id} product={p} mobile/>)}
        </div>
      </section>

      <section style={{ padding: '0 16px 40px' }}>
        <div style={{ background: 'var(--ink)', color: 'var(--bg)', padding: 24 }}>
          <div className="eyebrow eyebrow-accent" style={{ color: 'var(--it-red)', marginBottom: 12 }}>CAPSULA</div>
          <div className="font-display" style={{ fontSize: 30, lineHeight: 1 }}>Pista GP RR<br/><em>Mono Carbon</em></div>
          <p style={{ marginTop: 12, fontSize: 13, color: 'oklch(0.85 0 80)' }}>Solo 48 unidades para México.</p>
          <button className="btn" style={{ marginTop: 16, background: 'var(--bg)', color: 'var(--ink)' }}>Reservar</button>
        </div>
      </section>

      <section style={{ padding: '0 16px 40px' }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>— Favoritos</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {PRODUCTS.slice(4, 8).map(p => <ProductCard key={p.id} product={p} mobile/>)}
        </div>
      </section>

      <Footer/>
    </main>
  );
}

window.PageHome = PageHome;