// Chapter V — Details and flat lays.
// Each spread is a named preset. Tag the preset, name it in the eyebrow.

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

function ExDetails() {
  return (
    <ExSection
      id="details"
      chapter="Chapter V · Details and flat lays"
      title="One detail, many frames."
      kicker="A single source can be re-photographed without leaving the room. Product Studio gives back tighter crops, alternate angles, negative space for type, all with easy to use presets."
      tone="cream"
    >
      {/* Spread A — Rose */}
      <div>
        <ExSpreadHead
          eyebrow="Spread A · Preset: Negative Space"
          title="Need more space for your text?"
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output · 2 frames"
          items={[
            { src: 'assets/rose-original.jpg', label: 'Source', note: 'One photograph. Yours or ours.' },
          ]}
        >
          <PresetTagCream name="Negative Space" />
          <div className="ex-det-2" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
          }}>
            <ExFrame src="assets/rose-negspace-1.jpg" alt="Rose with negative space, frame 1" ratio="3/4" shadow="md" />
            <ExFrame src="assets/rose-negspace-2.jpg" alt="Rose with negative space, frame 2" ratio="3/4" shadow="md" />
          </div>
        </ExIngredients>
      </div>

      {/* Spread B — Towel */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread B · Preset: Tighter Crop"
          title="The texture, zoomed."
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output · 2 frames"
          items={[
            { src: 'assets/towel-original.jpg', label: 'Source', note: 'Authentic image from The Vault Stock.' },
          ]}
        >
          <PresetTagCream name="Tighter Crop" />
          <div className="ex-det-2" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
          }}>
            <ExFrame src="assets/towel-detail-1.jpg" alt="Towel detail 1" ratio="3/4" shadow="md" />
            <ExFrame src="assets/towel-detail-2.jpg" alt="Towel detail 2" ratio="3/4" shadow="md" />
          </div>
        </ExIngredients>
      </div>

      {/* Spread C — Sea knit */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread C · Preset: Close Detail"
          title="Capture the detail."
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output · 2 frames"
          items={[
            { src: 'assets/seaknit-original.jpg', label: 'Source', note: 'Use your own or try our images.' },
          ]}
        >
          <PresetTagCream name="Close Detail" />
          <div className="ex-det-2" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12,
          }}>
            <ExFrame src="assets/seaknit-detail-1.jpg" alt="Sea knit detail 1" ratio="3/4" shadow="md" />
            <ExFrame src="assets/seaknit-detail-2.jpg" alt="Sea knit detail 2" ratio="3/4" shadow="md" />
          </div>
        </ExIngredients>
      </div>

      {/* Spread D — Rhode flat lay */}
      <div style={{ marginTop: 140 }}>
        <ExSpreadHead
          eyebrow="Spread D · Preset: Flat Lay"
          title="One flat lay, four arrangements."
          tone="cream"
        />
        <ExIngredients
          tone="cream"
          outputLabel="Output · 4 frames"
          items={[
            { src: 'assets/rhode-original.jpg', label: 'Source', note: 'Authentic image from The Vault Stock - try your own.' },
          ]}
        >
          <PresetTagCream name="Flat Lay" />
          <div className="ex-det-4" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10,
          }}>
            {[1,2,3,4].map(n => (
              <ExFrame key={n} src={`assets/rhode-flatlay-${n}.jpg`} alt={`Flat lay ${n}`} ratio="3/4" shadow="md" />
            ))}
          </div>
        </ExIngredients>
      </div>

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

Object.assign(window, { ExDetails });