// Chapter VI — Story Series.
// One source frame + the Story Scenes preset = four moments from the same room.

function StoryPresetTag() {
  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,
      }}>Story Scenes</span>
    </div>
  );
}

function ExStory() {
  return (
    <ExSection
      id="story"
      chapter="Chapter VI · Story Series"
      title="A morning in Cinque Terre."
      kicker={<>One source frame plus the Story Scenes preset.<br />Product Studio holds the room and lets the model move through four moments. Same suite, same light, same wardrobe.</>}
      tone="cream"
    >
      <ExSpreadHead
        eyebrow="Preset: Story Scenes"
        title="One frame, a whole morning."
        tone="cream"
      />
      <ExIngredients
        tone="cream"
        outputLabel="Output · 4 frames"
        items={[
          {
            src: 'assets/story-original.jpg',
            label: 'Source frame',
            note: 'One photograph.',
          },
        ]}
      >
        <StoryPresetTag />
        <div className="ex-story-strip" style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12,
        }}>
          {[1,2,3,4].map(n => (
            <ExFrame
              key={n}
              src={`assets/story-sheet-${n}.jpg`}
              alt={`Cinque Terre frame ${n}`}
              ratio="3/4"
              shadow="md"
            />
          ))}
        </div>
      </ExIngredients>

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

Object.assign(window, { ExStory });