window.Manifesto = function Manifesto() {
  const isMobile = useIsMobile();
  const isTablet = useIsTablet();

  const sectionPadding = isMobile ? '80px 24px' : isTablet ? '112px 32px' : '160px 48px';
  const h2Size = isMobile ? 40 : isTablet ? 56 : 88;
  const bodySize = isMobile ? 18 : isTablet ? 21 : 24;

  return (
    <section id="manifesto" style={{
      padding: sectionPadding,
      background: 'var(--invert-bg)',
      color: 'var(--invert-text)',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: isMobile ? 56 : 96 }}>
          <div className="eyebrow" style={{ color: 'var(--text-tertiary)', marginBottom: 16 }}>Point of view</div>
          <h2 style={{
            fontSize: h2Size, fontWeight: 800, lineHeight: 0.95,
            letterSpacing: '-0.035em', color: 'var(--invert-text)', margin: 0,
          }}>
            AI isn't a feature.<br />
            <span style={{ color: 'var(--text-tertiary)' }}>It's a layer.</span>
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr',
          gap: isMobile ? 32 : 96,
          maxWidth: 1080,
        }}>
          <div className="mono" style={{ color: 'var(--text-tertiary)', textTransform: 'uppercase' }}>
            2026 — present
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            <p style={{ fontSize: bodySize, lineHeight: 1.4, margin: 0, color: '#ffffff', fontWeight: 600 }}>
              Adopt or be adopted.
            </p>
            <p style={{ fontSize: bodySize, lineHeight: 1.45, margin: 0, color: '#cccccc' }}>
              The next twelve months will sort companies into two groups. The ones whose ops have AI agents in the loop. And the ones still doing the work by hand. There is no middle.
            </p>
            <p style={{ fontSize: bodySize, lineHeight: 1.45, margin: 0, color: '#cccccc' }}>
              stitch_ exists because the cost of intelligence is collapsing, and the work that used to take a team now takes a prompt and a checkbox. We help small teams cross that line in weeks. No new SaaS. No platform migration. Just human-orchestrated AI inside the tools you already use, where your team sets the direction and agents do the work.
            </p>
            <p style={{ fontSize: bodySize, lineHeight: 1.4, margin: 0, color: '#ffffff', fontWeight: 500 }}>
              We don't care about today. We care about what your operations look like in 2030. And whether you're the team building it, or watching it from outside.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};