"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { MessageCircle } from "lucide-react";

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

  return (
    <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">
          <Heading className="text-center text-4xl md:text-6xl font-bold text-neutral-900">
            Confused About Your Trip?<br />We Help You Choose Right.
          </Heading>
          <Subheading className="text-center mt-6 text-lg md:text-xl text-neutral-600 max-w-2xl mx-auto">
            Independent travel consultation to help you find the best trip, best agency, and best value — without pressure.
          </Subheading>
          <div className="flex gap-4 justify-center mt-10">
            <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 Free Travel Consultation
            </Button>
          </div>
        </div>
      </Container>
    </section>
  );
}