// Chapter II — Product placement.
// A flat product mock placed into a real photograph.
// Layout: ingredients (scene + product) → big hero output → variation grid.

function ExProductPlacement() {
  return (
    <ExSection
      id="product-placement"
      chapter="Chapter I · Product placement"
      title={<>Place a product. Into a real scene.</>}
      kicker={<>The original photograph is authentic from the Vault Stock Library.<br />The product is a flat e-commerce image. Product Studio puts one inside the other and matches the light, the angle, the grain.</>}
      tone="deep">
      
      {/* Ingredients → big hero output */}
      <ExIngredients
        tone="deep"
        outputLabel="Output"
        items={[
        { src: 'assets/marlboro-original.jpg', label: 'Scene', note: 'Authentic Vault photograph.' },
        { src: 'assets/marlboro-product.jpg', label: 'Product', note: 'Flat product render.', tone: 'neutral' }]
        }>
        
        <ExFrame
          src="assets/marlboro-output.jpg"
          alt="The same scene with the cigarette pack placed in"
          ratio="3/4"
          shadow="lg" />
        
      </ExIngredients>

      {/* Variation grid */}
      <div style={{ marginTop: 96 }}>
        <ExSpreadHead
          eyebrow="Eight variations · same feel."
          title="Then turn it into whole campaign in a couple of clicks with Product Studio image presets."
          tone="deep" />
        
        <div className="ex-mb-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12
        }}>
          {[1, 2, 3, 4, 5, 6, 7, 8].map((n) =>
          <ExFrame
            key={n}
            src={`assets/marlboro-var-${n}.jpg`}
            alt={`Variation ${n}`}
            ratio="3/4"
            shadow="md" />

          )}
        </div>
        <div style={{
          marginTop: 16,
          fontFamily: '"La Villa", sans-serif',
          fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
          color: 'var(--fg-2)', fontWeight: 500
        }}>OUTPUT 

        </div>
      </div>

      <style>{`
        @media (max-width: 1000px) {
          .ex-mb-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 700px) {
          .ex-mb-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </ExSection>);

}

Object.assign(window, { ExProductPlacement });