// Explorations — pinned center text + parallax columns
const { useEffect: useEffectE, useRef: useRefE, useState: useStateE } = React;

const EXPLORATIONS = [
  { img: "https://images.unsplash.com/photo-1557672172-298e090bd0f1?auto=format&fit=crop&w=900&q=80", rotate: -2 },
  { img: "https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=900&q=80", rotate: 1.5 },
  { img: "https://images.unsplash.com/photo-1542831371-29b0f74f9713?auto=format&fit=crop&w=900&q=80", rotate: 2 },
  { img: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=900&q=80", rotate: -1.5 },
  { img: "https://images.unsplash.com/photo-1620207418302-439b387441b0?auto=format&fit=crop&w=900&q=80", rotate: 1 },
  { img: "https://images.unsplash.com/photo-1545987796-200677ee1011?auto=format&fit=crop&w=900&q=80", rotate: -2.5 },
];

function Explorations() {
  const sectionRef = useRefE(null);
  const contentRef = useRefE(null);
  const colLeftRef = useRefE(null);
  const colRightRef = useRefE(null);
  const [lightbox, setLightbox] = useStateE(null);

  useEffectE(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    window.gsap.registerPlugin(window.ScrollTrigger);

    const ctx = window.gsap.context(() => {
      // Pin the center content
      const pinST = window.ScrollTrigger.create({
        trigger: sectionRef.current,
        start: "top top",
        end: "bottom bottom",
        pin: contentRef.current,
        pinSpacing: false,
      });

      // Parallax columns
      const leftST = window.gsap.to(colLeftRef.current, {
        y: -200,
        ease: "none",
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top bottom",
          end: "bottom top",
          scrub: 1,
        },
      });
      const rightST = window.gsap.to(colRightRef.current, {
        y: -350,
        ease: "none",
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top bottom",
          end: "bottom top",
          scrub: 1,
        },
      });

      return () => {
        pinST.kill();
        leftST.scrollTrigger && leftST.scrollTrigger.kill();
        rightST.scrollTrigger && rightST.scrollTrigger.kill();
      };
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  const left = EXPLORATIONS.filter((_, i) => i % 2 === 0);
  const right = EXPLORATIONS.filter((_, i) => i % 2 === 1);

  return (
    <>
      <section
        ref={sectionRef}
        id="explorations"
        className="relative bg-bg overflow-hidden"
        style={{ minHeight: "300vh" }}
      >
        {/* Pinned center */}
        <div
          ref={contentRef}
          className="h-screen w-full flex items-center justify-center px-6 z-10 relative"
        >
          <div className="text-center max-w-2xl">
            <div className="flex items-center justify-center gap-3 mb-5">
              <span className="w-8 h-px bg-stroke"></span>
              <span className="text-xs text-muted uppercase tracking-[0.3em]">Innovation Lab</span>
              <span className="w-8 h-px bg-stroke"></span>
            </div>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-body font-light text-text-primary leading-[1.05] tracking-tight">
              Creative technology <span className="font-display italic">experiments</span>
            </h2>
            <p className="text-sm md:text-base text-muted mt-5 max-w-md mx-auto">
              A curated selection of generative design studies, AI concepts, interactive prototypes and visual explorations created for digital communication, brand experiences and retail activation.
            </p>
            <a
              href="#"
              className="inline-flex group relative rounded-full mt-8"
            >
              <span className="absolute inset-[-2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity accent-gradient-anim"></span>
              <span className="relative inline-flex items-center rounded-full text-sm px-5 py-3 border border-stroke bg-bg text-text-primary group-hover:border-transparent gap-2 transition-colors">
                Explore innovation projects
                <span className="opacity-70">↗</span>
              </span>
            </a>
          </div>
        </div>

        {/* Parallax columns */}
        <div className="absolute top-0 left-0 right-0 h-full z-20 pointer-events-none">
          <div className="max-w-[1400px] mx-auto h-full px-6 md:px-10 lg:px-16">
            <div className="grid grid-cols-2 gap-12 md:gap-40 h-full pointer-events-none">
              <div ref={colLeftRef} className="flex flex-col gap-12 md:gap-20 pt-[20vh] pointer-events-auto">
                {left.map((it, i) => (
                  <button
                    key={i}
                    onClick={() => setLightbox(it.img)}
                    className="group block aspect-square max-w-[320px] w-full self-end bg-surface border border-stroke rounded-3xl overflow-hidden transition-transform duration-500 hover:scale-[1.02]"
                    style={{ transform: `rotate(${it.rotate}deg)` }}
                  >
                    <img src={it.img} alt="" loading="lazy" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                  </button>
                ))}
              </div>
              <div ref={colRightRef} className="flex flex-col gap-12 md:gap-20 pt-[60vh] pointer-events-auto">
                {right.map((it, i) => (
                  <button
                    key={i}
                    onClick={() => setLightbox(it.img)}
                    className="group block aspect-square max-w-[320px] w-full self-start bg-surface border border-stroke rounded-3xl overflow-hidden transition-transform duration-500 hover:scale-[1.02]"
                    style={{ transform: `rotate(${it.rotate}deg)` }}
                  >
                    <img src={it.img} alt="" loading="lazy" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Lightbox */}
      {lightbox && (
        <div
          className="fixed inset-0 z-[200] bg-bg/90 backdrop-blur-md flex items-center justify-center p-6"
          onClick={() => setLightbox(null)}
          style={{ animation: "fadeBox 0.25s ease-out both" }}
        >
          <button
            onClick={() => setLightbox(null)}
            className="absolute top-6 right-6 w-10 h-10 rounded-full border border-stroke flex items-center justify-center text-text-primary hover:bg-stroke/50"
            aria-label="Close"
          >
            ✕
          </button>
          <img
            src={lightbox}
            alt=""
            className="max-w-[90vw] max-h-[85vh] rounded-3xl border border-stroke object-contain"
          />
          <style>{`@keyframes fadeBox { from {opacity:0;} to {opacity:1;} }`}</style>
        </div>
      )}
    </>
  );
}

window.Explorations = Explorations;