"use client"

import { useEffect, useRef } from "react"
import Image from "next/image"

export default function ParallaxHero() {
  const parallaxRef = useRef<HTMLDivElement>(null)
  const layersRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (typeof window === "undefined") return

    // Función para manejar el scroll parallax
    const handleScroll = () => {
      if (!layersRef.current) return

      const scrolled = window.pageYOffset
      const rate = scrolled * -0.5

      // Aplicar diferentes velocidades a cada capa
      const layers = [
        { selector: '[data-parallax-layer="1"]', speed: 0.5 },
        { selector: '[data-parallax-layer="2"]', speed: 0.4 },
        { selector: '[data-parallax-layer="3"]', speed: 0.3 },
        { selector: '[data-parallax-layer="4"]', speed: 0.2 },
        { selector: '[data-parallax-layer="5"]', speed: 0.1 },
      ]

      layers.forEach(({ selector, speed }) => {
        const elements = layersRef.current?.querySelectorAll(selector)
        elements?.forEach((element) => {
          const yPos = scrolled * speed
          ;(element as HTMLElement).style.transform = `translateY(${yPos}px)`
        })
      })
    }

    // Throttle para mejor rendimiento
    let ticking = false
    const throttledScroll = () => {
      if (!ticking) {
        requestAnimationFrame(() => {
          handleScroll()
          ticking = false
        })
        ticking = true
      }
    }

    // Agregar event listener
    window.addEventListener("scroll", throttledScroll, { passive: true })

    // Limpiar event listener
    return () => {
      window.removeEventListener("scroll", throttledScroll)
    }
  }, [])

  return (
    <div className="parallax" ref={parallaxRef}>
      <section className="parallax__header">
        <div className="parallax__visuals">
          <div className="parallax__black-line-overflow"></div>
          <div data-parallax-layers className="parallax__layers" ref={layersRef}>
            <Image
              src="/images/parallax1.webp"
              alt="Capa parallax 1"
              width={800}
              height={600}
              data-parallax-layer="1"
              className="parallax__layer-img"
              priority
            />
            <Image
              src="/images/parallax4.webp"
              alt="Capa parallax 4"
              width={800}
              height={600}
              data-parallax-layer="3"
              className="parallax__layer-img"
            />
            <Image
              src="/images/parallax3.webp"
              alt="Capa parallax 3"
              width={800}
              height={600}
              data-parallax-layer="4"
              className="parallax__layer-img"
            />
            <div data-parallax-layer="2" className="parallax__layer-title">
              <h1 className="parallax__title">Asociación Cultural Sanmartiniana</h1>
              <h2 className="parallax__subtitle">Cuna de la bandera</h2>
            </div>
            <Image
              src="/images/parallax2.webp"
              alt="Capa parallax 2"
              width={800}
              height={600}
              data-parallax-layer="5"
              className="parallax__layer-img"
            />
          </div>
          <div className="parallax__caption px-4 sm:px-6 md:px-8">
            <p className="text-sm sm:text-base md:text-lg lg:text-xl leading-relaxed max-w-4xl mx-auto">
              La Asociación Cultural Sanmartiniana "Cuna de la Bandera" preserva y difunde el legado del General San
              Martín a través de recreaciones históricas del Cruce de los Andes, manteniendo viva la memoria de la gesta
              libertadora.
            </p>
          </div>
          <div className="parallax__fade"></div>
        </div>
      </section>
      {/* <section className="parallax__content">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          viewBox="0 0 160 160"
          fill="none"
          className="osmo-icon-svg"
        >
          <path
            d="M94.8284 53.8578C92.3086 56.3776 88 54.593 88 51.0294V0H72V59.9999C72 66.6273 66.6274 71.9999 60 71.9999H0V87.9999H51.0294C54.5931 87.9999 56.3777 92.3085 53.8579 94.8283L18.3431 130.343L29.6569 141.657L65.1717 106.142C67.684 103.63 71.9745 105.396 72 108.939V160L88.0001 160L88 99.9999C88 93.3725 93.3726 87.9999 100 87.9999H160V71.9999H108.939C105.407 71.9745 103.64 67.7091 106.12 65.1938L106.142 65.1716L141.657 29.6568L130.343 18.3432L94.8284 53.8578Z"
            fill="currentColor"
          />
        </svg>
      </section> */}
    </div>
  )
}