"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"
      >
        <Badge onClick={() => router.push("/blog/top-5-llm-of-all-time")}>
          {/* removed badge */}
        </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-semibold max-w-6xl mx-auto text-center mt-6 relative z-10 text-black dark:text-white"
      >
        <Balancer>We build your predictable outbound engine. You only show up to close.</Balancer>
      </motion.h1>
      <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>
          R3venue books qualified sales calls for B2B SaaS and service businesses using hyper-personalized cold email and Clay-style enrichment. No spray and pray. Just high-intent pipeline.
        </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-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200">
          Book a Call
        </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>Free ICP + Copy Audit</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>
      
      {/* Stats Images Section */}
      <motion.div
        initial={{
          y: 80,
          opacity: 0,
        }}
        animate={{
          y: 0,
          opacity: 1,
        }}
        transition={{
          ease: "easeOut",
          duration: 0.5,
          delay: 0.6,
        }}
        className="mt-20 w-full max-w-6xl mx-auto"
      >
        <div className="grid grid-cols-1 md:grid-cols-1 gap-6 px-4">
          <div className="rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-lg">
            <Image
              src="https://lrggyvioreorxttbasgi.supabase.co/storage/v1/object/public/app-assets/1754/images/1768761086722-Good_stats_1.png"
              alt="Stats proof 1"
              width={400}
              height={300}
              className="w-full h-auto object-cover"
            />
          </div>
          <div className="rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-lg">
            <Image
              src="https://lrggyvioreorxttbasgi.supabase.co/storage/v1/object/public/app-assets/1754/images/1768761089212-Good_stats_2.png"
              alt="Stats proof 2"
              width={400}
              height={300}
              className="w-full h-auto object-cover"
            />
          </div>
          <div className="rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-lg">
            <Image
              src="https://lrggyvioreorxttbasgi.supabase.co/storage/v1/object/public/app-assets/1754/images/1768761092430-Good_stats_3_better.png"
              alt="Stats proof 3"
              width={400}
              height={300}
              className="w-full h-auto object-cover"
            />
          </div>
        </div>
      </motion.div>
    </div>
  );
};