import React from 'react';
import { usePageTitle } from '@/hooks/usePageTitle.js';
import { useParams, Navigate, Link } from 'react-router-dom';
import { servicesData } from '@/lib/servicesData';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { CheckCircle2, ArrowLeft, ArrowRight } from 'lucide-react';

const ServiceDetail = () => {
  const { slug } = useParams();
  const service = servicesData.find((s) => s.slug === slug);

  const pageTitle = service ? `${service.title} | AI Growth Technologies` : "Service Not Found | AI Growth Technologies";
  usePageTitle(pageTitle);

  if (!service) {
    return <Navigate to="/services" replace />;
  }

  return (
    <>
      <div className="pt-28 md:pt-32 pb-20 min-h-screen bg-background relative overflow-hidden">
        {/* Background Effects */}
        <div className="absolute inset-0 bg-tech-grid [mask-image:radial-gradient(ellipse_at_top_right,black,transparent_70%)] opacity-60 pointer-events-none" />
        <div className="absolute top-0 right-0 w-[500px] h-[500px] glow-red rounded-full filter blur-[120px] pointer-events-none" />

        <div className="container mx-auto px-4 max-w-7xl relative z-10">
          <Link to="/services" className="inline-flex items-center text-muted-foreground hover:text-primary mb-8 transition-colors">
            <ArrowLeft size={20} className="mr-2" /> Back to Services
          </Link>

          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className={`w-20 h-20 rounded-2xl bg-gradient-to-br ${service.gradient} flex items-center justify-center mb-8 shadow-lg`}>
                <service.icon className="text-white" size={40} />
              </div>

              <h1 className="text-4xl md:text-6xl font-black text-foreground mb-6">
                {service.title}
              </h1>

              <p className="text-xl text-muted-foreground mb-8 leading-relaxed">
                {service.description}
              </p>

              <div className="text-lg text-muted-foreground leading-relaxed mb-10 max-w-2xl">
                <p>{service.longDescription}</p>
              </div>

              <Link to="/contact">
                <Button size="lg" className="bg-primary hover:bg-primary/90 text-white px-8 py-6 rounded-full text-lg shadow-lg shadow-primary/25 group">
                  Get Started <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </Button>
              </Link>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="bg-white border border-border rounded-3xl p-8 lg:p-10 shadow-xl shadow-black/5"
            >
              <h3 className="text-2xl font-bold text-foreground mb-8">Key Benefits</h3>
              <div className="space-y-6">
                {service.benefits.map((benefit, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.4 + (index * 0.1) }}
                    className="flex items-start"
                  >
                    <div className="mt-1 mr-4 flex-shrink-0">
                      <CheckCircle2 className="text-primary" size={24} />
                    </div>
                    <p className="text-lg text-foreground/80">{benefit}</p>
                  </motion.div>
                ))}
              </div>

              <div className="mt-10 p-6 bg-primary/5 rounded-2xl border border-primary/20">
                <h4 className="text-primary font-semibold mb-2">Why Choose Us?</h4>
                <p className="text-sm text-muted-foreground">
                  Our {service.title.toLowerCase()} services are backed by data-driven insights and a team of dedicated experts committed to your long-term success.
                </p>
              </div>
            </motion.div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ServiceDetail;