// Chapter IV — Presets.
// One scene + a preset = a sheet of variations. Cocoa section.
// The preset is identified in the eyebrow ("Preset · Variation Image") and
// in a small tag above the output. Ingredient column shows ONLY the source.

function PresetTag({ name }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '6px 12px',
      border: '1px dashed rgba(242,236,228,0.42)',
      background: 'rgba(242,236,228,0.04)',
      marginBottom: 16,
    }}>
      <span style={{
        fontFamily: '"La Villa", sans-serif',
        fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'rgba(242,236,228,0.62)', fontWeight: 500,
      }}>Preset</span>
      <span style={{
        width: 1, height: 10, background: 'rgba(242,236,228,0.32)',
      }} />
      <span style={{
        fontFamily: '"La Villa", sans-serif',
        fontSize: 12, letterSpacing: '0.05em',
        color: 'var(--cream)', fontWeight: 500,
      }}>{name}</span>
    </div>
  );
}

function ExPresets() {
  return (
    <ExSection
      id="presets"
      chapter="Chapter IV · Presets"
      title={<>Presets, <br />applied properly.</>}
      kicker={<>Pick a background and a single preset, that's enough.<br />Product Studio gives back a range of variations that all read like the same shoot.</>}
      tone="cocoa"
    >
      {/* Spread A — wet hair · Variation Image */}
      <div>
        <ExSpreadHead
          eyebrow="Spread A · Preset: Variation Image"
          title="One image. Four ways."
          tone="cocoa"
        />
        <ExIngredients
          tone="cocoa"
          outputLabel="Output · 4 frames"
          items={[
            { src: 'assets/wet-hair-original.jpg', label: 'Source', note: 'Your image, or ours.' },
          ]}
        >
          <PresetTag name="Variation Image" />
          <div className="ex-pre-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10,
          }}>
            {[1,2,3,4].map(n => (
              <ExFrame key={n} src={`assets/wet-hair-var-${n}.jpg`} alt={`Variation ${n}`} ratio="3/4" shadow="md" />
            ))}
          </div>
        </ExIngredients>
      </div>

      {/* Spread B — cowgirl · Variation Image */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread B · Preset: Variation Image"
          title="Same shoot, different position."
          tone="cocoa"
        />
        <ExIngredients
          tone="cocoa"
          outputLabel="Output · 4 frames"
          items={[
            { src: 'assets/cowgirl-original.jpg', label: 'Source', note: 'Authentic image from The Vault Stock.' },
          ]}
        >
          <PresetTag name="Variation Image" />
          <div className="ex-pre-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10,
          }}>
            {[1,2,3,4].map(n => (
              <ExFrame key={n} src={`assets/cowgirl-var-${n}.jpg`} alt={`Variation ${n}`} ratio="3/4" shadow="md" />
            ))}
          </div>
        </ExIngredients>
      </div>

      {/* Spread C — coconut · BTS */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread C · Preset: BTS"
          title="Behind the shoot, generated."
          tone="cocoa"
        />
        <ExIngredients
          tone="cocoa"
          outputLabel="Output · 4 frames"
          items={[
            { src: 'assets/coconut-original.jpg', label: 'Source', note: 'Authentic image from The Vault Stock - or use your own.' },
          ]}
        >
          <PresetTag name="BTS" />
          <div className="ex-pre-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10,
          }}>
            {[1,2,3,4].map(n => (
              <ExFrame key={n} src={`assets/coconut-bts-${n}.jpg`} alt={`BTS ${n}`} ratio="3/4" shadow="md" />
            ))}
          </div>
        </ExIngredients>
      </div>

      <style>{`
        @media (max-width: 560px) {
          .ex-pre-grid { gap: 8px !important; }
        }
      `}</style>
    </ExSection>
  );
}

Object.assign(window, { ExPresets });