frontend/src/components/home/TopProfessionals.tsx

'use client';

import { useState } from 'react';
import Link from 'next/link';
import { AgentCard } from '../ui/AgentCard';
import { Button } from '../ui/Button';

// Sample agents data for tabs
const agentsData = [
  {
    id: '1',
    name: 'Arjun Mehta',
    title: 'Professional/General Agent',
    location: 'San Francisco, CA',
    rating: 4.9,
    reviewCount: 87,
    experience: '6+ years in the real estate industry',
    expertise: ['Residential', 'Luxury', 'Commercial'],
    imageUrl: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop',
    isVerified: true,
  },
  {
    id: '2',
    name: 'Arjun Mehta',
    title: 'Top-tier Real Agent',
    location: 'San Francisco, CA',
    rating: 4.8,
    reviewCount: 65,
    experience: '8+ years in the real estate industry',
    expertise: ['Investment', 'Commercial', 'Property Management'],
    imageUrl: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop',
    isVerified: true,
  },
  {
    id: '3',
    name: 'Arjun Mehta',
    title: 'Verified Real Agent',
    location: 'San Francisco, CA',
    rating: 4.7,
    reviewCount: 42,
    experience: '6+ years in the real estate industry',
    expertise: ['Residential', 'First-time Buyers', 'Rentals'],
    imageUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop',
    isVerified: true,
  },
];

const lendersData = [
  {
    id: '4',
    name: 'Sarah Johnson',
    title: 'Mortgage Specialist',
    location: 'Los Angeles, CA',
    rating: 4.9,
    reviewCount: 112,
    experience: '10+ years in mortgage lending',
    expertise: ['FHA Loans', 'Conventional', 'VA Loans'],
    imageUrl: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop',
    isVerified: true,
  },
  {
    id: '5',
    name: 'Michael Chen',
    title: 'Senior Loan Officer',
    location: 'Seattle, WA',
    rating: 4.8,
    reviewCount: 89,
    experience: '7+ years in lending',
    expertise: ['Jumbo Loans', 'Refinancing', 'Investment'],
    imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
    isVerified: true,
  },
  {
    id: '6',
    name: 'Emily Davis',
    title: 'Home Loan Advisor',
    location: 'Austin, TX',
    rating: 4.7,
    reviewCount: 76,
    experience: '5+ years in mortgage industry',
    expertise: ['First-time Buyers', 'FHA', 'USDA Loans'],
    imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
    isVerified: true,
  },
];

export function TopProfessionals() {
  const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents');
  const displayData = activeTab === 'agents' ? agentsData : lendersData;

  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <div className="text-center mb-10">
          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
            &ldquo;Meet top real estate professionals&rdquo;
          </h2>
        </div>

        {/* Tabs */}
        <div className="flex justify-center gap-4 mb-10">
          <button
            onClick={() => setActiveTab('agents')}
            className={`px-8 py-3 rounded-full font-medium transition-all ${
              activeTab === 'agents'
                ? 'bg-[#00293d] text-white'
                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            Agents
          </button>
          <button
            onClick={() => setActiveTab('lenders')}
            className={`px-8 py-3 rounded-full font-medium transition-all ${
              activeTab === 'lenders'
                ? 'bg-[#00293d] text-white'
                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            Lenders
          </button>
        </div>

        {/* Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
          {displayData.map((professional) => (
            <AgentCard
              key={professional.id}
              name={professional.name}
              title={professional.title}
              location={professional.location}
              rating={professional.rating}
              reviewCount={professional.reviewCount}
              experience={professional.experience}
              expertise={professional.expertise}
              imageUrl={professional.imageUrl}
              isVerified={professional.isVerified}
            />
          ))}

          {/* Browse Experts CTA Card */}
          <div className="bg-[#f5a623]/10 rounded-2xl p-8 flex flex-col items-center justify-center text-center">
            <p className="text-[#00293d] font-medium mb-2">
              Discover 6,000+ Top Real Estate Agents in Our Network
            </p>
            <Link href="/agents">
              <Button variant="primary" size="md">
                Browse Experts
              </Button>
            </Link>
          </div>
        </div>

        {/* Pagination Dots */}
        <div className="flex justify-center gap-2">
          {[0, 1, 2, 3].map((dot) => (
            <button
              key={dot}
              className={`w-2 h-2 rounded-full transition-all ${
                dot === 0 ? 'bg-[#f5a623] w-8' : 'bg-gray-300 hover:bg-gray-400'
              }`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}