frontend/src/app/(agent)/agent/dashboard/page.tsx

'use client';

import { useSession } from 'next-auth/react';
import Image from 'next/image';

// Import components from component folder
import {
  StarRating,
  Tag,
  InfoCard,
  SpecializationCard,
  ProfileSidebar,
  ProfileHeader,
  ExperienceSection,
  TestimonialCard,
} from './component';

// Mock agent data - in production, this would come from API
const agentData = {
  name: 'Brian Neeland',
  isVerified: true,
  title: 'Licensed Real Estate Agent',
  location: 'Colorado',
  memberSince: 'March 2020',
  bio: 'Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client\'s goals.',
  expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'],
  email: 'brian@gmail.com',
  phone: '+91*******7493',
  profileImage: '/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg',
  experience: {
    years: '10+ years',
    contracts: '10+ Contracts',
    licensingAreas: ['Colorado Springs', 'Monument', 'Falcon', 'Castle Rock', 'Fountain', 'Momentum'],
    expertiseYears: [
      { area: 'Colorado', years: '10 yrs' },
      { area: 'Falcon', years: '10 yrs' },
      { area: 'Colorado', years: '10 yrs' },
      { area: 'Colorado', years: '10 yrs' },
    ],
    certifications: [
      { name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
      { name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' },
    ],
  },
  availability: {
    type: 'Full-time',
    days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  },
  preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes',
  testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.",
  specialization: {
    types: ['Buyers', 'Sellers', 'First time Buyers', 'First time Sellers', 'Divorce'],
    loanTypes: ['Conventional', 'FHA', 'VA', 'USDA'],
    propertyTypes: ['SFR', 'Town home', 'Rural', 'Luxury', 'Condo'],
    hobbies: ['Boating', 'Horses', 'RV', 'Automotive', 'Aviation'],
    pricePoints: ['Under $100K', '$100K – $300K', '$300K – $500K', '$500K – $1M', '$1M and above'],
  },
  testimonials: [
    {
      id: 1,
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
      author: 'Kennedy Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
    {
      id: 2,
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
      author: 'Kennedy Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
    {
      id: 3,
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.',
      author: 'Kennedy Kenney',
      role: 'Chief Operations Officer',
      rating: 5,
    },
  ],
};

export default function AgentDashboard() {
  const { data: session } = useSession();

  return (
    <div className="space-y-6">
      {/* Main Profile Section with Left Sidebar */}
      <div className="flex flex-col lg:flex-row gap-6">
        {/* Left Sidebar - Status & Contact */}
        <ProfileSidebar
          profileImage={agentData.profileImage}
          email="*****brian@gmail.com"
          phone={agentData.phone}
        />

        {/* Right Content - Profile Info */}
        <div className="flex-1">
          <ProfileHeader
            name={agentData.name}
            isVerified={agentData.isVerified}
            title={agentData.title}
            location={agentData.location}
            memberSince={agentData.memberSince}
            bio={agentData.bio}
            expertise={agentData.expertise}
          />
        </div>
      </div>

      {/* Experience Section */}
      <ExperienceSection experience={agentData.experience} />

      {/* Info Cards Section */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <InfoCard
          title="Availability"
          icon={
            <Image
              src="/assets/icons/clock-icon.svg"
              alt="Availability"
              width={32}
              height={32}
            />
          }
          content={
            <div>
              <p className="font-semibold mb-2">{agentData.availability.type}</p>
              <div className="space-y-1">
                {agentData.availability.days.map((day) => (
                  <p key={day}>{day}</p>
                ))}
              </div>
            </div>
          }
        />
        <InfoCard
          title="Preferred work environment"
          icon={
            <Image
              src="/assets/icons/location-large-icon.svg"
              alt="Work environment"
              width={32}
              height={32}
            />
          }
          content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
        />
        <InfoCard
          title=""
          icon={
            <Image
              src="/assets/icons/star-icon.svg"
              alt="Testimonial"
              width={32}
              height={32}
            />
          }
          content={<p className="text-sm leading-relaxed italic">&ldquo;{agentData.testimonialHighlight}&rdquo;</p>}
        />
      </div>

      {/* Specialization Section - Light Gray Background */}
      <div className="bg-[#e8e8e8] rounded-[20px] p-8">
        <div className="text-center mb-8">
          <h2 className="text-xl font-bold text-[#00293d]">Specialization</h2>
          <p className="text-[#00293d]/70 text-sm">Area Of Expertise and Focus</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
          <SpecializationCard
            title="Specialization"
            items={agentData.specialization.types}
            icon={
              <Image
                src="/assets/icons/home-icon.svg"
                alt="Specialization"
                width={24}
                height={24}
              />
            }
          />
          <SpecializationCard
            title="Loan Type"
            items={agentData.specialization.loanTypes}
            icon={
              <Image
                src="/assets/icons/wallet-icon.svg"
                alt="Loan Type"
                width={24}
                height={24}
              />
            }
          />
          <SpecializationCard
            title="Property Type"
            items={agentData.specialization.propertyTypes}
            icon={
              <Image
                src="/assets/icons/chart-icon.svg"
                alt="Property Type"
                width={24}
                height={24}
              />
            }
          />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
          <SpecializationCard
            title="Hobbies & Interests"
            items={agentData.specialization.hobbies}
            icon={
              <Image
                src="/assets/icons/heart-icon.svg"
                alt="Hobbies"
                width={24}
                height={24}
              />
            }
          />
          <SpecializationCard
            title="Price Point"
            items={agentData.specialization.pricePoints}
            icon={
              <Image
                src="/assets/icons/dollar-icon.svg"
                alt="Price Point"
                width={24}
                height={24}
              />
            }
          />
        </div>
      </div>

      {/* Testimonials Section */}
      <div className="bg-white rounded-[20px] border border-gray-200 p-8">
        <h2 className="text-xl font-bold text-[#00293d] text-center mb-2">Testimonials</h2>
        <p className="text-[#00293d]/70 text-sm text-center mb-8">
          Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {agentData.testimonials.map((testimonial) => (
            <TestimonialCard
              key={testimonial.id}
              text={testimonial.text}
              author={testimonial.author}
              role={testimonial.role}
              rating={testimonial.rating}
            />
          ))}
        </div>
      </div>
    </div>
  );
}