"use client";

import { useRef } from "react";
import { LayoutGroup, motion, useInView } from "framer-motion";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/atoms/button";
import TextRotate from "@/components/fancy/text/text-rotate";

const SERVICE_WORDS = ["Internet", "Phone Plans", "VPN", "IT Support", "Business"];

interface HeroSectionProps {
  heroCTARef: React.RefObject<HTMLDivElement | null>;
}

export function HeroSection({ heroCTARef }: HeroSectionProps) {
  const heroRef = useRef<HTMLDivElement>(null);
  const heroInView = useInView(heroRef, { once: true, amount: 0.1 });

  return (
    <motion.div
      ref={heroRef}
      initial={{ opacity: 0, y: 32 }}
      animate={heroInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
      transition={{ duration: 0.7, ease: "easeOut" as const }}
      className="relative flex-1 flex items-center py-16 sm:py-20 lg:py-24 overflow-hidden"
    >
      {/* Gradient Background */}
      <div className="absolute inset-0 bg-gradient-to-br from-surface-sunken via-background to-info-bg/80" />

      {/* Dot Grid Pattern Overlay */}
      <div
        className="absolute inset-0 pointer-events-none"
        aria-hidden="true"
        style={{
          backgroundImage: `radial-gradient(circle at center, color-mix(in oklch, var(--primary) 15%, transparent) 1px, transparent 1px)`,
          backgroundSize: "24px 24px",
        }}
      />

      {/* Subtle gradient accent in corner */}
      <div
        className="absolute -top-32 -right-32 w-96 h-96 rounded-full pointer-events-none"
        aria-hidden="true"
        style={{
          background:
            "radial-gradient(circle, color-mix(in oklch, var(--info) 25%, transparent) 0%, transparent 70%)",
        }}
      />

      <div className="relative mx-auto max-w-3xl px-6 sm:px-10 lg:px-14 text-center">
        <LayoutGroup>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight text-foreground font-heading">
            <span className="block">Seamless IT Solutions</span>
            <motion.span
              className="flex items-center justify-center gap-2 sm:gap-3 mt-2"
              layout
              transition={{ type: "spring", damping: 30, stiffness: 400 }}
            >
              <span className="text-foreground">for</span>
              <TextRotate
                texts={SERVICE_WORDS}
                mainClassName="text-white px-3 sm:px-4 bg-primary overflow-hidden py-1 sm:py-1.5 justify-center rounded-lg"
                staggerFrom="last"
                initial={{ y: "100%" }}
                animate={{ y: 0 }}
                exit={{ y: "-120%" }}
                staggerDuration={0.025}
                splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1"
                transition={{ type: "spring", damping: 30, stiffness: 400 }}
                rotationInterval={2500}
              />
            </motion.span>
          </h1>
        </LayoutGroup>
        <p className="mt-6 text-base sm:text-lg text-muted-foreground leading-relaxed font-semibold max-w-2xl mx-auto">
          From connectivity to communication, we handle the complexity so you can focus on what
          matters — with dedicated English support across Japan.
        </p>
        <div
          ref={heroCTARef}
          className="mt-8 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4"
        >
          <Button
            as="a"
            href="/services"
            variant="pill"
            size="lg"
            rightIcon={<ArrowRight className="h-5 w-5" />}
          >
            Find Your Plan
          </Button>
          <Button as="a" href="#contact" variant="pillOutline" size="lg">
            Talk to Us
          </Button>
        </div>
      </div>
    </motion.div>
  );
}