function Hero({ t }) {
  const [scrollY, setScrollY] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Horizontal rotation around Y axis
  const rotateY = scrollY * 0.6;
  // Parallax for the side words
  const parallaxLeft = -scrollY * 0.15;
  const parallaxRight = scrollY * 0.15;

  return (
    <section id="top" style={{
      position:'relative',
      minHeight: '100vh',
      paddingTop: 100,
      paddingBottom: 60,
      overflow:'hidden',
    }}>
      {/* Wrapper with 3D perspective */}
      <div className="hero-stage" style={{
        position:'relative',
        height: 'clamp(280px, 42vw, 580px)',
        perspective: '2000px',
      }}>
        {/* Block that flips horizontally on scroll */}
        <div style={{
          position:'absolute', inset:0,
          display:'flex', alignItems:'center', justifyContent:'center',
          transform: `rotateY(${rotateY}deg)`,
          transformStyle: 'preserve-3d',
          willChange: 'transform',
        }}>
          {/* Left "votre" */}
          <div className="hero-word" style={{
            position:'absolute', left: 'clamp(-20px, 2vw, 60px)', top: '50%',
            transform: `translate(${parallaxLeft}px, -50%)`,
            fontFamily:'Bricolage Grotesque',
            fontWeight: 800, fontStyle:'italic',
            fontSize: 'clamp(110px, 22vw, 320px)',
            letterSpacing: '-0.05em',
            lineHeight: 0.85,
            color: 'var(--ink)',
            zIndex: 1,
          }}>
            {t.heroLeft}
          </div>

          {/* Right "beauté" */}
          <div className="hero-word" style={{
            position:'absolute', right: 'clamp(-20px, 2vw, 60px)', top:'50%',
            transform: `translate(${parallaxRight}px, -50%)`,
            fontFamily:'Bricolage Grotesque',
            fontWeight: 800, fontStyle:'italic',
            fontSize: 'clamp(110px, 22vw, 320px)',
            letterSpacing:'-0.05em',
            lineHeight: 0.85,
            color: 'var(--ink)',
            zIndex: 1,
          }}>
            {t.heroRight}
          </div>

          {/* Center medallion with floating bob */}
          <div className="hero-medallion" style={{
            position:'relative', zIndex: 2,
            width: 'clamp(280px, 38vw, 520px)',
            aspectRatio: '1/1',
            display:'flex', alignItems:'center', justifyContent:'center',
            animation: 'heroFloat 6s ease-in-out infinite',
          }}>
            <BrandLogo
              variant="medallion"
              style={{
                width:'100%',
                height:'100%',
                filter: 'drop-shadow(0 30px 60px rgba(231,106,160,0.35))',
              }}
            />
          </div>
        </div>
      </div>

      <style>{`
        @keyframes heroFloat {
          0%,100% { transform: translateY(0) }
          50% { transform: translateY(-14px) }
        }
      `}</style>

      {/* Scroll cue + subhero stripe */}
      <Reveal delay={200}>
        <div className="wrap hero-subgrid" style={{
          marginTop: 60,
          display:'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 40,
          alignItems:'flex-start',
        }}>
          <div>
            <div className="mono-tiny" style={{ color:'var(--gray-400)' }}>{t.aboutKicker}</div>
            <div style={{ marginTop: 4, fontWeight: 600, fontSize: 14 }}>{t.aboutLabel}</div>
          </div>
          <div style={{ maxWidth: 360, justifySelf:'end' }}>
            <p style={{ fontSize: 15, lineHeight: 1.55, color:'var(--ink-soft)', marginBottom: 18 }}>
              {t.heroPitch}
            </p>
            <a href="#services" className="pill-btn">
              {t.learnMore}
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </Reveal>

      {/* Marquee strip */}
      <div style={{ marginTop: 40, padding: '14px 0', borderTop: '1px solid var(--gray-200)', borderBottom: '1px solid var(--gray-200)' }}>
        <Marquee speed={50}>
          {['MANICURE','✦','PEDICURE','✦','GELINHO','✦','HENNA','✦','MICROPIGMENTAÇÃO','✦','MASSAGENS','✦','JET BRONZE','✦'].map((w,i) => (
            <span key={i} style={{
              fontFamily: i % 2 === 0 ? 'Instrument Serif' : 'Space Grotesk',
              fontStyle: i % 2 === 0 ? 'italic' : 'normal',
              fontSize: i % 2 === 0 ? 32 : 14,
              letterSpacing: i % 2 === 0 ? 0 : '0.2em',
              color: i % 2 === 0 ? 'var(--pink-500)' : 'var(--ink)',
              padding: '0 28px',
            }}>{w}</span>
          ))}
        </Marquee>
      </div>
    </section>
  );
}

window.Hero = Hero;