const dbStyles = {
  wrap: { padding: '120px 0', background: 'var(--ink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' },
  glow: { position: 'absolute', top: '-20%', right: '-10%', width: 800, height: 800, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,214,10,.10) 0%, transparent 60%)', pointerEvents: 'none', zIndex: 0 },

  head: { position: 'relative', zIndex: 1, maxWidth: 1000, marginBottom: 64 },
  chapterLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--yellow)', marginBottom: 18 },
  chapter: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(48px, 7vw, 104px)', lineHeight: 0.92, color: 'var(--paper)', letterSpacing: '-0.045em' },
  accent: { color: 'var(--yellow)' },
  dek: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500, fontSize: 'clamp(18px, 2vw, 23px)', lineHeight: 1.5, color: 'rgba(255,255,255,.78)', marginTop: 28, maxWidth: 720 },

  bigStat: { position: 'relative', zIndex: 1, display: 'flex', alignItems: 'baseline', gap: 20, flexWrap: 'wrap', marginBottom: 12 },
  bigNum: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(96px, 16vw, 240px)', lineHeight: 0.85, letterSpacing: '-0.05em', color: 'var(--paper)' },
  bigPlus: { color: 'var(--yellow)' },
  bigLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 700, fontSize: 'clamp(18px, 2.4vw, 30px)', color: 'rgba(255,255,255,.85)', letterSpacing: '-0.02em', maxWidth: 320, lineHeight: 1.2 },

  divider: { position: 'relative', zIndex: 1, height: 1, background: 'rgba(255,255,255,.16)', margin: '56px 0' },

  knowTitle: { position: 'relative', zIndex: 1, fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,.55)', marginBottom: 32 },
  grid: { position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  card: { padding: '28px 26px', background: 'rgba(255,255,255,.04)', borderRadius: 18, border: '1px solid rgba(255,255,255,.1)' },
  cardIcon: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 20, color: 'var(--yellow)', marginBottom: 14 },
  cardName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 19, color: 'var(--paper)', marginBottom: 8, letterSpacing: '-0.02em' },
  cardBody: { fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,.66)', lineHeight: 1.6 },

  footnote: { position: 'relative', zIndex: 1, marginTop: 48, fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 600, fontSize: 'clamp(18px, 2.2vw, 26px)', color: 'var(--paper)', lineHeight: 1.4, letterSpacing: '-0.02em', maxWidth: 880 },
  footAccent: { color: 'var(--yellow)' },
};

const KNOW = [
  { icon: '01', name: 'Their dream', body: 'The business they want to build and the life they want it to fund, in their own words.' },
  { icon: '02', name: 'Their stage', body: 'Idea, side hustle, first sale, scaling or stuck. We know where each founder actually is.' },
  { icon: '03', name: 'Their sector', body: 'What they\'re building and the market they\'re building it in, so the right help finds the right founder.' },
  { icon: '04', name: 'Their progress', body: 'Milestones hit and walls hit. The story of momentum, not a static signup.' },
  { icon: '05', name: 'What they need next', body: 'The exact unblock: capital, an intro, a skill, a customer or just belief.' },
  { icon: '06', name: 'How to reach them', body: 'A live, consented audience we can mobilise for any Dream company or partner launch.' },
];

function DatabaseSection() {
  return (
    <section id="database" style={dbStyles.wrap}>
      <div style={dbStyles.glow}></div>
      <div className="container">
        <div style={dbStyles.head}>
          <div style={dbStyles.chapterLabel}>● The data asset · DreamData</div>
          <h2 style={dbStyles.chapter}>We don't have an audience.<br/>We have <span style={dbStyles.accent}>600,000 dreams.</span></h2>
          <p style={dbStyles.dek}>
            Across HelpBnk and the wider group, we know more than 600,000 entrepreneurs personally: who they are, what they're building, and what would change everything for them. That's not a mailing list. It's a living map of who needs what, next.
          </p>
        </div>

        <div style={dbStyles.bigStat}>
          <div style={dbStyles.bigNum}>600k<span style={dbStyles.bigPlus}>+</span></div>
          <div style={dbStyles.bigLabel}>entrepreneurs we know, and keep learning about</div>
        </div>

        <div style={dbStyles.divider}></div>

        <div style={dbStyles.knowTitle}>● What we know about each one</div>
        <div style={dbStyles.grid} className="db-grid">
          {KNOW.map((k) => (
            <div key={k.icon} style={dbStyles.card}>
              <div style={dbStyles.cardIcon}>{k.icon}</div>
              <div style={dbStyles.cardName}>{k.name}</div>
              <div style={dbStyles.cardBody}>{k.body}</div>
            </div>
          ))}
        </div>

        <p style={dbStyles.footnote}>
          Every Dream company plugs into DreamData. <span style={dbStyles.footAccent}>The more we help, the more we learn, and the better we help.</span> That loop is what makes us hard to copy.
        </p>
      </div>

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