// Chapter IV — Outfit swaps.
// Model + scene stay; wardrobe replaced from a flat lookbook reference.

function ExOutfits() {
  // Three outfit spreads side-by-side on desktop, stacking on mobile. Same
  // pattern as the Object placements chapter. Spread B carries 3 output
  // variations rendered as a tight mini-triptych inside its column.
  const spreads = [
    {
      eyebrow: 'Spread A',
      title: 'The Full Outfit.',
      inputs: [
        { src: 'assets/sporty-original.jpg', label: 'Scene' },
        { src: 'assets/sporty-outfit-ref.jpg', label: 'Wardrobe', tone: 'neutral' },
      ],
      outputs: [{ src: 'assets/sporty-output.jpg', alt: 'Re-dressed in tennis sweater + pleated skirt' }],
    },
    {
      eyebrow: 'Spread B',
      title: 'Same Same, but different.',
      inputs: [
        { src: 'assets/ysl-vault-scene.jpg', label: 'Scene' },
        { src: 'assets/ysl-outfit-ref.jpg', label: 'Wardrobe', tone: 'neutral' },
      ],
      outputs: [{ src: 'assets/ysl-output-1.jpg', alt: 'Re-dressed look' }],
    },
    {
      eyebrow: 'Spread C',
      title: 'Your Brand, Our Scene.',
      inputs: [
        { src: 'assets/laptop-original.jpg', label: 'Scene' },
        { src: 'assets/laptop-output.jpg', label: 'Wardrobe', tone: 'neutral' },
      ],
      outputs: [{ src: 'assets/laptop-outfit-ref.jpg', alt: 'Generated walk in the brown two-piece' }],
    },
  ];

  return (
    <ExSection
      id="outfits"
      chapter="Chapter III · Outfit swaps"
      title="Rewrite the wardrobe."
      kicker="A flat lookbook reference plus a real photograph. Product Studio re-dresses the model and keeps the pose, the place, the light."
      tone="deep"
    >
      <div className="ex-outfits-row" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
        gap: 40,
        alignItems: 'start',
      }}>
        {spreads.map((s) => (
          <div key={s.title}>
            <ExSpreadHead eyebrow={s.eyebrow} title={s.title} tone="deep" />

            {/* Inputs row — two small thumbs side-by-side */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 12,
              marginBottom: 20,
            }}>
              {s.inputs.map((it, i) => (
                <div key={i}>
                  <div style={{
                    width: '100%', aspectRatio: '3/4',
                    background: '#E8DFD2',
                    overflow: 'hidden',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    padding: 0,
                  }}>
                    <img src={it.src} alt={it.label || ''} loading="lazy" style={{
                      width: '100%', height: '100%',
                      objectFit: 'cover',
                      display: 'block',
                    }} />
                  </div>
                  <div style={{
                    marginTop: 8,
                    fontFamily: '"La Villa", sans-serif',
                    fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
                    color: 'var(--cocoa)', fontWeight: 500,
                  }}>
                    <span style={{ color: 'var(--fg-2)', marginRight: 6 }}>{String(i + 1).padStart(2, '0')}</span>
                    {it.label}
                  </div>
                </div>
              ))}
            </div>

            {/* Output(s) */}
            <div style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'var(--fg-2)', marginBottom: 10, fontWeight: 500,
            }}>
              {s.outputs.length > 1 ? `Output · ${s.outputs.length} looks` : 'Output'}
            </div>
            {s.outputs.length === 1 ? (
              <ExFrame src={s.outputs[0].src} alt={s.outputs[0].alt} ratio="3/4" shadow="lg" />
            ) : (
              <div className="ex-out-trip" style={{
                display: 'grid', gridTemplateColumns: `repeat(${s.outputs.length}, 1fr)`, gap: 8,
              }}>
                {s.outputs.map((o, i) => (
                  <ExFrame key={i} src={o.src} alt={o.alt} ratio="3/4" shadow="md" />
                ))}
              </div>
            )}
          </div>
        ))}
      </div>

      <style>{`
        @media (max-width: 980px) {
          /* Horizontal swipeable carousel on mobile — keeps the 3-in-a-row
             rhythm without stacking into a tall column. Each card snaps. */
          .ex-outfits-row {
            display: flex !important;
            grid-template-columns: none !important;
            flex-wrap: nowrap !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            gap: 14px !important;
            padding-bottom: 8px;
          }
          .ex-outfits-row::-webkit-scrollbar { display: none; }
          .ex-outfits-row > * {
            flex: 0 0 86%;
            min-width: 0;
            scroll-snap-align: center;
          }
        }
      `}</style>
    </ExSection>
  );
}

Object.assign(window, { ExOutfits });