"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { motion } from "framer-motion";
import { Calendar, CheckCircle2, Clock, Video } from "lucide-react";

export function Booking() {
  return (
    <section id="book" className="py-32 bg-neutral-900 text-white relative overflow-hidden">
      {/* Decorative elements */}
      <div className="absolute top-0 right-0 w-1/2 h-full bg-blue-600/5 blur-[120px] -z-10" />
      <div className="absolute bottom-0 left-0 w-1/2 h-full bg-purple-600/5 blur-[120px] -z-10" />

      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-bold mb-8">
              <Calendar className="w-4 h-4" />
              <span>Free Discovery Call</span>
            </div>
            <Heading className="text-white text-5xl md:text-6xl font-black leading-tight">
              Ready to <span className="text-blue-500">Scale</span> Your Business?
            </Heading>
            <Subheading className="mt-8 text-neutral-400 text-xl leading-relaxed max-w-xl">
              Book a free 15-minute discovery call to discuss your growth challenges and see if we're a good fit to work together.
            </Subheading>
            
            <div className="mt-12 space-y-8">
              {[
                { icon: Clock, text: "15-minute focused strategy session", color: "text-blue-400" },
                { icon: Video, text: "Face-to-face Zoom consultation", color: "text-purple-400" },
                { icon: CheckCircle2, text: "Actionable growth roadmap", color: "text-emerald-400" }
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-5 group">
                  <div className={`h-12 w-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center transition-all group-hover:scale-110 group-hover:bg-white/10`}>
                    <item.icon className={`h-6 w-6 ${item.color}`} />
                  </div>
                  <p className="text-lg font-medium text-neutral-200">{item.text}</p>
                </div>
              ))}
            </div>
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="relative"
          >
            <div className="absolute -inset-4 bg-gradient-to-r from-blue-600 to-purple-600 rounded-[2.5rem] blur-2xl opacity-20 animate-pulse" />
            <div className="relative bg-white rounded-[2rem] overflow-hidden shadow-2xl min-h-[650px] flex flex-col items-center justify-center text-neutral-900 border border-white/10">
              <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-600 to-purple-600" />
              <div className="text-center p-12">
                <div className="w-20 h-20 bg-blue-50 rounded-3xl flex items-center justify-center mx-auto mb-8">
                  <Calendar className="w-10 h-10 text-blue-600" />
                </div>
                <h3 className="text-2xl font-black mb-4">Schedule Your Call</h3>
                <p className="text-neutral-500 mb-10 max-w-xs mx-auto">Select a date and time that works best for your schedule.</p>
                
                <div className="w-full max-w-md mx-auto aspect-[4/5] bg-neutral-50 rounded-2xl border-2 border-dashed border-neutral-200 flex flex-col items-center justify-center p-8 group hover:border-blue-300 transition-colors cursor-pointer">
                  <div className="w-16 h-16 rounded-full bg-white shadow-sm flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
                    <Calendar className="w-8 h-8 text-neutral-300 group-hover:text-blue-500 transition-colors" />
                  </div>
                  <span className="text-neutral-400 font-bold group-hover:text-blue-600 transition-colors">Calendly Widget Integration</span>
                  <p className="text-xs text-neutral-400 mt-4 text-center">Your booking widget will appear here, allowing clients to book directly on your site.</p>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  );
}