"use client";

import GlowButton from "@/component/ui/GlowButton";
import { motion, useInView } from "framer-motion";
import { useRef } from "react";

export default function Hero() {
    const ref = useRef<HTMLElement>(null);
    const isInView = useInView(ref, { amount: 0.3 });

    return (
        <section
            id="home"
            ref={ref}
            className="min-h-screen flex items-center justify-center relative bg-slate-900"
        >
            {/* Grid Background animée */}
            <motion.div
                className="absolute inset-0"
                initial={{ opacity: 0 }}
                animate={{ opacity: isInView ? 1 : 0 }}
                transition={{ duration: 1 }}
                style={{
                    backgroundImage:
                        "linear-gradient(to right, #1e293b 1px, transparent 1px), linear-gradient(to bottom, #1e293b 1px, transparent 1px)",
                    backgroundSize: "100px 100px",
                }}
            ></motion.div>

            {/* Content */}
            <motion.div
                className="container mx-auto px-4 text-center relative z-10"
                initial={{ opacity: 0, y: 30 }}
                animate={{
                    opacity: isInView ? 1 : 0,
                    y: isInView ? 0 : 30,
                }}
                transition={{ duration: 0.8, delay: 0.2 }}
            >
                <motion.h1
                    className="text-5xl md:text-7xl font-bold text-white mb-6"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{
                        opacity: isInView ? 1 : 0,
                        y: isInView ? 0 : 20,
                    }}
                    transition={{ duration: 0.8, delay: 0.4 }}
                >
                    Bonjour👋, je suis{" "}
                    <span className="text-transparent bg-clip-text bg-linear-to-r from-blue-400 to-purple-600">
                        Jessy
                    </span>
                </motion.h1>

                <motion.p
                    className="text-xl md:text-2xl text-slate-300 mb-8"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{
                        opacity: isInView ? 1 : 0,
                        y: isInView ? 0 : 20,
                    }}
                    transition={{ duration: 0.8, delay: 0.6 }}
                >
                    Développeur Full Stack | Créateur d&apos;expériences web
                </motion.p>

                <motion.div
                    className="flex gap-4 justify-center flex-wrap"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{
                        opacity: isInView ? 1 : 0,
                        y: isInView ? 0 : 20,
                    }}
                    transition={{ duration: 0.8, delay: 0.8 }}
                >
                    <GlowButton href="#projects" variant="secondary">
                        Voir mes projets
                    </GlowButton>

                    <GlowButton href="#contact" variant="primary">
                        Me contacter
                    </GlowButton>
                </motion.div>
            </motion.div>
        </section>
    );
}
