// MobileGuide.jsx — mobile-optimized brew guide
const MobileGuide = () => {
  const [active, setActive] = React.useState('espresso');
  const [category, setCategory] = React.useState('all');

  const guides = {
    espresso: {
      name: 'ESPRESSO', binary: 'espresso(1)', category: 'base',
      recommends: ['EXPLOIT', 'PERSISTENCE', 'PAYLOAD'],
      summary: 'high-pressure concentrated extraction. 25-30s shot.',
      synopsis: '$ espresso --dose=18g --yield=36g --time=27s',
      ratio: '1 : 2', dose: '18g', yield: '36g', time: '25-30s', temp: '92-94°C', grind: 'FINE',
      steps: [
        { cmd: 'grind beans, dose: 18g', note: 'fine — powdered sugar texture' },
        { cmd: 'distribute + tamp 30lb', note: 'no channels. use WDT tool.' },
        { cmd: 'flush group head, lock portafilter', note: '' },
        { cmd: 'pull 36g in 25-30s', note: 'first drips at 8-10s' },
        { cmd: 'taste. adjust grind.', note: 'sour = finer. bitter = coarser.' },
      ],
      tips: 'good shot = golden crema, balanced flavor, sweet finish. if sour, grind finer. if bitter, grind coarser.',
    },
    pourover: {
      name: 'POUROVER (V60)', binary: 'pourover(1)', category: 'filter',
      recommends: ['ZERO-DAY', 'HONEYPOT', 'WIRELESS'],
      summary: 'manual filter brew. clean, bright extraction.',
      synopsis: '$ pourover --dose=22g --water=350g --time=3:30',
      ratio: '1 : 16', dose: '22g', yield: '350g', time: '3:00-3:30', temp: '94-96°C', grind: 'MEDIUM',
      steps: [
        { cmd: 'pre-wet filter; discard', note: 'kills paper taste' },
        { cmd: 'grind 22g, level bed', note: 'medium — coarse sand' },
        { cmd: 'bloom: 44g water, wait 30-45s', note: 'lets CO2 escape' },
        { cmd: 'pour to 175g by 1:15', note: 'slow concentric circles' },
        { cmd: 'final pour to 350g by 2:00', note: '' },
        { cmd: 'drawdown by 3:00-3:30', note: 'stalled = grind coarser.' },
      ],
      tips: 'water quality matters most here. use filtered water ~150ppm TDS.',
    },
    chemex: {
      name: 'CHEMEX', binary: 'chemex(1)', category: 'filter',
      recommends: ['ZERO-DAY', 'BACKDOOR', 'EXFIL'],
      summary: 'thick filter, clean cup. less body than V60.',
      synopsis: '$ chemex --dose=42g --water=680g --time=4:30',
      ratio: '1 : 16', dose: '42g', yield: '680g', time: '4:00-4:30', temp: '95-96°C', grind: 'MED-COARSE',
      steps: [
        { cmd: 'place filter (3-fold toward spout), rinse', note: 'Chemex filters are thick — rinse well' },
        { cmd: 'grind 42g medium-coarse', note: 'like raw sugar' },
        { cmd: 'bloom: 84g water, stir gently, 45s', note: '' },
        { cmd: 'pour to 340g by 1:30', note: 'keep water 1 inch below rim' },
        { cmd: 'second pour to 680g by 2:30', note: '' },
        { cmd: 'drawdown by 4:00-4:30', note: 'remove filter when dripping slows' },
      ],
      tips: 'Chemex filter is 20-30% thicker than standard, removing more oils. cleaner, tea-like body.',
    },
    'french-press': {
      name: 'FRENCH PRESS', binary: 'french-press(1)', category: 'immersion',
      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', time: '4:00', temp: '95°C', grind: 'COARSE',
      steps: [
        { cmd: 'preheat press; discard', note: '' },
        { cmd: 'grind 60g coarse', note: 'rough sea salt' },
        { cmd: 'pour 900g water', note: 'aggressive pour' },
        { cmd: 'at 4:00, break crust + skim', note: 'Hoffmann method — less sediment' },
        { cmd: 'plunge slowly, decant immediately', note: 'don\'t leave sitting' },
      ],
      tips: 'for cleaner cup, stop plunge above grounds and pour gently.',
    },
    aeropress: {
      name: 'AEROPRESS', binary: 'aeropress(1)', category: 'immersion',
      recommends: ['SOCIAL ENGINEER', 'LATERAL MOVE', 'PRIVESC'],
      summary: 'pressure + immersion hybrid. forgiving. fast.',
      synopsis: '$ aeropress --dose=15g --water=220g --inverted',
      ratio: '1 : 15', dose: '15g', yield: '220g', time: '1:30', temp: '85°C', grind: 'MED-FINE',
      steps: [
        { cmd: 'invert; load 15g grounds', note: 'medium-fine grind' },
        { cmd: 'pour 220g water (85°C)', note: 'lower temp = sweeter' },
        { cmd: 'stir 5x; cap with wet filter', note: '' },
        { cmd: 'wait until 1:15', note: '' },
        { cmd: 'flip + press 20s', note: 'stop on hiss.' },
      ],
      tips: 'most forgiving brewer. try 80°C for light roasts, 95°C for dark.',
    },
    'cold-brew': {
      name: 'COLD BREW', binary: 'cold-brew(1)', category: 'immersion',
      recommends: ['EXFIL', 'PAYLOAD', 'PERSISTENCE'],
      summary: 'long-immersion, cold. low acidity. smooth.',
      synopsis: '$ cold-brew --dose=100g --water=1L --steep=18h',
      ratio: '1 : 10', dose: '100g', yield: '1L', time: '12-24h', temp: 'AMBIENT', grind: 'EXTRA COARSE',
      steps: [
        { cmd: 'grind 100g extra coarse', note: 'cracked pepper' },
        { cmd: 'combine with 1L room-temp water', note: '' },
        { cmd: 'cover. 12h counter / 18-24h fridge', note: '' },
        { cmd: 'filter twice: mesh then paper', note: 'don\'t squeeze.' },
        { cmd: 'dilute 1:1 to serve', note: 'undiluted = concentrate. lasts 2wks.' },
      ],
      tips: 'cold brew extracts ~67% less acid than hot brewing. dark roast = chocolate notes, medium = fruity.',
    },
    'moka-pot': {
      name: 'MOKA POT', binary: 'moka-pot(1)', category: 'base',
      recommends: ['ROOTKIT', 'EXPLOIT', 'LATERAL MOVE'],
      summary: 'stovetop pressure. strong, concentrated.',
      synopsis: '$ moka-pot --dose=20g --water=300ml --heat=medium',
      ratio: '1 : 10', dose: '20g', yield: '~150ml', time: '4-5 min', temp: 'STOVETOP', grind: 'FINE',
      steps: [
        { cmd: 'boil water, fill bottom to valve', note: 'pre-boil prevents cooking grounds' },
        { cmd: 'fill basket with 20g, level off', note: 'do NOT tamp' },
        { cmd: 'assemble (careful, it\'s hot), medium heat', note: '' },
        { cmd: 'listen for gurgling, watch upper chamber', note: 'should take 2-3 min' },
        { cmd: 'remove when flow turns blonde/sputtery', note: 'run cold water on base to stop' },
      ],
      tips: 'not real espresso (1.5 bar vs 9 bar) but closest without a machine. great base for lattes.',
    },
    turkish: {
      name: 'TURKISH', binary: 'turkish(1)', category: 'immersion',
      recommends: ['ZERO-DAY', 'BRUTE-FORCE', 'PERSISTENCE'],
      summary: 'unfiltered, ultra-fine. boiled in cezve. ancient + intense.',
      synopsis: '$ turkish --dose=10g --water=100ml --heat=low',
      ratio: '1 : 10', dose: '10g', yield: '100ml', time: '3-4 min', temp: 'NEAR BOILING', grind: 'POWDER',
      steps: [
        { cmd: 'measure 100ml cold water into cezve', note: 'use demitasse cup to measure' },
        { cmd: 'add 10g powder-fine coffee + sugar', note: 'stir while cold only' },
        { cmd: 'place on LOW heat', note: 'high heat = bitter' },
        { cmd: 'remove when foam rises, before boil', note: 'foam is everything' },
        { cmd: 'pour slowly, foam first', note: 'let grounds settle 1-2 min' },
      ],
      tips: 'requires finer than espresso grind — most home grinders can\'t do it. buy pre-ground.',
    },
    latte: {
      name: 'LATTE', binary: 'latte(1)', category: 'drink',
      recommends: ['EXPLOIT', 'SOCIAL ENGINEER', 'PAYLOAD'],
      summary: 'espresso + steamed milk. smooth, creamy, balanced.',
      synopsis: '$ latte --shots=2 --milk=240ml --foam=thin',
      ratio: '1 : 4', dose: '2 shots', yield: '~300ml', time: '3-4 min', temp: '60-65°C milk', grind: 'FINE',
      steps: [
        { cmd: 'pull double espresso (18g→36g, 27s)', note: 'see: man espresso' },
        { cmd: 'pour 240ml cold whole milk in pitcher', note: 'oat milk = best non-dairy option' },
        { cmd: 'purge steam wand, tip just below surface', note: 'listen for paper-tearing sound' },
        { cmd: 'stretch 3-5s, then submerge deeper', note: 'microfoam — silky, not bubbly' },
        { cmd: 'heat to 60-65°C (barely hold pitcher)', note: 'above 70°C = scalded, no sweetness' },
        { cmd: 'tap, swirl, pour into espresso', note: 'pour low, raise to finish' },
      ],
      tips: 'milk is naturally sweetest at 60-65°C. overheating destroys this. iced: espresso over ice first, then cold milk.',
    },
    cappuccino: {
      name: 'CAPPUCCINO', binary: 'cappuccino(1)', category: 'drink',
      recommends: ['EXPLOIT', 'PRIVESC', 'HONEYPOT'],
      summary: 'espresso + steamed milk + thick foam. 1:1:1 ratio.',
      synopsis: '$ cappuccino --shots=2 --milk=120ml --foam=thick',
      ratio: '1:1:1', dose: '2 shots', yield: '~180ml', time: '3-4 min', temp: '60-65°C milk', grind: 'FINE',
      steps: [
        { cmd: 'pull double espresso', note: 'see: man espresso' },
        { cmd: 'pour 120ml cold whole milk', note: 'less milk than latte' },
        { cmd: 'steam: stretch longer (5-8s air)', note: 'thick, velvety microfoam' },
        { cmd: 'heat to 60-65°C', note: '' },
        { cmd: 'pour with higher foam ratio', note: '1/3 espresso, 1/3 milk, 1/3 foam' },
      ],
      tips: 'traditional Italian: 150-180ml total. much smaller than coffee shop versions. more espresso flavor.',
    },
    americano: {
      name: 'AMERICANO', binary: 'americano(1)', category: 'drink',
      recommends: ['BRUTE-FORCE', 'EXFIL', 'BACKDOOR'],
      summary: 'espresso + hot water. black coffee strength.',
      synopsis: '$ americano --shots=2 --water=200ml',
      ratio: '1 : 3', dose: '2 shots', yield: '~260ml', time: '2 min', temp: '90-95°C water', grind: 'FINE',
      steps: [
        { cmd: 'pull double espresso into mug', note: 'see: man espresso' },
        { cmd: 'heat 200ml water to 90-95°C', note: 'not boiling — scalds crema' },
        { cmd: 'pour hot water over espresso', note: 'preserves some crema on top' },
        { cmd: 'stir gently if desired', note: '' },
      ],
      tips: 'for a "long black": water first, then float espresso on top. preserves full crema. iced: espresso over ice + cold water.',
    },
    'flat-white': {
      name: 'FLAT WHITE', binary: 'flat-white(1)', category: 'drink',
      recommends: ['LATERAL MOVE', 'PRIVESC', 'WIRELESS'],
      summary: 'ristretto + microfoam. stronger than latte, less foam than cap.',
      synopsis: '$ flat-white --shots=2-ristretto --milk=150ml',
      ratio: '1 : 2.5', dose: '2 ristretto', yield: '~200ml', time: '3 min', temp: '60-65°C milk', grind: 'FINE',
      steps: [
        { cmd: 'pull double ristretto (18g→27g, 20-22s)', note: 'shorter, more concentrated' },
        { cmd: 'pour 150ml cold whole milk', note: 'less milk = stronger coffee' },
        { cmd: 'steam with minimal stretch (2-3s air)', note: 'microfoam only — no bubbles' },
        { cmd: 'heat to 60-65°C', note: 'velvet, not frothy' },
        { cmd: 'pour through crema, no flourish', note: '"flat" — thin foam, coffee-forward' },
      ],
      tips: 'from Australia/NZ. key difference from latte: smaller, ristretto base (sweeter), almost no foam dome. use 5-6oz cup.',
    },
  };
  const list = Object.entries(guides);
  const categories = { all: 'ALL', base: 'BASE', filter: 'FILTER', immersion: 'IMMERS.', drink: 'DRINKS' };
  const filteredList = category === 'all' ? list : list.filter(([, g]) => g.category === category);
  const g = guides[active];

  return (
    <section style={{ padding: '24px 16px 60px', maxWidth: 480, margin: '0 auto' }}>
      <div style={{ marginBottom: 20 }}>
        <h2 style={{ fontSize: 24, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: '0 0 6px' }}>{'>'} brew-guide</h2>
        <div style={{ fontSize: 11, color: '#BFBFBF', letterSpacing: '0.12em' }}>// {Object.keys(guides).length} methods indexed. brew responsibly.</div>
      </div>

      {/* Category pills */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 12, overflowX: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 4 }}>
        {Object.entries(categories).map(([id, label]) => (
          <button key={id} onClick={() => { setCategory(id); const first = id === 'all' ? list[0] : list.find(([,g]) => g.category === id); if (first) setActive(first[0]); }} style={{
            padding: '8px 12px', whiteSpace: 'nowrap',
            background: category === id ? '#FFD23F' : 'transparent',
            color: category === id ? '#000' : '#BFBFBF',
            border: '1px solid ' + (category === id ? '#FFD23F' : 'rgba(255,255,255,0.18)'),
            fontFamily: 'inherit', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
            cursor: 'pointer', borderRadius: 2, minHeight: 36,
          }}>{label}</button>
        ))}
      </div>

      {/* Method pills */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 20, overflowX: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 4, flexWrap: 'wrap' }}>
        {filteredList.map(([id, m]) => (
          <button key={id} onClick={() => setActive(id)} style={{
            padding: '10px 14px', whiteSpace: 'nowrap',
            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: 11, fontWeight: 700, letterSpacing: '0.1em',
            cursor: 'pointer', borderRadius: 2, minHeight: 44,
          }}>{m.name}</button>
        ))}
      </div>

      {/* Header strip */}
      <div style={{ background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.28)', padding: '10px 14px', fontSize: 11, letterSpacing: '0.15em' }}>
        <span style={{ color: '#00FF41' }}>$ man {active}</span>
        <span style={{ color: '#BFBFBF', marginLeft: 10 }}>{g.binary}</span>
      </div>

      {/* Title + summary */}
      <div style={{ background: '#000', border: '1px solid rgba(255,255,255,0.28)', borderTop: 'none', padding: '20px 14px' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#BFBFBF', marginBottom: 6 }}>NAME</div>
        <div style={{ fontSize: 24, fontWeight: 800, color: '#FFF', letterSpacing: '0.02em' }}>{g.name}</div>
        <div style={{ marginTop: 6, fontSize: 13, color: '#E0E0E0', lineHeight: 1.6 }}>{g.summary}</div>
      </div>

      {/* Synopsis */}
      <MSection title="SYNOPSIS">
        <div style={{ padding: 12, background: 'rgba(0,255,65,0.06)', border: '1px solid rgba(0,255,65,0.4)', color: '#00FF41', fontSize: 12, letterSpacing: '0.04em', wordBreak: 'break-all' }}>
          {g.synopsis}<span style={{ background: '#00FF41', color: '#000', marginLeft: 4, padding: '0 3px' }}>_</span>
        </div>
      </MSection>

      {/* Parameters — 2x3 grid */}
      <MSection title="PARAMETERS">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 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: '10px 12px' }}>
              <div style={{ fontSize: 9, letterSpacing: '0.25em', color: '#BFBFBF' }}>{k}</div>
              <div style={{ marginTop: 4, fontSize: 14, fontWeight: 700, color: '#FFF', letterSpacing: '0.04em' }}>{v}</div>
            </div>
          ))}
        </div>
      </MSection>

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

      {/* Tips */}
      {g.tips && (
        <MSection title="NOTES">
          <div style={{ padding: '12px 14px', background: 'rgba(255,210,63,0.04)', border: '1px solid rgba(255,210,63,0.3)', color: '#FFD23F', fontSize: 12, lineHeight: 1.7 }}>
            // {g.tips}
          </div>
        </MSection>
      )}

      {/* Recommendations */}
      <MSection title="SEE ALSO">
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {g.recommends.map((name) => (
            <span key={name} style={{ padding: '6px 12px', border: '1px solid #00FF41', color: '#00FF41', fontSize: 10, fontWeight: 700, letterSpacing: '0.15em', borderRadius: 2 }}>
              {name}
            </span>
          ))}
        </div>
      </MSection>

      <div style={{ marginTop: 20, paddingTop: 12, borderTop: '1px dashed rgba(255,255,255,0.32)', fontSize: 10, color: '#BFBFBF', letterSpacing: '0.15em' }}>
        // brew manual v4.1.0 · {Object.keys(guides).length} methods
      </div>
    </section>
  );
};

const MSection = ({ title, children }) => (
  <div style={{ marginTop: 20 }}>
    <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#BFBFBF', marginBottom: 10 }}>{title}</div>
    {children}
  </div>
);

window.MobileGuide = MobileGuide;