"use client";

import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTranslations, useLocale } from "next-intl";
import { ArrowRight, ArrowLeft } from "lucide-react";
import { Link } from "@/lib/i18n/navigation";
import { Button } from "@/components/ui/button";

export function Hero() {
  const t = useTranslations("hero");
  const locale = useLocale();
  const isRtl = locale === "fa";
  const taglines = t.raw("taglines") as string[];
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((i) => (i + 1) % taglines.length);
    }, 3500);
    return () => clearInterval(interval);
  }, [taglines.length]);

  const Arrow = isRtl ? ArrowLeft : ArrowRight;

  return (
    <section className="relative z-10 flex min-h-[90vh] flex-col justify-center px-6 pt-24 pb-16">
      <div className="mx-auto w-full max-w-4xl">
        {/* Eyebrow */}
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="mb-6 flex items-center gap-2"
        >
          <span className="font-mono text-xs text-accent">// CEO @ NODE-Group</span>
          <span className="h-px flex-1 max-w-16 bg-accent/30" />
        </motion.div>

        {/* Name */}
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="mb-6 text-5xl font-bold tracking-tight text-text-primary md:text-7xl"
        >
          {isRtl ? "علی تقوی" : "Ali Taghavi"}
        </motion.h1>

        {/* Rotating tagline */}
        <div className="mb-8 h-14 overflow-hidden">
          <AnimatePresence mode="wait">
            <motion.p
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.4 }}
              className="text-xl text-text-secondary md:text-2xl"
            >
              {taglines[index]}
            </motion.p>
          </AnimatePresence>
        </div>

        {/* Bio */}
        <motion.p
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.3 }}
          className="mb-10 max-w-xl text-base text-text-secondary leading-relaxed"
        >
          {t("bio")}
        </motion.p>

        {/* CTAs */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          className="flex flex-wrap gap-4"
        >
          <Button asChild size="lg">
            <Link href="/work">
              {t("cta_work")} <Arrow size={16} />
            </Link>
          </Button>
          <Button asChild variant="secondary" size="lg">
            <Link href="/writing">{t("cta_writing")}</Link>
          </Button>
        </motion.div>

        {/* Accent glow */}
        <div className="pointer-events-none absolute top-32 start-1/2 -z-10 h-64 w-64 -translate-x-1/2 rounded-full bg-accent/5 blur-3xl" />
      </div>
    </section>
  );
}
