const mediaStyles = {
  wrap: { padding: '120px 0', background: 'var(--ink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' },

  glow: { position: 'absolute', top: '-10%', left: '50%', transform: 'translateX(-50%)', width: 900, height: 900, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,45,124,.10) 0%, transparent 60%)', pointerEvents: 'none', zIndex: 0 },

  head: { textAlign: 'center', maxWidth: 1100, margin: '0 auto 80px', paddingBottom: 40, borderBottom: '1px solid rgba(255,255,255,.18)', position: 'relative', zIndex: 1 },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--pink)', marginBottom: 18 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(56px, 8vw, 128px)', lineHeight: 0.95, color: 'var(--paper)', letterSpacing: '-0.05em' },
  highlight: { background: 'var(--pink)', padding: '0 12px', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone', color: '#fff' },
  dek: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 24px)', lineHeight: 1.5, color: 'rgba(255,255,255,.78)', marginTop: 28, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto' },

  // BIG stats strip
  statsStrip: { position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, marginBottom: 80, borderTop: '1px solid rgba(255,255,255,.14)', borderBottom: '1px solid rgba(255,255,255,.14)' },
  statCell: { padding: '40px 24px', borderRight: '1px solid rgba(255,255,255,.14)' },
  statCellLast: { borderRight: 'none' },
  statNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(44px, 5.5vw, 84px)', color: 'var(--paper)', letterSpacing: '-0.045em', lineHeight: 1 },
  statNumAccent: { color: 'var(--pink)' },
  statLbl: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 13.5, color: 'rgba(255,255,255,.65)', marginTop: 16, letterSpacing: '0.02em', lineHeight: 1.45 },

  // Body copy in 2-col
  bodyGrid: { position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 80 },
  bodyCol: {},
  lead: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 'clamp(22px, 2.4vw, 30px)', color: 'var(--paper)', lineHeight: 1.3, letterSpacing: '-0.025em', marginBottom: 20 },
  body: { fontSize: 17, color: 'rgba(255,255,255,.78)', lineHeight: 1.7 },

  // Full-width pull quote
  pquote: {
    position: 'relative', zIndex: 1,
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800,
    fontSize: 'clamp(40px, 5.5vw, 88px)',
    lineHeight: 1.05, color: 'var(--paper)',
    letterSpacing: '-0.045em', textAlign: 'center',
    margin: '0 auto 80px', maxWidth: 1200, padding: '60px 0',
    borderTop: '2px solid rgba(255,255,255,.4)', borderBottom: '2px solid rgba(255,255,255,.4)',
  },
  pquoteEm: { color: 'var(--pink)' },
  pquoteAttrib: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,.5)', marginTop: 28 },

  // Platforms strip
  platforms: { position: 'relative', zIndex: 1, display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 80 },
  platform: {
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 13, fontWeight: 600,
    color: 'var(--paper)', padding: '10px 18px', borderRadius: 999,
    background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.14)',
    display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
  },

  // Capabilities — 4 across, full width
  caps: { position: 'relative', zIndex: 1, paddingTop: 40, borderTop: '1px solid rgba(255,255,255,.16)' },
  capsTitle: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,.55)', marginBottom: 32, textAlign: 'center' },
  capsGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 },
  cap: { padding: '32px 26px', background: 'rgba(255,255,255,.03)', borderRadius: 18, border: '1px solid rgba(255,255,255,.1)', transition: 'background .25s ease, border-color .25s ease' },
  capNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 22, color: 'var(--pink)', marginBottom: 14, letterSpacing: '-0.02em' },
  capName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 19, color: 'var(--paper)', marginBottom: 10, letterSpacing: '-0.025em' },
  capBody: { fontSize: 14, color: 'rgba(255,255,255,.65)', lineHeight: 1.6 },
};

function DreamMediaSection() {
  return (
    <section id="dream-media" style={mediaStyles.wrap}>
      <div style={mediaStyles.glow}></div>

      <div className="container">
        <div style={mediaStyles.head}>
          <div style={mediaStyles.chapterLabel}>● Up close · DreamMedia</div>
          <h2 style={mediaStyles.chapter}>The <span style={mediaStyles.highlight}>content engine</span> behind the audience.</h2>
          <p style={mediaStyles.dek}>
            DreamMedia is the studio that turns 22M+ followers into engaged fans of every Dream company. Original formats, street interviews and owned IP, made to last and grow.
          </p>
        </div>

        <div style={mediaStyles.statsStrip}>
          <div style={mediaStyles.statCell}>
            <div style={mediaStyles.statNum}>22M<span style={mediaStyles.statNumAccent}>+</span></div>
            <div style={mediaStyles.statLbl}>● Followers across YouTube, TikTok, Instagram</div>
          </div>
          <div style={mediaStyles.statCell}>
            <div style={mediaStyles.statNum}>200-400M<span style={mediaStyles.statNumAccent}>+</span></div>
            <div style={mediaStyles.statLbl}>● Views every month</div>
          </div>
          <div style={mediaStyles.statCell}>
            <div style={mediaStyles.statNum}>36</div>
            <div style={mediaStyles.statLbl}>● Owned channels across platforms</div>
          </div>
          <div style={{ ...mediaStyles.statCell, ...mediaStyles.statCellLast }}>
            <div style={mediaStyles.statNum}>Daily</div>
            <div style={mediaStyles.statLbl}>● Original content shipping across every channel</div>
          </div>
        </div>

        <div style={mediaStyles.bodyGrid} className="dm-body">
          <div style={mediaStyles.bodyCol}>
            <p style={mediaStyles.lead}>
              Most entrepreneurship media talks <em>at</em> people. DreamMedia talks <em>with</em> them.
            </p>
            <p style={mediaStyles.body}>
              Stories of real founders and real first sales, the ordinary moments that make starting a business feel doable instead of heroic. Street interviews on London Bridge, in-the-room founder breakdowns, honest behind-the-scenes from the staircase. Every piece is made to leave the viewer thinking, "I could do that too."
            </p>
          </div>
          <div style={mediaStyles.bodyCol}>
            <p style={mediaStyles.lead}>
              The audience is the platform.
            </p>
            <p style={mediaStyles.body}>
              That's how DreamMedia grows: every follower is reach the next Dream company launches behind. In 2026 it expands from one creator into a full studio: new formats, partner creators, podcasts and longer-form IP. Owned, distributable, and aligned with every Dream company underneath it.
            </p>
          </div>
        </div>

        <div style={mediaStyles.pquote}>
          Make starting feel <span style={mediaStyles.pquoteEm}>ordinary.</span>
          <div style={mediaStyles.pquoteAttrib}>- The DreamMedia brief</div>
        </div>

        <div style={mediaStyles.platforms}>
          <span style={mediaStyles.platform}>● YouTube</span>
          <span style={mediaStyles.platform}>● TikTok</span>
          <span style={mediaStyles.platform}>● Instagram</span>
          <span style={mediaStyles.platform}>● Podcasts</span>
          <span style={mediaStyles.platform}>● LinkedIn</span>
          <span style={mediaStyles.platform}>● Live</span>
        </div>

        <div style={mediaStyles.caps}>
          <div style={mediaStyles.capsTitle}>● What DreamMedia brings to every company in the group</div>
          <div style={mediaStyles.capsGrid} className="dm-caps">
            <div style={mediaStyles.cap}>
              <div style={mediaStyles.capNum}>01</div>
              <div style={mediaStyles.capName}>Original IP</div>
              <div style={mediaStyles.capBody}>Owned formats built to travel: interviews, breakdowns, documentaries and serialised stories.</div>
            </div>
            <div style={mediaStyles.cap}>
              <div style={mediaStyles.capNum}>02</div>
              <div style={mediaStyles.capName}>Creator network</div>
              <div style={mediaStyles.capBody}>Partner creators, founders and operators. Distribution that reaches beyond one face.</div>
            </div>
            <div style={mediaStyles.cap}>
              <div style={mediaStyles.capNum}>03</div>
              <div style={mediaStyles.capName}>Brand integrations</div>
              <div style={mediaStyles.capBody}>Mission-aligned sponsorships and partnerships placed across every Dream property.</div>
            </div>
            <div style={mediaStyles.cap}>
              <div style={mediaStyles.capNum}>04</div>
              <div style={mediaStyles.capName}>Group amplification</div>
              <div style={mediaStyles.capBody}>Every launch from any Dream company ships with the studio engine behind it.</div>
            </div>
          </div>
        </div>
      </div>

      <style>{`@media (max-width: 980px) {
        .dm-body { grid-template-columns: 1fr !important; gap: 32px !important; }
        .dm-caps { grid-template-columns: 1fr 1fr !important; }
      }
      @media (max-width: 760px) {
        section#dream-media [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
        section#dream-media [style*="border-right"] { border-right: none !important; }
      }
      @media (max-width: 520px) {
        /* stack the big stats so long figures like 200-400M+ stop clipping */
        section#dream-media [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
      }`}</style>
    </section>
  );
}