"use client";

import Balancer from "react-wrap-balancer";
import { Button } from "./ui/button";
import { HiArrowRight } from "react-icons/hi2";
import { Badge } from "./badge";
import { motion } from "framer-motion";

import Image from "next/image";
import { useRouter } from "next/navigation";
import Link from "next/link";

export const Hero = () => {
  const router = useRouter();
  return (
    <div className="flex flex-col min-h-screen pt-20 md:pt-40 relative overflow-hidden">
      <motion.div
        initial={{
          y: 40,
          opacity: 0,
        }}
        animate={{
          y: 0,
          opacity: 1,
        }}
        transition={{
          ease: "easeOut",
          duration: 0.5,
        }}
        className="flex justify-center"
      >
        {/* removed badge */}
      </motion.div>
      <motion.h1
        initial={{
          y: 40,
          opacity: 0,
        }}
        animate={{
          y: 0,
          opacity: 1,
        }}
        transition={{
          ease: "easeOut",
          duration: 0.5,
        }}
        className="text-2xl md:text-4xl lg:text-8xl font-bold max-w-6xl mx-auto text-center mt-6 relative z-10 text-[#3d301c] dark:text-[#e5e1d3] font-playfair italic border-b border-[#8b7355] pb-4"
      >
        <Balancer>Explorez l'Histoire, la Littérature et l'Érudition</Balancer>
      </motion.h1>
      <div className="flex justify-center mt-2">
        <div className="h-px w-32 bg-[#8b7355] relative">
          <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 border border-[#8b7355] bg-[#f4f1ea]"></div>
        </div>
      </div>
      <motion.p
        initial={{
          y: 40,
          opacity: 0,
        }}
        animate={{
          y: 0,
          opacity: 1,
        }}
        transition={{
          ease: "easeOut",
          duration: 0.5,
          delay: 0.2,
        }}
        className="text-center mt-6 text-base md:text-xl text-muted dark:text-muted-dark max-w-3xl mx-auto relative z-10"
      >
        <Balancer>
          Mnémosyne est le point de rencontre des passionnés de culture. Partagez vos recherches, débattez d'idées et enrichissez votre savoir au sein d'une communauté d'érudits.
        </Balancer>
      </motion.p>
      <motion.div
        initial={{
          y: 80,
          opacity: 0,
        }}
        animate={{
          y: 0,
          opacity: 1,
        }}
        transition={{
          ease: "easeOut",
          duration: 0.5,
          delay: 0.4,
        }}
        className="flex items-center gap-4 justify-center mt-6 relative z-10"
      >
        <Button className="bg-[#3d301c] dark:bg-[#e5e1d3] text-[#f4f1ea] dark:text-[#1a140a] hover:bg-[#5a4a32] dark:hover:bg-[#c9c4b0] rounded-none border border-[#8b7355] shadow-md uppercase tracking-widest text-xs px-8">
          Rejoindre l'Agora
        </Button>
        <Button
          variant="ghost"
          asChild
          className="text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
        >
          <Link href="/contact" className="flex space-x-2 items-center group">
            <span>Découvrir les contenus</span>
            <HiArrowRight className="text-muted group-hover:translate-x-1 stroke-[1px] h-3 w-3 transition-transform duration-200 dark:text-muted-dark" />
          </Link>
        </Button>
      </motion.div>
      <div className="p-4 border border-neutral-200 bg-neutral-100 dark:bg-neutral-800 dark:border-neutral-700 rounded-[32px] mt-20 relative">
        <div className="absolute inset-x-0 bottom-0 h-40 w-full bg-gradient-to-b from-transparent via-white to-white dark:via-black/50 dark:to-black scale-[1.1] pointer-events-none" />
        <div className="p-2 bg-white dark:bg-black dark:border-neutral-700 border border-neutral-200 rounded-[24px]">
          <Image
            src="https://images.unsplash.com/photo-1738340569223-9fd15a8c1b9d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxhbmNpZW50JTIwZ3JlZWNlJTIwYWNyb3BvbGlzJTIwcGFydGhlbm9uJTIwYXJjaGl0ZWN0dXJlfGVufDB8fHx8MTc2ODU1NDg4OHww&ixlib=rb-4.1.0&q=80&w=1080"
            alt="Vue de l'Acropole d'Athènes, Grèce Antique"
            width={1920}
            height={1080}
            className="rounded-[20px] border-2 border-[#8b7355] sepia-[0.3]"
          />
        </div>
      </div>
    </div>
  );
};