// Hero — full-screen entrance: letters drift up, then subtitle/divider/tagline/buttons fade up in sequence.
function Hero() {
  const letters = 'LUMERA'.split('');
  return (
    <section id="hero" style={{
      minHeight: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      textAlign: 'center', padding: '9rem 2rem 5rem', position: 'relative', overflow: 'hidden',
    }}>
      {/* warm radial glow + floating petals */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 0, background:
        'radial-gradient(ellipse 60% 50% at 50% 50%, rgba(232,200,192,0.25) 0%, transparent 70%),' +
        'radial-gradient(ellipse 40% 60% at 80% 20%, rgba(201,164,106,0.08) 0%, transparent 60%),' +
        'radial-gradient(ellipse 30% 40% at 20% 80%, rgba(232,200,192,0.12) 0%, transparent 60%)' }} />
      {[['15%','8%','120px','180px','20deg','0s'],['60%','auto','80px','130px','-35deg','2s'],['auto','20%','60px','100px','45deg','4s'],['30%','25%','90px','150px','-15deg','1s']].map((p,i)=>(
        <div key={i} style={{
          position: 'absolute', borderRadius: '50% 0 50% 0', opacity: 0.06, background: 'var(--blush)',
          top: p[0] === 'auto' ? 'auto' : p[0], bottom: p[0] === 'auto' ? '20%' : 'auto',
          left: i % 2 === 0 ? p[1] : 'auto', right: i % 2 === 1 ? p[1] : 'auto',
          width: p[2], height: p[3], transform: `rotate(${p[4]})`,
          animation: `lumera-float 8s ease-in-out ${p[5]} infinite`,
        }} />
      ))}

      <div style={{ position: 'relative', zIndex: 1 }}>
        <img src="assets/logo-emblem.png?v=2" alt="Lumera Studio" style={{
          height: 'clamp(96px, 14vw, 150px)', width: 'auto', marginBottom: '0.5rem',
opacity: 0, animation: 'lumera-fade-up 0.9s 0.1s forwards' }} />
        <Eyebrow decorated style={{ marginBottom: '1.8rem' }}>Dance Studio · Ñuñoa, Santiago</Eyebrow>
        <h1 aria-label="LUMERA" style={{
          fontFamily: 'var(--font-display)', fontSize: 'var(--text-hero)', fontWeight: 600,
          lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-hero)', margin: '0 0 0.4rem', overflow: 'hidden',
        }}>
          {letters.map((l, i) => (
            <span key={i} style={{
              display: 'inline-block',
              background: 'var(--grad-gold-text)', WebkitBackgroundClip: 'text', backgroundClip: 'text',
              WebkitTextFillColor: 'transparent', opacity: 0, transform: 'translateY(60px)',
              animation: `lumera-letter-in 0.7s var(--ease-silk) ${0.1 + i * 0.1}s forwards`,
            }}>{l}</span>
          ))}
        </h1>
        <p style={{ fontFamily: 'var(--font-script)', fontSize: 'clamp(2rem,5.5vw,3.4rem)', fontWeight: 400,
          color: 'var(--gold-dark)', lineHeight: 1.1, margin: '0.6rem 0 0.4rem',
          opacity: 0, animation: 'lumera-fade-up 0.8s 1.2s forwards' }}>Brilla desde el primer paso</p>
        <div style={{ opacity: 0, animation: 'lumera-fade-up 0.8s 1.4s forwards', margin: '1.2rem 0' }}>
          <Divider glyph={<Icon name="spark" size="0.95rem" />} />
        </div>
        <p style={{ fontFamily: 'var(--font-label)', fontSize: 'var(--text-xs)', letterSpacing: 'var(--ls-label)',
          textTransform: 'uppercase', color: 'var(--taupe)', margin: '0 0 2.8rem',
          opacity: 0, animation: 'lumera-fade-up 0.8s 1.5s forwards' }}>Elegancia en movimiento · Ballroom</p>
        <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap',
          opacity: 0, animation: 'lumera-fade-up 0.8s 1.7s forwards' }}>
          <Button href="#contacto" shimmer>Quiero mi clase gratis</Button>
          <Button href="#ritmos" variant="secondary">Ver ritmos</Button>
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: '2.5rem', left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.4rem',
        opacity: 0, animation: 'lumera-fade-up 0.8s 2.2s forwards',
        fontFamily: 'var(--font-label)', fontSize: 'var(--text-label-sm)', letterSpacing: '0.2em',
        textTransform: 'uppercase', color: 'var(--taupe)' }}>
        <div style={{ width: '1px', height: '40px', background: 'linear-gradient(to bottom, var(--gold), transparent)',
          animation: 'lumera-scroll-pulse 2s ease-in-out infinite' }} />
        <span>descubrir</span>
      </div>
    </section>
  );
}
window.Hero = Hero;