"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 Image from "next/image";

export function Hero() {
  return (
    <section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Heading className="text-5xl md:text-7xl font-bold tracking-tight">
              Scale Your Business with <span className="text-primary">High-Quality Leads</span>
            </Heading>
            <Subheading className="mt-6 text-xl text-muted-foreground max-w-xl">
              Astra Leads helps B2B companies fill their pipelines with qualified prospects. We handle the outreach, you close the deals.
            </Subheading>
            <div className="flex flex-col sm:flex-row gap-4 mt-10">
              <Button size="lg" className="text-lg px-8" asChild>
                <a href="#contact">Get Started</a>
              </Button>
              <Button size="lg" variant="outline" className="text-lg px-8" asChild>
                <a href="tel:0721307788">Call 0721 307 788</a>
              </Button>
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="relative aspect-square lg:aspect-video rounded-2xl overflow-hidden border shadow-2xl"
          >
            <Image
              src="https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop"
              alt="Lead Generation Dashboard"
              fill
              className="object-cover"
            />
          </motion.div>
        </div>
      </Container>
      
      {/* Background Decoration */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-primary/10 rounded-full blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-500/10 rounded-full blur-[120px]" />
      </div>
    </section>
  );
}