// Chapter III — Object placements.
// Multiple flat product mocks placed into a single Vault scene.

function ExPlacements() {
  // Three placements side-by-side on desktop, stacking on mobile. Each card
  // shows its two input thumbs above the output frame — a tighter vertical
  // recipe instead of the full ingredients-arrow-output spread used elsewhere.
  const spreads = [
    {
      eyebrow: 'Spread A',
      title: 'A pendant.',
      inputs: [
        { src: 'assets/jewelry-original.jpg', label: 'Portrait' },
        { src: 'assets/pendant-product.jpg', label: 'Pendant', tone: 'neutral' },
      ],
      output: { src: 'assets/jewelry-output.jpg', alt: 'Generated portrait wearing the pendant' },
    },
    {
      eyebrow: 'Spread B',
      title: 'A candle.',
      inputs: [
        { src: 'assets/byredo-original.jpg', label: 'Vanity scene' },
        { src: 'assets/candle-product.jpg', label: 'Candle', tone: 'neutral' },
      ],
      output: { src: 'assets/candle-output.jpg', alt: 'Candle placed on the vanity' },
    },
    {
      eyebrow: 'Spread C',
      title: 'A face oil.',
      inputs: [
        { src: 'assets/faceoil-scene.jpg', label: 'Shelf scene' },
        { src: 'assets/faceoil-product.jpg', label: 'Face oil', tone: 'neutral' },
      ],
      output: { src: 'assets/faceoil-output.jpg', alt: 'Face oil placed on the wooden shelf' },
    },
  ];

  return (
    <ExSection
      id="object-placements"
      chapter="Chapter II · Object placements"
      title={<>Pendants, perfume, skincare.</>}
      kicker={<>One Vault scene, three different products.<br />The light and the surface stay.<br />Only the object changes.</>}
      tone="cream"
    >
      <div className="ex-placements-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="cream" />

            {/* 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: it.tone === 'neutral' ? '#FFFFFF' : '#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: it.tone === 'neutral' ? 'contain' : '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 frame — the hero of each card */}
            <div style={{
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'var(--fg-2)', marginBottom: 10, fontWeight: 500,
            }}>
              Output
            </div>
            <ExFrame src={s.output.src} alt={s.output.alt} ratio="3/4" shadow="lg" />
          </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-placements-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-placements-row::-webkit-scrollbar { display: none; }
          .ex-placements-row > * {
            flex: 0 0 86%;
            min-width: 0;
            scroll-snap-align: center;
          }
        }
      `}</style>
    </ExSection>
  );
}

Object.assign(window, { ExPlacements });