// Journey.jsx — From cocoa to keepsake, six chapters
const STEPS = [
  { n: '01', title: 'Selection', body: 'We hand-pick almonds from Mahabaleshwar, cashews from Mangalore, and single-origin cocoa from small Kerala farms. Anything bruised, brittle, or out-of-season is set aside.' },
  { n: '02', title: 'Slow Roasting', body: 'Nuts roast for 22 minutes at low temperature — long enough to bring the oils forward, short enough to keep the snap.' },
  { n: '03', title: 'Tempering', body: 'Cocoa is tempered by hand in copper bowls. The shine you see on every piece comes from this step — no shortcuts, no machines.' },
  { n: '04', title: 'Folding', body: 'We fold whole nuts and cranberries through tempered chocolate at a 1.4 : 1 ratio. More dryfruit than chocolate, by weight, every batch.' },
  { n: '05', title: 'Slow Setting', body: 'Pieces rest overnight in marble moulds at 14°C. The slow set is what gives our truffles their soft yield.' },
  { n: '06', title: 'Packaging', body: 'Every piece is hand-placed into a velvet-lined tray, sleeved in burgundy, and finished with a hand-tied gold ribbon. Then it ships.' }
];

const STEP_IMAGES = [
  'assets/bar-loaded-dryfruits.jpg',
  'assets/bars-textured.jpg',
  'assets/bars-textured.jpg',
  'assets/bar-loaded-dryfruits.jpg',
  'assets/hero-truffles.jpg',
  'assets/box-assorted.jpg'
];

function JourneyStep({ step, idx }) {
  return (
    <div style={{
      flex: '0 0 360px', scrollSnapAlign: 'start',
      background: 'var(--bb-cream)', border: '1px solid var(--line-gold)', borderRadius: 18, overflow: 'hidden',
      display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-1)'
    }}>
      <div style={{ aspectRatio: '4/3', overflow: 'hidden', position: 'relative', background: '#000' }}>
        <img src={STEP_IMAGES[idx]} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'sepia(0.15) saturate(1.1)' }} />
        <div style={{ position: 'absolute', top: 16, left: 18, fontFamily: 'var(--font-script)', fontSize: 64, color: 'var(--bb-gold-light)', lineHeight: 0.8, textShadow: '0 2px 8px rgba(0,0,0,0.4)' }}>{step.n}</div>
      </div>
      <div style={{ padding: '22px 24px 26px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 10, letterSpacing: '0.32em', color: 'var(--bb-gold-deep)' }}>CHAPTER {step.n}</div>
        <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 30, color: 'var(--bb-burgundy-deep)', lineHeight: 1.05 }}>{step.title}</div>
        <p style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 }}>{step.body}</p>
      </div>
    </div>
  );
}

function Journey() {
  return (
    <section id="journey" style={{ background: 'var(--bb-cocoa)', color: 'var(--bb-gold-light)', padding: '96px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.06,
        backgroundImage: 'radial-gradient(rgba(225,200,146,0.6) 1px, transparent 1px)', backgroundSize: '4px 4px' }} />

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px 48px', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.4em', color: 'var(--bb-gold)', marginBottom: 18 }}>✦ &nbsp; HOW WE MAKE IT &nbsp; ✦</div>
            <h2 style={{ fontFamily: 'var(--font-script)', fontSize: 96, color: 'var(--bb-gold-light)', lineHeight: 0.85, margin: 0 }}>From cocoa</h2>
            <h2 style={{ fontFamily: 'var(--font-script)', fontSize: 96, color: 'var(--bb-gold-light)', lineHeight: 0.85, margin: '0 0 0 80px' }}>to keepsake.</h2>
          </div>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 19, lineHeight: 1.5, color: 'rgba(225,200,146,0.75)', maxWidth: 360, margin: 0 }}>
            Six chapters between the bean and the bow. Scroll through →
          </p>
        </div>
      </div>

      <div style={{
        position: 'relative',
        display: 'flex', gap: 22, padding: '0 32px 16px', overflowX: 'auto', scrollSnapType: 'x mandatory',
        maxWidth: 1280 + 64, margin: '0 auto'
      }}>
        {STEPS.map((s, i) => <JourneyStep key={s.n} step={s} idx={i} />)}
      </div>
    </section>
  );
}

window.Journey = Journey;