"use client";

import { motion, useScroll, useTransform } from "motion/react";
import { useRef } from "react";
import Image from "next/image";
import { Link } from "@/i18n/routing";
import { Play } from "lucide-react";

const ease = [0.22, 1, 0.36, 1] as const;

export interface HeroClientProps {
  welcomeText: string;
  title: string;
  description: string;
  ctaText: string;
  ctaHref: string;
  videoText?: string;
  videoHref?: string;
  backgroundSrc?: string;
  backgroundAlt?: string;
  isRtl: boolean;
}

/* Split title into words for stagger */
function AnimatedTitle({ text }: { text: string }) {
  const words = text.split(" ");
  return (
    <h1 className="text-3xl font-bold leading-[1.4] text-white sm:text-4xl lg:text-[48px]">
      <span className="flex flex-wrap gap-x-[0.3em] gap-y-1">
        {words.map((word, i) => (
          <motion.span
            key={i}
            initial={{ opacity: 0, y: 28, filter: "blur(8px)" }}
            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
            transition={{ duration: 0.65, ease, delay: 0.45 + i * 0.08 }}
            className="inline-block"
          >
            {word}
          </motion.span>
        ))}
      </span>
    </h1>
  );
}

export function HeroClient({
  welcomeText,
  title,
  description,
  ctaText,
  ctaHref,
  videoText,
  videoHref,
  backgroundSrc,
  backgroundAlt = "",
  isRtl,
}: HeroClientProps) {
  const sectionRef = useRef<HTMLElement>(null);

  /* Subtle parallax on background image while scrolling */
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ["start start", "end start"],
  });
  const bgY = useTransform(scrollYProgress, [0, 1], ["0%", "18%"]);

  const overlayGradient = isRtl
    ? "linear-gradient(114.68deg, rgba(0,0,0,0) 0.49%, rgb(30,124,115) 94.56%)"
    : "linear-gradient(245.32deg, rgba(0,0,0,0) 0.49%, rgb(30,124,115) 94.56%)";

  return (
    /* Section entrance — scales from 0.97 → 1 (cinematic open) */
    <motion.section
      ref={sectionRef}
      initial={{ opacity: 0, scale: 0.97 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.8, ease }}
      className="relative mx-4 h-[420px] overflow-hidden rounded-[32px] shadow-[0_24px_80px_rgba(13,52,48,0.18)] sm:mx-6 sm:h-[520px] lg:mx-6 lg:h-[644px]"
    >
      {/* ── Background layers ── */}
      <div aria-hidden className="pointer-events-none absolute inset-0">
        {/* Base teal gradient bloom */}
        <motion.div
          className="absolute inset-0 bg-gradient-to-r from-[#155852] to-[#2dbeb1]"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.1, ease: "easeOut" }}
        />

        {/* Background image — Ken Burns pan + parallax scroll */}
        {backgroundSrc && (
          <motion.div
            className="absolute inset-0"
            style={{ y: bgY }}
          >
            <motion.div
              className="absolute inset-0"
              initial={{ scale: 1.08 }}
              animate={{ scale: 1 }}
              transition={{ duration: 8, ease: "easeOut" }}
            >
              <Image
                src={backgroundSrc}
                alt={backgroundAlt}
                fill
                className="object-cover"
                priority
              />
            </motion.div>
          </motion.div>
        )}

        {/* Directional overlay — fades in after image */}
        <motion.div
          className="absolute inset-0"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1.4, ease: "easeOut", delay: 0.15 }}
          style={{ background: overlayGradient }}
        />

        {/* Decorative ambient orb — floats in opposite corner */}
        <motion.div
          className="absolute rounded-full"
          style={{
            width: 360,
            height: 360,
            [isRtl ? "left" : "right"]: -80,
            top: -80,
            background:
              "radial-gradient(ellipse at center, rgba(45,190,177,0.22) 0%, transparent 70%)",
            filter: "blur(48px)",
          }}
          initial={{ opacity: 0, scale: 0.6 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 2.4, ease: "easeOut", delay: 0.3 }}
        />

        {/* Floating geometric ring — luxury accent */}
        <motion.div
          aria-hidden
          className="absolute rounded-full border border-white/8"
          style={{
            width: 280,
            height: 280,
            [isRtl ? "left" : "right"]: 60,
            bottom: -60,
          }}
          initial={{ opacity: 0, scale: 0.7, rotate: -20 }}
          animate={{ opacity: 1, scale: 1, rotate: 0 }}
          transition={{ duration: 2, ease, delay: 0.5 }}
        />
        <motion.div
          aria-hidden
          className="absolute rounded-full border border-white/5"
          style={{
            width: 420,
            height: 420,
            [isRtl ? "left" : "right"]: -10,
            bottom: -120,
          }}
          initial={{ opacity: 0, scale: 0.7 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 2.4, ease, delay: 0.6 }}
        />
      </div>

      {/* ── Content ── */}
      <div className="relative z-10 flex h-full items-center px-6 sm:px-10 lg:px-[80px]">
        {/* Glass card slides in from start side */}
        <motion.div
          initial={{ opacity: 0, x: isRtl ? 48 : -48, filter: "blur(10px)" }}
          animate={{ opacity: 1, x: 0, filter: "blur(0px)" }}
          transition={{ duration: 0.85, ease, delay: 0.2 }}
          className="flex w-full max-w-[560px] flex-col gap-4 rounded-[28px] bg-black/8 p-1 text-start backdrop-blur-[2px] lg:gap-6"
        >
          <div className="relative flex flex-col gap-4 rounded-[26px] border border-white/12 bg-black/10 p-5 lg:gap-6 lg:p-8 overflow-hidden">
            {/* Shimmer sweep across the card on load */}
            <motion.span
              aria-hidden
              className="pointer-events-none absolute inset-y-0 w-1/2 -skew-x-12"
              initial={{ x: "-150%" }}
              animate={{ x: "280%" }}
              transition={{ duration: 1.1, ease: "easeInOut", delay: 0.9 }}
              style={{
                background:
                  "linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)",
              }}
            />

            {/* Welcome badge */}
            <motion.div
              className="flex items-center gap-2"
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.55, ease, delay: 0.35 }}
            >
              {/* Pulsing dot */}
              <span className="relative flex h-3 w-3 shrink-0">
                <motion.span
                  className="absolute inline-flex h-full w-full rounded-full bg-secondary"
                  animate={{ scale: [1, 1.8, 1], opacity: [0.7, 0, 0.7] }}
                  transition={{ duration: 2.2, repeat: Infinity, ease: "easeInOut" }}
                />
                <span className="relative inline-flex h-3 w-3 rounded-full bg-secondary" />
              </span>
              <p className="text-sm font-medium leading-[1.4] text-white sm:text-base">
                {welcomeText}
              </p>
            </motion.div>

            {/* Title — word-by-word stagger */}
            <AnimatedTitle text={title} />

            {/* Description */}
            <motion.p
              className="text-sm font-medium leading-[1.4] text-white sm:text-base lg:text-base"
              initial={{ opacity: 0, y: 14 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, ease, delay: 0.6 + title.split(" ").length * 0.07 }}
            >
              {description}
            </motion.p>

            {/* Actions */}
            <motion.div
              className="flex flex-wrap items-center gap-4"
              initial={{ opacity: 0, y: 14 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.55, ease, delay: 0.75 + title.split(" ").length * 0.07 }}
            >
              {/* CTA — shimmer + hover glow */}
              <Link href={ctaHref}>
                <motion.div
                  whileHover={{
                    scale: 1.05,
                    y: -2,
                    boxShadow: "0 8px 32px -4px rgba(255,255,255,0.35)",
                  }}
                  whileTap={{ scale: 0.97 }}
                  transition={{ duration: 0.2, ease: "easeOut" }}
                  className="relative flex h-12 items-center overflow-hidden rounded-full bg-white px-6 text-sm font-bold tracking-[-0.084px] text-primary"
                >
                  {/* Hover shimmer on CTA */}
                  <motion.span
                    aria-hidden
                    className="absolute inset-0 -skew-x-12 opacity-0 group-hover:opacity-100"
                    whileHover={{ x: ["−100%", "200%"] }}
                    transition={{ duration: 0.55, ease: "easeInOut" }}
                    style={{
                      background:
                        "linear-gradient(90deg, transparent, rgba(30,124,115,0.12), transparent)",
                    }}
                  />
                  {ctaText}
                </motion.div>
              </Link>

              {/* Video button — only rendered when videoText exists */}
              {videoText && (
                <motion.div
                  className="flex items-center gap-3"
                  initial={{ opacity: 0, x: isRtl ? -16 : 16 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.5, ease, delay: 0.9 + title.split(" ").length * 0.07 }}
                >
                  {/* Concentric-ring pulse play button */}
                  <Link
                    href={videoHref ?? "#"}
                    aria-label={videoText}
                    className="relative flex h-12 w-12 shrink-0 items-center justify-center"
                  >
                    {/* Outer pulse ring */}
                    <motion.span
                      aria-hidden
                      className="absolute inset-0 rounded-full border border-white/40"
                      animate={{ scale: [1, 1.45], opacity: [0.6, 0] }}
                      transition={{ duration: 1.8, repeat: Infinity, ease: "easeOut" }}
                    />
                    {/* Middle pulse ring */}
                    <motion.span
                      aria-hidden
                      className="absolute inset-0 rounded-full border border-white/25"
                      animate={{ scale: [1, 1.7], opacity: [0.4, 0] }}
                      transition={{ duration: 1.8, repeat: Infinity, ease: "easeOut", delay: 0.35 }}
                    />
                    {/* Static outer ring */}
                    <span className="absolute inset-0 rounded-full border border-white/50" />
                    {/* Inner ring */}
                    <span className="relative flex h-[calc(100%-4px)] w-[calc(100%-4px)] items-center justify-center rounded-full border border-white/80">
                      <Play className="h-4 w-4 fill-white text-white" />
                    </span>
                  </Link>

                  <motion.span
                    className="text-sm font-medium leading-[1.4] text-white sm:text-base"
                    whileHover={{ x: isRtl ? -3 : 3 }}
                    transition={{ duration: 0.2 }}
                  >
                    {videoText}
                  </motion.span>
                </motion.div>
              )}
            </motion.div>
          </div>
        </motion.div>
      </div>
    </motion.section>
  );
}