// Guide.jsx — `man`-page-style brew guides
const Guide = () => {
  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. the foundation of most drinks.',
      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',
      equipment: 'espresso machine, grinder, tamper, scale, shot glass',
      steps: [
        { cmd: 'grind beans, dose: 18g (±0.1g)', note: 'fine — should resemble powdered sugar' },
        { cmd: 'distribute + tamp 30lb pressure, level', note: 'no channels. WDT tool helps.' },
        { cmd: 'lock portafilter, start shot timer', note: 'flush group head first (2–3s)' },
        { 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.' },
      ],
      tips: 'a good shot should have a golden-brown crema, taste balanced (not sour, not bitter), and finish sweet. if it\'s sour, grind finer or increase dose. if bitter, grind coarser or decrease dose.',
    },
    pourover: {
      name: 'POUROVER (V60)', binary: 'pourover(1)', category: 'filter',
      recommends: ['ZERO-DAY', 'HONEYPOT', 'WIRELESS'],
      summary: 'manual filter brew. clean, bright extraction. showcases origin character.',
      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',
      equipment: 'V60 dripper, paper filter, gooseneck kettle, scale, timer',
      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 for CO2 to escape' },
        { cmd: 'pour spirals to 175g by 1:15', note: 'slow, even concentric circles — don\'t hit the walls' },
        { 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. fast = finer.' },
      ],
      tips: 'water quality matters here more than any other method. use filtered water with ~150ppm TDS. kettle temp: boiling water drops to ~96°C by the time it hits the bed.',
    },
    chemex: {
      name: 'CHEMEX', binary: 'chemex(1)', category: 'filter',
      recommends: ['ZERO-DAY', 'BACKDOOR', 'EXFIL'],
      summary: 'thick filter, clean cup. lower body than V60. excellent for light roasts.',
      synopsis: '$ chemex --dose=42g --water=680g --time=4:30 --temp=96C',
      ratio: '1 : 16', dose: '42g', yield: '680g water', time: '4:00–4:30', temp: '95–96°C', grind: 'MEDIUM-COARSE',
      equipment: 'Chemex brewer, Chemex bonded filters, gooseneck kettle, scale, timer',
      steps: [
        { cmd: 'place filter (3-fold side toward spout)', note: 'rinse thoroughly — these filters are thick' },
        { cmd: 'grind 42g medium-coarse', note: 'slightly coarser than V60 — like raw sugar' },
        { cmd: 'bloom: pour 84g water, stir gently', note: 'wait 45s. the thick filter slows everything.' },
        { cmd: 'pour to 340g in slow spirals by 1:30', note: 'keep the water level 1 inch below the rim' },
        { cmd: 'second pour to 680g by 2:30', note: 'maintain consistent flow rate' },
        { cmd: 'total drawdown by 4:00–4:30', note: 'remove filter once dripping slows — don\'t over-extract' },
      ],
      tips: 'the Chemex filter is 20–30% thicker than standard, removing more oils and fine particles. this gives a cleaner, tea-like body. for more body, try the half-moon filter instead.',
    },
    'french-press': {
      name: 'FRENCH PRESS', binary: 'french-press(1)', category: 'immersion',
      recommends: ['BRUTE-FORCE', 'ROOTKIT', 'BACKDOOR'],
      summary: 'full immersion. heavy body. unfiltered oils. no paper, no waste.',
      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',
      equipment: 'French press, kettle, scale, timer, spoon',
      steps: [
        { cmd: 'preheat press w/ hot water; discard', note: 'keeps slurry temp stable' },
        { cmd: 'grind 60g coarse — like rough sea salt', note: 'too fine = muddy + over-extracted' },
        { cmd: 'pour 900g water, start timer', note: 'aggressive pour to bloom + saturate all grounds' },
        { cmd: 'at 4:00, break crust + skim foam', note: 'James Hoffmann method — reduces sediment' },
        { cmd: 'plunge slowly, decant immediately', note: 'leaving grounds in contact = over-extraction' },
      ],
      tips: 'for a cleaner cup, don\'t plunge all the way — stop just above the grounds, and pour gently. the mesh filter lets oils through, giving French press its characteristic heavy body.',
    },
    aeropress: {
      name: 'AEROPRESS', binary: 'aeropress(1)', category: 'immersion',
      recommends: ['SOCIAL ENGINEER', 'LATERAL MOVE', 'PRIVESC'],
      summary: 'pressure + immersion hybrid. forgiving. fast. infinitely hackable.',
      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',
      equipment: 'AeroPress, paper or metal filter, kettle, scale, timer, stirrer',
      steps: [
        { cmd: 'invert; load 15g grounds', note: 'medium-fine — between pourover & espresso' },
        { cmd: 'pour 220g water (85°C)', note: 'lower temp = sweeter, less bitter for lighter roasts' },
        { cmd: 'stir 5x; cap with wet filter', note: 'seal creates a vacuum — no dripping' },
        { cmd: 'wait until 1:15', note: 'full immersion phase' },
        { cmd: 'flip + press for 20s', note: 'stop on hiss. pressing too hard adds bitterness.' },
      ],
      tips: 'the AeroPress is the most forgiving brewer. experiment freely: try 80°C water for fruity light roasts, or 95°C for dark roasts. metal filter lets oils through like French press.',
    },
    'cold-brew': {
      name: 'COLD BREW', binary: 'cold-brew(1)', category: 'immersion',
      recommends: ['EXFIL', 'PAYLOAD', 'PERSISTENCE'],
      summary: 'long-immersion, cold or room temp. low acidity. smooth. 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 / FRIDGE', grind: 'EXTRA COARSE',
      equipment: 'jar or pitcher, fine mesh strainer, paper filter, scale',
      steps: [
        { cmd: 'grind 100g extra coarse', note: 'like cracked pepper — coarser than French press' },
        { 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: 'fridge = slower, slightly cleaner flavor' },
        { 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.' },
      ],
      tips: 'cold brew extracts ~67% less acid than hot brewing. use a dark roast for chocolate/caramel notes, or a medium for fruity sweetness. nitro cold brew: add nitrogen gas for creamy texture without dairy.',
    },
    'moka-pot': {
      name: 'MOKA POT', binary: 'moka-pot(1)', category: 'base',
      recommends: ['ROOTKIT', 'EXPLOIT', 'LATERAL MOVE'],
      summary: 'stovetop pressure brew. strong, concentrated. the OG home espresso.',
      synopsis: '$ moka-pot --dose=20g --water=300ml --heat=medium --grind=fine',
      ratio: '1 : 10', dose: '20g', yield: '~150ml brew', time: '4–5 min', temp: 'STOVETOP / MEDIUM', grind: 'FINE (not espresso-fine)',
      equipment: 'Moka pot (Bialetti-style), stove, grinder, hot water',
      steps: [
        { cmd: 'boil water separately, fill bottom chamber to valve', note: 'pre-boiling prevents cooking the grounds with slow heat-up' },
        { cmd: 'fill basket with 20g fine grounds, level off', note: 'do NOT tamp — just level. finer than drip, coarser than espresso.' },
        { cmd: 'assemble with a towel (it\'s hot), place on medium heat', note: 'handle stays off the burner' },
        { cmd: 'listen for gurgling — coffee appears in upper chamber', note: 'should take 2–3 min once on heat' },
        { cmd: 'when flow turns blonde/sputtery, remove from heat', note: 'run cold water on base to stop extraction immediately' },
      ],
      tips: 'Moka pot coffee is not espresso — it brews at ~1.5 bar vs espresso\'s 9 bar. but it\'s the closest you\'ll get without a machine. works great as a base for lattes and americanos.',
    },
    turkish: {
      name: 'TURKISH', binary: 'turkish(1)', category: 'immersion',
      recommends: ['ZERO-DAY', 'BRUTE-FORCE', 'PERSISTENCE'],
      summary: 'unfiltered, ultra-fine grind. boiled in the cezve. ancient method, intense result.',
      synopsis: '$ turkish --dose=10g --water=100ml --sugar=optional --heat=low',
      ratio: '1 : 10', dose: '10g', yield: '100ml water', time: '3–4 min', temp: 'JUST BELOW BOILING', grind: 'EXTRA FINE (powder)',
      equipment: 'cezve (ibrik), extra-fine grinder or pre-ground Turkish coffee, demitasse cup',
      steps: [
        { cmd: 'measure 100ml cold water into cezve', note: 'use the demitasse cup to measure' },
        { cmd: 'add 10g coffee (powder-fine) + sugar if desired', note: 'stir while cold — never stir after heating begins' },
        { cmd: 'place on LOW heat', note: 'patience. high heat = bitter, uneven extraction' },
        { cmd: 'watch for foam rising — remove from heat just before boil', note: 'foam is everything. don\'t let it boil over.' },
        { cmd: 'pour slowly into demitasse, foam first', note: 'let grounds settle 1–2 min before drinking. stop before the sludge.' },
      ],
      tips: 'Turkish coffee requires an extremely fine grind — finer than espresso, almost flour-like. most home grinders can\'t do it; buy pre-ground Turkish if needed. traditionally served with a glass of water and a piece of Turkish delight.',
    },
    latte: {
      name: 'LATTE', binary: 'latte(1)', category: 'drink',
      recommends: ['EXPLOIT', 'SOCIAL ENGINEER', 'PAYLOAD'],
      summary: 'espresso + steamed milk. smooth, creamy, balanced. the daily driver.',
      synopsis: '$ latte --shots=2 --milk=240ml --foam=thin --temp=65C',
      ratio: '1 : 4 (espresso : milk)', dose: '2 shots (36g)', yield: '~300ml total', time: '3–4 min', temp: '60–65°C milk', grind: 'FINE (espresso)',
      equipment: 'espresso machine with steam wand, milk pitcher, thermometer (optional)',
      steps: [
        { cmd: 'pull a double espresso (18g in, 36g out, 27s)', note: 'see: man espresso' },
        { cmd: 'pour 240ml cold whole milk into pitcher', note: 'whole milk steams best. oat milk is the best non-dairy.' },
        { cmd: 'purge steam wand, submerge tip just below surface', note: 'listen for paper-tearing sound — that\'s air being incorporated' },
        { cmd: 'stretch milk (add air) for 3–5s, then submerge deeper', note: 'you want microfoam — silky, not bubbly. tilt the pitcher for a vortex.' },
        { cmd: 'heat to 60–65°C (hand can barely hold pitcher)', note: 'above 70°C = scalded milk, destroyed sweetness' },
        { cmd: 'tap pitcher, swirl to integrate, pour into espresso', note: 'pour from low, raise to finish. latte art: start close to surface.' },
      ],
      tips: 'milk is naturally sweet at 60–65°C due to lactose breakdown. overheating destroys this. for oat milk: barista-edition froths best. for iced: pour espresso over ice first, then cold milk.',
    },
    cappuccino: {
      name: 'CAPPUCCINO', binary: 'cappuccino(1)', category: 'drink',
      recommends: ['EXPLOIT', 'PRIVESC', 'HONEYPOT'],
      summary: 'espresso + equal parts steamed milk + foam. stronger milk-coffee ratio than a latte.',
      synopsis: '$ cappuccino --shots=2 --milk=120ml --foam=thick --temp=65C',
      ratio: '1 : 1 : 1 (espresso : milk : foam)', dose: '2 shots (36g)', yield: '~180ml total', time: '3–4 min', temp: '60–65°C milk', grind: 'FINE (espresso)',
      equipment: 'espresso machine with steam wand, milk pitcher',
      steps: [
        { cmd: 'pull a double espresso', note: 'see: man espresso' },
        { cmd: 'pour 120ml cold whole milk into pitcher', note: 'less milk than a latte — the foam is the star' },
        { cmd: 'steam: stretch longer than a latte (5–8s of air)', note: 'you want more foam volume — thick, velvety microfoam' },
        { cmd: 'heat to 60–65°C', note: 'same temp rules as latte' },
        { cmd: 'tap + swirl, pour with higher foam proportion', note: 'the cup should be ~1/3 espresso, 1/3 steamed milk, 1/3 foam' },
      ],
      tips: 'traditional Italian cappuccinos are 150–180ml total — much smaller than most coffee shops serve. the higher foam ratio means you taste more espresso. best enjoyed in the morning.',
    },
    americano: {
      name: 'AMERICANO', binary: 'americano(1)', category: 'drink',
      recommends: ['BRUTE-FORCE', 'EXFIL', 'BACKDOOR'],
      summary: 'espresso diluted with hot water. black coffee strength, espresso character.',
      synopsis: '$ americano --shots=2 --water=200ml --order=espresso-first',
      ratio: '1 : 3 (espresso : water)', dose: '2 shots (36g)', yield: '~260ml total', time: '2 min', temp: '90–95°C water', grind: 'FINE (espresso)',
      equipment: 'espresso machine, kettle or hot water tap, mug',
      steps: [
        { cmd: 'pull a double espresso into mug', note: 'see: man espresso' },
        { cmd: 'heat 200ml water to 90–95°C', note: 'don\'t use boiling — it scalds the crema' },
        { cmd: 'pour hot water over espresso', note: 'this order preserves some crema on top' },
        { cmd: 'stir gently if desired', note: 'or leave layered for visual effect' },
      ],
      tips: 'for a "long black" (Australian style), reverse the order: pour water first, then float the espresso on top. preserves the full crema layer. iced americano: pour espresso over ice, then add cold water.',
    },
    'flat-white': {
      name: 'FLAT WHITE', binary: 'flat-white(1)', category: 'drink',
      recommends: ['LATERAL MOVE', 'PRIVESC', 'WIRELESS'],
      summary: 'double ristretto + microfoam milk. stronger than latte, less foam than cappuccino.',
      synopsis: '$ flat-white --shots=2-ristretto --milk=150ml --foam=micro --temp=65C',
      ratio: '1 : 2.5 (espresso : milk)', dose: '2 ristretto shots (18g in, 27g out)', yield: '~200ml total', time: '3 min', temp: '60–65°C milk', grind: 'FINE (espresso)',
      equipment: 'espresso machine with steam wand, small milk pitcher, 6oz cup',
      steps: [
        { cmd: 'pull a double ristretto (18g in, 27g out, 20–22s)', note: 'shorter, more concentrated than standard espresso' },
        { cmd: 'pour 150ml cold whole milk into pitcher', note: 'less milk = stronger coffee flavor vs latte' },
        { cmd: 'steam with minimal stretch (2–3s of air)', note: 'microfoam only — almost no visible bubbles' },
        { cmd: 'heat to 60–65°C', note: 'velvet texture, not frothy' },
        { cmd: 'pour directly through crema — no latte art flourish', note: 'the drink should be "flat" — thin foam layer, coffee-forward' },
      ],
      tips: 'the flat white originated in Australia/New Zealand. the key difference from a latte: smaller volume, ristretto base (sweeter, less bitter), and virtually no foam dome. served in a smaller 5–6oz cup.',
    },
  };
  const list = Object.entries(guides);
  const categories = { all: 'ALL', base: 'BASE METHODS', filter: 'FILTER', immersion: 'IMMERSION', drink: 'DRINKS' };
  const filteredList = category === 'all' ? list : list.filter(([, g]) => g.category === category);
  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. accurate specs. no shortcuts. brew responsibly.</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr', gap: 28 }}>
        {/* method nav */}
        <aside style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
          {/* category filter */}
          <div style={{ fontSize: 11, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 8 }}>// CATEGORY</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 16 }}>
            {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: '6px 10px', background: category === id ? '#00FF41' : 'transparent',
                color: category === id ? '#000' : '#BFBFBF',
                border: `1px solid ${category === id ? '#00FF41' : 'rgba(255,255,255,0.18)'}`,
                fontFamily: 'inherit', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
                cursor: 'pointer', borderRadius: 2,
              }}>{label}</button>
            ))}
          </div>
          <div style={{ fontSize: 11, letterSpacing: '0.22em', color: '#E0E0E0', fontWeight: 700, marginBottom: 10 }}>// METHODS</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {filteredList.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.1.0</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>

          {/* equipment */}
          {g.equipment && (
            <Section title="DEPENDENCIES">
              <div style={{ padding: '14px 18px', background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.22)', color: '#E0E0E0', fontSize: 13, lineHeight: 1.7, letterSpacing: '0.04em' }}>
                $ apt-get install {g.equipment}
              </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>

          {/* tips */}
          {g.tips && (
            <Section title="NOTES">
              <div style={{ padding: '14px 18px', background: 'rgba(255,210,63,0.04)', border: '1px solid rgba(255,210,63,0.3)', color: '#FFD23F', fontSize: 13, lineHeight: 1.7, letterSpacing: '0.02em' }}>
                // {g.tips}
              </div>
            </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.1.0 · {Object.keys(guides).length} methods indexed · 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;