// ─── Sections del sitio ────────────────────────────────────────────
// Hero · Ticker · Sobre María · Cómo comprar · Catálogo · Envíos
// · Instagram · Contacto · Footer

const { useState: useStateS, useMemo: useMemoS } = React;

// ─── NAV + HERO ────────────────────────────────────────────────────
function Hero() {
  const c = useCart();
  const { mobile } = useResponsive();
  return (
    <section style={{ position: 'relative', ...paperBg, padding: mobile ? '20px 20px 0' : '28px 64px 0', overflow: 'hidden' }}>
      <nav style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: mobile ? 22 : 36, borderBottom: `1px solid ${V.inkSoft}33` }}>
        <div style={{ fontFamily: F.display, color: V.ink }}>
          <div style={{ fontFamily: F.mono, fontSize: mobile ? 9 : 11, letterSpacing: mobile ? 2 : 4, textTransform: 'uppercase', color: V.inkSoft, marginBottom: 2 }}>
            taller de costura · Madrid
          </div>
          <div style={{ fontSize: mobile ? 22 : 28, fontStyle: 'italic', fontWeight: 500, lineHeight: 1 }}>El armario de Blythe</div>
        </div>
        {!mobile && (
          <div style={{ display: 'flex', gap: 32, fontFamily: F.body, fontSize: 15, color: V.ink, letterSpacing: 1 }}>
            {[
              ['#sobre', 'Sobre María'],
              ['#catalogo', 'Catálogo'],
              ['#como-comprar', 'Cómo comprar'],
              ['#envios', 'Envíos'],
              ['#contacto', 'Contacto'],
            ].map(([h, l]) => (
              <a key={h} href={h} style={{ color: V.ink, textDecoration: 'none', cursor: 'pointer' }}>{l}</a>
            ))}
          </div>
        )}
        <button onClick={() => { c.setOpen(true); c.setStage('cart'); }} style={{
          background: 'transparent', border: `1px solid ${V.ink}`, padding: mobile ? '8px 12px' : '10px 16px',
          fontFamily: F.mono, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: V.ink, cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          ✦ Cesta {c.count > 0 && <span style={{ background: V.ink, color: V.cream, padding: '1px 7px', fontSize: 10 }}>{c.count}</span>}
        </button>
      </nav>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr 1fr', gap: mobile ? 32 : 56, padding: mobile ? '24px 0 56px' : '64px 0 80px', alignItems: 'center' }}>
        <div style={{ position: 'relative', order: mobile ? 2 : 0 }}>
          <div style={{ fontFamily: F.hand, fontSize: mobile ? 22 : 28, color: V.roseDeep, transform: 'rotate(-3deg)', marginBottom: -8 }}>
            ~ piezas únicas, hechas con tiempo ~
          </div>
          <h1 style={{
            fontFamily: F.display, fontWeight: 400,
            fontSize: mobile ? 46 : 96, lineHeight: 0.95, color: V.ink, margin: '0 0 28px',
            letterSpacing: '-0.02em',
          }}>
            Ropa cosida<br />
            <span style={{ fontStyle: 'italic', color: V.roseDeep }}>a mano</span>, hilo<br />
            a hilo, para tu<br />
            <span style={{ fontStyle: 'italic' }}>Blythe.</span>
          </h1>
          <p style={{ fontFamily: F.body, fontSize: mobile ? 17 : 19, lineHeight: 1.55, color: V.inkSoft, maxWidth: 460, margin: '0 0 32px' }}>
            Vestidos, petos, abrigos y pijamas que diseño y coso en mi taller de Madrid.
            Cada pieza es única y se reserva por orden de llegada.
          </p>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="#catalogo" style={{
              display: 'inline-block', padding: '14px 30px', background: V.ink, color: V.cream,
              fontFamily: F.body, fontSize: 15, letterSpacing: 3, textTransform: 'uppercase',
              cursor: 'pointer', textDecoration: 'none',
            }}>Ver el catálogo</a>
            <a href="#sobre" style={{
              fontFamily: F.body, fontSize: 15, color: V.ink, letterSpacing: 1, textDecoration: 'none',
              borderBottom: `1px solid ${V.ink}`, paddingBottom: 4, cursor: 'pointer',
            }}>Conoce a María →</a>
          </div>

          <div style={{ display: 'flex', gap: mobile ? 20 : 32, marginTop: mobile ? 40 : 56, fontFamily: F.mono, fontSize: mobile ? 10 : 12, color: V.inkSoft, letterSpacing: 2, flexWrap: 'wrap' }}>
            <div><div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: mobile ? 28 : 34, color: V.ink, letterSpacing: 0 }}>40+</div>AÑOS COSIENDO</div>
            <div><div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: mobile ? 28 : 34, color: V.ink, letterSpacing: 0 }}>30+</div>PIEZAS DISPONIBLES</div>
            <div><div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: mobile ? 28 : 34, color: V.ink, letterSpacing: 0 }}>1:1</div>SIN MOLDES INDUSTRIALES</div>
          </div>
        </div>

        {mobile ? (
          /* En móvil, el collage de imágenes con medidas fijas se desborda:
             lo sustituimos por una sola foto enmarcada, limpia y centrada. */
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', order: 1, marginBottom: 28 }}>
            <div style={{
              position: 'relative', width: '78%', maxWidth: 320, transform: 'rotate(2deg)',
              border: `8px solid ${V.cream}`, boxShadow: '0 24px 48px -20px rgba(60,40,20,0.4)',
            }}>
              <img src={PRODUCTS[15].img} alt="" style={{ display: 'block', width: '100%', aspectRatio: '3/4', objectFit: 'cover' }} />
            </div>
            <div style={{ position: 'absolute', bottom: -22, left: 4, transform: 'rotate(-10deg)' }}>
              <Stamp size={92} text="EL · ARMARIO · DE · BLYTHE · " center="✿" />
            </div>
          </div>
        ) : (
          <div style={{ position: 'relative', height: 620 }}>
            <div style={{
              position: 'absolute', inset: '20px 40px 40px 60px', transform: 'rotate(-3deg)',
              boxShadow: '0 30px 40px -25px rgba(60,40,20,0.35)',
            }}>
              {/* grosor de las hojas */}
              <div style={{ position: 'absolute', inset: '4px -5px -7px 4px', background: V.paperDk }}></div>
              <div style={{ position: 'absolute', inset: '2px -2px -3px 2px', background: V.cream }}></div>
              {/* hoja superior con renglones */}
              <div style={{
                position: 'absolute', inset: 0, background: V.paper,
                backgroundImage: `repeating-linear-gradient(0deg, transparent 0 31px, ${V.inkSoft}22 31px 32px)`,
                backgroundPosition: '0 54px',
                boxShadow: 'inset 0 0 70px rgba(60,40,20,0.07)',
              }}></div>
              {/* lomo / encuadernación central */}
              <div style={{
                position: 'absolute', top: 0, bottom: 0, left: '50%', width: 34, transform: 'translateX(-50%)',
                background: 'linear-gradient(90deg, transparent, rgba(60,40,20,0.10) 42%, rgba(60,40,20,0.17) 50%, rgba(60,40,20,0.10) 58%, transparent)',
              }}></div>
            </div>
            <img src={PRODUCTS[15].img} alt="" style={{
              position: 'absolute', top: 0, right: 30, width: 360, height: 480, objectFit: 'cover',
              border: `10px solid ${V.cream}`, boxShadow: '0 30px 60px -20px rgba(60,40,20,0.4)',
              transform: 'rotate(2deg)',
            }} />
            <img src={PRODUCTS[10].img} alt="" style={{
              position: 'absolute', bottom: 0, left: 0, width: 230, height: 310, objectFit: 'cover',
              border: `8px solid ${V.cream}`, boxShadow: '0 20px 40px -15px rgba(60,40,20,0.35)',
              transform: 'rotate(-6deg)',
            }} />

            <div style={{ position: 'absolute', top: 150, left: 70, transform: 'rotate(-3deg)', maxWidth: 200 }}>
              <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V.inkSoft, marginBottom: 6 }}>
                del cuaderno de María
              </div>
              <div style={{ fontFamily: F.hand, fontSize: 30, color: V.roseDeep, lineHeight: 1.15 }}>
                ~ recién salido<br />del taller ~
              </div>
            </div>

            <div style={{ position: 'absolute', bottom: -30, left: -45, transform: 'rotate(-10deg)' }}>
              <Stamp size={120} text="EL · ARMARIO · DE · BLYTHE · " center="✿" />
            </div>
            <div style={{
              position: 'absolute', bottom: 30, right: 0, fontFamily: F.hand,
              fontSize: 22, color: V.ink, transform: 'rotate(-4deg)', maxWidth: 200, lineHeight: 1.2,
            }}>
              "Pruebo cada vestido en una Blythe antes de que salga del taller"
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── TICKER ────────────────────────────────────────────────────────
function Ticker() {
  const { mobile } = useResponsive();
  const items = ['Hecho a mano · Madrid', 'Piezas únicas', 'Bordado y patchwork', 'Algodón natural', 'Acabado interior pulido', 'Para coleccionistas exigentes'];
  return (
    <div style={{ background: V.ink, color: V.cream, padding: mobile ? '12px 16px' : '16px 0', overflow: 'hidden', borderTop: `1px solid ${V.gold}`, borderBottom: `1px solid ${V.gold}` }}>
      <div style={{
        display: 'flex', gap: mobile ? 16 : 48, fontFamily: F.body,
        fontSize: mobile ? 11 : 14, letterSpacing: mobile ? 2 : 4, textTransform: 'uppercase',
        whiteSpace: mobile ? 'normal' : 'nowrap',
        flexWrap: mobile ? 'wrap' : 'nowrap',
        justifyContent: mobile ? 'center' : 'space-around',
      }}>
        {items.map((t, i) => (<span key={i}>✦ {t}</span>))}
      </div>
    </div>
  );
}

// ─── SOBRE MARÍA ───────────────────────────────────────────────────
function Sobre() {
  const { mobile } = useResponsive();
  return (
    <section id="sobre" style={{ ...paperBg, padding: mobile ? '72px 20px' : '120px 64px', scrollMarginTop: 24 }}>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '0.9fr 1.1fr', gap: mobile ? 48 : 80, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative', width: '100%',
            border: `14px solid ${V.cream}`,
            boxShadow: '0 30px 60px -20px rgba(60,40,20,0.4)',
            transform: 'rotate(-1.5deg)',
          }}>
            <img src="assets/maria.png" alt="María en su taller" style={{ display: 'block', width: '100%', height: mobile ? 420 : 580, objectFit: 'cover', objectPosition: 'center top' }} />
          </div>
          {!mobile && (
            <div style={{
              position: 'absolute', bottom: -30, right: -20, width: 180, height: 220,
              background: V.cream, padding: '12px 12px 36px', transform: 'rotate(6deg)',
              boxShadow: '0 20px 40px -15px rgba(60,40,20,0.4)',
            }}>
              <img src={PRODUCTS[36].img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, textAlign: 'center', fontFamily: F.hand, fontSize: 16, color: V.ink }}>
                cosido por María
              </div>
            </div>
          )}
        </div>

        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
            <div style={{ width: 60, height: 1, background: V.ink }}></div>
            <div style={{ fontFamily: F.mono, fontSize: mobile ? 11 : 12, letterSpacing: 4, textTransform: 'uppercase', color: V.inkSoft }}>Capítulo I — la artesana</div>
          </div>
          <h2 style={{
            fontFamily: F.display, fontWeight: 400, fontSize: mobile ? 40 : 64, lineHeight: 1,
            color: V.ink, margin: '0 0 28px', letterSpacing: '-0.01em',
          }}>
            Soy María.<br />Cosiendo desde<br />los <span style={{ fontStyle: 'italic', color: V.roseDeep }}>catorce años</span>.
          </h2>
          <p style={{ fontFamily: F.body, fontSize: mobile ? 17 : 19, lineHeight: 1.65, color: V.ink, margin: '0 0 18px' }}>
            Llevo toda la vida con el hilo entre los dedos. Empecé con el bordado y el
            patchwork, y desde hace dos años también coso ropa para muñecas Blythe.
          </p>
          <p style={{ fontFamily: F.body, fontSize: mobile ? 17 : 19, lineHeight: 1.65, color: V.ink, margin: '0 0 18px' }}>
            Las Blythe me conquistaron por la mezcla justa de lo que más me gusta —
            <span style={{ fontStyle: 'italic' }}> los vestiditos, los lacitos, la belleza de las cosas pequeñas</span>.
            Vestir a una Blythe es, para mí, vestir a la niña pequeña que llevo dentro.
          </p>
          <p style={{ fontFamily: F.body, fontSize: mobile ? 17 : 19, lineHeight: 1.65, color: V.ink, margin: '0 0 32px' }}>
            Cuando los míos se fueron de casa, convertí una habitación en taller.
            Allí diseño, corto, coso a máquina y bordo a mano. Trabajo despacio: cada pieza
            lleva su tiempo y, cuando se va, se va para siempre.
          </p>

          <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
            <div style={{ fontFamily: F.hand, fontSize: 42, color: V.roseDeep, transform: 'rotate(-4deg)' }}>
              ~ María
            </div>
            <Stamp size={84} text="TALLER · DE · COSTURA · " center="M" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CÓMO COMPRAR ──────────────────────────────────────────────────
function ComoComprar() {
  const { mobile } = useResponsive();
  const pasos = [
    {
      n: '01',
      t: 'Eliges tus piezas',
      d: 'Reserva las prendas que te gusten en el catálogo. Quedan apartadas para ti durante 48h.',
    },
    {
      n: '02',
      t: 'Rellenas tus datos',
      d: 'Nombre, dirección, zona de envío y si prefieres pagar por Vinted o Wallapop. Sin tarjeta, sin cargo: aún no pagas nada.',
    },
    {
      n: '03',
      t: 'Publico tu pedido',
      d: 'En menos de 24h subo tus piezas a la plataforma que elegiste, con tu nombre. Te llega el enlace al correo.',
    },
    {
      n: '04',
      t: 'Pagas en la plataforma',
      d: 'Completas el pago en Vinted o Wallapop como una compra normal. La plataforma protege la transacción.',
    },
    {
      n: '05',
      t: 'Sale del taller',
      d: 'En 48h tu pedido sale de mi taller preparado y bien embalado, con número de seguimiento. La plataforma te avisa cuando llega.',
    },
  ];
  return (
    <section id="como-comprar" style={{ background: V.paper, padding: mobile ? '72px 20px' : '120px 64px', scrollMarginTop: 24 }}>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '0.9fr 1.1fr', gap: mobile ? 24 : 64, marginBottom: mobile ? 40 : 64, alignItems: 'end' }}>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 12, letterSpacing: 4, textTransform: 'uppercase', color: V.inkSoft, marginBottom: 12 }}>
            Capítulo II — cómo funciona
          </div>
          <h2 style={{ fontFamily: F.display, fontWeight: 400, fontSize: mobile ? 40 : 64, lineHeight: 1, color: V.ink, margin: 0, letterSpacing: '-0.01em' }}>
            Una <span style={{ fontStyle: 'italic', color: V.roseDeep }}>compra</span><br />sin sustos.
          </h2>
        </div>
        <p style={{ fontFamily: F.body, fontSize: mobile ? 17 : 19, lineHeight: 1.6, color: V.ink, margin: 0, maxWidth: 540 }}>
          Vendo a través de <strong>Vinted</strong> y <strong>Wallapop</strong> porque son plataformas
          que ya conoces, con pagos seguros y atención al cliente. Tú reservas aquí —
          yo publico tu pedido a tu nombre — y pagas allí, sin riesgo.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(5, 1fr)', gap: 0, borderTop: `1px solid ${V.ink}` }}>
        {pasos.map((p, i) => (
          <div key={p.n} style={{
            padding: mobile ? '24px 4px' : '32px 24px 28px',
            borderRight: !mobile && i < pasos.length - 1 ? `1px solid ${V.inkSoft}44` : 'none',
            borderBottom: `1px solid ${V.ink}`,
          }}>
            <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 3, color: V.roseDeep, marginBottom: mobile ? 10 : 18 }}>{p.n}</div>
            <div style={{ fontFamily: F.display, fontSize: 26, lineHeight: 1.1, color: V.ink, marginBottom: 12, fontStyle: i % 2 === 1 ? 'italic' : 'normal' }}>{p.t}</div>
            <div style={{ fontFamily: F.body, fontSize: 14, lineHeight: 1.55, color: V.inkSoft }}>{p.d}</div>
          </div>
        ))}
      </div>

      {/* Plataformas */}
      <div style={{ marginTop: mobile ? 40 : 56, display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 20 : 32 }}>
        <PlataformaCard
          nombre="Vinted"
          tagline="La mejor opción si estás fuera de España"
          puntos={['Pago con tarjeta · protección incluida', 'Gastos de envío marcados por la plataforma', 'Envío con Correos y variantes según destino', 'Disponible en toda Europa y USA']}
        />
        <PlataformaCard
          nombre="Wallapop"
          tagline="Muy popular en España"
          puntos={['Pago con tarjeta · protección incluida', 'Gastos de envío marcados por la plataforma', 'Envío con Correos y variantes según zona', 'Atención al cliente en español']}
        />
      </div>
    </section>
  );
}

function PlataformaCard({ nombre, tagline, puntos }) {
  return (
    <div style={{ background: V.cream, padding: 32, border: `1px solid ${V.ink}`, position: 'relative' }}>
      <div style={{ position: 'absolute', top: 20, right: 24 }}>
        <Stamp size={64} text={`${nombre.toUpperCase()} · OFICIAL · `} center={nombre[0]} color={V.gold} />
      </div>
      <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 3, color: V.inkSoft, textTransform: 'uppercase', marginBottom: 6 }}>
        Plataforma de pago
      </div>
      <div style={{ fontFamily: F.display, fontSize: 42, color: V.ink, marginBottom: 6, fontStyle: 'italic' }}>{nombre}</div>
      <div style={{ fontFamily: F.body, fontSize: 14, color: V.roseDeep, marginBottom: 20 }}>{tagline}</div>
      <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
        {puntos.map(p => (
          <li key={p} style={{ display: 'flex', gap: 10, padding: '6px 0', fontFamily: F.body, fontSize: 15, color: V.ink }}>
            <span style={{ color: V.gold }}>✦</span> {p}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ─── CATÁLOGO ──────────────────────────────────────────────────────
function ProductCard({ p, i }) {
  const cart = useCart();
  const { mobile } = useResponsive();
  const inCart = cart.items.some(it => it.id === p.id);
  const tilt = [-1.5, 0.8, -0.7, 1.4, -1, 1][i % 6];
  return (
    <div style={{ position: 'relative', transform: `rotate(${tilt}deg)` }}>
      <div style={{
        background: V.cream, padding: mobile ? 10 : 14,
        boxShadow: '0 14px 32px -18px rgba(60,40,20,0.4), 0 1px 0 rgba(60,40,20,0.1)',
        opacity: p.vendida ? 0.72 : 1,
      }}>
        <div style={{ width: '100%', aspectRatio: '3/4', overflow: 'hidden', position: 'relative' }}>
          <img src={p.img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          {p.vendida && (
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: 'rgba(45,36,25,0.42)',
            }}>
              <div style={{
                fontFamily: F.mono, fontSize: 13, letterSpacing: 5, textTransform: 'uppercase',
                color: V.cream, border: `2px solid ${V.cream}`, padding: '8px 20px',
                transform: 'rotate(-12deg)',
              }}>Vendida</div>
            </div>
          )}
        </div>
        <div style={{ padding: '14px 4px 4px', fontFamily: F.display, color: V.ink }}>
          <div style={{ fontSize: 10, letterSpacing: 3, textTransform: 'uppercase', color: V.inkSoft, fontFamily: F.mono, marginBottom: 6 }}>
            № {String(p.id).padStart(3,'0')} · {p.cat}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12, gap: 8 }}>
            <div style={{ fontSize: mobile ? 18 : 22, fontStyle: 'italic', lineHeight: 1.1 }}>{p.nombre}</div>
            <div style={{ fontFamily: F.mono, fontSize: 15, color: p.vendida ? V.inkSoft : V.roseDeep, fontWeight: 700, whiteSpace: 'nowrap' }}>
              {p.vendida ? '—' : `${p.precio} €`}
            </div>
          </div>
          <button
            disabled={inCart || p.vendida}
            onClick={() => !p.vendida && cart.add(p)}
            style={{
              width: '100%', padding: '10px',
              border: `1px solid ${p.vendida ? V.inkSoft + '66' : V.ink}`,
              background: inCart ? V.paperDk : 'transparent',
              color: p.vendida ? V.inkSoft : V.ink,
              cursor: (inCart || p.vendida) ? 'default' : 'pointer',
              fontFamily: F.body, fontSize: 12, letterSpacing: 3, textTransform: 'uppercase',
            }}
          >
            {p.vendida ? '✕ Ya tiene dueña' : inCart ? '✓ En tu cesta' : 'Reservar →'}
          </button>
        </div>
      </div>
    </div>
  );
}

function Catalogo() {
  const { mobile } = useResponsive();
  const [cat, setCat] = useStateS('Todo');
  const [shown, setShown] = useStateS(12);
  const filtered = useMemoS(() => cat === 'Todo' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat), [cat]);
  const visible = filtered.slice(0, shown);

  return (
    <section id="catalogo" style={{ background: V.ink, color: V.cream, padding: mobile ? '72px 20px' : '120px 64px', scrollMarginTop: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'end', marginBottom: mobile ? 36 : 56, flexWrap: 'wrap', gap: 24 }}>
        <div>
          <div style={{ fontFamily: F.mono, fontSize: 12, letterSpacing: 4, textTransform: 'uppercase', color: V.gold, marginBottom: 12 }}>
            Capítulo III — el catálogo
          </div>
          <h2 style={{ fontFamily: F.display, fontWeight: 400, fontSize: mobile ? 44 : 72, lineHeight: 1, margin: 0 }}>
            Una sola <span style={{ fontStyle: 'italic', color: V.rose }}>de cada</span>
          </h2>
        </div>
        <div style={{ fontFamily: F.body, fontSize: 15, color: V.cream, maxWidth: 280, lineHeight: 1.5, textAlign: mobile ? 'left' : 'right' }}>
          {filtered.length} piezas · todas a <span style={{ fontFamily: F.mono, color: V.gold, fontWeight: 700 }}>55 €</span>
          <br />Cuando una se va, se va.
        </div>
      </div>

      <div style={{ display: 'flex', gap: mobile ? 16 : 24, marginBottom: mobile ? 32 : 48, fontFamily: F.body, fontSize: 14, letterSpacing: 2, textTransform: 'uppercase', flexWrap: 'wrap' }}>
        {CATEGORIAS.map(c => (
          <span key={c} onClick={() => { setCat(c); setShown(12); }} style={{
            paddingBottom: 8, cursor: 'pointer',
            borderBottom: cat === c ? `2px solid ${V.gold}` : '2px solid transparent',
            color: cat === c ? V.gold : V.cream, opacity: cat === c ? 1 : 0.6,
          }}>{c}</span>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: mobile ? '24px 14px' : '40px 32px' }}>
        {visible.map((p, i) => <ProductCard key={p.id} p={p} i={i} />)}
      </div>

      {shown < filtered.length && (
        <div style={{ textAlign: 'center', marginTop: mobile ? 44 : 64 }}>
          <button onClick={() => setShown(s => s + 12)} style={{
            display: 'inline-block', padding: '16px 40px', border: `1px solid ${V.gold}`,
            background: 'transparent', color: V.gold, fontFamily: F.body, fontSize: 14, letterSpacing: 4,
            textTransform: 'uppercase', cursor: 'pointer',
          }}>Ver más piezas · {filtered.length - shown} restantes</button>
        </div>
      )}
    </section>
  );
}

// ─── ENVÍOS ────────────────────────────────────────────────────────
function Envios() {
  const { mobile } = useResponsive();
  return (
    <section id="envios" style={{ ...paperBg, padding: mobile ? '72px 20px' : '120px 64px', scrollMarginTop: 24 }}>
      <div style={{ textAlign: 'center', marginBottom: mobile ? 40 : 56 }}>
        <div style={{ fontFamily: F.mono, fontSize: 12, letterSpacing: 4, textTransform: 'uppercase', color: V.inkSoft, marginBottom: 12 }}>
          Capítulo IV — envíos
        </div>
        <h2 style={{ fontFamily: F.display, fontWeight: 400, fontSize: mobile ? 38 : 64, lineHeight: 1, color: V.ink, margin: '0 0 12px' }}>
          A donde tu Blythe <span style={{ fontStyle: 'italic', color: V.roseDeep }}>te lleve</span>.
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 17, color: V.inkSoft, margin: 0, maxWidth: 600, marginInline: 'auto', lineHeight: 1.55 }}>
          Envío a toda España y al extranjero. Cada paquete sale de mi taller en 48h, bien embalado y con número de seguimiento.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 20 : 28 }}>
        {Object.entries(ENVIOS).map(([k, e]) => (
          <div key={k} style={{
            background: V.cream, padding: '32px 28px', position: 'relative',
            boxShadow: '0 16px 36px -22px rgba(60,40,20,0.35)',
          }}>
            <div style={{ fontFamily: F.mono, fontSize: 10, letterSpacing: 3, color: V.inkSoft, textTransform: 'uppercase', marginBottom: 6 }}>
              Zona
            </div>
            <div style={{ fontFamily: F.display, fontSize: 42, color: V.ink, lineHeight: 1, marginBottom: 16, fontStyle: 'italic' }}>{e.label}</div>
            <div style={{ borderTop: `1px solid ${V.inkSoft}33`, paddingTop: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontFamily: F.body, fontSize: 15 }}>
                <span style={{ color: V.inkSoft }}>Tarifa</span>
                <span style={{ fontFamily: F.mono, color: V.ink, fontWeight: 600 }}>{e.coste.toFixed(2)} €</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontFamily: F.body, fontSize: 15 }}>
                <span style={{ color: V.inkSoft }}>Plazo</span>
                <span style={{ fontFamily: F.mono, color: V.ink, fontWeight: 600 }}>{e.plazo}</span>
              </div>
              <div style={{ marginTop: 12, padding: '12px 14px', background: V.paper, fontFamily: F.body, fontSize: 16, color: V.roseDeep, fontStyle: 'italic', textAlign: 'center' }}>
                Envío <strong style={{ fontFamily: F.mono, fontStyle: 'normal' }}>GRATIS</strong> a partir de {e.gratisDesde} €
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, textAlign: 'center', fontFamily: F.body, fontSize: 17, color: V.inkSoft, fontStyle: 'italic', maxWidth: 680, marginInline: 'auto', lineHeight: 1.5 }}>
        * Si compras directamente por Vinted o Wallapop, los gastos de envío los marca la propia plataforma.
      </div>
    </section>
  );
}

// ─── INSTAGRAM ─────────────────────────────────────────────────────
function Instagram() {
  const { mobile } = useResponsive();
  const grid = [4, 11, 17, 21, 27, 34, 39, 44];
  return (
    <section style={{ background: V.paperDk, padding: mobile ? '72px 20px' : '120px 64px' }}>
      <div style={{ textAlign: 'center', marginBottom: mobile ? 40 : 56 }}>
        <img src="assets/marca-blythe.jpg" alt="El armario de Blythe" style={{
          width: 132, height: 132, borderRadius: '50%', objectFit: 'cover', display: 'block',
          margin: '0 auto 24px', border: `5px solid ${V.cream}`,
          boxShadow: '0 16px 32px -12px rgba(60,40,20,0.4)',
        }} />
        <div style={{ fontFamily: F.mono, fontSize: 12, letterSpacing: 4, textTransform: 'uppercase', color: V.inkSoft, marginBottom: 12 }}>
          Capítulo V — el diario
        </div>
        <h2 style={{ fontFamily: F.display, fontWeight: 400, fontSize: mobile ? 32 : 64, lineHeight: 1.05, margin: '0 0 16px', color: V.ink, wordBreak: 'break-word' }}>
          Sígueme en <a href="https://www.instagram.com/el_armario_de_blythe/" target="_blank" rel="noreferrer" style={{ fontStyle: 'italic', color: V.roseDeep, textDecoration: 'none' }}>@el_armario_de_blythe</a>
        </h2>
        <p style={{ fontFamily: F.body, fontSize: 17, color: V.inkSoft, margin: 0 }}>
          Cada pieza nueva se anuncia primero ahí.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: mobile ? 8 : 12 }}>
        {grid.map((idx) => (
          <a key={idx} href="https://www.instagram.com/el_armario_de_blythe/" target="_blank" rel="noreferrer" style={{ position: 'relative', aspectRatio: '1', overflow: 'hidden', display: 'block' }}>
            <img src={PRODUCTS[idx].img} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </a>
        ))}
      </div>
    </section>
  );
}

// ─── CONTACTO ──────────────────────────────────────────────────────
function Contacto() {
  const { mobile } = useResponsive();
  return (
    <section id="contacto" style={{ background: V.paper, padding: mobile ? '72px 20px' : '120px 64px', position: 'relative', scrollMarginTop: 24 }}>
      <div style={{ maxWidth: 620, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: F.mono, fontSize: 12, letterSpacing: 4, textTransform: 'uppercase', color: V.inkSoft, marginBottom: 12 }}>
          Capítulo VI — escríbeme
        </div>
        <h2 style={{ fontFamily: F.display, fontWeight: 400, fontSize: mobile ? 38 : 64, lineHeight: 1, margin: '0 0 24px', color: V.ink }}>
          ¿Tienes alguna<br /><span style={{ fontStyle: 'italic', color: V.roseDeep }}>pregunta?</span>
        </h2>
        <p style={{ fontFamily: F.body, fontSize: mobile ? 17 : 19, lineHeight: 1.65, color: V.ink, marginBottom: 48 }}>
          Escríbeme por Instagram: es donde más rápido respondo.
          Cuéntame qué te interesa y te ayudo sin compromiso.
        </p>
        <a
          href="https://www.instagram.com/el_armario_de_blythe/"
          target="_blank"
          rel="noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: mobile ? '16px 28px' : '18px 40px', background: V.ink, color: V.cream,
            fontFamily: F.body, fontSize: mobile ? 13 : 14, letterSpacing: mobile ? 2 : 4, textTransform: 'uppercase',
            textDecoration: 'none', cursor: 'pointer', maxWidth: '100%',
          }}
        >
          ✦ @el_armario_de_blythe
        </a>
        <div style={{ marginTop: 48, fontFamily: F.body, fontSize: 15, color: V.inkSoft, lineHeight: 1.8 }}>
          <div>✿ Taller en Madrid · solo cita previa</div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ────────────────────────────────────────────────────────
function Footer() {
  const { mobile } = useResponsive();
  return (
    <footer style={{ background: V.ink, color: V.cream, padding: mobile ? '48px 20px 32px' : '60px 64px 40px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr', gap: mobile ? 28 : 48, marginBottom: mobile ? 32 : 48, paddingBottom: mobile ? 28 : 40, borderBottom: `1px solid ${V.cream}22` }}>
        <div style={{ gridColumn: mobile ? '1 / -1' : 'auto' }}>
          <div style={{ fontFamily: F.display, fontStyle: 'italic', fontSize: 32 }}>El armario de Blythe</div>
          <div style={{ fontFamily: F.body, fontSize: 14, color: '#cfc0a8', marginTop: 8, lineHeight: 1.6, maxWidth: 320 }}>
            Pequeño taller de costura para muñecas Blythe. Diseño y coso cada pieza en mi taller de Madrid.
          </div>
        </div>
        {[
          ['Tienda', [
            ['#catalogo', 'Catálogo'],
            ['#como-comprar', 'Cómo comprar'],
            ['#envios', 'Envíos'],
          ]],
          ['Conocer', [
            ['#sobre', 'Sobre María'],
            ['#contacto', 'Contacto'],
          ]],
          ['Encuéntrame', [
            ['https://www.instagram.com/el_armario_de_blythe/', 'Instagram'],
            ['mailto:info@elarmariodeblythe.com', 'info@elarmariodeblythe.com'],
          ]],
        ].map(([title, items]) => (
          <div key={title}>
            <div style={{ fontFamily: F.mono, fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: V.gold, marginBottom: 16 }}>{title}</div>
            {items.map(([h, l]) => (
              <a key={l} href={h} style={{ display: 'block', fontFamily: F.body, fontSize: 15, marginBottom: 6, color: '#e7dcc4', textDecoration: 'none', wordBreak: 'break-word' }}>{l}</a>
            ))}
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 8 : 0, justifyContent: 'space-between', fontFamily: F.mono, fontSize: 11, letterSpacing: 2, color: '#a8987d' }}>
        <div>© 2026 EL ARMARIO DE BLYTHE · MADRID · ESPAÑA</div>
        <div>COSIDO CON ♥ POR MARÍA</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, Ticker, Sobre, ComoComprar, Catalogo, Envios, Instagram, Contacto, Footer });
