'use client';

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

const agents = [
  {
    id: 1,
    name: 'عبدالعزيز العتيبي',
    city: 'الرياض، المملكة العربية السعودية',
    specialty: 'متخصص في العقارات السكنية والاستثمارية',
    experience: 'خبرة 8 سنوات في السوق العقاري',
    rating: '4.9',
    reviews: '128',
    properties: '152',
    success: '98%',
    years: '8',
    image: '/agents/1.png',
    color: 'white',
  },
  {
    id: 2,
    name: 'ناصر القحطاني',
    city: 'جدة، المملكة العربية السعودية',
    specialty: 'متخصص في العقارات التجارية والسكنية',
    experience: 'خبرة 6 سنوات في التسويق العقاري',
    rating: '4.8',
    reviews: '96',
    properties: '110',
    success: '95%',
    years: '6',
    image: '/agents/2.png',
    color: 'blue',
  },
  {
    id: 3,
    name: 'محمد القحطاني',
    city: 'الدمام، المملكة العربية السعودية',
    specialty: 'متخصص في العقارات الفاخرة والاستثمارية',
    experience: 'خبرة 10 سنوات في السوق العقاري',
    rating: '5.0',
    reviews: '236',
    properties: '180',
    success: '99%',
    years: '10',
    image: '/agents/3.png',
    color: 'black',
  },
  {
    id: 4,
    name: 'Falcon',
    city: 'الرياض، المملكة العربية السعودية',
    specialty: 'متخصص في العقارات السكنية والتجارية',
    experience: 'خبرة 7 سنوات في السوق العقاري',
    rating: '4.9',
    reviews: '143',
    properties: '135',
    success: '97%',
    years: '7',
    image: '/agents/4.png',
    color: 'green',
  },
];

export default function PremiumAgentSection() {
  return (
    <section
      className="relative overflow-hidden py-24 md:py-32"
      style={{
        backgroundImage: "url('/main-page/agent/agent2.png')",
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      {/* Overlay */}
      <div className="absolute inset-0 bg-[#F8FAFC]/85 backdrop-blur-[3px]" />

      <div className="relative z-10">

        {/* Hero */}
        <div className="text-center px-5 mb-16 md:mb-20">

          <h2
            className="
              text-[36px]
              md:text-[72px]
              leading-[1.1]
              font-black
              tracking-tight
              text-[#052531]
            "
          >
            ابحث عن وسيط عقاري مرخص
          </h2>

          <p
            className="
              mt-5
              text-[18px]
              md:text-[28px]
              text-[#64748B]
              font-medium
            "
          >
            ابحث عن الوكلاء الموثوقين الذين حصلوا على جوائز لأدائهم الممتاز
          </p>

          {/* Search Button */}
          <div className="mt-10 flex justify-center">
            <Link
              href="/find-agents"
              className="
                group
                flex
                items-center
                justify-center
                gap-3
                w-full
                max-w-[680px]
                h-[64px]
                md:h-[74px]
                rounded-full
                bg-[#052531]
                text-white
                text-[20px]
                md:text-[24px]
                font-bold
                shadow-[0_12px_35px_rgba(5,37,49,0.25)]
                transition-all
                duration-300
                hover:scale-[1.01]
              "
            >
              بحث

              <ArrowUpLeft
                className="
                  w-5
                  h-5
                  transition-all
                  duration-300
                  group-hover:-translate-x-1
                  group-hover:-translate-y-1
                "
              />
            </Link>
          </div>
        </div>

        {/* Cards */}
        <div
          className="
            flex
            gap-8
            overflow-x-auto
            px-6
            pb-8
            scroll-smooth
            snap-x
            snap-mandatory
            no-scrollbar
          "
        >
          {agents.map((agent) => (
            <div
              key={agent.id}
              className={`
                min-w-[330px]
                max-w-[330px]
                rounded-[34px]
                p-7
                shrink-0
                snap-center
                backdrop-blur-xl
                border
                shadow-[0_20px_60px_rgba(0,0,0,0.12)]
                transition-all
                duration-500
                hover:-translate-y-2
                hover:shadow-[0_25px_80px_rgba(0,0,0,0.18)]
                ${getCardColor(agent.color)}
              `}
            >
              {/* Verified */}
              <div className="flex justify-between items-center mb-6">
                <div
                  className="
                    flex
                    items-center
                    gap-1
                    px-3
                    py-1
                    rounded-full
                    bg-white/90
                    text-[#0F172B]
                    text-[12px]
                    font-bold
                  "
                >
                  <ShieldCheck className="w-4 h-4 text-green-600" />
                  موثق
                </div>
              </div>

              {/* Avatar */}
              <div className="flex flex-col items-center">
                <div className="relative">
                  <Image
                    src={agent.image}
                    alt={agent.name}
                    width={110}
                    height={110}
                    className="rounded-full border-4 border-white object-cover"
                  />

                  <div className="absolute bottom-2 left-2 w-5 h-5 bg-green-500 border-2 border-white rounded-full" />
                </div>

                <h3
                  className={`mt-5 text-[32px] font-black text-center leading-tight ${getTextColor(
                    agent.color
                  )}`}
                >
                  {agent.name}
                </h3>

                <div
                  className={`flex items-center gap-1 mt-2 text-[15px] ${getSubTextColor(
                    agent.color
                  )}`}
                >
                  <MapPin className="w-4 h-4" />
                  {agent.city}
                </div>

                <p
                  className={`mt-5 text-center text-[15px] leading-8 ${getSubTextColor(
                    agent.color
                  )}`}
                >
                  {agent.specialty}
                </p>

                <p
                  className={`text-center text-[14px] leading-7 ${getSubTextColor(
                    agent.color
                  )}`}
                >
                  {agent.experience}
                </p>

                {/* Rating */}
                <div className="flex items-center gap-2 mt-5">
                  <div className="flex items-center gap-1">
                    {[1, 2, 3, 4, 5].map((item) => (
                      <Star
                        key={item}
                        className="w-4 h-4 fill-yellow-400 text-yellow-400"
                      />
                    ))}
                  </div>

                  <span
                    className={`text-[16px] font-bold ${getTextColor(
                      agent.color
                    )}`}
                  >
                    {agent.rating}
                  </span>

                  <span
                    className={`text-[14px] ${getSubTextColor(agent.color)}`}
                  >
                    ({agent.reviews})
                  </span>
                </div>
              </div>

              {/* Stats */}
              <div
                className="
                  mt-8
                  pt-6
                  border-t
                  border-white/20
                  grid
                  grid-cols-3
                  gap-4
                "
              >
                <StatItem
                  icon={<Building2 className="w-5 h-5" />}
                  value={agent.properties}
                  label="عقار"
                  dark={agent.color !== 'white'}
                />

                <StatItem
                  icon={<ShieldCheck className="w-5 h-5" />}
                  value={agent.success}
                  label="رضا العملاء"
                  dark={agent.color !== 'white'}
                />

                <StatItem
                  icon={<Trophy className="w-5 h-5" />}
                  value={agent.years}
                  label="سنوات خبرة"
                  dark={agent.color !== 'white'}
                />
              </div>

              {/* Actions */}
              <div className="flex items-center gap-4 mt-8">
                <button
                  className="
                    w-[52px]
                    h-[52px]
                    rounded-full
                    bg-white/15
                    border
                    border-white/20
                    backdrop-blur-md
                    flex
                    items-center
                    justify-center
                    transition-all
                    duration-300
                    hover:scale-105
                  "
                >
                  <Share2
                    className={`w-5 h-5 ${
                      agent.color === 'white'
                        ? 'text-[#0F172B]'
                        : 'text-white'
                    }`}
                  />
                </button>

                <Link
                  href={`/agents/${agent.id}`}
                  className="
                    flex-1
                    h-[54px]
                    rounded-full
                    bg-white/90
                    backdrop-blur-md
                    border
                    border-white/30
                    flex
                    items-center
                    justify-center
                    gap-2
                    text-[18px]
                    font-bold
                    text-[#0F172B]
                    transition-all
                    duration-300
                    hover:scale-[1.02]
                  "
                >
                  مشاهدة التفاصيل
                  <ArrowUpLeft className="w-5 h-5" />
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StatItem({
  icon,
  value,
  label,
  dark,
}: {
  icon: React.ReactNode;
  value: string;
  label: string;
  dark: boolean;
}) {
  return (
    <div className="flex flex-col items-center text-center">
      <div className={dark ? 'text-white' : 'text-[#334155]'}>
        {icon}
      </div>

      <span
        className={`mt-2 text-[28px] font-black ${
          dark ? 'text-white' : 'text-[#0F172B]'
        }`}
      >
        {value}
      </span>

      <span
        className={`text-[13px] ${
          dark ? 'text-white/70' : 'text-[#64748B]'
        }`}
      >
        {label}
      </span>
    </div>
  );
}

function getCardColor(color: string) {
  switch (color) {
    case 'white':
      return 'bg-white text-[#0F172B]';

    case 'blue':
      return 'bg-gradient-to-br from-[#3B82F6] to-[#1D4ED8]';

    case 'black':
      return 'bg-gradient-to-br from-[#0F172B] to-black';

    case 'green':
      return 'bg-gradient-to-br from-[#00C950] to-[#00A63E]';

    default:
      return 'bg-white';
  }
}

function getTextColor(color: string) {
  switch (color) {
    case 'white':
    case 'green':
      return 'text-[#0F172B]';

    case 'blue':
    case 'black':
      return 'text-white';

    default:
      return 'text-[#0F172B]';
  }
}

function getSubTextColor(color: string) {
  switch (color) {
    case 'white':
      return 'text-[#64748B]';

    case 'green':
      return 'text-[#083344]';

    case 'blue':
    case 'black':
      return 'text-white/80';

    default:
      return 'text-[#64748B]';
  }
}