// MobileManifesto.jsx — mobile-optimized brand manifesto

const MobileManifesto = () => {
  return (
    <section style={{ padding: '24px 16px 60px', maxWidth: 480, margin: '0 auto' }}>
      <div style={{ marginBottom: 20 }}>
        <h2 style={{ fontSize: 22, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 800, color: '#FFF', margin: '0 0 6px' }}>{'>'} cat manifesto.md</h2>
        <span style={{ fontSize: 11, color: '#BFBFBF', letterSpacing: '0.15em' }}>// v1.0 · maintained by operator</span>
      </div>

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

      <MBody>
        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.
      </MBody>

      <MHeading n={1}>roasted for operators.</MHeading>
      <MBody>
        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.
      </MBody>
      <MBody>
        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.
      </MBody>

      <MQuote>
        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.
      </MQuote>

      <MHeading n={2}>fuel for long sessions.</MHeading>
      <MBody>
        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.
      </MBody>
      <MBody>
        every SKU is a tool. EXPLOIT for the dark roast that gets in. WIRELESS for the decaf. ZERO-DAY for what nobody else has dropped. BRUTE-FORCE for when sleep is off the table.
      </MBody>

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

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

      {/* Principles */}
      <div style={{ marginTop: 32, padding: 16, background: '#0A0A0A', border: '1px solid rgba(255,255,255,0.28)' }}>
        <div style={{ fontSize: 10, letterSpacing: '0.25em', color: '#BFBFBF', marginBottom: 14 }}>// PRINCIPLES</div>
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            'beans, not branding.',
            'small batch. ship the same week.',
            'roast levels named plainly: light, medium, dark, decaf.',
            'no fillers. no robusta. 100% arabica.',
            'every SKU has a job. if it doesn\'t, we cut it.',
            'ethically sourced. questionably ethical outcomes.',
            'we don\'t use the word "passionate."',
            'subscribe = we ship. cancel = we stop. 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: 10, fontSize: 13, color: '#FFFFFF', lineHeight: 1.6 }}>
              <span style={{ color: '#00FF41', minWidth: 24, fontWeight: 800, fontSize: 12 }}>[{String(i + 1).padStart(2, '0')}]</span>
              <span style={{ flex: 1 }}>{line}</span>
            </li>
          ))}
        </ol>
      </div>

      {/* Sign-off */}
      <div style={{ marginTop: 28, padding: '14px 0 8px', borderTop: '1px dashed rgba(255,255,255,0.32)', display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.15em', color: '#BFBFBF' }}>
        <span>// signed: operator</span>
        <span>// EOF</span>
      </div>
    </section>
  );
};

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

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

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

window.MobileManifesto = MobileManifesto;
