// Chapter — Model swaps.
// Scene + lighting + pose stay; the person changes to one you pick from the
// model library. Reuses the equation-hero assets (eq-og + eq-output pairs)
// since those literally are model-swap examples.

function ExModels() {
  // Two recipes stacked vertically: a girl version and a boy version. Each
  // recipe lays Scene + 3 model picks across a single 4-column grid so the
  // Scene thumb and each output thumb render at identical width (and
  // therefore identical height — all 3:4 ratio).
  const recipes = [
    {
      key: 'girl',
      scene: { src: 'assets/eq-og-3.jpg', alt: 'Scene' },
      outputs: [
        { src: 'assets/eq-output-3.jpg', alt: 'Pick 1' },
        { src: 'assets/eq-output-pick-2.jpg', alt: 'Pick 2' },
        { src: 'assets/eq-output-pick-3.jpg', alt: 'Pick 3' },
      ],
    },
    {
      key: 'boy',
      scene: { src: 'assets/manu-scene.jpg', alt: 'Scene' },
      outputs: [
        { src: 'assets/manu-pick-1.jpg', alt: 'Pick 1' },
        { src: 'assets/manu-pick-2.jpg', alt: 'Pick 2' },
        { src: 'assets/manu-pick-3.jpg', alt: 'Pick 3' },
      ],
    },
  ];

  return (
    <ExSection
      id="models"
      chapter="Chapter · Model swaps"
      title="Same scene, your model."
      kicker="When a Vault Stock photograph features one of our models, you pick a different model from our library before generating. The pose, scene, and lighting carry over. The face, body, and details come from your pick."
      tone="cream"
    >
      <ExSpreadHead
        eyebrow="One scene, three models"
        title="Different face, every time."
        tone="cream"
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 64 }}>
        {recipes.map((r) => (
          <div key={r.key} className="ex-models-recipe" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
            columnGap: 14,
            rowGap: 12,
            alignItems: 'start',
          }}>
            {/* Headers row */}
            <div style={{
              gridColumn: '1 / 2',
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'var(--fg-2)', fontWeight: 500,
              paddingBottom: 12, borderBottom: '1px solid var(--border-1)',
              marginBottom: 4,
            }}>
              Ingredient
            </div>
            <div style={{
              gridColumn: '2 / 5',
              fontFamily: '"La Villa", sans-serif',
              fontSize: 10.5, letterSpacing: '0.28em', textTransform: 'uppercase',
              color: 'var(--cocoa)', fontWeight: 600,
              paddingBottom: 12, borderBottom: '1px solid var(--cocoa)',
              marginBottom: 4,
            }}>
              Output · 3 picks
            </div>

            {/* Scene thumb (col 1) */}
            <div style={{ gridColumn: '1 / 2' }}>
              <div style={{
                width: '100%', aspectRatio: '3/4',
                background: '#E8DFD2', overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <img src={r.scene.src} alt={r.scene.alt} loading="lazy" style={{
                  width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                }} />
              </div>
              <div style={{
                marginTop: 8,
                fontFamily: '"La Villa", sans-serif',
                fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'var(--cocoa)', fontWeight: 500,
              }}>Scene</div>
            </div>

            {/* 3 output picks (cols 2-4) */}
            {r.outputs.map((o, i) => (
              <div key={i} style={{ gridColumn: `${i + 2} / ${i + 3}` }}>
                <ExFrame src={o.src} alt={o.alt} ratio="3/4" shadow="md" />
              </div>
            ))}
          </div>
        ))}
      </div>

      <style>{`
        @media (max-width: 780px) {
          /* Mobile layout for each recipe:
             Row 1: Ingredient header (full width)
             Row 2: Scene (half width)
             Row 3: Output header (full width)
             Row 4: three picks side-by-side, one per column */
          .ex-models-recipe {
            grid-template-columns: repeat(3, 1fr) !important;
            column-gap: 8px !important;
            row-gap: 12px !important;
          }
          .ex-models-recipe > div:nth-child(1) { grid-column: 1 / -1 !important; grid-row: 1 !important; }
          .ex-models-recipe > div:nth-child(3) { grid-column: 1 / -1 !important; grid-row: 2 !important; max-width: 50% !important; }
          .ex-models-recipe > div:nth-child(2) { grid-column: 1 / -1 !important; grid-row: 3 !important; }
          .ex-models-recipe > div:nth-child(4) { grid-column: 1 / 2 !important; grid-row: 4 !important; }
          .ex-models-recipe > div:nth-child(5) { grid-column: 2 / 3 !important; grid-row: 4 !important; }
          .ex-models-recipe > div:nth-child(6) { grid-column: 3 / 4 !important; grid-row: 4 !important; }
        }
      `}</style>
    </ExSection>
  );
}

Object.assign(window, { ExModels });