// ============ HERO ============
const { useEffect: useEffectH, useRef: useRefH } = React;

function Hero() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  const spotRef = window.useSpotlight();
  const ctaRef = window.useMagnetic(10);
  const ctaRef2 = window.useMagnetic(8);

  return (
    <section id="top" className="hero spotlight" ref={(el) => { ref.current = el; spotRef.current = el; }}>
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="badge fade-up">
              <span className="dot" />
              {t.hero.badge}
            </span>
            <h1 className="fade-up d1">
              {t.hero.h1Line1}<br/>
              <span className="accent">{t.hero.h1Line2}</span>
            </h1>
            <div className="fade-up d2">
              <window.TypingRotator items={t.hero.rotate} />
            </div>
            <p className="blurb fade-up d3">{t.hero.blurb}</p>
            <div className="hero-ctas fade-up d4">
              <a href="https://github.com/AngeloVPerrotta" target="_blank" rel="noopener noreferrer" className="btn btn-primary magnetic" ref={ctaRef}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M12 .5C5.7.5.5 5.7.5 12c0 5 3.3 9.3 7.8 10.8.6.1.8-.2.8-.6v-2.2c-3.2.7-3.9-1.4-3.9-1.4-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.5-.3-5.2-1.3-5.2-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2.9-.3 2-.4 3-.4s2.1.1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.7 1.6.2 2.9.1 3.1.7.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.4-5.2 5.7.4.3.8 1 .8 2v3c0 .3.2.7.8.6 4.5-1.5 7.8-5.8 7.8-10.8C23.5 5.7 18.3.5 12 .5z"/></svg>
                {t.hero.ctaPrimary}
              </a>
              <a href="https://www.linkedin.com/in/angelo-perrotta/" target="_blank" rel="noopener noreferrer" className="btn btn-ghost magnetic" ref={ctaRef2}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.1c.5-.9 1.8-1.9 3.7-1.9 4 0 4.7 2.6 4.7 6V21h-4v-5.5c0-1.3 0-3-1.9-3s-2.1 1.4-2.1 2.9V21h-4V9z"/></svg>
                {t.hero.ctaSecondary}
              </a>
            </div>
            <div className="hero-socials fade-up d5">
              <a href="https://www.instagram.com/angeloo.pp/" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>
                @angeloo.pp
              </a>
              <a href="mailto:perrottangelo340@gmail.com" aria-label="Email">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
                Mail
              </a>
            </div>
          </div>
          <div className="hero-photo-wrap fade-up d2">
            <span className="hero-ring outer" />
            <span className="hero-ring" />
            <img src="assets/angelo.png" alt="Angelo Perrotta" className="hero-photo" loading="eager" />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;