"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";

export function Hero() {
  return (
    <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
      {/* Premium Background Elements */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 overflow-hidden">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-400/20 blur-[120px] rounded-full animate-pulse" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-400/20 blur-[120px] rounded-full animate-pulse delay-700" />
      </div>

      <Container>
        <div className="flex flex-col items-center text-center max-w-5xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-sm font-medium mb-8 shadow-sm"
          >
            <Sparkles className="w-4 h-4" />
            <span>Expert Growth Strategy for B2B SaaS</span>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <Heading as="h1" className="text-6xl md:text-8xl font-extrabold tracking-tight text-black leading-[1.1]">
              Scale Your Revenue <br />
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600">
                Without the Guesswork
              </span>
            </Heading>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <Subheading className="mt-8 text-xl md:text-2xl text-neutral-600 max-w-3xl leading-relaxed">
              I help founders build high-performance growth engines using data-driven strategies that actually move the needle.
            </Subheading>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="mt-12 flex flex-col sm:flex-row gap-6"
          >
            <Button size="lg" className="bg-neutral-900 hover:bg-neutral-800 text-white px-10 h-14 text-lg rounded-full group transition-all hover:scale-105 shadow-xl" onClick={() => document.getElementById('book')?.scrollIntoView({ behavior: 'smooth' })}>
              Book a Strategy Call
              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Button>
            <Button variant="outline" size="lg" className="px-10 h-14 text-lg rounded-full border-2 hover:bg-neutral-50 transition-all" onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}>
              Explore Services
            </Button>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 1, delay: 0.6 }}
            className="mt-24 w-full"
          >
            <p className="text-sm font-bold uppercase tracking-[0.2em] text-neutral-400 mb-8">Trusted by Industry Leaders</p>
            <div className="flex flex-wrap justify-center gap-12 md:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-500">
              <span className="text-2xl font-black tracking-tighter">ACME CORP</span>
              <span className="text-2xl font-black tracking-tighter">GLOBEX</span>
              <span className="text-2xl font-black tracking-tighter">SOYLENT</span>
              <span className="text-2xl font-black tracking-tighter">INITECH</span>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  );
}