"use client";

import { useEffect, useRef } from "react";
import KineticTitle from "@/components/KineticTitle";
import Reveal from "@/components/Reveal";
import { VENTURES } from "@/lib/site";
import { gsap, prefersReducedMotion } from "@/lib/gsap";

/** 03 — The Ventures: pinned horizontal-scroll gallery on desktop, snap scroll on mobile. */
export default function Ventures() {
  const sectionRef = useRef<HTMLElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (prefersReducedMotion()) return;
    const section = sectionRef.current;
    const track = trackRef.current;
    if (!section || !track) return;

    const mm = gsap.matchMedia();
    mm.add("(min-width: 1024px)", () => {
      const getDistance = () => track.scrollWidth - window.innerWidth;
      const tween = gsap.to(track, {
        x: () => -getDistance(),
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: () => `+=${getDistance()}`,
          scrub: 1,
          pin: true,
          invalidateOnRefresh: true,
          anticipatePin: 1,
        },
      });
      return () => {
        tween.scrollTrigger?.kill();
        tween.kill();
      };
    });

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

  return (
    <section ref={sectionRef} id="ventures" className="relative overflow-hidden bg-charcoal">
      <div className="mx-auto max-w-[1440px] px-6 pt-28 md:px-10 md:pt-36">
        <Reveal>
          <p className="kicker mb-6">02 — The Ventures</p>
        </Reveal>
        <div className="flex flex-wrap items-end justify-between gap-6">
          <KineticTitle
            as="h2"
            text="Four bets on Africa's digital decade."
            className="font-display max-w-3xl text-4xl font-black leading-[1.06] tracking-[-0.02em] text-ivory md:text-6xl"
          />
          <div className="hidden items-center gap-3 pb-2 font-mono text-[0.62rem] uppercase tracking-[0.3em] text-warmgrey lg:flex" aria-hidden>
            Scroll <span className="inline-block h-px w-14 bg-gold/60" /> →
          </div>
        </div>
      </div>

      <div
        ref={trackRef}
        className="mt-14 flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 pb-28 md:px-10 md:pt-6 lg:snap-none lg:overflow-visible lg:pb-40"
      >
        {VENTURES.map((v) => (
          <article
            key={v.name}
            className="group relative w-[82vw] flex-shrink-0 snap-start sm:w-[58vw] lg:w-[38vw] xl:w-[34vw]"
          >
            <div className="relative overflow-hidden">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={v.image}
                alt={v.alt}
                loading="lazy"
                decoding="async"
                className="aspect-[4/3] w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.05]"
              />
              <div
                className="absolute inset-0 bg-gradient-to-t from-obsidian/90 via-obsidian/10 to-transparent"
                aria-hidden
              />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <div className="font-mono text-[0.6rem] uppercase tracking-[0.3em] text-gold">
                  {v.index} · {v.role}
                </div>
                <h3 className="font-display mt-2 text-2xl font-black tracking-tight text-ivory md:text-3xl">
                  {v.name}
                </h3>
              </div>
            </div>
            <p className="mt-4 max-w-md text-[0.92rem] leading-relaxed text-ivory/70">
              {v.oneLiner}
            </p>
            <div className="mt-3 font-mono text-[0.66rem] uppercase tracking-[0.18em] text-warmgrey transition-colors duration-500 group-hover:text-gold">
              {v.metric}
            </div>
          </article>
        ))}

        {/* End card */}
        <div className="flex w-[60vw] flex-shrink-0 items-center justify-center lg:w-[24vw]">
          <div className="text-center">
            <div className="font-editorial text-3xl italic text-warmgrey">…and counting.</div>
            <a
              href="#contact"
              className="btn-underline mt-4 inline-block font-mono text-[0.66rem] uppercase tracking-[0.26em] text-gold"
            >
              Partner with Damian
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}