"use client";

import Image from "next/image";
import Link from "next/link";
import { motion, useScroll, useTransform } from "motion/react";
import { useRef } from "react";
import { IMG } from "@/lib/data";
import { Magnetic } from "../Magnetic";
import { RevealText } from "../Reveal";

export function Hero() {
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const y = useTransform(scrollYProgress, [0, 1], ["0%", "16%"]);
  const opacity = useTransform(scrollYProgress, [0, 0.75], [1, 0]);

  return (
    <section ref={ref} className="relative h-[100svh] min-h-[640px] overflow-hidden bg-ink">
      <motion.div className="absolute inset-0" style={{ y }}>
        <Image
          src={IMG.hero}
          alt="Tireur en tenue tactique, carabine en joue sur le stand"
          fill
          priority
          className="object-cover object-[center_20%]"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-linear-to-t from-ink via-ink/50 to-ink/25" />
      </motion.div>

      <div className="hud-frame pointer-events-none absolute inset-6 md:inset-10" />

      <motion.div
        style={{ opacity }}
        className="relative z-10 flex h-full flex-col justify-end px-5 pb-16 md:px-10 md:pb-20"
      >
        <p className="mb-5 font-mono text-[10px] tracking-[0.4em] text-brass uppercase">
          Société de Tir d’Ostwald · FFTir · 1970
        </p>
        <h1 className="font-display max-w-4xl text-5xl leading-[0.88] sm:text-7xl md:text-[7.2rem]">
          <RevealText text="La ligne. Le calibre. La maîtrise." />
        </h1>
        <div className="mt-10 flex flex-wrap items-center gap-4">
          <Magnetic>
            <Link
              href="/initiation"
              className="inline-flex rounded-sm bg-brass px-7 py-3.5 text-xs tracking-[0.18em] text-ink uppercase"
            >
              Séance d’initiation
            </Link>
          </Magnetic>
          <Link
            href="/stands"
            className="text-xs tracking-[0.16em] uppercase underline decoration-brass/50 underline-offset-4"
          >
            Les 4 stands
          </Link>
        </div>
      </motion.div>

      <motion.div
        className="absolute right-8 bottom-10 hidden font-mono text-[10px] tracking-[0.3em] uppercase md:block"
        animate={{ y: [0, 8, 0] }}
        transition={{ duration: 2.2, repeat: Infinity, ease: "easeInOut" }}
      >
        Feu
      </motion.div>
    </section>
  );
}