frontend/src/components/home/HeroSection.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';

const propertyTypes = [
  { value: '', label: 'Types' },
  { value: 'residential', label: 'Residential' },
  { value: 'commercial', label: 'Commercial' },
  { value: 'luxury', label: 'Luxury Homes' },
  { value: 'rentals', label: 'Rentals' },
];

const categories = [
  { value: '', label: 'Categories' },
  { value: 'luxury-broker', label: 'Luxury Broker' },
  { value: 'buying', label: 'Buying Agent' },
  { value: 'selling', label: 'Selling Agent' },
  { value: 'investment', label: 'Investment' },
  { value: 'property-management', label: 'Property Management' },
];


export function HeroSection() {
  const router = useRouter();
  const [searchParams, setSearchParams] = useState({
    type: '',
    name: '',
    location: '',
    category: '',
  });
  const [openDropdown, setOpenDropdown] = useState<string | null>(null);

  const handleSearch = () => {
    const params = new URLSearchParams();
    if (searchParams.type) params.set('type', searchParams.type);
    if (searchParams.name) params.set('name', searchParams.name);
    if (searchParams.location) params.set('location', searchParams.location);
    if (searchParams.category) params.set('category', searchParams.category);
    router.push(`/agents?${params.toString()}`);
  };

  const handleSeeAllAgents = () => {
    router.push('/agents');
  };

  const toggleDropdown = (dropdown: string) => {
    setOpenDropdown(openDropdown === dropdown ? null : dropdown);
  };

  const selectOption = (field: 'type' | 'category', value: string, label: string) => {
    setSearchParams({ ...searchParams, [field]: value });
    setOpenDropdown(null);
  };

  return (
    <section className="relative min-h-[600px] overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0">
        <Image
          src="/assets/images/user_home_top.png"
          alt=""
          fill
          className="object-cover object-bottom"
          priority
        />
      </div>

      <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-24">
        {/* Headline */}
        <div className="text-center mb-8">
          <h1 className="font-fractul font-bold text-[24px] md:text-[28px] lg:text-[30px] leading-[50px] text-[#00293d] max-w-4xl mx-auto">
            &ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo;
          </h1>
        </div>

        {/* Search Form */}
        <div className="max-w-5xl mx-auto">
          <div className="bg-[#e58625] rounded-[15px] shadow-lg p-3">
            <div className="flex flex-col md:flex-row gap-2">
              {/* Type Select */}
              <div className="relative flex-shrink-0 md:w-[160px]">
                <button
                  onClick={() => toggleDropdown('type')}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
                >
                  <span className="font-serif text-sm text-[#00293d]">
                    {searchParams.type ? propertyTypes.find(t => t.value === searchParams.type)?.label : 'Types'}
                  </span>
                  <Image
                    src="/assets/icons/chevron-down-icon.svg"
                    alt=""
                    width={10}
                    height={10}
                    className={`transition-transform ${openDropdown === 'type' ? 'rotate-180' : ''}`}
                  />
                </button>
                {openDropdown === 'type' && (
                  <div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden">
                    {propertyTypes.slice(1).map((type, index, arr) => (
                      <button
                        key={type.value}
                        onClick={() => selectOption('type', type.value, type.label)}
                        className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
                      >
                        {type.label}
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Name Input */}
              <div className="flex-1 md:min-w-[180px]">
                <input
                  type="text"
                  placeholder="Name or Keyword"
                  value={searchParams.name}
                  onChange={(e) => setSearchParams({ ...searchParams, name: e.target.value })}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d] focus:outline-none"
                />
              </div>

              {/* Location Input */}
              <div className="flex-1 md:min-w-[140px]">
                <input
                  type="text"
                  placeholder="Location"
                  value={searchParams.location}
                  onChange={(e) => setSearchParams({ ...searchParams, location: e.target.value })}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white font-serif text-sm text-[#00293d] placeholder:text-[#00293d] focus:outline-none"
                />
              </div>

              {/* Category Select */}
              <div className="relative flex-shrink-0 md:w-[160px]">
                <button
                  onClick={() => toggleDropdown('category')}
                  className="w-full h-[42px] px-4 rounded-[7px] border border-[#00293d]/10 bg-white text-left flex items-center justify-between focus:outline-none"
                >
                  <span className="font-serif text-sm text-[#00293d]">
                    {searchParams.category ? categories.find(c => c.value === searchParams.category)?.label : 'Categories'}
                  </span>
                  <Image
                    src="/assets/icons/chevron-down-icon.svg"
                    alt=""
                    width={10}
                    height={10}
                    className={`transition-transform ${openDropdown === 'category' ? 'rotate-180' : ''}`}
                  />
                </button>
                {openDropdown === 'category' && (
                  <div className="absolute top-full left-0 right-0 mt-0 bg-white rounded-[7px] border border-[#00293d]/10 shadow-lg z-20 overflow-hidden">
                    {categories.slice(1).map((cat, index, arr) => (
                      <button
                        key={cat.value}
                        onClick={() => selectOption('category', cat.value, cat.label)}
                        className={`w-full px-4 py-2.5 text-left font-serif text-sm text-[#00293d] hover:bg-[#00293d]/5 ${index < arr.length - 1 ? 'border-b border-[#00293d]/10' : ''}`}
                      >
                        {cat.label}
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Search Button */}
              <div className="flex-shrink-0">
                <button
                  onClick={handleSearch}
                  className="w-full md:w-[48px] h-[42px] rounded-[7px] bg-[#00293d] hover:bg-[#00293d]/90 text-white transition-colors flex items-center justify-center"
                >
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          {/* See All Agents Button */}
          <div className="flex justify-center mt-6">
            <button
              onClick={handleSeeAllAgents}
              className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] text-[#00293d] font-fractul font-bold text-base transition-colors shadow-md hover:shadow-lg"
            >
              See All Agents
            </button>
          </div>

          {/* Helper Text */}
          <p className="text-center font-serif text-sm text-[#00293d]/60 mt-4 max-w-2xl mx-auto">
            Connect with trusted local agents to explore homes, compare options, and make smarter decisions.
          </p>
        </div>
      </div>
    </section>
  );
}