// Manifesto.jsx — long-form brand op-ed
const Manifesto = () => {
  return (
    <section style={{ padding: '40px 24px 80px', maxWidth: 880, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 28 }}>
        <h2 style={{ fontSize: 36, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: 0 }}>{'>'} cat manifesto.md</h2>
        <span style={{ fontSize: 13, color: '#BFBFBF', letterSpacing: '0.18em' }}>// v1.0 · maintained by operator</span>
      </div>

      {/* preamble */}
      <div style={{ padding: '18px 20px', background: 'rgba(0,255,65,0.05)', border: '1px solid rgba(0,255,65,0.35)', color: '#00FF41', fontSize: 14, lineHeight: 1.7, letterSpacing: '0.03em', marginBottom: 28 }}>
        # WHY OPERATOR BREWING<br/>
        # what follows is the manifesto. read it. or don't. but if you're holding our bag, you're already in.
        <span style={{ background: '#00FF41', color: '#000', marginLeft: 6, padding: '0 4px' }}>_</span>
      </div>

      <Body>
        we don't write tasting notes. we write <em style={{ color:'#00FF41', fontStyle:'normal' }}>compromise reports</em>.
        we don't brew for <em style={{ color:'#FF3344', fontStyle:'normal', textDecoration:'line-through' }}>adventurous palates</em>.
        we brew for the people who stay wired in.
      </Body>

      <Heading n={1}>roasted for operators.</Heading>
      <Body>
        coffee shops have tried to sell you a journey. a curated experience. a smooth, velvety smile from a barista whose name you'll forget. we don't care.
      </Body>
      <Body>
        you don't drink coffee at 2am on the third day of an engagement because you want a journey. you drink it because the engagement isn't over and neither are you.
      </Body>

      <Quote>
        every bag is named after an attack technique because every bag <em style={{ color:'#00FF41', fontStyle:'normal' }}>does</em> something. coffee is the payload. you are the operator.
      </Quote>

      <Heading n={2}>fuel for long sessions.</Heading>
      <Body>
        we roast in small batches because freshness matters more than scale. we ship to order because beans degrade by the hour. we use 100% arabica because we don't believe in fillers — in coffee or in security.
      </Body>
      <Body>
        every SKU is a tool. EXPLOIT for the dark roast that gets in. WIRELESS for the decaf that disconnects only the caffeine. ZERO-DAY for what nobody else has dropped yet. BRUTE-FORCE for when sleep is not on the table.
      </Body>

      <Heading n={3}>no shortcuts.</Heading>
      <Body>
        no fillers. no artificial sweeteners. no robusta-padded "espresso roast" pretending to be specialty. no marketing copy written by people who have never pulled an all-nighter.
      </Body>
      <Body>
        ethically sourced. ethically roasted. priced like coffee, not like a luxury good with a story.
      </Body>

      <Quote>
        if you found this page, you're one of us. drink responsibly. <em style={{ color:'#00FF41', fontStyle:'normal' }}>pwn responsibly.</em>
      </Quote>

      {/* principles — the rule list */}
      <div style={{ marginTop: 40, padding: 28, background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.28)' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.25em', color: '#BFBFBF', marginBottom: 16 }}>// PRINCIPLES (/etc/operator/rules.conf)</div>
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            'beans, not branding.',
            'small batch. ship the same week.',
            'roast levels we name plainly: light, medium, dark, decaf. nothing called "smooth journey."',
            'no fillers. no robusta. 100% arabica.',
            'every SKU has a job. if it doesn\'t, we cut it.',
            'ethically sourced coffee. questionably ethical outcomes.',
            'we don\'t use the word "passionate." you can tell from the cup.',
            'subscribe means we ship monthly. cancel means we stop shipping. no dark patterns.',
            'open-source where we can. transparent on the rest.',
            'drink responsibly. pwn responsibly.',
          ].map((line, i) => (
            <li key={i} style={{ display: 'flex', gap: 14, fontSize: 14, color: '#FFFFFF', lineHeight: 1.6 }}>
              <span style={{ color: '#00FF41', minWidth: 28, fontWeight: 800 }}>[{String(i+1).padStart(2,'0')}]</span>
              <span style={{ flex: 1 }}>{line}</span>
            </li>
          ))}
        </ol>
      </div>

      {/* sign-off */}
      <div style={{ marginTop: 36, padding: '18px 0 12px', borderTop: '1px dashed rgba(255,255,255,0.32)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontSize: 12, letterSpacing: '0.18em', color: '#BFBFBF' }}>
        <span>// signed: operator</span>
        <span>// EOF</span>
      </div>
    </section>
  );
};

const Heading = ({ n, children }) => (
  <h3 style={{ marginTop: 36, marginBottom: 14, fontSize: 24, fontWeight: 800, color: '#FFFFFF', letterSpacing: '0.04em', textTransform: 'uppercase', display: 'flex', gap: 12, alignItems: 'baseline' }}>
    <span style={{ color: '#00FF41', fontSize: 16 }}>##</span>
    <span style={{ color: '#BFBFBF', fontSize: 14 }}>{String(n).padStart(2,'0')}</span>
    {children}
  </h3>
);

const Body = ({ children }) => (
  <p style={{ fontSize: 16, lineHeight: 1.75, color: '#E0E0E0', margin: '0 0 16px', letterSpacing: '0.01em' }}>{children}</p>
);

const Quote = ({ children }) => (
  <blockquote style={{ margin: '28px 0', padding: '18px 22px', borderLeft: '3px solid #00FF41', background: 'rgba(0,255,65,0.05)', fontSize: 18, lineHeight: 1.6, color: '#FFFFFF', letterSpacing: '0.01em' }}>
    {children}
  </blockquote>
);

window.Manifesto = Manifesto;
