// storefront-landing.jsx — landing page

function Landing({ mobile }) {
  const s = useStore();
  const newProducts = PRODUCTS.filter(p => p.isNew);
  const outerwear = PRODUCTS.filter(p => p.category === 'outerwear');
  const tops = PRODUCTS.filter(p => ['hoodies','crewnecks','playeras'].includes(p.category));
  const sets = PRODUCTS.filter(p => p.category === 'sets');
  const featuredHero = newProducts[0] || PRODUCTS[0];

  return (
    <main style={{ background: C.bg }}>

      {/* ═══ Hero ═══ */}
      <section style={{ position:'relative', borderBottom:`1px solid ${C.border}`, overflow:'hidden' }}>
        <div style={{
          padding: mobile ? '20px 16px 0' : '24px 32px 0',
          display:'grid',
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: mobile ? 16 : 32,
          alignItems: mobile ? 'stretch' : 'center',
        }}>
          <div>
            <div style={{
              fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 11 : 12,
              letterSpacing:'0.22em', textTransform:'uppercase', color: C.fgMuted, marginBottom: mobile ? 16 : 24,
              display:'flex', alignItems:'center', gap: 12,
            }}>
              <span style={{ width: 24, height: 1, background: C.accent }}/>
              Drop 03 · Otoño 26 · Pre-launch
            </div>
            <div style={{ margin: 0 }}>
              <img src="assets/commando-horizontal.png" alt="COMMANDO" style={{
                width: mobile ? '100%' : 'min(720px, 90%)',
                maxWidth: '100%',
                height: 'auto',
                display: 'block',
              }}/>
              <div style={{
                marginTop: mobile ? 12 : 18,
                display:'flex', alignItems:'center', gap: mobile ? 10 : 16,
                fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 12 : 16,
                letterSpacing:'0.22em', textTransform:'uppercase',
              }}>
                <span style={{ color: C.accent, fontWeight: 500 }}>/ apparel</span>
                <span style={{ width: 24, height: 1, background: C.fg, opacity: 0.3 }}/>
                <span style={{ color: C.fgMuted }}>est. 26</span>
              </div>
            </div>
            <p style={{
              margin: mobile ? '20px 0 0' : '32px 0 0',
              fontFamily:'Roboto, sans-serif', fontSize: mobile ? 14 : 16,
              maxWidth: 440, color: '#333', lineHeight: 1.45,
            }}>
              Ropa para entrenar, y para después. Hecha por la gente que suda contigo. <strong style={{ color: C.fg }}>Comunidad · Endorfinas · Disciplina.</strong>
            </p>
            <div style={{ display:'flex', gap: 12, marginTop: mobile ? 24 : 32, alignItems:'center' }}>
              <button className="cmd-btn-primary cmd-btn-inline" onClick={() => s.go('pdp', { slug: featuredHero.slug })} data-cursor-label="Comprar">
                Ver el drop {Icon.arrowR(16)}
              </button>
              <button className="cmd-btn-line" onClick={() => s.go('lookbook')}>
                Lookbook
              </button>
            </div>
          </div>

          {/* Hero — "After the burn" editorial photography */}
          <div onClick={() => s.go('pdp', { slug: featuredHero.slug })} style={{
            position:'relative', cursor:'pointer',
            aspectRatio: mobile ? '4/5' : '4/5',
            background: '#0A0A0A', overflow:'hidden',
            marginTop: mobile ? 24 : 0,
          }} data-cursor-label="Ver editorial">
            <img
              src="uploads/homepage-hero-after-the-burn.png"
              alt="After the burn — Studio COMMANDO"
              style={{
                position:'absolute', inset:0, width:'100%', height:'100%',
                objectFit:'cover', objectPosition:'center 30%', display:'block',
              }}
            />
            {/* gradient overlay for text legibility */}
            <div style={{
              position:'absolute', inset:0,
              background:'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.78) 100%)',
              pointerEvents:'none',
            }}/>
            {/* big monospace explainer */}
            <div style={{
              position:'absolute', top: mobile ? 16 : 24, left: mobile ? 16 : 24, right: mobile ? 16 : 24,
              display:'flex', justifyContent:'space-between',
              fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 10 : 12,
              letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(255,255,255,0.85)',
            }}>
              <span>Ed. 03 · Frame 01/12</span>
              <span>After hours · CDMX</span>
            </div>
            <div style={{
              position:'absolute', bottom: mobile ? 16 : 24, left: mobile ? 16 : 24, right: mobile ? 16 : 24,
              color: '#fff',
            }}>
              <div style={{
                fontFamily:'Anton, sans-serif', textTransform:'uppercase',
                fontSize: mobile ? 36 : 64, lineHeight: 0.9, letterSpacing:'-0.01em',
                textShadow:'0 2px 14px rgba(0,0,0,0.45)',
              }}>
                After<br/>the<br/><span style={{ color: C.accent }}>burn.</span>
              </div>
              <div style={{
                marginTop: 14, fontFamily:'JetBrains Mono, monospace', fontSize: 11,
                letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(255,255,255,0.75)',
              }}>
                Drop 03 · Otoño 26
              </div>
            </div>
            {/* corner brackets */}
            {[
              { t:'8px', l:'8px', b:'auto', r:'auto', rot:'0deg' },
              { t:'8px', r:'8px', b:'auto', l:'auto', rot:'90deg' },
              { b:'8px', r:'8px', t:'auto', l:'auto', rot:'180deg' },
              { b:'8px', l:'8px', t:'auto', r:'auto', rot:'270deg' },
            ].map((p, i) => (
              <span key={i} style={{
                position:'absolute', width:18, height:18,
                top:p.t, left:p.l, right:p.r, bottom:p.b,
                borderTop:'1px solid rgba(255,255,255,0.7)', borderLeft:'1px solid rgba(255,255,255,0.7)',
                transform:`rotate(${p.rot})`,
              }}/>
            ))}
          </div>
        </div>

        {/* spec strip */}
        <div style={{
          marginTop: mobile ? 24 : 32,
          display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr 1fr' : 'repeat(3, 1fr)',
          borderTop:`1px solid ${C.border}`,
        }}>
          {[
            ['12','Piezas en el drop'],
            ['MX','Diseñado y producido en México'],
            ['48h','Reserva en estudio sin compromiso'],
          ].map((row, i) => (
            <div key={i} style={{
              padding: mobile ? '20px 12px' : '28px 32px',
              borderRight: i < 2 ? `1px solid ${C.border}` : 'none',
            }}>
              <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 32 : 56, lineHeight: 0.9, letterSpacing:'-0.01em' }}>{row[0]}</div>
              <div style={{ marginTop: 6, fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 9 : 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>{row[1]}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ═══ Mix & Match Collection ═══ */}
      <MixMatchSection mobile={mobile} />

      {/* ═══ 01 / NEW IN ═══ */}
      <SectionRule num="01" title="New in" kicker={`${newProducts.length} piezas`} mobile={mobile} />
      {mobile ? (
        <div style={{
          display:'flex', gap: 12, padding:'8px 16px 28px 20px',
          overflowX:'auto', scrollSnapType:'x mandatory', scrollPaddingLeft: 20,
        }} className="cmd-snap-x">
          {newProducts.map((p, i) => (
            <React.Fragment key={p.id}>
              <div style={{ flex:'0 0 72%', scrollSnapAlign:'start' }}>
                <ProductCard product={p} mobile={mobile} onClick={() => s.go('pdp', { slug: p.slug })} />
              </div>
              {i === 1 && (
                <div style={{ flex:'0 0 72%', scrollSnapAlign:'start' }}>
                  <EditorialCard
                    image="uploads/hoodie-burgundy-front-female.png"
                    alt="Hoodie Oversize Vino · modelo femenina"
                    kicker="/02 endorfinas"
                    headline="Después del entreno."
                    mobile={mobile}
                    onClick={() => s.go('pdp', { slug: PRODUCTS[0].slug })}
                  />
                </div>
              )}
              {i === 3 && (
                <div style={{ flex:'0 0 72%', scrollSnapAlign:'start' }}>
                  <EditorialCard
                    image="uploads/hoodie-olive-front-male.png"
                    alt="Hoodie Oversize Olive · modelo masculino"
                    kicker="/03 disciplina"
                    headline="Para todos los días."
                    mobile={mobile}
                    onClick={() => s.go('pdp', { slug: PRODUCTS[0].slug })}
                  />
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      ) : (
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(12, 1fr)', gap: 24,
          padding: '8px 32px 56px',
        }}>
          {/* asymmetric layout: product · editorial · manifesto / product · editorial · product */}
          <div style={{ gridColumn:'1 / 6' }}><ProductCard product={newProducts[0]} mobile={mobile} onClick={() => s.go('pdp', { slug: newProducts[0].slug })} /></div>
          <div style={{ gridColumn:'6 / 10' }}>
            <EditorialCard
              image="uploads/hoodie-burgundy-front-female.png"
              alt="Hoodie Oversize Vino · modelo femenina"
              kicker="/02 endorfinas"
              headline="Después del entreno."
              mobile={mobile}
              onClick={() => s.go('pdp', { slug: PRODUCTS[0].slug })}
            />
          </div>
          <div style={{ gridColumn:'10 / 13' }}>
            <ManifestoCard mobile={mobile} />
          </div>
          <div style={{ gridColumn:'1 / 4' }}><ProductCard product={newProducts[2]} mobile={mobile} onClick={() => s.go('pdp', { slug: newProducts[2].slug })} /></div>
          <div style={{ gridColumn:'4 / 8' }}>
            <EditorialCard
              image="uploads/hoodie-olive-front-male.png"
              alt="Hoodie Oversize Olive · modelo masculino"
              kicker="/03 disciplina"
              headline="Para todos los días."
              mobile={mobile}
              onClick={() => s.go('pdp', { slug: PRODUCTS[0].slug })}
            />
          </div>
          <div style={{ gridColumn:'8 / 13' }}><ProductCard product={newProducts[4]} mobile={mobile} onClick={() => s.go('pdp', { slug: newProducts[4].slug })} /></div>
        </div>
      )}

      {/* ═══ Manifesto bar (full bleed) ═══ */}
      <section style={{
        background: C.fg, color:'#fff',
        padding: mobile ? '40px 16px' : '80px 32px', overflow:'hidden',
      }}>
        <div style={{
          fontFamily:'Anton, sans-serif',
          fontSize: mobile ? 56 : 110,
          lineHeight: 0.9, letterSpacing:'-0.02em', textTransform:'uppercase',
        }}>
          <span style={{ display:'block', paddingTop:'0.15em' }}>Hecho para<br/><span style={{ color: C.accent }}>moverse.</span></span>
          <span style={{ display:'block', marginTop: mobile ? 12 : 22, paddingTop:'0.15em' }}>Diseñado<br/>para quedarse.</span>
        </div>
        <div style={{
          marginTop: mobile ? 24 : 40,
          display:'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 20 : 56,
        }}>
          {[
            ['Hecho en México.', 'Probado por la comunidad; en todos los estudios, todas las semanas.'],
            ['Apartado físico.', 'Apartas online y te la pruebas en persona.'],
            ['AI Try-On.', 'Ve cómo te queda antes de comprar. Beta abierta para todo el drop.'],
          ].map((row, i) => (
            <div key={i}>
              <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)', marginBottom: 12 }}>0{i+1}</div>
              <div style={{ fontFamily:'Anton, sans-serif', fontSize: 22, textTransform:'uppercase', letterSpacing:'0.01em', marginBottom: 8 }}>{row[0]}</div>
              <div style={{ fontFamily:'Roboto, sans-serif', fontSize: 14, color:'rgba(255,255,255,0.7)', lineHeight: 1.45 }}>{row[1]}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ═══ 02 / OUTERWEAR (full-bleed feature) ═══ */}
      <SectionRule num="02" title="Outerwear" kicker="Drop 03" mobile={mobile} />
      <section style={{
        display:'grid', gridTemplateColumns: mobile ? '1fr' : '7fr 5fr',
        padding: mobile ? '0 16px 28px' : '0 32px 56px', gap: mobile ? 16 : 32,
      }}>
        <div onClick={() => s.go('pdp', { slug: outerwear[0].slug })} style={{ cursor:'pointer' }} data-cursor-label="Ver">
          <ProductPlaceholder product={outerwear[0]} large mobile={mobile} />
          <div style={{ marginTop: 16, display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
            <div>
              <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted, marginBottom: 4 }}>Featured · {outerwear[0].id.toUpperCase()}</div>
              <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 28 : 44, textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 1.05, paddingTop:2 }}>{outerwear[0].name}</div>
            </div>
            <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 14, textAlign:'right' }}>
              ${outerwear[0].price.toLocaleString('es-MX')}
              <div style={{ fontSize:10, color: C.fgMuted, letterSpacing:'0.18em', textTransform:'uppercase' }}>MXN</div>
            </div>
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: mobile ? 12 : 16, alignContent:'start' }}>
          {outerwear.slice(1, 3).map(p => (
            <ProductCard key={p.id} product={p} mobile={mobile} onClick={() => s.go('pdp', { slug: p.slug })} />
          ))}
          <div style={{ gridColumn:'1 / 3' }}>
            <InstagramWall mobile={mobile} />
          </div>
        </div>
      </section>

      {/* ═══ 03 / TOPS ═══ */}
      <SectionRule num="03" title="Tops" kicker={`${tops.length} piezas`} mobile={mobile} />
      <section style={{
        display:'grid',
        gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
        gap: mobile ? 12 : 20, padding: mobile ? '0 16px 28px' : '0 32px 56px',
      }}>
        {tops.slice(0, mobile ? 4 : 4).map(p => (
          <ProductCard key={p.id} product={p} mobile={mobile} onClick={() => s.go('pdp', { slug: p.slug })} />
        ))}
      </section>

      {/* ═══ 04 / SETS ═══ */}
      <SectionRule num="04" title="Sets" kicker="Mujer · Set" mobile={mobile} />
      <section style={{
        display:'grid', gridTemplateColumns: mobile ? '1fr' : '5fr 7fr',
        gap: mobile ? 16 : 32, padding: mobile ? '0 16px 28px' : '0 32px 56px',
      }}>
        <div style={{ display:'flex', flexDirection:'column', justifyContent:'center', padding: mobile ? '0' : '0 24px 0 0' }}>
          <div style={{
            fontFamily:'Anton, sans-serif', fontSize: mobile ? 40 : 64,
            textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 0.92,
          }}>
            Una<br/>silueta.<br/>Dos piezas.<br/><span style={{ color: C.accent }}>Cero distracciones.</span>
          </div>
          <div style={{ marginTop: 20, fontFamily:'Roboto, sans-serif', fontSize: 14, color:'#444', lineHeight: 1.5, maxWidth: 380 }}>
            Top + legging en tejido compresivo de soporte medio. Diseñado para Mat, Bici y todo lo que venga después.
          </div>
          <button onClick={() => s.go('pdp', { slug: sets[0].slug })} className="cmd-btn-line" style={{ marginTop: 24, alignSelf:'flex-start' }}>
            Ver el set {Icon.arrowR(14)}
          </button>
        </div>
        <div onClick={() => s.go('pdp', { slug: sets[0].slug })} style={{ cursor:'pointer' }} data-cursor-label="Ver">
          <ProductPlaceholder product={sets[0]} large mobile={mobile} />
        </div>
      </section>

      {/* ═══ Studios callout ═══ */}
      <section style={{
        background: C.bgWarm, padding: mobile ? '40px 16px' : '72px 32px',
        borderTop:`1px solid ${C.border}`, borderBottom:`1px solid ${C.border}`,
      }}>
        <div style={{
          display:'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 24 : 56,
          alignItems:'center',
        }}>
          <div>
            <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.2em', textTransform:'uppercase', color: C.accent, marginBottom: 14 }}>
              En tu estudio · Lo que nadie más tiene
            </div>
            <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 40 : 72, textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 1.05, paddingTop: 6 }}>
              Apártala<br/>en tu<br/>estudio.<br/>
              <span style={{ color: C.accent }}>Pruébatela<br/>en persona.</span>
            </div>
            <p style={{ fontFamily:'Roboto, sans-serif', fontSize: 14, color:'#333', lineHeight: 1.5, marginTop: 18, maxWidth: 460 }}>
              Reserva –con 48 horas para decidir– o compra online y recoge la prenda en cualquiera de nuestros estudios.
            </p>
          </div>
          <MapPreview mobile={mobile} />
        </div>
      </section>

      {/* ═══ Marquee outro ═══ */}
      <Marquee items={['comunidad','endorfinas','estilo de vida','disciplina','athl. div.','est. 2017','fitfamm']} />
    </main>
  );
}

// ─── Small subcomponents ──────────────────────────────────────────
function ManifestoCard({ mobile }) {
  return (
    <div style={{
      width:'100%', aspectRatio:'4/5', position:'relative',
      background: C.fg, color:'#fff', padding: 20,
      display:'flex', flexDirection:'column', justifyContent:'space-between',
      overflow:'hidden',
    }}>
      <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)' }}>
        Manifiesto · 01
      </div>
      <div style={{
        fontFamily:'Anton, sans-serif', fontSize: 30,
        textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 0.95,
      }}>
        Hecho por<br/>la gente que<br/><span style={{ color: C.accent }}>suda contigo</span>.
      </div>
      <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize: 11, letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(255,255,255,0.7)', display:'flex', justifyContent:'space-between' }}>
        <span>Read more</span>
        <span>↗</span>
      </div>
    </div>
  );
}

// ─── Editorial card for NEW IN grid (clean model photo, no overlay) ────
function EditorialCard({ image, alt, mobile, onClick }) {
  return (
    <div onClick={onClick} style={{
      width:'100%', aspectRatio:'4/5', position:'relative',
      background:'#0A0A0A', overflow:'hidden',
      cursor: onClick ? 'pointer' : 'default',
    }} data-cursor-label="Ver editorial">
      <img src={image} alt={alt} loading="lazy" style={{
        position:'absolute', inset:0, width:'100%', height:'100%',
        objectFit:'cover', display:'block',
      }}/>
    </div>
  );
}

function MapPreview({ mobile }) {
  const s = useStore();
  // Compute live from STUDIOS so it stays in sync with data updates
  const byCity = {};
  STUDIOS.forEach(st => {
    const c = byCity[st.city] = byCity[st.city] || { name: st.city, count: 0, studios: [] };
    c.count += 1;
    c.studios.push(st.name + (st.soon ? '*' : ''));
  });
  const order = ['CDMX','EDOMX','GDL','Cancún'];
  const cities = order.map(name => byCity[name]).filter(Boolean);
  const anySoon = STUDIOS.some(st => st.soon);
  // Limit studio names shown per card so layout stays balanced
  const VISIBLE = mobile ? 4 : 6;
  return (
    <div style={{ background:'#fff', border:`1px solid ${C.border}`, padding: mobile ? 18 : 24 }}>
      <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color: C.fgMuted, marginBottom: 14 }}>Tu estudio · MX</div>
      <div style={{ display:'grid', gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: mobile ? 14 : 18 }}>
        {cities.map(c => {
          const shown = c.studios.slice(0, VISIBLE);
          return (
            <div key={c.name} style={{ borderTop:`1px solid ${C.fg}`, paddingTop: 10 }}>
              <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 8 }}>
                <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 26 : 32, textTransform:'uppercase', letterSpacing:'-0.01em', lineHeight: 1 }}>{c.name}</div>
                <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color: C.accent, fontWeight:700 }}>({c.count})</div>
              </div>
              <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:4 }}>
                {shown.map(st => (
                  <li key={st} style={{ fontFamily:'Roboto, sans-serif', fontSize: 12, color:'#333' }}>{st}</li>
                ))}
                {c.count > shown.length && (
                  <li style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', color: C.fgMuted, marginTop:2 }}>+{c.count - shown.length} más</li>
                )}
              </ul>
            </div>
          );
        })}
      </div>
      {anySoon && (
        <div style={{ marginTop: 10, fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>* próximamente</div>
      )}
      <button onClick={() => s.go('estudios')} className="cmd-btn-line" style={{ marginTop: 20 }} data-cursor-label="Ver">
        Ver todos los estudios {Icon.arrowR(14)}
      </button>
    </div>
  );
}

// ─── Instagram Wall ─────────────────────────────────────────────────
function InstagramWall({ mobile }) {
  const comments = [
    { handle:'@valeria.cdmx', text:'QUIEROOO TODOS LOS SETS 😭❤️❤️', likes:234 },
    { handle:'@andrea.bootcamp', text:'omg con la azuuul me encantó 🥺💙 ya quiero el otro', likes:156 },
    { handle:'@cris_polanco', text:'no sabía que lo necesitaba hasta que lo compré 🥹✨', likes:312 },
  ];
  return (
    <div style={{ background:'#fff', border:`1px solid ${C.border}`, padding: mobile ? 16 : 20 }}>
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 14 }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color: C.accent }}>Lo que la comunidad dice</div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase', color: C.fgMuted }}>@commandostudio</div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap: 12 }}>
        {comments.map((c,i) => (
          <div key={i} style={{ display:'flex', gap: 12, alignItems:'flex-start' }}>
            <div style={{ width:32, height:32, borderRadius:'50%', flexShrink:0, background:`linear-gradient(135deg, ${['#FA3F3F','#1A2A44','#D6CDB8'][i]}, ${['#5C1A1B','#0A0A0A','#7A7A7A'][i]})` }}/>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase', color: C.fg, marginBottom:3 }}>{c.handle}</div>
              <div style={{ fontFamily:'Roboto, sans-serif', fontSize:13, color:'#222', lineHeight: 1.4 }}>{c.text}</div>
              <div style={{ marginTop: 5, fontFamily:'JetBrains Mono, monospace', fontSize:10, color: C.fgMuted, display:'flex', gap:8 }}>
                <span>♡ {c.likes}</span>
                <span>·</span>
                <span>hace 2d</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 14, paddingTop: 12, borderTop:`1px solid ${C.borderSoft}`, fontFamily:'JetBrains Mono, monospace', fontSize:9, color: C.fgMuted, letterSpacing:'0.14em', textTransform:'uppercase', fontStyle:'italic' }}>
        Ejemplo · social wall · API por definir
      </div>
    </div>
  );
}

// ─── SplitText (simple letter cascade) ──────────────────────────────
function SplitText({ text, delay = 0 }) {
  return <span style={{ display:'inline-block' }}>{text}</span>;
}

// ─── Mix & Match Collection ─────────────────────────────────────────
function MixMatchSection({ mobile }) {
  const s = useStore();
  // Map the 3×3 grid to real Mix & Match products in data.js.
  //   Column order: Negro · Azul claro · Stone
  //   Row order:    Top (sports-bra) · Pantalón (leggings) · Crewneck
  const sportsBra = PRODUCTS.find(p => p.id === 'p10');
  const leggings  = PRODUCTS.find(p => p.id === 'p11');
  const crewneck  = PRODUCTS.find(p => p.id === 'p02');
  const columns = [
    { name:'Negro',      hex:'#1A1916' },
    { name:'Azul claro', hex:'#BCCDDD' },
    { name:'Stone',      hex:'#BCB4A8' },
  ];
  const rows = [
    { piece:'Top',      product: sportsBra },
    { piece:'Pantalón', product: leggings },
    { piece:'Crewneck', product: crewneck  },
  ];
  return (
    <section style={{ background:'#0A0A0A', color:'#fff', padding: mobile ? '36px 16px 44px' : '64px 32px 72px' }}>
      {/* Section index */}
      <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: mobile ? 8 : 14 }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.22em', color:'rgba(255,255,255,0.45)' }}>MIX &amp; MATCH</div>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.22em', color:'rgba(255,255,255,0.45)' }}>FW · 2026</div>
      </div>
      {/* Hero title — MIX & [MM logo]ATCH with COLLECTION centered below */}
      <div style={{ position:'relative', paddingBottom: mobile ? 8 : 16 }}>
        <h2 style={{
          margin:0, fontFamily:'Anton, sans-serif',
          fontSize: mobile ? 52 : 140,
          lineHeight: 0.88, letterSpacing:'-0.025em', textTransform:'uppercase',
          display:'flex', alignItems:'baseline', justifyContent:'center', gap: mobile ? 6 : 14,
          whiteSpace:'nowrap',
        }}>
          <span>Mix</span>
          <span style={{ color: C.accent }}>&amp;</span>
          <span style={{ display:'inline-flex', alignItems:'baseline' }}>
            <img src="assets/commando-mm.png" alt="M" style={{
              height: mobile ? '1.4cm' : '3.8cm',
              width:'auto',
              filter:'invert(1)',
              display:'inline-block',
              verticalAlign:'baseline',
              transform: mobile ? 'translateY(0.15cm)' : 'translateY(0.4cm)',
            }}/>
            <span style={{ marginLeft: mobile ? -3 : -8 }}>atch</span>
          </span>
        </h2>
        <div style={{
          marginTop: mobile ? 6 : 8,
          display:'flex', justifyContent:'center',
          fontFamily:'Roboto, sans-serif', fontWeight:300,
          fontSize: mobile ? 11 : 22,
          letterSpacing: mobile ? '0.42em' : '0.66em',
          textTransform:'uppercase', color:'#fff',
        }}>
          <span style={{ paddingLeft:'0.66em', transform: mobile ? 'translateX(1.85cm)' : 'translateX(5.4cm)', display:'inline-block' }}>Collection</span>
        </div>
      </div>
      {/* Subhead row */}
      <div style={{ display:'grid', gridTemplateColumns: mobile ? '1fr' : 'auto 1fr', gap: mobile ? 12 : 32, alignItems:'baseline', marginTop: mobile ? 20 : 28, marginBottom: mobile ? 24 : 32 }}>
        <div style={{ fontFamily:'Anton, sans-serif', fontSize: mobile ? 22 : 30, textTransform:'uppercase', letterSpacing:'0.02em', color: C.accent, whiteSpace:'nowrap', paddingTop: 4 }}>
          Combina. Entrena. Repite.
        </div>
        <div style={{ fontFamily:'Roboto, sans-serif', fontSize: mobile ? 13 : 15, color:'rgba(255,255,255,0.7)', lineHeight: 1.5, maxWidth: 420, justifySelf: mobile ? 'start' : 'end' }}>
          Hechas para mezclarse entre sí y con todo lo que ya tienes.
        </div>
      </div>
      {/* Color column headers */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: mobile ? 6 : 10, marginBottom: mobile ? 6 : 10 }}>
        {columns.map(col => (
          <div key={col.name} style={{ fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 9 : 11, letterSpacing:'0.2em', textTransform:'uppercase', color: 'rgba(255,255,255,0.6)', textAlign:'center' }}>
            <span style={{ display:'inline-block', width:8, height:8, borderRadius:'50%', background: col.hex, boxShadow:'0 0 0 1px rgba(255,255,255,0.3)', marginRight: 6, verticalAlign:'middle' }}/>{col.name}
          </div>
        ))}
      </div>
      {/* 3 rows × 3 columns: each cell shows the real product photo for that (piece, color) */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: mobile ? 6 : 10 }}>
        {rows.map(row => columns.map(col => (
          <MMCell key={row.piece + col.name}
            piece={row.piece}
            color={col}
            product={row.product}
            mobile={mobile}
            onClick={() => row.product && s.go('pdp', { slug: row.product.slug })}
          />
        )))}
      </div>
      <div style={{ marginTop: mobile ? 24 : 32, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16 }}>
        <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)' }}>{''}</div>
        <button onClick={() => s.go('pdp', { slug: 'set-mix-match' })} className="cmd-btn-line" style={{ color:'#fff', borderColor:'#fff' }}>
          Ver la colección {Icon.arrowR(14)}
        </button>
      </div>
    </section>
  );
}

function MMCell({ piece, color, product, mobile, onClick }) {
  const [hover, setHover] = useState(false);
  const set = product && product.imagesByColor && product.imagesByColor[color.name];
  const frontImg = set && set.front;
  const backImg = set && set.back;
  const hasFlip = !!(frontImg && backImg);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position:'relative', aspectRatio:'4/5',
        background: frontImg ? '#F4F2EC' : color.hex,
        overflow:'hidden', cursor:'pointer',
      }}
      data-cursor-label="Ver">
      {frontImg ? (
        <React.Fragment>
          <img
            src={frontImg}
            alt={`${piece} ${color.name}`}
            loading="lazy"
            style={{
              position:'absolute', inset:0, width:'100%', height:'100%',
              objectFit:'cover', display:'block',
              opacity: hover && hasFlip ? 0 : 1,
              transition:'opacity .35s ease',
            }}
          />
          {hasFlip && (
            <img
              src={backImg}
              alt={`${piece} ${color.name} · espalda`}
              loading="lazy"
              style={{
                position:'absolute', inset:0, width:'100%', height:'100%',
                objectFit:'cover', display:'block',
                opacity: hover ? 1 : 0,
                transition:'opacity .35s ease',
              }}
            />
          )}
        </React.Fragment>
      ) : (
        <div style={{ position:'absolute', inset:0, background:`repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,0.05) 10px 11px)`}}/>
      )}
      <div style={{
        position:'absolute', top: mobile ? 8 : 12, left: mobile ? 8 : 12,
        fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 8 : 10,
        letterSpacing:'0.2em', textTransform:'uppercase',
        color: frontImg ? '#0A0A0A' : contrast(color.hex),
        opacity: 0.65, mixBlendMode: frontImg ? 'multiply' : 'normal',
      }}>
        MM · {piece.slice(0,3).toUpperCase()}
      </div>
      <div style={{
        position:'absolute', bottom: mobile ? 8 : 12, left: mobile ? 8 : 12, right: mobile ? 8 : 12,
      }}>
        <div style={{
          fontFamily:'Anton, sans-serif', fontSize: mobile ? 18 : 24,
          textTransform:'uppercase', letterSpacing:'-0.005em', lineHeight: 1.05,
          color: frontImg ? '#0A0A0A' : contrast(color.hex),
          mixBlendMode: frontImg ? 'multiply' : 'normal',
          textShadow: frontImg ? '0 1px 2px rgba(255,255,255,0.3)' : 'none',
        }}>{piece}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Landing, ManifestoCard, MapPreview, SplitText, InstagramWall, MixMatchSection, MMCell });