"use client";

import { useTranslation } from "@/hooks/useTranslation";
import { Container } from "@/components/common/Container";
import { DriftBlobs, MagneticLink } from "@/components/home/Hero";
import Image from "next/image";
import { Reveal } from "@/components/motion/Reveal";
import { Key, User } from "lucide-react";
import { m } from "framer-motion";
import { cn } from "@/lib/utils";

export function AgentHero() {
  const { t } = useTranslation();
  const headline = t("agentHero.title");
  const headlineWords = headline.split(" ");
  const accentWords = 2; // e.g. "with XRemit"

  return (
    <section className="relative isolate overflow-hidden pt-10 pb-20 lg:pb-28">
      {/* Background elements */}
      <DriftBlobs />
      <m.div
        aria-hidden
        className="absolute inset-0 -z-10 grid-pattern opacity-50 dark:opacity-25"
        animate={{ backgroundPositionX: ["0px", "48px"] }}
        transition={{ duration: 18, ease: "linear", repeat: Infinity }}
      />

      <Container>
        <div className="mt-10 grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          {/* Left content */}
          <div>
            <h1 className="text-balance text-display-xl tracking-tight text-slate-900 dark:text-white sm:text-display-2xl font-bold">
              <m.span
                initial="hidden"
                animate="visible"
                variants={{
                  hidden: {},
                  visible: {
                    transition: { staggerChildren: 0.04, delayChildren: 0.05 },
                  },
                }}
                className="inline"
              >
                {headlineWords.map((word, i) => {
                  const isAccent = i >= headlineWords.length - accentWords;
                  return (
                    <m.span
                      key={`${word}-${i}`}
                      variants={{
                        hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
                        visible: {
                          opacity: 1,
                          y: 0,
                          filter: "blur(0px)",
                          transition: { duration: 0.5 },
                        },
                      }}
                      className={cn(
                        "inline-block",
                        isAccent && "text-brand-600 dark:text-brand-400"
                      )}
                    >
                      {word}
                      {i < headlineWords.length - 1 ? " " : ""}
                    </m.span>
                  );
                })}
              </m.span>
            </h1>

            <Reveal delay={0.35}>
              <p className="mt-6 max-w-xl text-pretty text-base leading-[1.7] text-slate-600 dark:text-slate-300 sm:text-lg">
                {t("agentHero.subtitle")}
              </p>
            </Reveal>

            <Reveal
              delay={0.45}
              className="mt-8 flex flex-wrap items-center gap-4"
            >
              <MagneticLink
                href="/agent/login"
                className="group inline-flex items-center justify-center gap-2 rounded-full border-2 border-slate-200 bg-white px-7 py-3 text-base font-semibold text-slate-800 shadow-sm transition-all duration-200 hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:border-slate-600 dark:hover:bg-slate-800"
              >
                <Key className="h-4 w-4 text-slate-500 dark:text-slate-400" />
                {t("agentHero.login")}
              </MagneticLink>

              <MagneticLink
                href="/agent/register"
                className="group inline-flex items-center justify-center gap-2 rounded-full bg-brand-600 px-7 py-3.5 text-base font-semibold text-white shadow-soft transition-all duration-200 ease-snappy hover:bg-brand-700 hover:shadow-glow"
              >
                <User className="h-4 w-4" />
                {t("agentHero.register")}
              </MagneticLink>
            </Reveal>
          </div>

          {/* Right side placeholder */}
          <div className="relative">
            <Reveal delay={0.2}>
              <div className="relative aspect-square w-full max-w-lg mx-auto lg:mx-0 flex items-center justify-center">
                <div className="relative h-[400px] w-full scale-110 translate-x-8 lg:h-[500px] lg:translate-x-14 rtl:-translate-x-8 lg:rtl:-translate-x-14">
                  <m.div
                    className="relative h-full w-full"
                    animate={{ y: [0, -14, 0] }}
                    transition={{ duration: 4, ease: "easeInOut", repeat: Infinity }}
                  >
                    <Image
                      src="/agent_hero.png"
                      alt={t("agentHero.title") || "Agent Platform"}
                      fill
                      priority
                      className="object-contain drop-shadow-2xl"
                    />
                  </m.div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </Container>
    </section>
  );
}