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

function ExPlacements() {
  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"
    >
      {/* Spread A — pendant on the model */}
      <div>
        <ExSpreadHead
          eyebrow="Spread A"
          title="A pendant."
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output"
          items={[
            { src: 'assets/jewelry-original.jpg', label: 'Portrait', note: 'AI Image from The Vault Stock.' },
            { src: 'assets/jewelry-product.jpg', label: 'Pendant', note: 'Flat product render.', tone: 'neutral' },
          ]}
        >
          <ExFrame
            src="assets/jewelry-output.jpg"
            alt="Generated portrait wearing the pendant"
            ratio="3/4"
            shadow="lg"
          />
        </ExIngredients>
      </div>

      {/* Spread B — perfume on vanity */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread B"
          title="A perfume."
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output"
          items={[
            { src: 'assets/byredo-original.jpg', label: 'Vanity scene', note: 'Authentic photograph from The Vault Stock.' },
            { src: 'assets/byredo-product.jpg', label: 'Perfume', note: 'Flat product render.', tone: 'neutral' },
          ]}
        >
          <ExFrame
            src="assets/byredo-output.jpg"
            alt="Perfume placed on the vanity"
            ratio="3/4"
            shadow="lg"
          />
        </ExIngredients>
      </div>

      {/* Spread C — face oil on tray, same vanity */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread C"
          title="A face oil."
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output"
          items={[
            { src: 'assets/summerfridays-original.jpg', label: 'Tray scene', note: 'Authentic photograph from The Vault Stock.' },
            { src: 'assets/summerfridays-product.jpg', label: 'Face oil', note: 'Flat product render.', tone: 'neutral' },
          ]}
        >
          <ExFrame
            src="assets/summerfridays-output.jpg"
            alt="Face oil placed on the silver tray"
            ratio="3/4"
            shadow="lg"
          />
        </ExIngredients>
      </div>
    </ExSection>
  );
}

Object.assign(window, { ExPlacements });