import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Footer } from "@/components/footer";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { MessageSquare, Search, Users, TrendingUp, Shield, Heart } from "lucide-react";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Our Services - Badnaam Safar",
  description: "Free travel consultation, budget comparison, agency recommendations, and guidance for solo and group trips. We help you choose the right travel option.",
};

export default function ServicesPage() {
  const services = [
    {
      icon: <MessageSquare className="h-10 w-10 text-green-700" />,
      title: "Free Trip Consultation",
      description: "Get honest, unbiased advice about your travel plans. We listen to your needs and help you understand your options without any sales pressure."
    },
    {
      icon: <Search className="h-10 w-10 text-green-700" />,
      title: "Budget & Itinerary Comparison",
      description: "We compare multiple travel agencies, their packages, itineraries, and pricing so you can see exactly what you're getting for your money."
    },
    {
      icon: <Users className="h-10 w-10 text-green-700" />,
      title: "Connecting with Trusted Agencies",
      description: "We suggest 2-3 suitable travel agencies based on your budget and preferences. You choose the one that feels right for you."
    },
    {
      icon: <TrendingUp className="h-10 w-10 text-green-700" />,
      title: "Guidance for Solo & Group Trips",
      description: "Whether you're traveling alone or joining a group of strangers, we help you find safe, affordable, and enjoyable options."
    },
    {
      icon: <Shield className="h-10 w-10 text-green-700" />,
      title: "Avoiding Scams & Bad Deals",
      description: "We help you identify red flags, understand what's realistic, and avoid agencies or packages that seem too good to be true."
    },
    {
      icon: <Heart className="h-10 w-10 text-green-700" />,
      title: "Personalized Recommendations",
      description: "Every traveler is different. We take the time to understand your style, budget, and preferences to give you tailored suggestions."
    }
  ];

  return (
    <main className="min-h-screen">
      <section className="py-20 md:py-32 bg-gradient-to-b from-neutral-50 to-white">
        <Container>
          <div className="max-w-4xl mx-auto text-center mb-16">
            <Heading className="text-4xl md:text-5xl font-bold text-neutral-900 mb-6">
              Our Services
            </Heading>
            <p className="text-lg text-neutral-600">
              We offer free, independent travel consultation to help you make informed decisions. Here's how we can help you.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
            {services.map((service, index) => (
              <Card key={index} className="border-neutral-200 hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="mb-4">{service.icon}</div>
                  <CardTitle className="text-xl font-semibold text-neutral-900">{service.title}</CardTitle>
                  <CardDescription className="text-neutral-600 text-base">
                    {service.description}
                  </CardDescription>
                </CardHeader>
              </Card>
            ))}
          </div>
          
          <div className="max-w-3xl mx-auto bg-amber-50 border border-amber-200 rounded-lg p-8 text-center">
            <h3 className="text-2xl font-bold text-neutral-900 mb-4">
              Important Notice
            </h3>
            <p className="text-neutral-700 text-lg">
              <strong>We do not sell tour packages or collect payments.</strong>
            </p>
            <p className="text-neutral-600 mt-4">
              Badnaam Safar is an independent consultant. All bookings, payments, and trip services are handled directly by the travel agencies we recommend. We simply help you choose the right one.
            </p>
          </div>
        </Container>
      </section>
      <Footer />
    </main>
  );
}