"use client";

import Image from "next/image";
import Link from "next/link";
import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import { ArrowRight, ArrowDown, Play } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLanguage } from "@/components/language-provider";

export function Hero() {
  const { t } = useLanguage();
  const ref = useRef<HTMLElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });

  const bgY = useTransform(scrollYProgress, [0, 1], ["0%", "30%"]);
  const contentY = useTransform(scrollYProgress, [0, 1], ["0%", "-15%"]);
  const overlayOpacity = useTransform(scrollYProgress, [0, 1], [0.65, 0.95]);
  const fadeOut = useTransform(scrollYProgress, [0, 0.7], [1, 0]);

  return (
    <section
      ref={ref}
      className="relative isolate min-h-[100svh] w-full overflow-hidden bg-steel-900 text-white"
    >
      {/* Parallax background photo — client-supplied hero shot */}
      <motion.div
        style={{ y: bgY }}
        className="absolute inset-0 -z-20 h-[120%] w-full"
      >
        <Image
          src="/images/client/hero-sekcija.jpg"
          alt="Precision CNC machining at Steel-Tech"
          fill
          priority
          sizes="100vw"
          className="object-cover"
        />
      </motion.div>

      {/* Scroll-linked dark overlay */}
      <motion.div
        style={{ opacity: overlayOpacity }}
        aria-hidden
        className="absolute inset-0 -z-10 bg-gradient-to-b from-steel-900/75 via-steel-900/60 to-steel-900"
      />
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-[radial-gradient(40%_60%_at_70%_30%,rgba(255,255,255,0.10),transparent_70%)]"
      />
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-noise opacity-40 mix-blend-overlay"
      />

      {/* Animated glow blobs */}
      <motion.div
        animate={{ x: [0, 30, 0], y: [0, -20, 0] }}
        transition={{ duration: 14, repeat: Infinity, ease: "easeInOut" }}
        aria-hidden
        className="absolute -left-32 top-1/3 -z-10 h-[420px] w-[420px] rounded-full bg-sky-500/20 blur-[120px]"
      />
      <motion.div
        animate={{ x: [0, -25, 0], y: [0, 25, 0] }}
        transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
        aria-hidden
        className="absolute -right-32 bottom-1/4 -z-10 h-[520px] w-[520px] rounded-full bg-orange-500/15 blur-[140px]"
      />

      {/* Animated grid */}
      <div
        aria-hidden
        className="absolute inset-0 -z-10 bg-grid-steel bg-[size:64px_64px] opacity-[0.08] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"
      />

      <motion.div
        style={{ y: contentY, opacity: fadeOut }}
        className="container-wide relative flex min-h-[100svh] flex-col justify-center pt-24 pb-24 sm:pt-28 sm:pb-32"
      >
        <motion.div
          initial={{ opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="mb-8 inline-flex w-fit items-center gap-2.5 rounded-full border border-white/15 bg-white/[0.07] px-4 py-1.5 backdrop-blur-md"
        >
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />
          </span>
          <span className="text-xs font-medium tracking-wide text-white/90">
            {t.hero.badge}
          </span>
        </motion.div>

        <motion.h1
          key={t.hero.titleA}
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
          className="max-w-4xl font-display text-[2.8rem] sm:text-5xl md:text-6xl lg:text-7xl font-semibold leading-[1.02] tracking-[-0.025em]"
        >
          {t.hero.titleA}{" "}
          <span className="relative inline-block">
            <span className="bg-gradient-to-r from-white via-white to-steel-200 bg-clip-text text-transparent">
              {t.hero.titleHighlight}
            </span>
            <motion.span
              aria-hidden
              initial={{ scaleX: 0 }}
              animate={{ scaleX: 1 }}
              transition={{ delay: 0.9, duration: 0.8, ease: "easeOut" }}
              className="absolute -bottom-1 left-0 h-px w-full origin-left bg-gradient-to-r from-white/60 to-transparent"
            />
          </span>{" "}
          {t.hero.titleB}
        </motion.h1>

        <motion.p
          key={t.hero.subtitle}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.25 }}
          className="mt-7 max-w-2xl text-base sm:text-lg leading-relaxed text-white/80"
        >
          {t.hero.subtitle}
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.35 }}
          className="mt-10 flex flex-col gap-3 sm:flex-row sm:items-center"
        >
          <Link href="/contact">
            <Button
              size="lg"
              variant="primary"
              className="bg-white text-steel-900 hover:bg-white/95 shadow-[0_20px_60px_-15px_rgba(255,255,255,0.35)]"
            >
              {t.hero.primary}
              <ArrowRight />
            </Button>
          </Link>
          <Link href="/services">
            <Button size="lg" variant="outline">
              <Play className="!h-3.5 !w-3.5" />
              {t.hero.secondary}
            </Button>
          </Link>
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1, delay: 0.6 }}
          className="mt-16 grid max-w-2xl grid-cols-3 gap-8 border-t border-white/10 pt-8"
        >
          {t.hero.stats.map((stat, i) => (
            <motion.div
              key={stat.l}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.7 + i * 0.08 }}
            >
              <div className="font-display text-2xl sm:text-3xl font-semibold tracking-tight text-white">
                {stat.v}
              </div>
              <div className="mt-1 text-xs sm:text-sm text-white/55">{stat.l}</div>
            </motion.div>
          ))}
        </motion.div>
      </motion.div>

      <motion.div
        style={{ opacity: fadeOut }}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.1, duration: 0.6 }}
        className="absolute bottom-6 left-1/2 hidden -translate-x-1/2 md:flex"
      >
        <div className="flex flex-col items-center gap-2 text-white/60">
          <span className="text-[10px] font-semibold uppercase tracking-[0.22em]">
            {t.hero.scroll}
          </span>
          <div className="flex h-10 w-6 justify-center rounded-full border border-white/30 p-1">
            <motion.span
              animate={{ y: [0, 14, 0] }}
              transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
              className="block h-1.5 w-1 rounded-full bg-white/80"
            />
          </div>
          <ArrowDown className="h-3 w-3" />
        </div>
      </motion.div>
    </section>
  );
}