import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Brain, Zap, ShieldCheck, BarChart3 } from "lucide-react";

const aiFeatures = [
  {
    title: "AI Paint Analysis",
    description: "We use computer vision to detect microscopic paint defects that the human eye misses, ensuring a 100% perfect correction.",
    icon: Brain
  },
  {
    title: "Smart Coating Tech",
    description: "Our ceramic coatings utilize nano-AI particles that self-level and bond at a molecular level for extreme durability.",
    icon: Zap
  },
  {
    title: "Predictive Maintenance",
    description: "Get automated alerts when your coating needs a top-up based on Cedar Rapids weather patterns and your driving habits.",
    icon: BarChart3
  },
  {
    title: "Precision Protection",
    description: "AI-guided application ensures uniform thickness across every panel, maximizing protection and gloss.",
    icon: ShieldCheck
  }
];

export function AIFeatures() {
  return (
    <section className="py-24 bg-neutral-950 text-white overflow-hidden relative">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent opacity-50" />
      <Container className="relative z-10">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-400 text-xs font-bold uppercase tracking-widest mb-4">
            <Zap className="w-3 h-3" /> Next-Gen Detailing
          </div>
          <Heading className="text-white">The Future of Car Care</Heading>
          <Subheading className="text-neutral-400 mt-4">
            We've combined master craftsmanship with AI-driven technology to deliver results that were previously impossible.
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {aiFeatures.map((feature, i) => (
            <div key={i} className="p-6 rounded-2xl bg-neutral-900/50 border border-neutral-800 hover:border-blue-500/50 transition-colors group">
              <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:bg-blue-500/20 transition-colors">
                <feature.icon className="w-6 h-6 text-blue-500" />
              </div>
              <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
              <p className="text-neutral-400 text-sm leading-relaxed">{feature.description}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}