import { useState } from "react";
import heroBg from "../../assets/hero_bg.png";

const tripTypes = [
  {
    key: "round",
    label: "Round Trip",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 2l4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="M7 22l-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>
    ),
  },
  {
    key: "oneway",
    label: "One Way",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
    ),
  },
  {
    key: "local",
    label: "Local Trip",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
    ),
  },
  {
    key: "airport",
    label: "Airport Trip",
    icon: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/></svg>
    ),
  },
];

const localPackages = [
  "4Hr 40Km",
  "8Hr 80Km",
  "12Hr 120Km",
];

const HeroSection = () => {
  const [activeTrip, setActiveTrip] = useState("round");
  const [selectedPackage, setSelectedPackage] = useState(localPackages[0]);

  const getFormFields = () => {
    switch (activeTrip) {
      case "round":
        return (
          <>
            <FormField icon="location" label="From City" placeholder="Enter Pickup City" />
            <Divider />
            <FormField icon="destination" label="To City" placeholder="Enter Drop Location" />
            <Divider />
            <FormField icon="calendar" label="Pickup date & time" placeholder="Select Date" />
            <Divider />
            <FormField icon="calendar" label="Return date & time" placeholder="Select Date" />
          </>
        );
      case "oneway":
        return (
          <>
            <FormField icon="location" label="From City" placeholder="Enter Pickup City" />
            <Divider />
            <FormField icon="destination" label="To City" placeholder="Enter Drop Location" />
            <Divider />
            <FormField icon="calendar" label="Pickup date & time" placeholder="Select Date" />
          </>
        );
      case "local":
        return (
          <>
            <FormField icon="location" label="From City" placeholder="Enter Pickup City" />
            <Divider />
            <div className="flex-1 min-w-[160px] px-4 py-3">
              <div className="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-primary-600 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
                <div>
                  <p className="text-[11px] text-badge-text font-medium leading-none mb-1">Select Package</p>
                  <select
                    value={selectedPackage}
                    onChange={(e) => setSelectedPackage(e.target.value)}
                    className="text-sm font-semibold text-dark-900 bg-transparent border-none outline-none cursor-pointer appearance-none"
                  >
                    {localPackages.map((pkg) => (
                      <option key={pkg} value={pkg}>{pkg}</option>
                    ))}
                  </select>
                </div>
              </div>
            </div>
            <Divider />
            <FormField icon="calendar" label="Pickup date & time" placeholder="Select Date" />
          </>
        );
      case "airport":
        return (
          <>
            <FormField icon="location" label="From" placeholder="Enter Pickup Location" />
            <Divider />
            <FormField icon="destination" label="Airport" placeholder="Enter Airport Name" />
            <Divider />
            <FormField icon="calendar" label="Pickup date & time" placeholder="Select Date" />
          </>
        );
      default:
        return null;
    }
  };

  return (
    <section id="hero" className="relative min-h-[520px] md:min-h-[580px] flex flex-col items-center justify-center overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0">
        <img
          src={heroBg}
          alt=""
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-dark-900/70 via-dark-900/50 to-dark-900/70" />
      </div>

      {/* Content */}
      <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
        {/* Heading */}
        <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-10 md:mb-14 drop-shadow-lg">
          Your Memorable Travel<br className="hidden sm:block" /> Experience begins here
        </h1>

        {/* Booking widget */}
        <div className="max-w-5xl mx-auto">
          {/* Trip tabs */}
          <div className="flex justify-center mb-4">
            <div className="inline-flex gap-1 p-1.5 bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20">
              {tripTypes.map((trip) => {
                const isActive = trip.key === activeTrip;
                return (
                  <button
                    key={trip.key}
                    onClick={() => setActiveTrip(trip.key)}
                    className={`
                      flex items-center gap-2 px-4 sm:px-5 py-2.5 text-sm font-semibold rounded-xl
                      transition-all duration-250 ease-out cursor-pointer
                      ${
                        isActive
                          ? "bg-primary-600 text-white shadow-md shadow-primary-600/30"
                          : "text-dark-700 hover:bg-gray-50 hover:text-primary-600"
                      }
                    `}
                  >
                    {trip.icon}
                    <span className="hidden sm:inline">{trip.label}</span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Form */}
          <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-2">
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-0">
              {getFormFields()}

              {/* CTA Button */}
              <button className="flex-shrink-0 inline-flex items-center justify-center gap-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold text-sm px-6 py-3.5 rounded-xl transition-all duration-200 shadow-md shadow-primary-600/20 hover:shadow-lg hover:shadow-primary-600/30 cursor-pointer mx-2 sm:mx-0 sm:ml-auto">
                Start Booking Now
                <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* --- Sub-components --- */

const FormField = ({ icon, label, placeholder }) => {
  const icons = {
    location: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-red-500 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
    ),
    destination: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-primary-600 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
    ),
    calendar: (
      <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-dark-700 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
    ),
  };

  return (
    <div className="flex-1 min-w-[160px] px-4 py-3">
      <div className="flex items-center gap-2">
        {icons[icon]}
        <div>
          <p className="text-[11px] text-badge-text font-medium leading-none mb-1">{label}</p>
          <input
            type="text"
            placeholder={placeholder}
            className="text-sm font-semibold text-dark-900 placeholder:text-gray-400 bg-transparent border-none outline-none w-full"
          />
        </div>
      </div>
    </div>
  );
};

const Divider = () => (
  <div className="hidden sm:block w-px h-10 bg-gray-200 self-center flex-shrink-0" />
);

export default HeroSection;
