function Hero() {
  return (
    <section className="hero" id="top">
      {/* Sparkles scattered around */}
      <Sparkle size={56} style={{ top: '14%', left: '4%', transform: 'rotate(8deg)' }} />
      <Sparkle size={32} style={{ top: '70%', left: '8%', transform: 'rotate(-12deg)' }} />
      <Sparkle size={40} style={{ top: '20%', right: '6%', transform: 'rotate(15deg)' }} />
      <Sparkle size={28} style={{ top: '78%', right: '12%' }} />

      <div className="container hero-grid">
        <div className="hero-copy">
          <div className="tag-chip" style={{ marginBottom: 24 }}>
            <span className="dot"></span>
            Zaragoza · Café de especialidad
          </div>
          <h1 className="display">
            BUEN<br/>
            <span className="word-c">CAFÉ.</span><br/>
            BUEN ROLLO.
          </h1>
          <p className="hero-sub">
            Tostadores invitados cada semana, leche de competición, tostadas hasta las 13:00 y un bean con gorra que te recibe desde la barra.
          </p>
          <div className="hero-meta">
            <a href="#menu" className="btn btn-primary">
              Ver el menú <ArrowRight size={16} />
            </a>
            <a href="#experiencias" className="btn">
              Cata sensorial
            </a>
          </div>
        </div>

        <div className="hero-mascot-wrap">
          <div className="hero-blob"></div>
          <img src="assets/mascot.png" alt="Mascota Bean Coffee" className="hero-mascot" />

          {/* Sticker badges around the mascot */}
          <div className="sticker" style={{
            top: '6%', right: '-2%',
            width: 110, height: 110,
            transform: 'rotate(12deg)',
            background: 'var(--cream-3)',
            color: 'var(--ink)',
            fontSize: 15,
            fontFamily: 'var(--mono)',
            fontWeight: 700,
            padding: 8,
            textAlign: 'center',
          }}>
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: '1px' }}>
              <span>DESDE</span>
              <span>2.3€</span>
            </span>
          </div>
          <div className="sticker" style={{
            bottom: '4%', left: '-4%',
            width: 104, height: 104,
            transform: 'rotate(-14deg)',
            background: 'var(--matcha)',
            fontSize: 14,
            padding: 10,
            textAlign: 'center',
          }}>
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: '1px' }}>
              <span>MATCHA</span>
              <span>CEREMONIAL</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });