import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Utensils, Heart, Users, Clock } from "lucide-react";

const highlights = [
  {
    title: "Fresh & Authentic",
    description: "Traditional Jamaican cuisine prepared daily with the freshest ingredients.",
    icon: <Utensils className="h-8 w-8 text-[#ff8c00]" />,
  },
  {
    title: "Famous Curry Goat",
    description: "Our signature dish, slow-cooked to perfection with bold island spices.",
    icon: <Heart className="h-8 w-8 text-[#ff8c00]" />,
  },
  {
    title: "Loved by Locals",
    description: "A trusted favorite for years, serving both our community and visitors.",
    icon: <Users className="h-8 w-8 text-[#ff8c00]" />,
  },
  {
    title: "Years of Flavor",
    description: "Decades of experience in crafting the perfect Jamaican curry experience.",
    icon: <Clock className="h-8 w-8 text-[#ff8c00]" />,
  },
];

export function Highlights() {
  return (
    <section className="py-20 bg-white">
      <Container>
        <Heading className="text-center mb-16">Why Sharmz Curry Pot?</Heading>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {highlights.map((item, index) => (
            <Card key={index} className="border-none shadow-lg bg-neutral-50">
              <CardHeader className="text-center">
                <div className="flex justify-center mb-4">{item.icon}</div>
                <CardTitle className="text-xl mb-2">{item.title}</CardTitle>
                <CardDescription className="text-neutral-600">{item.description}</CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}