'use client';

import Image from 'next/image';
import {
  ShieldCheck,
  MapPin,
  Star,
  Share2,
  ArrowUpLeft,
  Building2,
  Trophy,
  Handshake,
} from 'lucide-react';

interface ModernAgentCardProps {
  name: string;
  city: string;
  image: string;
  color: 'white' | 'blue' | 'black' | 'green';
}

export default function ModernAgentCard({
  name,
  city,
  image,
  color,
}: ModernAgentCardProps) {
  const isWhite = color === 'white';

  const cardStyles = {
    white:
      'bg-white border border-[#EAEAEA] text-[#0F172B]',
    blue:
      'bg-[linear-gradient(135deg,#3B82F6_0%,#1D4ED8_100%)] text-white',
    black:
      'bg-[linear-gradient(135deg,#020617_0%,#0F172A_100%)] text-white',
    green:
      'bg-[linear-gradient(135deg,#14B8A6_0%,#059669_100%)] text-white',
  };

  return (
    <div
      className={`
        relative
        overflow-hidden
        rounded-[28px]
        w-[280px]
        h-[470px]
        p-4
        shadow-[0_15px_40px_rgba(15,23,42,0.10)]
        backdrop-blur-xl
        flex
        flex-col
        ${cardStyles[color]}
      `}
    >
      {/* Background Effects */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-10 -left-10 w-40 h-40 bg-white/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-0 w-40 h-40 bg-black/10 rounded-full blur-3xl" />
        <div className="absolute inset-0 overflow-hidden">
          
        </div>
      </div>


{/* Glow */}
<div className="absolute -top-16 -left-16 w-32 h-32 bg-white/5 rounded-full blur-3xl" />

<div className="absolute bottom-[-40px] right-[-40px] w-40 h-40 bg-black/5 rounded-full blur-3xl" />

{/* Soft Shapes */}
<div className="absolute top-0 right-[-80px] w-[180px] h-[180px] rounded-full bg-white/6" />

<div className="absolute bottom-[-120px] left-[-120px] w-[220px] h-[220px] rounded-full bg-black/5" />

     {/* Verified */}
<div className="relative z-10 flex justify-end">
  <div
    className="
      inline-flex
      items-center
      gap-1.5
      bg-white
      text-[#0F172B]
      rounded-full
      px-3
      py-1.5
      shadow-md
      w-fit
    "
  >
    <ShieldCheck className="w-3.5 h-3.5 text-[#22C55E]" />

    <span className="text-[10px] font-semibold">
      موثق
    </span>
  </div>
</div>


      {/* Avatar */}
<div className="relative z-10 flex justify-center">            <div className="relative">
          <div
            className="
              w-[78px]
              h-[78px]
              rounded-full
              overflow-hidden
              border-[3px]
              border-white
              shadow-lg
            "
          >
            <Image
              src={image}
              alt={name}
              width={78}
              height={78}
              className="w-full h-full object-cover"
            />
          </div>

  <div
  className="
    absolute
    bottom-[6px]
    -right-[2px]
    w-5
    h-5
    rounded-full
    bg-[#22C55E]
    border-[3px]
    border-white
  "
/>
        </div>
      </div>

      {/* Content */}
      <div className="relative z-10 text-center mt-4 flex-1 flex flex-col">
        <h3
          className={`
            text-[11px]
            leading-tight
            font-semibold
            mb-2
            ${isWhite ? 'text-[#0F172B]' : 'text-white'}
          `}
        >
          {name}
        </h3>

        <div
          className={`
            flex
            items-center
            justify-center
            gap-1
            text-[10px]
            mb-4
            ${isWhite ? 'text-[#667085]' : 'text-white/80'}
          `}
        >
          <MapPin className="w-3 h-3" />
          <span>{city}</span>
        </div>

        <p
          className={`
            text-[10px]
            leading-[20px]
            mb-2
            font-medium
            ${isWhite ? 'text-[#667085]' : 'text-white/85'}
          `}
        >
          متخصص في العقارات السكنية والاستثمارية
        </p>

        <p
          className={`
            text-[10px]
            font-medium
            mb-5
            ${isWhite ? 'text-[#667085]' : 'text-white/80'}
          `}
        >
          خبرة 8 سنوات في السوق العقاري
        </p>

        {/* Rating */}
        <div className="flex items-center justify-center gap-1 mb-5">
          {[1, 2, 3, 4, 5].map((i) => (
            <Star
              key={i}
              className="w-3.5 h-3.5 fill-[#FFC107] text-[#FFC107]"
            />
          ))}

          <span
            className={`
              text-[11px]
              font-semibold
              mr-1
              ${isWhite ? 'text-[#0F172B]' : 'text-white'}
            `}
          >
            4.9
          </span>

          <span
            className={`
              text-[10px]
              ${isWhite ? 'text-[#667085]' : 'text-white/75'}
            `}
          >
            (128)
          </span>
        </div>

        {/* Divider */}
        <div
          className={`
            w-full
            h-[1px]
            mb-5
            ${isWhite ? 'bg-[#E5E7EB]' : 'bg-white/10'}
          `}
        />

        {/* Stats */}
        <div className="grid grid-cols-3 gap-2 mb-5">
          <div className="text-center">
            <Building2
              className={`
                w-4 h-4 mx-auto mb-2
                ${isWhite ? 'text-[#475467]' : 'text-white/90'}
              `}
            />

            <div
              className={`
                text-[11px]
                font-semibold
                ${isWhite ? 'text-[#0F172B]' : 'text-white'}
              `}
            >
              152
            </div>

            <div
              className={`
                text-[9px]
                mt-1
                ${isWhite ? 'text-[#667085]' : 'text-white/70'}
              `}
            >
              عقار
            </div>
          </div>

          <div className="text-center">
            <Handshake
              className={`
                w-4 h-4 mx-auto mb-2
                ${isWhite ? 'text-[#475467]' : 'text-white/90'}
              `}
            />

            <div
              className={`
                text-[11px]
                font-semibold
                ${isWhite ? 'text-[#0F172B]' : 'text-white'}
              `}
            >
              98%
            </div>

            <div
              className={`
                text-[9px]
                mt-1
                ${isWhite ? 'text-[#667085]' : 'text-white/70'}
              `}
            >
              رضا العملاء
            </div>
          </div>

          <div className="text-center">
            <Trophy
              className={`
                w-4 h-4 mx-auto mb-2
                ${isWhite ? 'text-[#475467]' : 'text-white/90'}
              `}
            />

            <div
              className={`
                text-[11px]
                font-semibold
                ${isWhite ? 'text-[#0F172B]' : 'text-white'}
              `}
            >
              8
            </div>

            <div
              className={`
                text-[9px]
                mt-1
                ${isWhite ? 'text-[#667085]' : 'text-white/70'}
              `}
            >
              سنوات خبرة
            </div>
          </div>
        </div>

        {/* Buttons */}
        <div className="mt-auto flex items-center gap-2">
          <button
            className={`
              flex-1
              h-[36px]
              rounded-full
              flex
              items-center
              justify-center
              gap-2
              transition-all
              text-[10px]
              font-semibold
              ${
                isWhite
                  ? 'bg-[#0F172B] text-white'
                  : 'bg-white text-[#0F172B]'
              }
            `}
          >
            <ArrowUpLeft className="w-3.5 h-3.5" />
            مشاهدة التفاصيل
          </button>

          <button
            className="
              w-[36px]
              h-[36px]
              rounded-full
              border
              border-white/20
              bg-white/10
              backdrop-blur-md
              flex
              items-center
              justify-center
            "
          >
            <Share2
              className={`
                w-3.5 h-3.5
                ${isWhite ? 'text-[#0F172B]' : 'text-white'}
              `}
            />
          </button>
        </div>
      </div>
    </div>
  );
}