frontend/src/components/home/HeroSection.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '../ui/Button';

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

const categories = [
  { 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 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()}`);
  };

  return (
    <section className="relative bg-gradient-to-b from-[#e8f0ee] to-[#f5f9f8] overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <svg className="w-full h-full" viewBox="0 0 1440 600" fill="none">
          {/* City Skyline Pattern */}
          <rect x="100" y="400" width="60" height="200" fill="#00293d"/>
          <rect x="180" y="350" width="80" height="250" fill="#00293d"/>
          <rect x="280" y="380" width="50" height="220" fill="#00293d"/>
          <rect x="350" y="300" width="100" height="300" fill="#00293d"/>
          <rect x="470" y="420" width="40" height="180" fill="#00293d"/>
          <rect x="900" y="380" width="70" height="220" fill="#00293d"/>
          <rect x="990" y="320" width="90" height="280" fill="#00293d"/>
          <rect x="1100" y="400" width="60" height="200" fill="#00293d"/>
          <rect x="1180" y="350" width="80" height="250" fill="#00293d"/>
          <rect x="1280" y="420" width="50" height="180" fill="#00293d"/>
        </svg>
      </div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
        {/* Headline */}
        <div className="text-center mb-10">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#00293d] mb-4 leading-tight">
            &ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo;
          </h1>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            Discover verified, top-rated real estate professionals
          </p>
        </div>

        {/* Search Form */}
        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8 max-w-5xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            {/* Type Select */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Types</label>
              <select
                value={searchParams.type}
                onChange={(e) => setSearchParams({ ...searchParams, type: e.target.value })}
                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all bg-white"
              >
                <option value="">Professionals</option>
                {propertyTypes.map((type) => (
                  <option key={type.value} value={type.value}>{type.label}</option>
                ))}
              </select>
            </div>

            {/* Name Input */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Name or Nickname</label>
              <input
                type="text"
                placeholder="Name or Nickname"
                value={searchParams.name}
                onChange={(e) => setSearchParams({ ...searchParams, name: e.target.value })}
                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all"
              />
            </div>

            {/* Location Input */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Location</label>
              <input
                type="text"
                placeholder="Location"
                value={searchParams.location}
                onChange={(e) => setSearchParams({ ...searchParams, location: e.target.value })}
                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all"
              />
            </div>

            {/* Category Select */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">Categories</label>
              <select
                value={searchParams.category}
                onChange={(e) => setSearchParams({ ...searchParams, category: e.target.value })}
                className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all bg-white"
              >
                <option value="">Select Category</option>
                {categories.map((cat) => (
                  <option key={cat.value} value={cat.value}>{cat.label}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Quick Links */}
          <div className="flex flex-wrap gap-2 mb-6">
            <button className="text-sm text-[#00293d] hover:text-[#f5a623] transition-colors">
              Professionals
            </button>
            <span className="text-gray-300">|</span>
            <button className="text-sm text-[#00293d] hover:text-[#f5a623] transition-colors">
              Lenders
            </button>
          </div>

          {/* Search Button */}
          <div className="flex justify-center">
            <Button variant="primary" size="lg" onClick={handleSearch}>
              See All Agents
            </Button>
          </div>

          {/* Helper Text */}
          <p className="text-center text-gray-500 text-sm mt-4">
            Connect with trusted local agents to explore homes, compare options, and make smarter decisions.
          </p>
        </div>
      </div>
    </section>
  );
}