"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Check, Zap } from "lucide-react";
import { motion } from "framer-motion";

const services = [
  {
    title: "Growth Audit",
    price: "$2,500",
    description: "A comprehensive deep-dive into your current funnel and growth metrics.",
    features: ["Full Funnel Analysis", "Conversion Rate Audit", "Growth Roadmap", "60-min Strategy Session"],
    cta: "Get an Audit",
    popular: false
  },
  {
    title: "Fractional Head of Growth",
    price: "$5,000/mo",
    description: "Ongoing strategic leadership to build and manage your growth engine.",
    features: ["Weekly Strategy Calls", "Team Management", "Experiment Design", "Unlimited Slack Support"],
    cta: "Apply to Work Together",
    popular: true
  },
  {
    title: "Custom Workshop",
    price: "Custom",
    description: "Intensive training for your marketing and product teams.",
    features: ["Tailored Curriculum", "Hands-on Implementation", "Post-Workshop Support", "Team Alignment"],
    cta: "Inquire Now",
    popular: false
  }
];

export function Services() {
  return (
    <section id="services" className="py-32 bg-white relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-neutral-200 to-transparent" />
      
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <Heading className="text-4xl md:text-5xl">Strategic Services</Heading>
            <Subheading className="mt-6 text-lg text-neutral-600">
              Tailored solutions designed to solve your specific growth bottlenecks and accelerate revenue.
            </Subheading>
          </motion.div>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
          {services.map((service, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="h-full"
            >
              <Card className={`relative flex flex-col h-full border-2 transition-all duration-300 hover:shadow-2xl group ${service.popular ? 'border-blue-600 shadow-xl scale-105 z-10' : 'border-neutral-100 hover:border-blue-200'}`}>
                {service.popular && (
                  <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-600 text-white px-6 py-1.5 rounded-full text-sm font-bold flex items-center gap-2 shadow-lg">
                    <Zap className="w-4 h-4 fill-current" />
                    Most Popular
                  </div>
                )}
                <CardHeader className="pt-10">
                  <CardTitle className="text-2xl font-bold">{service.title}</CardTitle>
                  <div className="mt-6 flex items-baseline gap-1">
                    <span className="text-5xl font-black tracking-tight">{service.price}</span>
                  </div>
                  <CardDescription className="mt-6 text-neutral-600 leading-relaxed">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="flex-grow pt-6">
                  <ul className="space-y-5">
                    {service.features.map((feature, i) => (
                      <li key={i} className="flex items-start gap-3 text-sm font-medium text-neutral-700">
                        <div className="mt-0.5 h-5 w-5 rounded-full bg-blue-50 flex items-center justify-center shrink-0">
                          <Check className="h-3.5 w-3.5 text-blue-600" />
                        </div>
                        {feature}
                      </li>
                    ))}
                  </ul>
                </CardContent>
                <div className="p-8 pt-0">
                  <Button 
                    className={`w-full h-14 text-lg font-bold rounded-xl transition-all ${service.popular ? 'bg-blue-600 hover:bg-blue-700 shadow-lg shadow-blue-200' : 'bg-neutral-900 hover:bg-neutral-800'}`} 
                    onClick={() => document.getElementById('book')?.scrollIntoView({ behavior: 'smooth' })}
                  >
                    {service.cta}
                  </Button>
                </div>
              </Card>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  );
}