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

function ExOutfits() {
  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"
    >
      {/* Spread A — sandstone slope */}
      <div>
        <ExSpreadHead
          eyebrow="Spread A"
          title="The Full Outfit."
          tone="deep"
        />
        <ExIngredients
          tone="deep"
          outputLabel="Output"
          items={[
            { src: 'assets/sporty-original.jpg', label: 'Scene', note: 'Authentic photograph from The Vault Stock.' },
            { src: 'assets/sporty-outfit-ref.jpg', label: 'Wardrobe', note: 'Flat lookbook reference.', tone: 'neutral' },
          ]}
        >
          <ExFrame
            src="assets/sporty-output.jpg"
            alt="Re-dressed in tennis sweater + pleated skirt"
            ratio="3/4"
            shadow="lg"
          />
        </ExIngredients>
      </div>

      {/* Spread B — same desert, three looks */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread B · one scene, three looks"
          title="Same Same,  but different."
          tone="deep"
        />
        <ExIngredients
          tone="deep"
          outputLabel="Output · 3 frames"
          items={[
            { src: 'assets/ysl-vault-scene.jpg', label: 'Scene', note: 'AI Image from The Vault Stock' },
            { src: 'assets/ysl-outfit-ref.jpg', label: 'Wardrobe', note: 'Flat lookbook reference.', tone: 'neutral' },
          ]}
        >
          <div className="ex-out-trip" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10,
          }}>
            <ExFrame src="assets/ysl-output-1.jpg" alt="Look 1" ratio="3/4" shadow="md" />
            <ExFrame src="assets/ysl-output-2.jpg" alt="Look 2" ratio="3/4" shadow="md" />
            <ExFrame src="assets/ysl-output-3.jpg" alt="Look 3" ratio="3/4" shadow="md" />
          </div>
        </ExIngredients>
      </div>

      {/* Spread C — interior */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread C"
          title="The scene, re-dressed."
          tone="deep"
        />
        <ExIngredients
          tone="deep"
          outputLabel="Output"
          items={[
            { src: 'assets/volvo-original.jpg', label: 'Scene', note: 'Authentic photograph from The Vault Stock.' },
            { src: 'assets/volvo-outfit.jpg', label: 'Wardrobe', note: 'Flat lookbook reference.', tone: 'neutral' },
          ]}
        >
          <ExFrame
            src="assets/volvo-output.jpg"
            alt="Re-dressed in the interior"
            ratio="3/4"
            shadow="lg"
          />
        </ExIngredients>
      </div>

      {/* Spread D — laptop walk */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread D"
          title="Your Brand, Our Scene."
          tone="deep"
        />
        <ExIngredients
          tone="deep"
          outputLabel="Output"
          items={[
            { src: 'assets/laptop-original.jpg', label: 'Scene', note: 'Authentic photograph from The Vault Stock.' },
            { src: 'assets/laptop-output.jpg', label: 'Wardrobe', note: 'Flat lookbook reference.', tone: 'neutral' },
          ]}
        >
          <ExFrame
            src="assets/laptop-outfit-ref.jpg"
            alt="Generated walk in the brown two-piece"
            ratio="3/4"
            shadow="lg"
          />
        </ExIngredients>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .ex-out-trip { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </ExSection>
  );
}

Object.assign(window, { ExOutfits });