// Hero — DARK navy background per the user-provided reference image.
// Header sits transparent over this; goes solid-white once user scrolls past.
// Exports: Hero

function Hero() {
  const sceneRef = React.useRef(null);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const [parallaxOn, setParallaxOn] = React.useState(true);

  React.useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const update = () => setParallaxOn(!mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, []);

  const handleMouseMove = (e) => {
    if (!parallaxOn || !sceneRef.current) return;
    const rect = sceneRef.current.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
    const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
    setMouse({
      x: Math.max(-1, Math.min(1, x)),
      y: Math.max(-1, Math.min(1, y)),
    });
  };

  const handleMouseLeave = () => setMouse({ x: 0, y: 0 });

  const { x, y } = mouse;

  const parallax = ({ tx = 10, ty = 8, rot = 0, rotY = 0, rotX = 0, origin = 'center center' } = {}) => ({
    transform: [
      `translate3d(${x * tx}px, ${y * ty}px, 0)`,
      rotY ? `perspective(900px) rotateY(${x * rotY}deg)` : '',
      rotX ? `rotateX(${y * rotX}deg)` : '',
      rot ? `rotate(${x * rot + y * rot * 0.3}deg)` : '',
    ].filter(Boolean).join(' '),
    transformOrigin: origin,
  });

  return (
    <section className="section section--dark" style={{
      paddingTop: 140, paddingBottom: 100, position: 'relative',
      backgroundColor: '#02145a',
      backgroundImage: [
        'radial-gradient(120% 95% at 100% 0%, rgba(2,20,90,0.98) 0%, rgba(2,20,90,0.98) 34%, rgba(2,20,90,0.55) 56%, rgba(2,20,90,0) 78%)',
        'radial-gradient(ellipse at 70% 40%, #122A8C 0%, #050A30 60%, #02061F 100%)',
      ].join(', '),
    }}>
      <div className="container" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'center' }}>
        {/* Left — headline + CTAs */}
        <div className="hero-content hero-enter-left" style={{ display: 'flex', flexDirection: 'column', gap: 26, position: 'relative', zIndex: 2 }}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 64,
            fontWeight: 800,
            lineHeight: 1.05,
            letterSpacing: '-0.025em',
            color: '#fff',
          }}>
            Soluciones <span style={{ color: '#20E7AF' }}>químicas</span> para limpieza <span style={{ color: '#20E7AF' }}>profesional</span>
          </h1>

          <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55, maxWidth: 500 }}>
            Productos de alto desempeño para higiene, desinfección y mantenimiento.
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 4 }}>
            <button className="btn btn--primary">
              <Icon name="fileText" size={18} />
              Solicitar cotización
            </button>
            <button className="btn btn--ghost-white">
              <Icon name="package" size={18} />
              Ver productos
            </button>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4, color: 'rgba(255,255,255,0.85)', fontSize: 14 }}>
            <Icon name="shield" size={18} color="#20E7AF" />
            Calidad, rendimiento y respaldo para cada necesidad.
          </div>

          <div style={{ display: 'flex', gap: 36, marginTop: 14, flexWrap: 'wrap' }}>
            {[
              { icon: 'shieldCheck', l1: 'Fórmulas de', l2: 'alto desempeño' },
              { icon: 'flask',        l1: 'Calidad',     l2: 'garantizada' },
              { icon: 'sparkles',     l1: 'Respaldo y soporte', l2: 'especializado' },
            ].map(item => (
              <div key={item.l2} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div className="orb orb--sm orb--outline on-dark"><Icon name={item.icon} size={20} /></div>
                <div style={{ display: 'flex', flexDirection: 'column', fontSize: 13, color: 'rgba(255,255,255,0.85)', lineHeight: 1.3 }}>
                  <span>{item.l1}</span>
                  <span>{item.l2}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Right — layered animated hero scene */}
        <div className="hero-scene-wrap" style={{ position: 'relative', zIndex: 1 }}>
          <div
            ref={sceneRef}
            className="hero-scene"
            role="img"
            aria-label="Productos químicos DISPROQUILIM para limpieza profesional"
            onMouseMove={handleMouseMove}
            onMouseLeave={handleMouseLeave}
          >
            <img className="hero-scene__layer hero-scene__table" src="assets/hero/textura de mesa de acero.png" alt="" />

            <div className="hero-parallax hero-parallax--bubble" style={parallax({ tx: 10, ty: 8, rot: 32, origin: '30% 30%' })}>
              <img className="hero-scene__layer hero-scene__circle-tl" src="assets/hero/Circle BG Top Left copy.png" alt="" />
            </div>

            <div className="hero-parallax hero-parallax--bubble" style={parallax({ tx: 12, ty: 10, rot: -38, origin: '75% 70%' })}>
              <img className="hero-scene__layer hero-scene__circle-br" src="assets/hero/Circle BG Bottom Right.png" alt="" />
            </div>

            <div
              className="hero-parallax hero-parallax--grid"
              style={parallax({ tx: 7, ty: 5, rotY: 18, rotX: -10, origin: '88% 14%' })}
            >
              <img className="hero-scene__layer hero-scene__grid" src="assets/hero/cuadricula superior derecha.png" alt="" />
            </div>

            <div className="hero-parallax hero-parallax--line" style={parallax({ tx: 8, ty: 6, rot: -12, origin: '18% 82%' })}>
              <img className="hero-scene__layer hero-scene__line" src="assets/hero/Circle Line Bottom Left.png" alt="" />
            </div>

            <div className="hero-scene__products">
              <div className="hero-parallax hero-parallax--product" style={parallax({ tx: 6, ty: 5, rotY: 9, rotX: -5, origin: '50% 52%' })}>
                <img className="hero-scene__layer hero-scene__reflect" src="assets/hero/Reflejo producto.png" alt="" />
                <img className="hero-scene__layer hero-scene__product" src="assets/hero/Producto.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;