"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowRight, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";

const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            staggerChildren: 0.2,
            delayChildren: 0.3,
        },
    },
};

const itemVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.8,
            ease: [0.22, 1, 0.36, 1], // Custom easing (approx. easeOutQuint/Expo) for a premium feel
        },
    },
};

export function HeroSection() {
    return (
        <div className="container mx-auto max-w-7xl px-4 min-h-[75vh] flex items-center relative z-10">
            <div className="grid lg:grid-cols-2 gap-12 items-center w-full">
                <motion.div
                    className="flex flex-col items-start text-left space-y-8"
                    variants={containerVariants}
                    initial="hidden"
                    animate="visible"
                >
                    <motion.div
                        variants={itemVariants}
                        className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
                    >
                        <Sparkles className="mr-1 h-3 w-3" />
                        AI-Powered Research
                    </motion.div>

                    <motion.h1
                        variants={itemVariants}
                        className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground"
                    >
                        Find Your Next Customers
                        <br />
                        <span className="text-muted-foreground">
                            Before They Know They Need You
                        </span>
                    </motion.h1>

                    <motion.p
                        variants={itemVariants}
                        className="max-w-xl text-lg text-muted-foreground font-light leading-relaxed"
                    >
                        Sanati analyzes your product and finds people on Reddit, Hacker News,
                        and forums who are actively expressing needs that your solution
                        solves.
                    </motion.p>

                    <motion.div
                        variants={itemVariants}
                        className="flex flex-col sm:flex-row gap-4 pt-2"
                    >
                        <Link href="/auth">
                            <Button size="lg" className="gap-2 px-8 text-base">
                                Start Finding Opportunities
                                <ArrowRight className="h-4 w-4" />
                            </Button>
                        </Link>
                    </motion.div>
                </motion.div>

                {/* Right side is reserved for the shader visualization */}
                <div className="hidden lg:block h-full min-h-[400px]"></div>
            </div>
        </div>
    );
}