const manifestoV2Styles = {
  wrap: { padding: '140px 0', background: 'var(--bg)', position: 'relative' },
  inner: { display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'flex-start' },
  left: { position: 'sticky', top: 120 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(72px, 10vw, 160px)', lineHeight: 0.88, color: 'var(--ink)', letterSpacing: '-0.045em' },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginBottom: 18 },
  leftCaption: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 15, color: 'var(--muted)', marginTop: 28, lineHeight: 1.55, maxWidth: 340 },

  right: {},
  kicker: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)', marginBottom: 24 },
  pullquote: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 6.5vw, 76px)', lineHeight: 1.06, letterSpacing: '-0.03em', color: 'var(--ink)' },
  highlight: { background: 'var(--yellow)', padding: '0 8px', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' },
  titleLogo: { height: '1.5em', width: 'auto', display: 'inline-block', verticalAlign: 'middle' },

  twoCol: { marginTop: 64, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 },
  colBlock: { background: 'var(--paper)', borderRadius: 24, padding: 32, border: '1px solid var(--line)' },
  colLabel: {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    background: 'var(--ink)', color: 'var(--yellow)',
    padding: '6px 12px', borderRadius: 999,
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 700,
    marginBottom: 20,
  },
  colHead: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(24px, 2.8vw, 34px)', lineHeight: 1.1, color: 'var(--ink)', marginBottom: 16, letterSpacing: '-0.025em' },
  colBody: { fontSize: 16, color: 'var(--muted)', lineHeight: 1.7 },

  capabilities: { marginTop: 96, paddingTop: 36, borderTop: '1px solid var(--line)' },
  cTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)', marginBottom: 28 },
  cList: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
  cItem: { padding: 24, borderRadius: 20, background: 'var(--paper)', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column', gap: 8 },
  cIcon: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 28, color: 'var(--pink)', letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 8 },
  cName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 19, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-0.02em' },
  cDesc: { fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.6 },
};

function ManifestoV2() {
  return (
    <section id="manifesto" style={manifestoV2Styles.wrap}>
      <div className="container">
        <div style={manifestoV2Styles.inner} className="man-grid">
          <div style={manifestoV2Styles.left}>
            <div style={manifestoV2Styles.chapterLabel}>● The Dream Group · in summary</div>
            <h2 style={manifestoV2Styles.chapter}>Why<br/><img src="assets/dream-logo-ink.png" alt="Dream" style={manifestoV2Styles.titleLogo} /><br/>exists.</h2>
            <p style={manifestoV2Styles.leftCaption}>
              Most people die with their dreams still in them. We built Dream so that stops happening. We give people the help, the capital, the tools and the community they need to actually start.
            </p>
          </div>

          <div style={manifestoV2Styles.right}>
            <div style={manifestoV2Styles.kicker}>● The mission &nbsp;·&nbsp; The vision</div>
            <p style={manifestoV2Styles.pullquote}>
              Help people chase their <span style={manifestoV2Styles.highlight}>dream</span>. Through entrepreneurship.
            </p>

            <div style={manifestoV2Styles.twoCol} className="m-twocol">
              <div style={manifestoV2Styles.colBlock}>
                <span style={manifestoV2Styles.colLabel}>● Mission</span>
                <h3 style={manifestoV2Styles.colHead}>Help 10 million people start a business.</h3>
                <p style={manifestoV2Styles.colBody}>
                  We believe too many people are trapped in systems that don't serve them. By helping 10 million people start a business, we can create a world where more people have choice, independence and opportunity.
                </p>
              </div>
              <div style={manifestoV2Styles.colBlock}>
                <span style={manifestoV2Styles.colLabel}>● Vision</span>
                <h3 style={manifestoV2Styles.colHead}>Build the world's largest entrepreneurial ecosystem, helping people chase their dreams.</h3>
                <p style={manifestoV2Styles.colBody}>
                  A place where media, products, education, finance, technology and community come together to help people believe in themselves and take action.
                </p>
              </div>
            </div>

            <div style={manifestoV2Styles.capabilities}>
              <div style={manifestoV2Styles.cTitle}>● What Dream brings to the table</div>
              <div style={manifestoV2Styles.cList} className="m-plist">
                <div style={manifestoV2Styles.cItem}>
                  <div style={manifestoV2Styles.cIcon}>22M+</div>
                  <div style={manifestoV2Styles.cName}>Distribution at scale</div>
                  <div style={manifestoV2Styles.cDesc}>The biggest entrepreneurship audience in the UK. 22M+ followers and 200-400M+ monthly views across YouTube, TikTok and Instagram. A built-in megaphone behind every Dream company.</div>
                </div>
                <div style={manifestoV2Styles.cItem}>
                  <div style={manifestoV2Styles.cIcon}>10%</div>
                  <div style={manifestoV2Styles.cName}>Capital that pays it forward</div>
                  <div style={manifestoV2Styles.cDesc}>The DreamerFund. 10% of every Dream company's profit goes straight back into funding the next dreamer.</div>
                </div>
                <div style={manifestoV2Styles.cItem}>
                  <div style={manifestoV2Styles.cIcon}>300k+</div>
                  <div style={manifestoV2Styles.cName}>A community of founders</div>
                  <div style={manifestoV2Styles.cDesc}>HelpBnk is a free global community where founders swap help, intros and the advice that gets you unstuck. The practical home of #GiveWithoutTake.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .man-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .man-grid > div:first-child { position: static !important; }
          .m-twocol { grid-template-columns: 1fr !important; gap: 16px !important; }
          .m-plist { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}