const BREWS = [
  {
    id: 'v60',
    index: '01',
    name: 'V60',
    subtitle: 'Pour Over',
    ratio: '1 : 15',
    temp: '93°C',
    grind: 'Medium-Fine',
    time: '3:00',
    yield: '225ml',
    bean: 'WANOJA',
    beanSub: 'Jasmine notes unfurl under a gentle spiral pour.',
    steps: [
      { time: '0:00', act: 'Rinse filter, preheat dripper and vessel. Discard rinse water.' },
      { time: '0:00', act: 'Dose 15g of freshly ground coffee. Level the bed.' },
      { time: '0:30', act: 'Bloom — pour 45ml in a slow centre spiral. Wait 30 seconds for outgassing.' },
      { time: '1:00', act: 'First pour — bring total to 150ml in a steady outward spiral over 20 seconds.' },
      { time: '1:45', act: 'Second pour — bring total to 225ml. Do not agitate.' },
      { time: '3:00', act: 'Full drawdown. Remove dripper. Serve immediately.' },
    ],
  },
  {
    id: 'frenchpress',
    index: '02',
    name: 'French Press',
    subtitle: 'Full Immersion',
    ratio: '1 : 12',
    temp: '96°C',
    grind: 'Coarse',
    time: '4:30',
    yield: '300ml',
    bean: 'GOWA',
    beanSub: 'The natural process rewards immersion — dark chocolate amplified, texture thick.',
    steps: [
      { time: '0:00', act: 'Dose 25g of coarsely ground coffee into a preheated press.' },
      { time: '0:00', act: 'Bloom — pour 50ml, stir once to saturate all grounds.' },
      { time: '0:30', act: 'Pour remaining water to 300ml. Place lid, plunger up. Do not press.' },
      { time: '4:00', act: 'After 4 minutes, skim the surface crust with a spoon. Do not press yet.' },
      { time: '4:15', act: 'Press the plunger slowly and deliberately over 15 seconds.' },
      { time: '4:30', act: 'Pour immediately. Never let it sit — bitterness compounds fast.' },
    ],
  },
  {
    id: 'aeropress',
    index: '03',
    name: 'AeroPress',
    subtitle: 'Inverted Method',
    ratio: '1 : 13',
    temp: '88°C',
    grind: 'Medium',
    time: '2:00',
    yield: '220ml',
    bean: 'KENYA AA',
    beanSub: 'Lower temperature tames acidity. Blackcurrant arrives clean and precise.',
    steps: [
      { time: '0:00', act: 'Assemble inverted. Rinse paper filter. Dose 17g of coffee.' },
      { time: '0:15', act: 'Pour to 220ml in one steady fill. Ensure all grounds are saturated.' },
      { time: '0:30', act: 'Stir 10 times with paddle. Replace filter cap — do not flip yet.' },
      { time: '1:00', act: 'Flip carefully onto your cup. Begin pressing slowly.' },
      { time: '1:30', act: 'Stop pressing when you hear the first hiss of air. Do not force.' },
      { time: '2:00', act: 'Dilute to taste if desired. Serve immediately.' },
    ],
  },
  {
    id: 'coldbrew',
    index: '04',
    name: 'Cold Brew',
    subtitle: '12–18 Hour Steep',
    ratio: '1 : 8',
    temp: '4°C',
    grind: 'Extra Coarse',
    time: '15h',
    yield: '400ml',
    bean: 'PANAMA GEISHA',
    beanSub: 'Time replaces heat. Elderflower and white peach emerge unhurried over fifteen hours.',
    steps: [
      { time: '0:00', act: 'Dose 50g of extra-coarse ground coffee into a clean jar or pitcher.' },
      { time: '0:00', act: 'Pour 400ml of cold, filtered water. Stir thoroughly to saturate all grounds.' },
      { time: '0:05', act: 'Cover tightly. Place in refrigerator.' },
      { time: '12h+', act: 'Steep for 12–18 hours. Longer steep = heavier body, less brightness.' },
      { time: 'After', act: 'Strain through a fine-mesh sieve, then once more through a paper filter.' },
      { time: 'Ready', act: 'Serve over ice. Dilute 1:1 with cold water if drinking straight. Keeps 10 days.' },
    ],
  },
];

function BrewCard({ brew, index, coffees }) {
  const [open, setOpen] = React.useState(false);
  const recBean = coffees.find(c => c.name === brew.bean);

  return (
    <div style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>

      {/* Header row — click to expand */}
      <div
        onClick={() => setOpen(o => !o)}
        style={{
          padding: '40px 48px',
          cursor: 'crosshair',
          display: 'grid',
          gridTemplateColumns: '56px 1fr auto',
          alignItems: 'center', gap: 32,
          transition: 'background 0.18s',
          background: open ? 'rgba(255,255,255,0.04)' : 'transparent',
        }}
        onMouseEnter={e => { if (!open) e.currentTarget.style.background = 'rgba(255,255,255,0.025)'; }}
        onMouseLeave={e => { if (!open) e.currentTarget.style.background = 'transparent'; }}
      >
        <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.28)' }}>{brew.index}</span>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 18 }}>
            <h2 style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 900, color: '#ffffff', letterSpacing: '-0.01em', lineHeight: 1 }}>{brew.name}</h2>
            <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.38)', textTransform: 'uppercase' }}>{brew.subtitle}</span>
          </div>
        </div>
        {/* Stats row */}
        <div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
          {[['Ratio', brew.ratio], ['Temp', brew.temp], ['Time', brew.time]].map(([k, v]) => (
            <div key={k} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 18, fontWeight: 700, color: '#ffffff' }}>{v}</div>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.3)', marginTop: 3 }}>{k}</div>
            </div>
          ))}
          <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 13, color: open ? '#ffffff' : 'rgba(255,255,255,0.35)', transition: 'transform 0.3s, color 0.2s', transform: open ? 'rotate(90deg)' : 'rotate(0deg)', marginLeft: 8 }}>→</div>
        </div>
      </div>

      {/* Expanded content */}
      <div style={{
        maxHeight: open ? '800px' : '0px',
        overflow: 'hidden',
        transition: 'max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <div style={{ padding: '0 48px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>

          {/* Steps */}
          <div>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.28em', color: 'rgba(255,255,255,0.28)', marginBottom: 24, textTransform: 'uppercase' }}>Steps</div>
            {brew.steps.map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 16, marginBottom: 20 }}>
                <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.35)', paddingTop: 2, letterSpacing: '0.08em' }}>{s.time}</div>
                <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 1.8, color: 'rgba(255,255,255,0.7)', borderLeft: '1px solid rgba(255,255,255,0.1)', paddingLeft: 16 }}>
                  <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 14, fontWeight: 700, color: '#ffffff', marginRight: 8 }}>{String(i + 1).padStart(2, '0')}.</span>
                  {s.act}
                </div>
              </div>
            ))}
          </div>

          {/* Specs + Bean rec */}
          <div>
            <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.28em', color: 'rgba(255,255,255,0.28)', marginBottom: 24, textTransform: 'uppercase' }}>Specs</div>

            {/* Big stats */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 40 }}>
              {[['Dose', '15–25g'], ['Yield', brew.yield], ['Grind', brew.grind], ['Vessel', brew.subtitle]].map(([k, v]) => (
                <div key={k} style={{ borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 14 }}>
                  <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.3)', marginBottom: 6, textTransform: 'uppercase' }}>{k}</div>
                  <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 20, fontWeight: 700, color: '#ffffff' }}>{v}</div>
                </div>
              ))}
            </div>

            {/* Bean recommendation */}
            <div style={{ border: '1px solid rgba(255,255,255,0.1)', padding: '24px' }}>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.25em', color: 'rgba(255,255,255,0.3)', marginBottom: 12, textTransform: 'uppercase' }}>Recommended Origin</div>
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 24, fontWeight: 900, color: '#ffffff', marginBottom: 6 }}>{brew.bean}</div>
              {recBean && (
                <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.12em', color: 'rgba(255,255,255,0.4)', marginBottom: 12, textTransform: 'uppercase' }}>
                  {recBean.notes.join(' · ')}
                </div>
              )}
              <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 1.9, color: 'rgba(255,255,255,0.5)', fontStyle: 'italic' }}>
                "{brew.beanSub}"
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function RitualPage({ coffees }) {
  return (
    <div style={{ paddingTop: 80 }}>

      {/* Header */}
      <div style={{ padding: '80px 48px 60px', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, letterSpacing: '0.32em', color: 'rgba(255,255,255,0.28)', marginBottom: 18, textTransform: 'uppercase' }}>Brewing Ritual</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'end' }}>
          <h1 style={{
            fontFamily: "'Montserrat', sans-serif",
            fontSize: 'clamp(44px, 6vw, 80px)',
            fontWeight: 900, lineHeight: 1,
            letterSpacing: '-0.02em', color: '#ffffff', margin: 0,
          }}>
            <span className="reveal-line"><span className="reveal-line-inner" style={{ animationDelay: '0.05s' }}>The</span></span>
            <span className="reveal-line"><span className="reveal-line-inner" style={{ animationDelay: '0.18s' }}><em style={{ fontStyle: 'italic' }}>Ritual</em></span></span>
          </h1>
          <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.45)', borderLeft: '2px solid rgba(255,255,255,0.12)', paddingLeft: 24 }}>
            Brewing is not a convenience. It is a conversation between
            water, heat, and the memory of altitude. Below are four
            methods — each one tuned to a specific origin in our catalog.
            Follow them precisely once, then adapt them to your own silence.
          </p>
        </div>
      </div>

      {/* Brew cards */}
      <div>
        {BREWS.map((brew, i) => (
          <BrewCard key={brew.id} brew={brew} index={i} coffees={coffees} />
        ))}
      </div>

      {/* Footer note */}
      <div style={{ padding: '64px 48px', borderTop: '1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ maxWidth: 560, borderLeft: '2px solid rgba(255,255,255,0.15)', paddingLeft: 24 }}>
          <p style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, lineHeight: 2, color: 'rgba(255,255,255,0.4)' }}>
            It is better to consume our roasted coffee 10–28 days after the roast date. This allows CO₂ to dissipate and the flavour to settle into itself. Grinding immediately before brewing is not optional — it is the whole point.
          </p>
        </div>
      </div>

    </div>
  );
}

Object.assign(window, { RitualPage });
