// PageHero.jsx — shared hero section used by compteam and admin.
// Requires React global and window.ASSETS base.

const PageHero = ({ eyebrow, title, subtitle, mascot }) => (
  <section className="scanlines" style={{
    position: 'relative', overflow: 'hidden',
    padding: '80px 24px 60px',
    background: 'radial-gradient(900px 400px at 80% 20%, rgba(59,176,227,0.1), transparent 60%), var(--wbbq-black)',
    borderBottom: '3px solid var(--wbbq-flame)',
  }}>
    <div className="halftone" style={{ position: 'absolute', inset: 0, opacity: 0.4 }} />
    <div className="wrap hero-split" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'center' }}>
      <div>
        <div className="eyebrow">◉ {eyebrow}</div>
        <h1 className="section-title" style={{ marginTop: 16, fontSize: 'clamp(2.25rem, 7vw, 5.5rem)' }}>{title}</h1>
        {subtitle && <p style={{ color: 'var(--fg2)', fontSize: 18, maxWidth: 560, marginTop: 16 }}>{subtitle}</p>}
      </div>
      {mascot && (
        <img className="hero-mascot" src={`${window.ASSETS}mascots/${mascot}`} alt="" style={{ height: 180, animation: 'wiggle 5s ease-in-out infinite' }} />
      )}
    </div>
  </section>
);
window.PageHero = PageHero;