const brewStyles = {
  wrap: { padding: '120px 0', background: '#EAD5A7', color: '#402A11', position: 'relative', overflow: 'hidden', fontFamily: 'Montserrat, sans-serif' },
  head: { textAlign: 'center', maxWidth: 900, margin: '0 auto 64px', paddingBottom: 32, borderBottom: '2px solid #402A11' },
  chapterLabel: { fontFamily: 'Montserrat, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: '#8C4A1B', marginBottom: 18 },
  chapter: { fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.98, color: '#402A11', letterSpacing: '-0.045em' },
  highlight: { background: '#402A11', color: '#EAD5A7', padding: '0 10px', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' },
  dek: { fontFamily: 'Montserrat, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.5, color: 'rgba(64,42,17,.78)', marginTop: 24, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' },

  spread: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' },
  body: { fontSize: 17, color: 'rgba(64,42,17,.8)', lineHeight: 1.7 },
  lead: { fontFamily: 'Montserrat, sans-serif', fontWeight: 600, fontSize: 22, color: '#402A11', lineHeight: 1.45, marginBottom: 18, letterSpacing: '-0.015em' },
  pquote: { fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 'clamp(26px, 3vw, 38px)', lineHeight: 1.15, color: '#402A11', borderTop: '2px solid #402A11', borderBottom: '2px solid #402A11', padding: '20px 0', margin: '32px 0', letterSpacing: '-0.03em' },
  pquoteAttrib: { fontFamily: 'Montserrat, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(64,42,17,.55)', marginTop: 12 },

  // Product visual
  productCol: { position: 'relative' },
  productImage: { width: '100%', height: 'auto', display: 'block', borderRadius: 24, boxShadow: '0 30px 60px rgba(64,42,17,.25)' },
  productTag: {
    position: 'absolute', top: 20, right: 20, zIndex: 3,
    background: 'var(--yellow)', color: '#402A11',
    padding: '8px 14px', borderRadius: 999,
    fontFamily: 'Montserrat, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase',
    boxShadow: '0 6px 18px rgba(0,0,0,.18)',
  },

  kpis: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, marginTop: 20 },
  kpi: { padding: 16, background: 'rgba(64,42,17,.06)', borderRadius: 12, border: '1px solid rgba(64,42,17,.14)' },
  kpiNum: { fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 22, color: '#402A11', letterSpacing: '-0.03em', lineHeight: 1 },
  kpiLbl: { fontFamily: 'Montserrat, sans-serif', fontSize: 11.5, color: 'rgba(64,42,17,.7)', marginTop: 6, fontWeight: 500 },

  caps: { marginTop: 56, paddingTop: 32, borderTop: '1px solid rgba(64,42,17,.18)' },
  capsTitle: { fontFamily: 'Montserrat, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(64,42,17,.55)', marginBottom: 24 },
  capsGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 },
  cap: { padding: '20px 18px', background: 'rgba(64,42,17,.05)', borderRadius: 14, border: '1px solid rgba(64,42,17,.1)' },
  capName: { fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15, color: '#402A11', marginBottom: 6, letterSpacing: '-0.02em' },
  capBody: { fontSize: 13, color: 'rgba(64,42,17,.65)', lineHeight: 1.55 },
};

function DreamBrewSection() {
  return (
    <section id="dreambrew" style={brewStyles.wrap}>
      <div className="container">
        <div style={brewStyles.head}>
          <img src="assets/dreambrew-logo.png" alt="DreamBrew" style={{ width: 220, maxWidth: '60%', height: 'auto', display: 'block', margin: '0 auto 28px' }} />
          <div style={brewStyles.chapterLabel}>● Up close · DreamBrew</div>
          <h2 style={brewStyles.chapter}>A <span style={brewStyles.highlight}>dream</span> in every can.</h2>
          <p style={brewStyles.dek}>
            Co-founded by Simon Squibb and Rio Ferdinand. Premium ready-to-drink coffee for people who want more from their daily ritual. Two flavours at launch, one mission, and a portion of every can goes back to the next dreamer.
          </p>
        </div>

        <div style={brewStyles.spread} className="db-spread">
          <div>
            <p style={brewStyles.lead}>
              Two voices. Fifty million followers. One shared mission: help people chase their dream, one can at a time.
            </p>
            <p style={brewStyles.body}>
              DreamBrew is coffee built around energy, focus and purpose, made for a community of dream-believers who already follow Simon and Rio. The launch lineup is two flavours: <strong>Purpose</strong> (an everyday iced latte, Fairtrade Robusta, low sugar) and <strong>Focus</strong> (a nootropic blend with Lion's Mane and Green Tea for clean energy without the crash).
            </p>

            <div style={brewStyles.pquote}>
              "Coffee with a mission. Built by dreamers, for dreamers."
              <div style={brewStyles.pquoteAttrib}>- Simon &amp; Rio, co-founders</div>
            </div>

            <p style={brewStyles.body}>
              We're subscription-first and direct-to-consumer through dreambrew.com and TikTok Shop, backed by 50M+ engaged followers, university sampling, gyms, podcasts and paid social. Retail follows the community, not the other way round. Every can carries a Dream Story, so subscribers know exactly whose dream their coffee just helped fund.
            </p>

            <div style={brewStyles.caps}>
              <div style={brewStyles.capsTitle}>● What DreamBrew proves</div>
              <div style={brewStyles.capsGrid} className="db-caps">
                <div style={brewStyles.cap}>
                  <div style={brewStyles.capName}>Two founders, fifty million</div>
                  <div style={brewStyles.capBody}>Simon Squibb (22M+) and Rio Ferdinand (30M+). Business and sport, one shared audience of dreamers.</div>
                </div>
                <div style={brewStyles.cap}>
                  <div style={brewStyles.capName}>Community before retail</div>
                  <div style={brewStyles.capBody}>Direct-to-consumer subscription first. Retail follows the community, not the other way round.</div>
                </div>
                <div style={brewStyles.cap}>
                  <div style={brewStyles.capName}>A platform brand</div>
                  <div style={brewStyles.capBody}>A purpose-led functional drinks brand. Two flavours now; hot coffee, sleep &amp; recovery and seasonal drops next.</div>
                </div>
              </div>
            </div>
          </div>

          <div style={brewStyles.productCol}>
            <div style={brewStyles.productTag}>● Summer 2026</div>
            <img src="assets/dreambrew-can.png" alt="DreamBrew Purpose iced latte can" style={brewStyles.productImage} />
            <div style={brewStyles.kpis}>
              <div style={brewStyles.kpi}>
                <div style={brewStyles.kpiNum}>2 SKUs</div>
                <div style={brewStyles.kpiLbl}>Purpose · Focus</div>
              </div>
              <div style={brewStyles.kpi}>
                <div style={brewStyles.kpiNum}>50M+</div>
                <div style={brewStyles.kpiLbl}>Combined founder audience</div>
              </div>
              <div style={brewStyles.kpi}>
                <div style={brewStyles.kpiNum}>Fairtrade</div>
                <div style={brewStyles.kpiLbl}>Robusta, EU produced, traceable</div>
              </div>
              <div style={brewStyles.kpi}>
                <div style={brewStyles.kpiNum}>D2C first</div>
                <div style={brewStyles.kpiLbl}>Subscription, retail follows</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`@media (max-width: 980px) {
        .db-spread { grid-template-columns: 1fr !important; gap: 48px !important; }
        .db-caps { grid-template-columns: 1fr !important; }
      }`}</style>
    </section>
  );
}