/* global React */
const { useEffect } = React;

function Hero({ variant = 'editorial' }) {
  useEffect(() => {
    const onScroll = () => {
      const title = document.querySelector('.hero-title');
      if (title) title.style.transform = `translateY(${window.scrollY * -0.08}px)`;
      const lead = document.querySelector('.hero-lead');
      if (lead) lead.style.opacity = Math.max(0, 1 - window.scrollY / 500);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero" id="inicio">
      <div className="hero-inner">
        <span className="eyebrow hero-eyebrow">Reformas Integrales · Málaga y Costa del Sol</span>
        <h1 className="display hero-title">
          <span className="word w1">Tu</span>{' '}
          <span className="word w2">hogar</span>{' '}
          <span className="word w3">reformado</span>{' '}
          <span className="word w4">por expertos.</span>
        </h1>
        <p className="lead hero-lead">
          Reformas con presupuesto cerrado, sin compromiso... sin sorpresas.
        </p>

        <div className="hero-ctas">
          <a href="tel:+34951239369" className="btn btn-primary btn-call" aria-label="Llamar al 951 23 93 69">
            <span aria-hidden="true">📞</span>
            <span>951 23 93 69 · Habla con un experto</span>
          </a>
          <a href="#presupuesto" className="btn btn-ghost">Pedir presupuesto gratis →</a>
        </div>
        <div className="hero-cta-note">Sin compromiso · Respuesta en menos de 2 h</div>

        <div className="hero-trust" aria-label="Confianza">
          <div className="ht-item">
            <span className="ht-stars" aria-hidden="true">★★★★★</span>
            <span className="ht-label">Reseñas Google</span>
          </div>
          <div className="ht-divider" />
          <div className="ht-item">
            <span className="ht-value">+6 años</span>
            <span className="ht-label">En Málaga</span>
          </div>
          <div className="ht-divider" />
          <div className="ht-item">
            <span className="ht-value">24-48 h</span>
            <span className="ht-label">Presupuesto</span>
          </div>
        </div>
      </div>

      <div className="hero-marquee">
        <div className="hero-marquee-track">
          {Array.from({ length: 2 }).map((_, k) => (
            <React.Fragment key={k}>
              <span>FORMALIDAD</span>
              <span>·</span>
              <span>TRANSPARENCIA</span>
              <span>·</span>
              <span>ATENCIÓN PERSONALIZADA</span>
              <span>·</span>
              <span>GARANTÍA</span>
              <span>·</span>
              <span>PLAZOS CERRADOS</span>
              <span>·</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;