"use client";

import React, { use, useState, useEffect } from "react";
import Link from "next/link";
import { fetchPublicAgentDetail, PublicAgentItem } from "@/services/propertyService";
import { useAuth } from "@/context/AuthContext";
import AgentContactModal from "@/components/AgentContactModal";
import { 
  Building2, 
  Bed, 
  Bath, 
  Maximize2, 
  Layers, 
  ArrowLeft, 
  MessageSquare,
  Star,
  CheckCircle2,
  PenLine,
  UserCheck,
  ShieldCheck,
  MapPin,
  MessageCircle
} from "lucide-react";

interface ClientReview {
  id: string;
  author: string;
  role: string;
  rating: number;
  date: string;
  title: string;
  comment: string;
  verified: boolean;
}

export default function AgentProfileDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const resolvedParams = use(params);
  const { user, isLoggedIn } = useAuth();

  const [agent, setAgent] = useState<PublicAgentItem | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isContactModalOpen, setIsContactModalOpen] = useState(false);
  const [isReviewFormOpen, setIsReviewFormOpen] = useState(false);

  const [newRating, setNewRating] = useState(5);
  const [hoverRating, setHoverRating] = useState(0);
  const [newAuthor, setNewAuthor] = useState("");
  const [newRole, setNewRole] = useState("Bought Property through Agent");
  const [newTitle, setNewTitle] = useState("");
  const [newComment, setNewComment] = useState("");
  const [submittedSuccess, setSubmittedSuccess] = useState(false);

  // Real client reviews (starts empty - no fake reviews!)
  const [reviews, setReviews] = useState<ClientReview[]>([]);

  useEffect(() => {
    async function loadAgentData() {
      setIsLoading(true);
      try {
        const data = await fetchPublicAgentDetail(resolvedParams.id);
        setAgent(data);

        // Check for any locally saved real user reviews for this agent
        if (typeof window !== "undefined") {
          const stored = localStorage.getItem(`agent_reviews_${resolvedParams.id}`);
          if (stored) {
            try {
              setReviews(JSON.parse(stored));
            } catch {}
          }
        }
      } catch (err) {
        console.error("Error loading agent details:", err);
      } finally {
        setIsLoading(false);
      }
    }

    loadAgentData();
  }, [resolvedParams.id]);

  // Pre-fill name if user is logged in
  useEffect(() => {
    if (user?.name && !newAuthor) {
      setNewAuthor(user.name);
    }
  }, [user, isReviewFormOpen]);

  // Calculate Average Rating ONLY if real reviews exist
  const averageRating = reviews.length > 0
    ? (reviews.reduce((acc, r) => acc + r.rating, 0) / reviews.length).toFixed(1)
    : null;

  const handleReviewSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newAuthor || !newComment) return;

    const newReviewItem: ClientReview = {
      id: `rev-${Date.now()}`,
      author: newAuthor,
      role: newRole,
      rating: newRating,
      date: "Just now",
      title: newTitle || "Verified Client Review",
      comment: newComment,
      verified: Boolean(isLoggedIn),
    };

    const updated = [newReviewItem, ...reviews];
    setReviews(updated);
    if (typeof window !== "undefined") {
      localStorage.setItem(`agent_reviews_${resolvedParams.id}`, JSON.stringify(updated));
    }

    setSubmittedSuccess(true);
    setTimeout(() => {
      setSubmittedSuccess(false);
      setIsReviewFormOpen(false);
      setNewTitle("");
      setNewComment("");
    }, 1800);
  };

  // Loading State Skeleton
  if (isLoading) {
    return (
      <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-8 animate-pulse text-white">
        <div className="h-6 bg-zinc-800 rounded w-48"></div>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
          <div className="lg:col-span-4 bg-[#0e0e10] rounded-3xl border border-zinc-800 p-8 space-y-6">
            <div className="w-32 h-32 rounded-full bg-zinc-800 mx-auto"></div>
            <div className="h-6 bg-zinc-800 rounded w-3/4 mx-auto"></div>
            <div className="h-4 bg-zinc-800 rounded w-1/2 mx-auto"></div>
            <div className="h-20 bg-zinc-800/60 rounded-2xl"></div>
          </div>
          <div className="lg:col-span-8 space-y-6">
            <div className="h-8 bg-zinc-800 rounded w-1/3"></div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {[1, 2].map((i) => (
                <div key={i} className="h-64 bg-[#0e0e10] rounded-3xl border border-zinc-800"></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Not Found State
  if (!agent) {
    return (
      <div className="min-h-screen py-24 px-4 max-w-lg mx-auto text-center space-y-6 text-white">
        <div className="w-16 h-16 rounded-2xl bg-[#0e0e10] border border-[#FFE259]/40 text-[#FFE259] mx-auto flex items-center justify-center">
          <UserCheck className="w-8 h-8" />
        </div>
        <h2 className="text-2xl font-extrabold font-display-lg text-white">Agent Not Found</h2>
        <p className="text-xs sm:text-sm text-slate-400">
          The requested agent profile could not be found.
        </p>
        <Link
          href="/agents"
          className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-[#059669] hover:bg-[#047857] text-white text-xs font-extrabold shadow-lg transition-all"
        >
          <ArrowLeft className="w-4 h-4" />
          <span>Browse All Registered Agents</span>
        </Link>
      </div>
    );
  }

  const assignedProperties = agent.properties || [];

  return (
    <div className="min-h-screen py-10 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-8">
      
      {/* Top Back Navigation */}
      <div className="flex items-center justify-between pb-4 border-b border-zinc-800">
        <Link
          href="/agents"
          className="inline-flex items-center gap-2 text-xs font-bold text-[#FFE259] hover:underline"
        >
          <ArrowLeft className="w-4 h-4 text-[#FFE259]" />
          <span>Back to All Agents</span>
        </Link>
        <div className="text-xs text-slate-400">
          <span>Agent Directory / </span>
          <span className="text-[#FFE259] font-bold">{agent.name}</span>
        </div>
      </div>

      {/* 2-Column Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        
        {/* Left Column: Agent Profile Box */}
        <div className="lg:col-span-4 bg-[#0e0e10] rounded-3xl border border-[#FFE259]/30 text-white p-6 sm:p-8 shadow-2xl space-y-6 sticky top-24">
          
          {/* Avatar with Active Badge */}
          <div className="flex flex-col items-center text-center">
            <div className="relative mb-4">
              <img
                src={agent.avatar || "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=400&q=80"}
                alt={agent.name}
                className="w-32 h-32 rounded-full object-cover border-4 border-[#FFE259]/40 shadow-xl"
              />
              <span className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 px-3 py-0.5 rounded-full text-[10px] font-extrabold bg-[#059669] text-white uppercase tracking-wider shadow-sm">
                Active
              </span>
            </div>

            <h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-tight font-display-lg">
              {agent.name}
            </h2>
            
            <div className="flex items-center gap-1.5 text-xs text-[#FFE259] mt-1 font-medium">
              <Building2 className="w-3.5 h-3.5 text-[#FFE259]" />
              <span>{agent.division || agent.department || "DreamHomes Realty"}</span>
            </div>

            {agent.territory && (
              <div className="flex items-center gap-1 text-[11px] text-slate-400 mt-1">
                <MapPin className="w-3 h-3 text-slate-400" />
                <span>{agent.territory}</span>
              </div>
            )}

            {/* Rating or Verification Badge */}
            <div className="mt-3 flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#18181b] border border-zinc-800 text-[#FFE259] text-xs font-bold shadow-sm">
              {averageRating ? (
                <>
                  <div className="flex items-center gap-0.5">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <Star key={star} className="w-3.5 h-3.5 fill-[#FFE259] text-[#FFE259]" />
                    ))}
                  </div>
                  <span className="text-white">{averageRating}</span>
                  <span className="text-slate-400 font-normal">({reviews.length} Reviews)</span>
                </>
              ) : (
                <span className="text-xs text-[#FFE259] flex items-center gap-1.5 font-bold">
                  <CheckCircle2 className="w-3.5 h-3.5 text-[#FFE259]" /> Certified Real Estate Agent
                </span>
              )}
            </div>
          </div>

          {/* About Bio */}
          <div className="pt-4 border-t border-zinc-800 space-y-1.5">
            <span className="text-[11px] font-bold text-[#FFE259] uppercase tracking-wider block">
              About Agent
            </span>
            <p className="text-xs text-slate-300 leading-relaxed whitespace-pre-line">
              {agent.bio || "Dedicated professional real estate agent with DreamHomes Realty, specializing in luxury residential properties, beachfront developments, and prime commercial plots across Sri Lanka."}
            </p>
          </div>

          {/* Action Buttons: Contact Agent Modal */}
          <div className="pt-2 flex flex-col gap-2.5">
            <button
              type="button"
              onClick={() => setIsContactModalOpen(true)}
              className="w-full bg-[#059669] hover:bg-[#047857] text-white text-xs font-extrabold py-3.5 rounded-full text-center transition-all shadow-lg shadow-[#059669]/25 flex items-center justify-center gap-2 cursor-pointer"
            >
              <MessageSquare className="w-4 h-4" />
              <span>Contact {agent.name.split(" ")[0]}</span>
            </button>

            <Link
              href={`/sell?agent=${agent.slug || agent.id}`}
              className="w-full bg-[#18181b] hover:bg-zinc-800 text-[#FFE259] border border-[#FFE259]/40 hover:border-[#FFE259] text-xs font-extrabold py-3.5 rounded-full text-center transition-all flex items-center justify-center gap-2 cursor-pointer shadow-md"
            >
              <Building2 className="w-4 h-4 text-[#FFE259]" />
              <span>List Property with {agent.name.split(" ")[0]}</span>
            </Link>
          </div>

        </div>

        {/* Right Column: Agent's Properties & Reviews Section */}
        <div className="lg:col-span-8 space-y-10">
          
          {/* Section 1: Agent's Assigned Properties Grid */}
          <div className="space-y-6">
            <div>
              <h3 className="text-2xl font-bold text-white font-display-lg">
                {agent.name}&apos;s <span className="text-[#FFE259]">Assigned Properties</span>
              </h3>
              <p className="text-xs text-slate-400 mt-1">
                {assignedProperties.length} active propert{assignedProperties.length === 1 ? 'y' : 'ies'} currently managed by {agent.name.split(" ")[0]}
              </p>
            </div>

            {assignedProperties.length === 0 ? (
              <div className="bg-[#0e0e10] rounded-3xl border border-zinc-800 p-8 text-center text-slate-400 text-xs space-y-2">
                <Building2 className="w-8 h-8 text-slate-600 mx-auto mb-2" />
                <p className="font-semibold text-slate-300">No active property listings assigned to this agent currently.</p>
                <p className="text-[11px]">Check back soon or contact the agent directly for upcoming properties.</p>
              </div>
            ) : (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {assignedProperties.map((prop: any) => {
                  const propImg = prop.image || prop.primary_image?.file_path || prop.images?.[0]?.file_path || "/logo.png";
                  const propBeds = prop.bedrooms ?? prop.beds ?? 0;
                  const propBaths = prop.bathrooms ?? prop.baths ?? 0;
                  const propPrice = prop.formattedPrice || (prop.price ? `LKR ${Number(prop.price).toLocaleString()}` : "Contact for Price");
                  const propSize = prop.landSize || (prop.area_sqft ? `${prop.area_sqft} sqft` : null);

                  return (
                    <div
                      key={prop.id}
                      className="bg-[#0e0e10] rounded-3xl border border-[#FFE259]/25 hover:border-[#FFE259]/60 shadow-xl hover:shadow-2xl transition-all duration-300 flex flex-col justify-between group hover:-translate-y-1 text-white overflow-hidden"
                    >
                      <div>
                        {/* Photo */}
                        <div className="relative aspect-[16/10] overflow-hidden bg-zinc-900">
                          <img
                            src={propImg}
                            alt={prop.title}
                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90 group-hover:opacity-100"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-black/20" />
                          {prop.badge && (
                            <span className="absolute top-3 left-3 px-3 py-1 rounded-full text-[10px] font-extrabold bg-[#FFE259] text-black">
                              {prop.badge}
                            </span>
                          )}
                        </div>

                        {/* Property Details */}
                        <div className="p-5 space-y-3">
                          <h4 className="text-lg font-bold text-white group-hover:text-[#FFE259] transition-colors font-display-lg line-clamp-1">
                            {prop.title}
                          </h4>

                          {/* Specs Row */}
                          <div className="flex items-center gap-3 text-xs text-slate-300 flex-wrap bg-[#18181b] p-2.5 rounded-xl border border-zinc-800">
                            {propBeds > 0 && (
                              <span className="flex items-center gap-1">
                                <Bed className="w-3.5 h-3.5 text-[#FFE259]" /> {propBeds} Beds
                              </span>
                            )}
                            {propBaths > 0 && (
                              <span className="flex items-center gap-1">
                                <Bath className="w-3.5 h-3.5 text-[#FFE259]" /> {propBaths} Baths
                              </span>
                            )}
                            {propSize && (
                              <span className="flex items-center gap-1">
                                <Maximize2 className="w-3.5 h-3.5 text-[#FFE259]" /> {propSize}
                              </span>
                            )}
                          </div>

                          {/* Price & Location */}
                          <div className="pt-2 flex items-baseline justify-between">
                            <span className="text-base sm:text-lg font-extrabold text-[#FFE259] font-display-lg">
                              {propPrice}
                            </span>
                            <span className="text-xs text-slate-400 flex items-center gap-1">
                              <MapPin className="w-3.5 h-3.5 text-[#FFE259]" />
                              <span>{prop.location || "Sri Lanka"}</span>
                            </span>
                          </div>
                        </div>
                      </div>

                      <div className="px-5 pb-5 pt-1">
                        <Link
                          href={`/properties/${prop.slug || prop.id}`}
                          className="w-full bg-[#059669] hover:bg-[#047857] text-white font-extrabold text-xs py-3 rounded-full text-center block transition-all shadow-md shadow-[#059669]/20"
                        >
                          View Full Details
                        </Link>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {/* Section 2: Client Reviews & Ratings Hub */}
          <div className="bg-[#0e0e10] rounded-3xl border border-[#FFE259]/30 text-white p-6 sm:p-8 shadow-2xl space-y-6">
            
            {/* Reviews Header */}
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-zinc-800 pb-6">
              <div>
                <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-[#0A0A0A] text-[#FFE259] border border-[#FFA726]/40 mb-2">
                  <ShieldCheck className="w-3.5 h-3.5 text-[#FFE259]" /> Verified Client Feedback
                </div>
                <h3 className="text-xl font-bold text-white font-display-lg">
                  Client Reviews &amp; <span className="text-[#FFE259]">Testimonials</span>
                </h3>
                <div className="flex items-center gap-3 mt-1.5">
                  {averageRating ? (
                    <>
                      <div className="flex items-center gap-1">
                        {[1, 2, 3, 4, 5].map((star) => (
                          <Star key={star} className="w-4 h-4 fill-[#FFE259] text-[#FFE259]" />
                        ))}
                      </div>
                      <span className="text-base font-extrabold text-[#FFE259]">{averageRating} out of 5.0</span>
                      <span className="text-xs text-slate-400">({reviews.length} verified review{reviews.length !== 1 ? 's' : ''})</span>
                    </>
                  ) : (
                    <span className="text-xs text-slate-400">No client reviews submitted yet</span>
                  )}
                </div>
              </div>

              <button
                onClick={() => setIsReviewFormOpen(!isReviewFormOpen)}
                className="bg-[#059669] hover:bg-[#047857] text-white font-extrabold text-xs sm:text-sm px-6 py-3 rounded-full shadow-lg shadow-[#059669]/25 transition-all flex items-center justify-center gap-2 shrink-0 cursor-pointer"
              >
                <PenLine className="w-4 h-4" />
                <span>{isReviewFormOpen ? "Cancel Review" : "Write a Client Review"}</span>
              </button>
            </div>

            {/* Interactive Review Submission Form */}
            {isReviewFormOpen && (
              <form
                onSubmit={handleReviewSubmit}
                className="bg-[#18181b] rounded-2xl border border-zinc-700 p-6 space-y-4 animate-in fade-in zoom-in-95 duration-200"
              >
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                  <div>
                    <h4 className="text-xl font-bold text-white font-display-lg">
                      Submit Your Review for <span className="text-[#FFE259]">{agent.name}</span>
                    </h4>
                    <p className="text-[11px] text-slate-400">
                      {isLoggedIn && user 
                        ? `Posting as verified customer: ${user.name}` 
                        : "Open to all clients and guests (No login required)"}
                    </p>
                  </div>
                  <span className="text-[10px] font-bold px-2.5 py-1 rounded-full bg-[#0A0A0A] text-[#FFE259] border border-[#FFA726]/40 self-start sm:self-auto">
                    {isLoggedIn ? "Verified Account" : "Guest Reviewer"}
                  </span>
                </div>

                {/* Star Rating Picker */}
                <div>
                  <label className="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-1.5">
                    Your Overall Rating *
                  </label>
                  <div className="flex items-center gap-1.5">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <button
                        key={star}
                        type="button"
                        onClick={() => setNewRating(star)}
                        onMouseEnter={() => setHoverRating(star)}
                        onMouseLeave={() => setHoverRating(0)}
                        className="p-1 focus:outline-none transition-transform hover:scale-110 cursor-pointer"
                      >
                        <Star
                          className={`w-6 h-6 transition-colors ${
                            (hoverRating || newRating) >= star
                              ? "fill-[#FFE259] text-[#FFE259]"
                              : "text-zinc-600"
                          }`}
                        />
                      </button>
                    ))}
                    <span className="ml-2 text-xs font-bold text-[#FFE259]">
                      {newRating} / 5 Stars
                    </span>
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-1">
                      Your Full Name *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="e.g. Sarath Wijesinghe"
                      value={newAuthor}
                      onChange={(e) => setNewAuthor(e.target.value)}
                      className="w-full bg-[#121214] border border-zinc-700 rounded-xl px-4 py-2.5 text-xs sm:text-sm text-white focus:outline-none focus:border-[#FFE259] transition-colors"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-1">
                      Transaction / Service Type
                    </label>
                    <select
                      value={newRole}
                      onChange={(e) => setNewRole(e.target.value)}
                      className="w-full bg-[#121214] border border-zinc-700 rounded-xl px-3 py-2.5 text-xs sm:text-sm font-semibold text-white focus:outline-none focus:border-[#FFE259] transition-colors cursor-pointer"
                    >
                      <option value="Bought House through Agent">Bought a House through Agent</option>
                      <option value="Sold Property through Agent">Sold a Property through Agent</option>
                      <option value="Purchased Luxury Villa">Purchased a Luxury Villa</option>
                      <option value="Purchased Condominium">Purchased a Colombo Condominium</option>
                      <option value="Land Due Diligence & Investment">Land Due Diligence &amp; Title Verification</option>
                      <option value="Overseas Diaspora Client">Overseas Diaspora Client (Remote)</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-1">
                    Review Headline / Summary
                  </label>
                  <input
                    type="text"
                    placeholder="e.g. Superb professionalism and quick title clearance"
                    value={newTitle}
                    onChange={(e) => setNewTitle(e.target.value)}
                    className="w-full bg-[#121214] border border-zinc-700 rounded-xl px-4 py-2.5 text-xs sm:text-sm text-white focus:outline-none focus:border-[#FFE259] transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 uppercase tracking-wider mb-1">
                    Your Review Feedback *
                  </label>
                  <textarea
                    rows={3}
                    required
                    placeholder={`Tell other buyers and sellers about your experience with ${agent.name}...`}
                    value={newComment}
                    onChange={(e) => setNewComment(e.target.value)}
                    className="w-full bg-[#121214] border border-zinc-700 rounded-xl px-4 py-2.5 text-xs sm:text-sm text-white focus:outline-none focus:border-[#FFE259] transition-colors"
                  />
                </div>

                {submittedSuccess && (
                  <div className="p-3.5 rounded-xl bg-emerald-950/80 border border-emerald-500/40 text-emerald-300 text-xs font-bold flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                    <span>Thank you! Your review for {agent.name} has been published.</span>
                  </div>
                )}

                <div className="flex justify-end gap-3 pt-2">
                  <button
                    type="button"
                    onClick={() => setIsReviewFormOpen(false)}
                    className="px-5 py-2.5 rounded-full border border-zinc-700 text-slate-300 text-xs font-bold hover:bg-zinc-800 cursor-pointer"
                  >
                    Cancel
                  </button>
                  <button
                    type="submit"
                    className="px-6 py-2.5 rounded-full bg-[#059669] hover:bg-[#047857] text-white text-xs font-extrabold shadow-md transition-all cursor-pointer"
                  >
                    Post Review
                  </button>
                </div>
              </form>
            )}

            {/* List of Real Client Reviews */}
            {reviews.length === 0 ? (
              <div className="p-8 rounded-2xl bg-[#18181b]/50 border border-zinc-800 text-center space-y-2">
                <MessageCircle className="w-7 h-7 text-slate-600 mx-auto" />
                <p className="text-xs font-bold text-slate-300">No client reviews submitted yet</p>
                <p className="text-[11px] text-slate-500">
                  Have you bought or sold a property with {agent.name}? Be the first to share your experience!
                </p>
              </div>
            ) : (
              <div className="space-y-4 pt-2">
                {reviews.map((rev) => (
                  <div
                    key={rev.id}
                    className="bg-[#0e0e10] rounded-2xl border border-[#FFE259]/30 hover:border-[#FFE259]/60 p-6 space-y-3 transition-all text-white shadow-xl"
                  >
                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
                      <div className="flex items-center gap-3">
                        <div className="w-11 h-11 rounded-full bg-[#0A0A0A] border-2 border-[#FFE259]/60 text-[#FFE259] font-extrabold text-sm flex items-center justify-center shadow-md">
                          {rev.author.split(" ").map((n) => n[0]).slice(0, 2).join("")}
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <h5 className="text-base font-bold text-white font-display-lg">
                              {rev.author}
                            </h5>
                            {rev.verified && (
                              <span className="px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-[#0A0A0A] text-[#FFE259] border border-[#FFA726]/40 flex items-center gap-1">
                                <CheckCircle2 className="w-3 h-3 text-[#FFE259]" /> Verified Client
                              </span>
                            )}
                          </div>
                          <p className="text-xs text-slate-400 font-medium">{rev.role}</p>
                        </div>
                      </div>

                      <div className="flex items-center gap-3 text-xs">
                        <div className="flex items-center gap-0.5">
                          {[1, 2, 3, 4, 5].map((star) => (
                            <Star
                              key={star}
                              className={`w-4 h-4 ${
                                star <= rev.rating
                                  ? "fill-[#FFE259] text-[#FFE259]"
                                  : "text-zinc-700"
                              }`}
                            />
                          ))}
                        </div>
                        <span className="text-[11px] text-slate-400">{rev.date}</span>
                      </div>
                    </div>

                    {rev.title && (
                      <h6 className="font-bold text-[#FFE259] text-sm">
                        &ldquo;{rev.title}&rdquo;
                      </h6>
                    )}

                    <p className="text-xs sm:text-sm text-slate-300 leading-relaxed">
                      {rev.comment}
                    </p>
                  </div>
                ))}
              </div>
            )}

          </div>

        </div>

      </div>

      {/* Agent Direct Inquiry Modal */}
      <AgentContactModal
        isOpen={isContactModalOpen}
        onClose={() => setIsContactModalOpen(false)}
        agent={{
          name: agent.name,
          image: agent.avatar,
          role: agent.role,
          division: agent.division
        }}
      />

    </div>
  );
}