// Guide.jsx — `man`-page-style brew guides
const Guide = () => {
  const [active, setActive] = React.useState('espresso');

  const guides = {
    espresso: {
      name: 'ESPRESSO', binary: 'espresso(1)', recommends: ['EXPLOIT', 'PERSISTENCE', 'PAYLOAD'],
      summary: 'high-pressure concentrated extraction. 25–30s shot.',
      synopsis: '$ espresso --dose=18g --yield=36g --time=27s --temp=93C',
      ratio: '1 : 2', dose: '18g', yield: '36g', time: '25–30s', temp: '92–94°C', grind: 'FINE',
      steps: [
        { cmd: 'grind beans, dose: 18g (±0.1g)', note: 'fine — should resemble powdered sugar' },
        { cmd: 'distribute + tamp 30lb pressure, level', note: 'no channels.' },
        { cmd: 'lock portafilter, start shot timer', note: '' },
        { cmd: 'pull 36g out in 25–30s', note: 'first drips at 8–10s' },
        { cmd: 'taste. adjust grind ±1 click.', note: 'too fast = grind finer. too slow = coarser.' },
      ],
    },
    pourover: {
      name: 'POUROVER', binary: 'pourover(1)', recommends: ['ZERO-DAY', 'HONEYPOT', 'WIRELESS'],
      summary: 'manual filter brew. clean, bright extraction.',
      synopsis: '$ pourover --dose=22g --water=350g --time=3:30 --temp=96C',
      ratio: '1 : 16', dose: '22g', yield: '350g water', time: '3:00–3:30', temp: '94–96°C', grind: 'MEDIUM',
      steps: [
        { cmd: 'pre-wet filter w/ hot water; discard', note: 'kills paper taste, preheats dripper' },
        { cmd: 'grind 22g, dump into bed, level', note: 'medium — like coarse sand' },
        { cmd: 'bloom: pour 44g water (2x dose), start timer', note: 'wait 30–45s' },
        { cmd: 'pour spirals to 175g by 1:15', note: 'slow, even concentric circles' },
        { cmd: 'final pour to 350g by 2:00', note: 'high agitation if you want more body' },
        { cmd: 'total drawdown by 3:00–3:30', note: 'stalled = grind coarser.' },
      ],
    },
    'french-press': {
      name: 'FRENCH PRESS', binary: 'french-press(1)', recommends: ['BRUTE-FORCE', 'ROOTKIT', 'BACKDOOR'],
      summary: 'full immersion. heavy body. unfiltered oils.',
      synopsis: '$ french-press --dose=60g --water=900g --steep=4:00',
      ratio: '1 : 15', dose: '60g', yield: '900g water', time: '4:00 steep', temp: '95°C', grind: 'COARSE',
      steps: [
        { cmd: 'preheat press w/ hot water; discard', note: '' },
        { cmd: 'grind 60g coarse — like rough sea salt', note: '' },
        { cmd: 'pour 900g water, start timer', note: 'aggressive pour to bloom + saturate' },
        { cmd: 'at 4:00, break crust + skim foam', note: 'optional — cleaner cup' },
        { cmd: 'plunge slowly, decant immediately', note: 'leaving = over-extracted bitterness' },
      ],
    },
    aeropress: {
      name: 'AEROPRESS', binary: 'aeropress(1)', recommends: ['SOCIAL ENGINEER', 'LATERAL MOVE', 'PRIVESC'],
      summary: 'pressure + immersion hybrid. forgiving. fast.',
      synopsis: '$ aeropress --dose=15g --water=220g --time=1:30 --inverted',
      ratio: '1 : 15', dose: '15g', yield: '220g water', time: '1:30', temp: '85°C', grind: 'MEDIUM-FINE',
      steps: [
        { cmd: 'invert; load 15g grounds', note: 'medium-fine — between pourover & espresso' },
        { cmd: 'pour 220g water (85°C)', note: 'lower temp = sweeter, less bitter' },
        { cmd: 'stir 5x; cap with wet filter', note: '' },
        { cmd: 'wait until 1:15', note: '' },
        { cmd: 'flip + press for 20s', note: 'stop on hiss.' },
      ],
    },
    'cold-brew': {
      name: 'COLD BREW', binary: 'cold-brew(1)', recommends: ['EXFIL', 'PAYLOAD', 'PERSISTENCE'],
      summary: 'long-immersion, room temp. low acidity. high caffeine.',
      synopsis: '$ cold-brew --dose=100g --water=1000g --steep=18h',
      ratio: '1 : 10 (concentrate)', dose: '100g', yield: '1L water', time: '12–24h', temp: 'AMBIENT', grind: 'COARSE',
      steps: [
        { cmd: 'grind 100g extra coarse', note: 'like cracked pepper' },
        { cmd: 'combine w/ 1L room-temp water, stir', note: 'every ground must be wet' },
        { cmd: 'cover. leave on counter 12h (or fridge 18–24h)', note: '' },
        { cmd: 'filter twice: mesh, then paper', note: 'patience. don\'t squeeze grounds.' },
        { cmd: 'dilute 1:1 with water or milk to serve', note: 'undiluted = concentrate. lasts 2wks in fridge.' },
      ],
    },
  };
  const list = Object.entries(guides);
  const g = guides[active];

  return (
    <section style={{ padding: '40px 24px 80px', maxWidth: 1280, margin: '0 auto' }}>
      <div style={{ marginBottom: 28 }}>
        <h2 style={{ fontSize: 36, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: 0 }}>{'>'} brew-guide</h2>
        <div style={{ marginTop: 8, fontSize: 13, color: '#BFBFBF', letterSpacing: '0.15em' }}>// runbooks for every method we ship. read them. brew responsibly.</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 28 }}>
        {/* method nav */}
        <aside style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 10 }}>// METHODS</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {list.map(([id, m]) => (
              <button key={id} onClick={() => setActive(id)} style={{
                padding: '12px 14px', textAlign: 'left',
                background: active === id ? '#00FF41' : 'transparent',
                color: active === id ? '#000' : '#E0E0E0',
                border: `1px solid ${active === id ? '#00FF41' : 'rgba(255,255,255,0.22)'}`,
                fontFamily: 'inherit', fontSize: 12, fontWeight: 700, letterSpacing: '0.12em',
                cursor: 'pointer', borderRadius: 2,
              }}>{active === id ? '> ' : '  '}{m.name}</button>
            ))}
          </div>
        </aside>

        {/* manpage */}
        <article>
          {/* header strip */}
          <div style={{ background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.28)', padding: '12px 18px', display: 'flex', alignItems: 'baseline', gap: 14, fontSize: 12, letterSpacing: '0.18em' }}>
            <span style={{ color: '#00FF41' }}>$ man {active}</span>
            <span style={{ color: '#BFBFBF' }}>{g.binary}</span>
            <span style={{ marginLeft: 'auto', color: '#BFBFBF' }}>BREW MANUAL · v4.0.4</span>
          </div>

          {/* title */}
          <div style={{ background: '#000', border: '1px solid rgba(255,255,255,0.28)', borderTop: 'none', padding: '28px 22px' }}>
            <div style={{ fontSize: 11, letterSpacing: '0.25em', color: '#BFBFBF' }}>NAME</div>
            <div style={{ marginTop: 8, fontSize: 32, fontWeight: 800, color: '#FFF', letterSpacing: '0.02em' }}>{g.name}</div>
            <div style={{ marginTop: 8, fontSize: 14, color: '#E0E0E0', lineHeight: 1.6 }}>{g.summary}</div>
          </div>

          {/* synopsis */}
          <Section title="SYNOPSIS">
            <div style={{ padding: 16, background: 'rgba(0,255,65,0.06)', border: '1px solid rgba(0,255,65,0.4)', color: '#00FF41', fontSize: 14, letterSpacing: '0.04em' }}>{g.synopsis}<span style={{ background:'#00FF41', color:'#000', marginLeft:6, padding:'0 4px' }}>_</span></div>
          </Section>

          {/* spec grid */}
          <Section title="PARAMETERS">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(255,255,255,0.28)', border: '1px solid rgba(255,255,255,0.28)' }}>
              {[
                ['RATIO', g.ratio], ['DOSE', g.dose], ['YIELD', g.yield],
                ['TIME', g.time], ['TEMP', g.temp], ['GRIND', g.grind],
              ].map(([k, v]) => (
                <div key={k} style={{ background: '#000', padding: '14px 16px' }}>
                  <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#BFBFBF' }}>{k}</div>
                  <div style={{ marginTop: 6, fontSize: 16, fontWeight: 700, color: '#FFF', letterSpacing: '0.04em' }}>{v}</div>
                </div>
              ))}
            </div>
          </Section>

          {/* steps */}
          <Section title="PROCEDURE">
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {g.steps.map((s, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, padding: 14, background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.22)' }}>
                  <span style={{ color: '#00FF41', fontWeight: 800, fontSize: 14, letterSpacing: '0.08em', minWidth: 28 }}>[{String(i+1).padStart(2,'0')}]</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ color: '#FFFFFF', fontSize: 14, lineHeight: 1.5 }}>$ {s.cmd}</div>
                    {s.note && <div style={{ color: '#BFBFBF', fontSize: 12, marginTop: 4, lineHeight: 1.5 }}>// {s.note}</div>}
                  </div>
                </li>
              ))}
            </ol>
          </Section>

          {/* recommendations */}
          <Section title="SEE ALSO">
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {g.recommends.map((name) => (
                <span key={name} style={{ padding: '8px 14px', border: '1px solid #00FF41', color: '#00FF41', fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', borderRadius: 2 }}>
                  {name}
                </span>
              ))}
            </div>
          </Section>

          {/* footer */}
          <div style={{ marginTop: 24, padding: 14, borderTop: '1px dashed rgba(255,255,255,0.32)', fontSize: 11, color: '#BFBFBF', letterSpacing: '0.18em' }}>
            // page 1/1 · operator brewing co. brew manual v4.0.4 · drink responsibly. pwn responsibly.
          </div>
        </article>
      </div>
    </section>
  );
};

const Section = ({ title, children }) => (
  <div style={{ marginTop: 28 }}>
    <div style={{ fontSize: 11, letterSpacing: '0.25em', color: '#BFBFBF', marginBottom: 12 }}>{title}</div>
    {children}
  </div>
);

window.Guide = Guide;