// Product Detail Page

function PagePDP({ mobile }) {
  const { go, addToCart, setCartOpen } = useApp();
  const [size, setSize] = useState('M');
  const [color, setColor] = useState(0);
  const [qty, setQty] = useState(1);
  const [tab, setTab] = useState('descripcion');

  const product = {
    brand: 'AGV',
    name: 'Pista GP RR',
    subtitle: 'Mono Carbon',
    price: 34990,
    oldPrice: null,
    sku: 'AGV-PGP-CB',
    rating: 4.8,
    reviews: 127,
    colors: [
      { name: 'Mono Carbon', hex: '#1a1a1a' },
      { name: 'Rosso Italia', hex: '#b91c1c' },
      { name: 'Bianco', hex: '#e8e8e8' },
    ],
    sizes: ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
  };

  const pct = product.oldPrice ? Math.round((1 - product.price / product.oldPrice) * 100) : 0;

  if (mobile) return <PagePDPMobile/>;

  return (
    <main>
      <div style={{ padding: '20px 40px 0' }}>
        <div className="font-mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-3)' }}>
          <button onClick={() => go('home')}>INICIO</button> / <button onClick={() => go('collection')}>MOTO</button> / CASCOS / <span style={{ color: 'var(--ink)' }}>{product.brand.toUpperCase()} {product.name.toUpperCase()}</span>
        </div>
      </div>

      <section style={{ padding: '24px 40px 0', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48 }}>
        {/* Gallery */}
        <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 16, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, position: 'sticky', top: 140 }}>
            {[1,2,3,4,5].map(i => (
              <button key={i} style={{ border: i === 1 ? '1px solid var(--ink)' : '1px solid var(--rule)' }}>
                <PH ratio="1/1" tag={`0${i}`} label=""/>
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <PH ratio="1/1" tag="PDP · 01" label="Casco · 3/4 front"/>
            <PH ratio="1/1" tag="PDP · 02" label="Lateral"/>
            <PH ratio="4/5" tag="PDP · 03" label="Detail · visor"/>
          </div>
        </div>

        {/* Info panel — sticky */}
        <div style={{ position: 'sticky', top: 140, height: 'fit-content' }}>
          <div className="eyebrow eyebrow-accent" style={{ marginBottom: 10 }}>{product.brand} · ITALIA</div>
          <h1 className="font-display" style={{ fontSize: 56, margin: 0, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.02em' }}>
            {product.name} <em style={{ fontSize: 36, color: 'var(--ink-2)' }}>{product.subtitle}</em>
          </h1>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 18 }}>
            <div style={{ display: 'flex', gap: 2, color: 'var(--it-red-ink)' }}>
              {[1,2,3,4,5].map(i => <span key={i} style={{ opacity: i <= Math.round(product.rating) ? 1 : 0.2 }}>★</span>)}
            </div>
            <span className="font-mono" style={{ fontSize: 12 }}>{product.rating}</span>
            <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>· {product.reviews} reseñas</span>
          </div>

          <div style={{ marginTop: 28, display: 'flex', alignItems: 'baseline', gap: 12 }}>
            <div className="font-mono" style={{ fontSize: 28 }}>{fmtMXN(product.price)} <span style={{ fontSize: 14, color: 'var(--ink-3)' }}>MXN</span></div>
            {product.oldPrice && <div className="font-mono" style={{ fontSize: 16, color: 'var(--ink-3)', textDecoration: 'line-through' }}>{fmtMXN(product.oldPrice)}</div>}
          </div>
          <div className="eyebrow" style={{ marginTop: 6 }}>o 12 MSI de {fmtMXN(Math.round(product.price / 12))}</div>

          <div style={{ height: 1, background: 'var(--rule)', margin: '28px 0' }}/>

          {/* Color */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="eyebrow">Color · <span style={{ color: 'var(--ink)' }}>{product.colors[color].name}</span></span>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              {product.colors.map((c, i) => (
                <button key={i} onClick={() => setColor(i)} style={{
                  padding: 3, border: color === i ? '1px solid var(--ink)' : '1px solid var(--rule)',
                  borderRadius: '50%',
                }}>
                  <span style={{ display: 'block', width: 32, height: 32, borderRadius: '50%', background: c.hex }}/>
                </button>
              ))}
            </div>
          </div>

          {/* Size */}
          <div style={{ marginTop: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
              <span className="eyebrow">Talla · <span style={{ color: 'var(--ink)' }}>{size}</span></span>
              <button className="eyebrow" style={{ textDecoration: 'underline' }}>Guía de tallas ↗</button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6 }}>
              {product.sizes.map(s => {
                const out = s === 'XS';
                return (
                  <button key={s} disabled={out} onClick={() => setSize(s)} style={{
                    padding: '14px 0', border: size === s ? '1px solid var(--ink)' : '1px solid var(--rule)',
                    background: size === s ? 'var(--ink)' : 'var(--bg)',
                    color: out ? 'var(--ink-3)' : (size === s ? 'var(--bg)' : 'var(--ink)'),
                    fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.05em',
                    textDecoration: out ? 'line-through' : 'none',
                    cursor: out ? 'not-allowed' : 'pointer',
                  }}>{s}</button>
                );
              })}
            </div>
          </div>

          {/* Quantity + CTA */}
          <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '100px 1fr', gap: 10 }}>
            <div style={{ display: 'flex', border: '1px solid var(--rule)', justifyContent: 'space-between', alignItems: 'center' }}>
              <button onClick={() => setQty(Math.max(1, qty - 1))} style={{ padding: '14px', fontSize: 14 }}>−</button>
              <span className="font-mono" style={{ fontSize: 13 }}>{qty}</span>
              <button onClick={() => setQty(qty + 1)} style={{ padding: '14px', fontSize: 14 }}>+</button>
            </div>
            <button onClick={() => { addToCart({ id: product.sku + '-' + size, name: `${product.brand} ${product.name}`, variant: `${product.colors[color].name} · ${size}`, price: product.price, sku: product.sku + '-' + size }); setCartOpen(true); }} className="btn btn-primary btn-lg">
              Agregar al carrito · {fmtMXN(product.price * qty)}
            </button>
          </div>

          <button className="btn btn-outline btn-block" style={{ marginTop: 10 }}>♥ Guardar favorito</button>

          {/* Shipping info */}
          <div style={{ marginTop: 28, padding: 16, background: 'var(--bg-sunk)', border: '1px solid var(--rule)' }}>
            {[
              ['→', 'Envío gratis', 'Pedidos > $2,500 MXN · 24–48 h CDMX'],
              ['◇', 'Garantía oficial', '2 años por defectos de fabricación'],
              ['⟲', 'Devoluciones 30 días', 'Cambio sin costo en boutique Polanco'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 10, padding: '10px 0', borderBottom: i < 2 ? '1px solid var(--rule)' : 0 }}>
                <span style={{ color: 'var(--it-red-ink)' }}>{r[0]}</span>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{r[1]}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{r[2]}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Details tabs */}
      <section style={{ padding: '96px 40px 0' }}>
        <div style={{ borderBottom: '1px solid var(--rule)', display: 'flex', gap: 32 }}>
          {['descripcion', 'especificaciones', 'tallas', 'reseñas'].map(t => (
            <button key={t} onClick={() => setTab(t)} className="eyebrow" style={{
              padding: '16px 0', borderBottom: tab === t ? '1px solid var(--ink)' : 'none',
              color: tab === t ? 'var(--ink)' : 'var(--ink-3)', marginBottom: -1,
            }}>{t === 'reseñas' ? `RESEÑAS (${product.reviews})` : t.toUpperCase()}</button>
          ))}
        </div>
        <div style={{ padding: '40px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80 }}>
          {tab === 'descripcion' && <>
            <div>
              <h3 className="font-display" style={{ fontSize: 32, fontWeight: 400, margin: 0, letterSpacing: '-0.01em' }}>
                <em>Campione del mondo.</em>
              </h3>
              <p style={{ marginTop: 20, fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)' }}>
                El Pista GP RR es el casco racing más avanzado de AGV, desarrollado en colaboración con los pilotos del Mundial de MotoGP. Construcción monocasco en 100% fibra de carbono aeronáutica, con ventilación optimizada en túnel de viento y sistema de liberación de emergencia compatible con FIM.
              </p>
              <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', marginTop: 16 }}>
                Disponible en tres colorways exclusivos para México, cada unidad es hecha a mano en Rivoli, Italia, con un tiempo de construcción de 72 horas.
              </p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              {['Construcción 100% carbono', '5 tallas de casco (XS a XXL)', 'Ventilación racing IVS', 'Visor Race 3 anti-rayaduras', 'Homologación FIM', 'Peso: 1,390 g (talla M)'].map(f => (
                <div key={f} style={{ padding: '14px 0', borderBottom: '1px solid var(--rule)' }}>
                  <div className="font-mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>◇ FEATURE</div>
                  <div style={{ fontSize: 14, marginTop: 4 }}>{f}</div>
                </div>
              ))}
            </div>
          </>}
          {tab !== 'descripcion' && (
            <div style={{ gridColumn: 'span 2', padding: '20px 0', color: 'var(--ink-3)', fontSize: 14 }}>
              <PH ratio="4/1" tag={tab.toUpperCase()} label={`Contenido · ${tab}`}/>
            </div>
          )}
        </div>
      </section>

      {/* Related */}
      <section style={{ padding: '96px 40px 0' }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>— Podría interesarte</div>
        <h2 className="font-display" style={{ fontSize: 40, fontWeight: 400, margin: 0, letterSpacing: '-0.01em', marginBottom: 32 }}>Completa el <em>equipo</em></h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {PRODUCTS.slice(1, 5).map(p => <ProductCard key={p.id} product={p}/>)}
        </div>
      </section>

      <Footer/>
    </main>
  );
}

function PagePDPMobile() {
  const { addToCart, setCartOpen } = useApp();
  const [size, setSize] = useState('M');
  return (
    <main>
      <div style={{ position: 'relative' }}>
        <div style={{ display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory' }}>
          {[1,2,3].map(i => (
            <div key={i} style={{ minWidth: '100%', scrollSnapAlign: 'start' }}>
              <PH ratio="1/1" tag={`PDP · 0${i}`} label="Casco"/>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', bottom: 14, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 4 }}>
          {[1,2,3].map(i => <span key={i} style={{ width: 6, height: 6, borderRadius: '50%', background: i===1 ? 'var(--ink)' : 'var(--rule-strong)' }}/>)}
        </div>
      </div>

      <section style={{ padding: '24px 16px' }}>
        <div className="eyebrow eyebrow-accent" style={{ marginBottom: 8 }}>AGV · ITALIA</div>
        <h1 className="font-display" style={{ fontSize: 36, margin: 0, fontWeight: 400, lineHeight: 1 }}>Pista GP RR <em style={{ fontSize: 24, color: 'var(--ink-2)' }}>Mono Carbon</em></h1>
        <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
          <span style={{ color: 'var(--it-red-ink)' }}>★★★★★</span>
          <span className="font-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>4.8 · 127 reseñas</span>
        </div>
        <div className="font-mono" style={{ fontSize: 22, marginTop: 20 }}>$34,990 <span style={{ fontSize: 12, color: 'var(--ink-3)' }}>MXN · 12 MSI</span></div>

        <div style={{ marginTop: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>TALLA · {size}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6 }}>
            {['XS','S','M','L','XL','XXL'].map(s => (
              <button key={s} onClick={() => setSize(s)} style={{
                padding: '12px 0', border: size===s ? '1px solid var(--ink)' : '1px solid var(--rule)',
                background: size===s ? 'var(--ink)' : 'var(--bg)', color: size===s ? 'var(--bg)' : 'var(--ink)',
                fontFamily: 'var(--font-mono)', fontSize: 12,
              }}>{s}</button>
            ))}
          </div>
        </div>
      </section>

      {/* Sticky CTA */}
      <div style={{ position: 'sticky', bottom: 0, background: 'var(--bg)', borderTop: '1px solid var(--rule)', padding: 12, display: 'flex', gap: 8 }}>
        <button className="btn btn-outline" style={{ padding: '14px' }}>♥</button>
        <button onClick={() => { addToCart({ id: 'm-pdp', name: 'AGV Pista GP RR', variant: `Mono Carbon · ${size}`, price: 34990, sku: 'AGV-PGP' }); setCartOpen(true); }} className="btn btn-primary" style={{ flex: 1 }}>Agregar · $34,990</button>
      </div>

      <section style={{ padding: '32px 16px' }}>
        <div className="eyebrow" style={{ marginBottom: 14 }}>— También te puede gustar</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {PRODUCTS.slice(1, 5).map(p => <ProductCard key={p.id} product={p} mobile/>)}
        </div>
      </section>

      <Footer/>
    </main>
  );
}

window.PagePDP = PagePDP;