karibeo_backend_admin/src/components/HeroSection.tsx

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, MapPin, Home, Utensils, Calendar, ShoppingBag, Building, Dumbbell } from "lucide-react";
import heroImage from "@/assets/hero-beach.jpg";

const HeroSection = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [location, setLocation] = useState("");

  const categories = [
    {
      icon: <Home className="w-8 h-8" />,
      title: "Appartment",
      count: "99+",
      description: "listings"
    },
    {
      icon: <Utensils className="w-8 h-8" />,
      title: "Restaurant",
      count: "55+",
      description: "listings"
    },
    {
      icon: <Calendar className="w-8 h-8" />,
      title: "Events/Arts",
      count: "55+",
      description: "listings"
    },
    {
      icon: <ShoppingBag className="w-8 h-8" />,
      title: "Shops",
      count: "80+",
      description: "listings"
    },
    {
      icon: <Building className="w-8 h-8" />,
      title: "Museum",
      count: "96+",
      description: "listings"
    },
    {
      icon: <Dumbbell className="w-8 h-8" />,
      title: "Gymnasiums",
      count: "21+",
      description: "listings"
    }
  ];

  return (
    <section 
      className="relative min-h-screen flex items-center justify-center"
      style={{
        backgroundImage: `url(${heroImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }}
    >
      {/* Background Overlay */}
      <div className="absolute inset-0 bg-black/40"></div>

      {/* Content */}
      <div className="relative z-10 w-full max-w-6xl mx-auto px-4 text-center">
        {/* Header Badge */}
        <div className="mb-8">
          <div className="inline-flex items-center px-4 py-2 rounded-full text-white/90 text-sm font-medium mb-6 bg-white/10 backdrop-blur-sm">
            WE ARE #1 ON THE MARKET
          </div>
        </div>

        {/* Main Heading */}
        <div className="mb-12">
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
            We're Here To Help You{" "}
            <span className="italic underline decoration-4" style={{textDecorationColor: '#F84525'}}>Navigate</span>{" "}
            While Traveling
          </h1>
          <p className="text-xl md:text-2xl text-white/90 max-w-3xl mx-auto leading-relaxed">
            You'll get comprehensive results based on the provided location.
          </p>
        </div>

        {/* Search Bar */}
        <div className="max-w-4xl mx-auto mb-16">
          <div className="flex flex-col md:flex-row gap-4 bg-white/10 backdrop-blur-md rounded-2xl p-4">
            <div className="flex-1 relative">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-600 w-5 h-5" />
              <Input
                placeholder="What are you looking for?"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-12 bg-white border-0 text-gray-700 placeholder:text-gray-500 h-14 text-lg rounded-xl"
              />
            </div>
            <div className="flex-1 relative">
              <MapPin className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-600 w-5 h-5" />
              <Input
                placeholder="Location"
                value={location}
                onChange={(e) => setLocation(e.target.value)}
                className="pl-12 bg-white border-0 text-gray-700 placeholder:text-gray-500 h-14 text-lg rounded-xl"
              />
            </div>
            <Button 
              className="h-14 px-8 text-lg font-semibold rounded-xl text-white hover:opacity-90"
              style={{backgroundColor: '#F84525'}}
            >
              Search places
            </Button>
          </div>
        </div>

        {/* Category Cards Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
          {categories.map((category, index) => (
            <div
              key={index}
              className="bg-white/10 backdrop-blur-md rounded-2xl p-6 text-center text-white cursor-pointer hover:bg-white/20 transition-all duration-300 group"
            >
              <div className="flex items-center justify-start gap-4">
                <div 
                  className="p-3 rounded-full group-hover:scale-110 transition-transform duration-300"
                  style={{backgroundColor: '#F84525'}}
                >
                  {category.icon}
                </div>
                <div className="text-left">
                  <h3 className="font-semibold text-lg mb-1">{category.title}</h3>
                  <div className="font-bold text-sm" style={{color: '#F84525'}}>
                    {category.count} {category.description}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default HeroSection;