// storefront-lookbook.jsx — Drop 03 editorial lookbook
// 4 secciones: Cover · Series fotográficas (3) · Manifiesto · Créditos

function Lookbook({ mobile }) {
  const s = useStore();
  return (
    <main data-screen-label="Lookbook" style={{ background:'#0E0D0B', color:'#fff' }}>
      <LookbookCover mobile={mobile}/>
      <LookbookSerie
        mobile={mobile}
        num="01"
        title="El después del entrenamiento"
        copy="La hora muerta entre la última repetición y la primera respiración normal."
        meta="ED. 03 · SERIE 01 · 03 FRAMES · 4:5"
        bg="#0E0D0B"
        accent="rgba(250,63,63,0.08)"
        productLinks={[
          { name:'Hoodie Oversize Negro', slug:'hoodie-oversize-negro' },
          { name:'Jogger Negro', slug:'jogger-tech-negro' },
        ]}
        layout="A"
      />
      <LookbookSerie
        mobile={mobile}
        num="02"
        title="Mix & Match"
        copy="Una sola línea pensada para mezclarse con todo lo que ya tienes."
        meta="ED. 03 · SERIE 02 · CAPSULA · 4:5"
        bg="#161412"
        accent="rgba(255,255,255,0.04)"
        cta={{ label:'Ver la colección', onClick: () => s.go('home') }}
        layout="B"
      />
      <LookbookSerie
        mobile={mobile}
        num="03"
        title="Para las mañanas de 6 am"
        copy="Cuando bajas del coche en Pedregal y el aire pega. Outerwear pensado para el tránsito al estudio."
        meta="ED. 03 · SERIE 03 · 03 FRAMES · 4:5"
        bg="#0A0A0A"
        accent="rgba(250,63,63,0.08)"
        productLinks={[
          { name:'Puffer Negro', slug:'puffer-tech-negro' },
          { name:'Fleece Jacket Crema', slug:'fleece-jacket-crema' },
        ]}
        layout="A"
      />
      <LookbookManifesto mobile={mobile}/>
      <LookbookCredits mobile={mobile}/>
    </main>
  );
}

// ─── Cover ──────────────────────────────────────────────────────────
function LookbookCover({ mobile }) {
  return (
    <section style={{
      minHeight: mobile ? '100vh' : 'auto',
      padding: mobile ? '36px 16px 56px' : '56px 32px 88px',
      borderBottom:'1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 10 : 12,
        letterSpacing:'0.22em', textTransform:'uppercase',
        color:'rgba(255,255,255,0.55)', marginBottom: mobile ? 28 : 44,
      }}>
        <span style={{ display:'flex', alignItems:'center', gap: 12 }}>
          <span style={{ width: 24, height: 1, background:'#FA3F3F' }}/>
          Drop 03 · Otoño 26
        </span>
        <span>Edición Manifiesto · 1/4</span>
      </div>

      <div style={{
        fontFamily:'Anton, sans-serif', textTransform:'uppercase',
        fontSize: mobile ? 48 : 'clamp(64px, 8vw, 124px)',
        lineHeight: 0.9, letterSpacing:'-0.02em',
        marginBottom: mobile ? 36 : 56, maxWidth: 1480,
      }}>
        <span style={{ display:'block' }}>Esto no es</span>
        <span style={{ display:'block' }}>una colección.</span>
        <span style={{ display:'block', color:'#FA3F3F' }}>Es un manifiesto.</span>
      </div>

      <div style={{
        aspectRatio: mobile ? '4/5' : '16/9',
        background:'#1A1714', position:'relative', overflow:'hidden',
      }}>
        <div style={{ position:'absolute', inset: 0, background:'repeating-linear-gradient(45deg, transparent 0 22px, rgba(255,255,255,0.04) 22px 23px)'}}/>
        <div style={{
          position:'absolute', top: mobile ? 14 : 28, left: mobile ? 14 : 28, right: mobile ? 14 : 28,
          display:'flex', justifyContent:'space-between',
          fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 10 : 12,
          letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)',
        }}>
          <span>Ed. 03 · Cover · 1/12</span>
          <span>16:9 · 4096 × 2304</span>
        </div>
        <div style={{
          position:'absolute', bottom: mobile ? 14 : 28, left: mobile ? 14 : 28, right: mobile ? 14 : 28,
          color:'rgba(255,255,255,0.55)',
          fontFamily:'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing:'0.2em', textTransform:'uppercase',
          display:'flex', justifyContent:'space-between',
        }}>
          <span>[ Cover editorial · placeholder ]</span>
          <span>Foto: a definir</span>
        </div>
        {/* center stamp */}
        <div style={{
          position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <div style={{
            border:'1.5px solid rgba(255,255,255,0.5)', padding: mobile ? '14px 22px' : '22px 36px',
            color:'rgba(255,255,255,0.85)',
            fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 11 : 13,
            letterSpacing:'0.32em', textTransform:'uppercase',
          }}>Commando · Lookbook · 26</div>
        </div>
      </div>
    </section>
  );
}

// ─── Serie photo block ──────────────────────────────────────────────
function LookbookSerie({ mobile, num, title, copy, meta, bg, accent, productLinks, cta, layout }) {
  const s = useStore();
  return (
    <section style={{
      background: bg, padding: mobile ? '64px 16px' : '120px 32px',
      borderBottom:'1px solid rgba(255,255,255,0.08)',
      position:'relative', overflow:'hidden',
    }}>
      {/* big numeral watermark */}
      <div style={{
        position:'absolute', top: mobile ? -8 : -24, right: mobile ? -8 : -16, lineHeight: 1,
        fontFamily:'Anton, sans-serif', fontSize: mobile ? 200 : 360, color: accent,
        pointerEvents:'none', userSelect:'none',
      }}>{num}</div>

      {/* meta row */}
      <div style={{
        position:'relative', zIndex: 2,
        display:'flex', justifyContent:'space-between', alignItems:'baseline',
        fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 10 : 11,
        letterSpacing:'0.22em', textTransform:'uppercase',
        color:'rgba(255,255,255,0.55)', marginBottom: mobile ? 28 : 40,
      }}>
        <span style={{ color:'#FA3F3F' }}>Serie {num} / 03</span>
        <span>{meta}</span>
      </div>

      <div style={{
        position:'relative', zIndex: 2,
        display:'grid',
        gridTemplateColumns: mobile ? '1fr' : '0.95fr 1fr',
        gap: mobile ? 32 : 64,
        alignItems: 'start',
      }}>
        {/* left: text */}
        <div style={{ paddingTop: mobile ? 0 : 16 }}>
          <div style={{
            fontFamily:'Anton, sans-serif',
            fontSize: mobile ? 48 : 'clamp(64px, 7vw, 120px)',
            lineHeight: 0.92, letterSpacing:'-0.015em', textTransform:'uppercase',
            marginBottom: mobile ? 22 : 32,
          }}>{title}.</div>
          <p style={{
            margin: 0, maxWidth: 460,
            fontFamily:'Roboto, sans-serif', fontSize: mobile ? 15 : 17,
            lineHeight: 1.5, color:'rgba(255,255,255,0.78)',
          }}>{copy}</p>

          {productLinks && (
            <div style={{ marginTop: 32, display:'flex', flexDirection:'column', gap: 12 }}>
              <div style={{
                fontFamily:'JetBrains Mono, monospace', fontSize: 11,
                letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.4)',
              }}>Prendas en escena</div>
              {productLinks.map(p => (
                <button key={p.slug} onClick={() => s.go('pdp', { slug: p.slug })} data-cursor-label="Ver" style={{
                  background:'transparent', color:'#fff', border:0, padding:'12px 0',
                  borderTop:'1px solid rgba(255,255,255,0.16)',
                  textAlign:'left', cursor:'pointer',
                  display:'flex', justifyContent:'space-between', alignItems:'center',
                  fontFamily:'JetBrains Mono, monospace', fontSize: 12,
                  letterSpacing:'0.18em', textTransform:'uppercase',
                }} onMouseEnter={e => e.currentTarget.style.color = '#FA3F3F'} onMouseLeave={e => e.currentTarget.style.color = '#fff'}>
                  <span>→ {p.name}</span>
                  <span style={{ color:'rgba(255,255,255,0.4)' }}>PDP</span>
                </button>
              ))}
            </div>
          )}
          {cta && (
            <button onClick={cta.onClick} className="cmd-btn-primary cmd-btn-inline" style={{ marginTop: 32 }} data-cursor-label="Ver">
              {cta.label} <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </button>
          )}
        </div>

        {/* right: photo placeholders */}
        {layout === 'A' && (
          <div style={{ display:'grid', gridTemplateColumns: mobile ? '1fr 1fr' : '1fr 1fr', gap: mobile ? 10 : 18 }}>
            <EditorialFrame meta={`ED. 03 · ${num} · FRAME 01/03`} ratio="4/5"/>
            <EditorialFrame meta={`ED. 03 · ${num} · FRAME 02/03`} ratio="4/5" offset/>
            <div style={{ gridColumn: '1 / -1' }}>
              <EditorialFrame meta={`ED. 03 · ${num} · FRAME 03/03 · WIDE`} ratio={mobile ? '4/3' : '16/9'}/>
            </div>
          </div>
        )}
        {layout === 'B' && (
          <div style={{ display:'grid', gridTemplateColumns:'1fr', gap: mobile ? 10 : 18 }}>
            <EditorialFrame meta={`ED. 03 · ${num} · MIX & MATCH · HERO`} ratio={mobile ? '4/5' : '4/5'}/>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: mobile ? 8 : 12 }}>
              {[1,2,3].map(i => (
                <EditorialFrame key={i} meta={`MM · 0${i}`} ratio="1/1" mini/>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Manifesto ──────────────────────────────────────────────────────
function LookbookManifesto({ mobile }) {
  return (
    <section style={{
      background:'#FA3F3F', color:'#fff',
      padding: mobile ? '88px 20px' : '160px 64px',
      borderBottom:'1px solid rgba(255,255,255,0.08)',
      position:'relative',
    }}>
      <div style={{
        fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 10 : 12,
        letterSpacing:'0.32em', textTransform:'uppercase', color:'rgba(255,255,255,0.7)',
        marginBottom: mobile ? 32 : 48,
        display:'flex', justifyContent:'space-between',
      }}>
        <span>Manifiesto · 03/04</span>
        <span>Lectura · 28 segundos</span>
      </div>

      <div style={{ maxWidth: 1080 }}>
        <div style={{
          fontFamily:'Anton, sans-serif',
          fontSize: mobile ? 44 : 'clamp(72px, 8vw, 132px)',
          lineHeight: 0.95, letterSpacing:'-0.02em', textTransform:'uppercase',
          marginBottom: mobile ? 32 : 48,
        }}>
          No hacemos ropa<br/>para el gimnasio.
        </div>
        <div style={{
          fontFamily:'Anton, sans-serif',
          fontSize: mobile ? 32 : 'clamp(48px, 5vw, 88px)',
          lineHeight: 1, letterSpacing:'-0.015em', textTransform:'uppercase',
          marginBottom: mobile ? 36 : 56,
          color:'rgba(255,255,255,0.88)',
        }}>
          Hacemos ropa para lo que pasa<br/>antes y <span style={{ color:'#0E0D0B' }}>después</span>.
        </div>
        <div style={{
          fontFamily:'Roboto, sans-serif', fontWeight: 400,
          fontSize: mobile ? 18 : 24, lineHeight: 1.45,
          maxWidth: 760, marginBottom: mobile ? 32 : 48,
          textWrap:'pretty',
        }}>
          Para la caminata de las 6 am.<br/>
          Para el café después de bootcamp.<br/>
          Para la junta a las 11.<br/>
          Para el weekend.
        </div>
        <div style={{
          fontFamily:'Anton, sans-serif',
          fontSize: mobile ? 28 : 'clamp(40px, 4vw, 64px)',
          lineHeight: 1, letterSpacing:'-0.01em', textTransform:'uppercase',
          maxWidth: 980,
        }}>
          Para la gente que entrena<br/>
          <span style={{ color:'#0E0D0B' }}>porque le da la gana,</span><br/>
          no porque tenga que.
        </div>
      </div>
    </section>
  );
}

// ─── Credits ────────────────────────────────────────────────────────
function LookbookCredits({ mobile }) {
  const s = useStore();
  const rows = [
    ['Dirección creativa', 'A definir'],
    ['Fotografía', 'A definir'],
    ['Dirección de arte', 'A definir'],
    ['Estilismo', 'A definir'],
    ['Modelos', 'Comunidad COMMANDO'],
    ['Locaciones', 'CDMX · Polanco · Pedregal · Samara · Puerta de Hierro'],
    ['Producción', 'A definir'],
    ['Post-producción', 'A definir'],
    ['Texto', 'A definir'],
    ['Música original', 'A definir'],
    ['Coordinación', 'COMMANDO Studio'],
    ['Agradecimientos', 'A toda la gente que entrena con nosotros.'],
  ];
  return (
    <section style={{
      background:'#0E0D0B', color:'#fff',
      padding: mobile ? '64px 16px 80px' : '120px 32px 140px',
    }}>
      <div style={{
        fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 10 : 12,
        letterSpacing:'0.22em', textTransform:'uppercase',
        color:'rgba(255,255,255,0.55)', marginBottom: mobile ? 28 : 44,
        display:'flex', justifyContent:'space-between',
      }}>
        <span>Créditos · 04/04</span>
        <span>Contracarátula</span>
      </div>

      <div style={{
        fontFamily:'Anton, sans-serif', textTransform:'uppercase',
        fontSize: mobile ? 44 : 'clamp(72px, 8vw, 132px)',
        lineHeight: 0.92, letterSpacing:'-0.02em',
        marginBottom: mobile ? 40 : 56,
      }}>
        Quién hizo<br/>este drop.
      </div>

      <div style={{
        display:'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        gap: mobile ? 0 : 64,
        marginBottom: mobile ? 48 : 72,
      }}>
        {rows.map(([k, v], i) => (
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'1fr 1.6fr', gap: 16, alignItems:'baseline',
            padding: mobile ? '14px 0' : '16px 0',
            borderTop: '1px solid rgba(255,255,255,0.12)',
            borderBottom: i === rows.length - 1 ? '1px solid rgba(255,255,255,0.12)' : undefined,
            fontFamily:'JetBrains Mono, monospace', fontSize: mobile ? 11 : 12,
            letterSpacing:'0.14em', textTransform:'uppercase',
          }}>
            <span style={{ color:'rgba(255,255,255,0.5)' }}>{k}</span>
            <span style={{
              color: v === 'A definir' ? '#FA3F3F' : '#fff',
              fontWeight: v === 'A definir' ? 400 : 500,
            }}>{v === 'A definir' ? '[ A definir ]' : v}</span>
          </div>
        ))}
      </div>

      <div style={{
        display:'flex', flexDirection: mobile ? 'column' : 'row',
        gap: mobile ? 18 : 24, alignItems: mobile ? 'stretch' : 'center',
      }}>
        <button onClick={() => s.go('home')} className="cmd-btn-primary cmd-btn-inline" data-cursor-label="Ver">
          Ver toda la colección <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </button>
        <button onClick={() => s.go('home')} style={{
          background:'transparent', color:'rgba(255,255,255,0.78)', border:0,
          padding: 0, cursor:'pointer',
          fontFamily:'JetBrains Mono, monospace', fontSize: 12,
          letterSpacing:'0.22em', textTransform:'uppercase',
          borderBottom:'1px solid rgba(255,255,255,0.4)',
          transition:'color .15s, border-color .15s',
        }} onMouseEnter={e => { e.currentTarget.style.color = '#FA3F3F'; e.currentTarget.style.borderColor = '#FA3F3F'; }}
           onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.78)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.4)'; }}>
          ← Volver a la tienda
        </button>
      </div>
    </section>
  );
}

// ─── Editorial frame placeholder (reusable) ─────────────────────────
function EditorialFrame({ meta, ratio = '4/5', offset, mini }) {
  return (
    <div style={{
      position:'relative', aspectRatio: ratio,
      background:'#15120F', overflow:'hidden',
      transform: offset ? 'translateY(20px)' : 'none',
    }}>
      <div style={{
        position:'absolute', inset:0,
        background:'repeating-linear-gradient(45deg, transparent 0 16px, rgba(255,255,255,0.04) 16px 17px)',
      }}/>
      {!mini && (
        <>
          <div style={{
            position:'absolute', top: 12, left: 12, right: 12,
            display:'flex', justifyContent:'space-between',
            fontFamily:'JetBrains Mono, monospace', fontSize: 9,
            letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.5)',
          }}>
            <span>{meta}</span>
            <span>4096 × 5120</span>
          </div>
          <div style={{
            position:'absolute', bottom: 12, left: 12,
            fontFamily:'JetBrains Mono, monospace', fontSize: 9,
            letterSpacing:'0.22em', textTransform:'uppercase', color:'rgba(255,255,255,0.4)',
          }}>[ Frame placeholder ]</div>
        </>
      )}
      {mini && (
        <div style={{
          position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily:'JetBrains Mono, monospace', fontSize: 9, color:'rgba(255,255,255,0.45)',
          letterSpacing:'0.22em', textTransform:'uppercase',
        }}>{meta}</div>
      )}
    </div>
  );
}

Object.assign(window, { Lookbook });
