const coverStyles = {
  wrap: { background: 'var(--ink)', color: 'var(--paper)', minHeight: '95vh', position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column' },
  bg: { position: 'absolute', inset: 0, opacity: 0.38 },
  bgImg: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%', filter: 'grayscale(0.15) contrast(1.05)' },
  scrim: { position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(30,88,100,.55) 0%, rgba(30,88,100,.2) 40%, rgba(30,88,100,.75) 100%)' },

  topbar: { position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '32px 0', borderBottom: '1px solid rgba(255,255,255,.18)', flexWrap: 'wrap', gap: 12 },
  topMicro: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,.85)' },

  badge: {
    display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: 10,
    background: 'var(--yellow)', color: 'var(--ink)',
    padding: '10px 18px', borderRadius: 999,
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 12, fontWeight: 700,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    marginBottom: 36,
  },
  badgeDot: { width: 8, height: 8, borderRadius: '50%', background: 'var(--ink)' },

  hero: { flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 80, paddingBottom: 80, position: 'relative' },
  title: {
    fontFamily: 'Plus Jakarta Sans, sans-serif',
    fontWeight: 800,
    fontSize: 'clamp(96px, 18vw, 280px)',
    lineHeight: 0.85,
    letterSpacing: '-0.05em',
    color: 'var(--paper)',
  },
  titleDot: { color: 'var(--yellow)' },
  heroLogo: { width: 'clamp(300px, 56vw, 780px)', height: 'auto', maxWidth: '100%', display: 'block' },
  sub: {
    fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 500,
    fontSize: 'clamp(20px, 2.4vw, 30px)', lineHeight: 1.35,
    color: 'rgba(255,255,255,.92)', maxWidth: 760, marginTop: 36,
    letterSpacing: '-0.01em',
  },
  subEm: { color: 'var(--yellow)', fontWeight: 700 },

  meta: { marginTop: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' },
  metaLeft: { display: 'flex', gap: 32, flexWrap: 'wrap' },
  metaItem: {},
  metaLabel: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'rgba(255,255,255,.55)', marginBottom: 6 },
  metaVal: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 15, fontWeight: 600, color: 'var(--paper)' },

  scribbleStamp: {
    position: 'absolute', top: '18%', right: '6%',
    background: 'var(--yellow)', color: 'var(--ink)',
    padding: '14px 22px', transform: 'rotate(-6deg)',
    fontFamily: 'Caveat, cursive', fontWeight: 700, fontSize: 26,
    lineHeight: 1.05, whiteSpace: 'nowrap', textAlign: 'center',
    boxShadow: '0 14px 30px rgba(0,0,0,.4)',
    borderRadius: 8,
    zIndex: 3,
  },
};

function Cover() {
  return (
    <section id="top" style={coverStyles.wrap}>
      <div style={coverStyles.bg}>
        <img src="assets/hero-studio.webp" alt="" style={coverStyles.bgImg} className="cover-bg-img" />
      </div>
      <div style={coverStyles.scrim} />

      <div className="container cover-hero" style={{ ...coverStyles.hero, zIndex: 2 }}>
        <div style={coverStyles.badge}>
          <span style={coverStyles.badgeDot}></span>
          An introduction to the group
        </div>
        <h1 style={coverStyles.title}>
          <img src="assets/dream-logo-white.png" alt="Dream" style={coverStyles.heroLogo} />
        </h1>
        <p style={coverStyles.sub}>
          Helping people chase their dream through entrepreneurship. A group of companies on a mission to <span style={coverStyles.subEm}>help 10 million people start a business</span>.
        </p>

        <div style={coverStyles.meta}>
          <div style={coverStyles.metaLeft}>
            <div style={coverStyles.metaItem}>
              <div style={coverStyles.metaLabel}>● Co-founder</div>
              <div style={coverStyles.metaVal}>Simon Squibb</div>
            </div>
            <div style={coverStyles.metaItem}>
              <div style={coverStyles.metaLabel}>● Companies</div>
              <div style={coverStyles.metaVal}>8 companies · 5 live</div>
            </div>
            <div style={coverStyles.metaItem}>
              <div style={coverStyles.metaLabel}>● Movement</div>
              <div style={coverStyles.metaVal}>#GiveWithoutTake</div>
            </div>
          </div>
          <a href="#manifesto" className="btn btn-yellow">Explore the group →</a>
        </div>
      </div>

      <div style={coverStyles.scribbleStamp} className="cover-stamp">"Start that<br/>business!"</div>
      <style>{`
        @media (max-width: 820px) { .cover-stamp { display: none !important; } }
        @media (max-width: 768px) {
          #top { min-height: 84vh !important; }
          .cover-hero { padding-top: 48px !important; padding-bottom: 72px !important; }
          .cover-bg-img { object-position: 90% 42% !important; }
        }
      `}</style>
    </section>
  );
}