import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import { MessageCircle, Search, Users, CheckCircle } from "lucide-react";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "How It Works - Badnaam Safar",
  description: "Learn how our simple 4-step process helps you find the perfect travel agency and trip for your budget and preferences.",
};

export default function HowItWorksPage() {
  const steps = [
    {
      number: "1",
      icon: <MessageCircle className="h-12 w-12 text-white" />,
      title: "You Contact Us on WhatsApp",
      description: "Start by reaching out to us on WhatsApp. Tell us you're planning a trip and need help choosing the right option.",
      details: [
        "No need to fill long forms",
        "Quick and easy conversation",
        "Available on your schedule"
      ]
    },
    {
      number: "2",
      icon: <Search className="h-12 w-12 text-white" />,
      title: "We Understand Your Budget, Dates & Preferences",
      description: "We'll ask you a few simple questions to understand what you're looking for.",
      details: [
        "What's your budget?",
        "When do you want to travel?",
        "What kind of trip are you interested in? (solo, group, adventure, relaxation, etc.)",
        "Any specific destinations or preferences?"
      ]
    },
    {
      number: "3",
      icon: <Users className="h-12 w-12 text-white" />,
      title: "We Suggest 2–3 Suitable Travel Agencies",
      description: "Based on your needs, we'll recommend 2-3 trusted travel agencies that match your budget and style.",
      details: [
        "We compare their packages and pricing",
        "We explain the pros and cons of each option",
        "We give you honest, unbiased advice"
      ]
    },
    {
      number: "4",
      icon: <CheckCircle className="h-12 w-12 text-white" />,
      title: "You Choose and Book Directly with the Agency",
      description: "You pick the agency and package that feels right for you, then book directly with them.",
      details: [
        "You make the final decision",
        "You handle payment directly with the agency",
        "We're here if you need any clarification"
      ]
    }
  ];

  const handleWhatsAppClick = () => {
    window.open("https://wa.me/919999999999?text=Hi, I need help planning my trip", "_blank");
  };

  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">
              How It Works
            </Heading>
            <p className="text-lg text-neutral-600">
              Getting started is simple. Just four easy steps to find your perfect trip.
            </p>
          </div>
          
          <div className="max-w-4xl mx-auto space-y-12 mb-16">
            {steps.map((step, index) => (
              <div key={index} className="flex flex-col md:flex-row gap-6 items-start">
                <div className="flex-shrink-0">
                  <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-green-700">
                    {step.icon}
                  </div>
                </div>
                <div className="flex-1">
                  <div className="text-sm font-semibold text-green-700 mb-2">STEP {step.number}</div>
                  <h3 className="text-2xl font-bold text-neutral-900 mb-3">{step.title}</h3>
                  <p className="text-neutral-600 mb-4">{step.description}</p>
                  <ul className="space-y-2">
                    {step.details.map((detail, idx) => (
                      <li key={idx} className="flex items-start gap-2 text-neutral-700">
                        <CheckCircle className="h-5 w-5 text-green-700 flex-shrink-0 mt-0.5" />
                        <span>{detail}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
          
          <div className="text-center">
            <Button 
              size="lg" 
              className="bg-green-700 hover:bg-green-800 text-white px-8 py-6 text-lg"
              onClick={handleWhatsAppClick}
            >
              <MessageCircle className="mr-2 h-5 w-5" />
              Get Started Now
            </Button>
            <p className="text-sm text-neutral-500 mt-4">
              Free consultation • No obligations • Honest advice
            </p>
          </div>
        </Container>
      </section>
      <Footer />
    </main>
  );
}