'use client';

import Image from 'next/image';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { Bed, Bath, Maximize2, CheckCircle2 } from 'lucide-react';

interface Property {
  id:        number;
  slug:      string;
  title:     string;
  location:  string;
  price:     string;
  bedrooms:  number;
  bathrooms: number;
  area:      string;
  image:     string;
  badge:     string;
  badgeBg:   string;
  category:  string;
}

// These IDs must match the seeded unit IDs (1–5)
const VERIFIED_PROPERTIES: Property[] = [
  {
    id:        1,
    slug:      'marina-burj-vista-sky-penthouse',
    title:     'Marina Burj Vista — Sky Penthouse',
    location:  'Dubai Marina',
    price:     'AED 45,000,000',
    bedrooms:  4,
    bathrooms: 5,
    area:      '8,400',
    image:     'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=900&q=80',
    badge:     'Verified',
    badgeBg:   'bg-emerald-500',
    category:  'Penthouse',
  },
  {
    id:        2,
    slug:      'downtown-elegance-burj-view-apartment',
    title:     'Downtown Elegance — Burj View Apartment',
    location:  'Downtown Dubai',
    price:     'AED 12,500,000',
    bedrooms:  3,
    bathrooms: 3,
    area:      '3,200',
    image:     'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=900&q=80',
    badge:     'Off-Plan',
    badgeBg:   'bg-blue-500',
    category:  'Apartment',
  },
  {
    id:        3,
    slug:      'palm-azure-beachfront-signature-villa',
    title:     'Palm Azure — Beachfront Signature Villa',
    location:  'Palm Jumeirah',
    price:     'AED 68,000,000',
    bedrooms:  6,
    bathrooms: 7,
    area:      '12,400',
    image:     'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=900&q=80',
    badge:     'Verified',
    badgeBg:   'bg-emerald-500',
    category:  'Villa',
  },
];

export function FeaturedProperties() {
  const router = useRouter();

  return (
    <section id="verified-properties" className="py-24 px-6 lg:px-20 bg-[#f7f9fb]">
      {/* Section header */}
      <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
        <div>
          <span className="text-[10px] font-bold text-[#725b38] uppercase tracking-[0.22em] mb-3 block">
            Exclusive Selection
          </span>
          <h2 className="text-4xl md:text-5xl font-serif font-bold text-[#0d1c32] leading-tight">
            Verified Properties
          </h2>
        </div>
        <Link
          href="/listings"
          className="group flex items-center gap-2 text-[11px] font-bold text-[#0d1c32]
            border-b border-[#0d1c32] pb-0.5 hover:text-[#C5A880] hover:border-[#C5A880]
            transition-all duration-200 whitespace-nowrap"
        >
          VIEW ALL LISTINGS
          <span className="group-hover:translate-x-1 transition-transform duration-200 inline-block">→</span>
        </Link>
      </div>

      {/* Property grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {VERIFIED_PROPERTIES.map((p) => (
          <button
            key={p.id}
            onClick={() => router.push(`/listings/${p.slug}`)}
            className="group relative bg-white overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 block rounded-sm text-left w-full"
          >
            <div className="relative h-[480px] overflow-hidden">
              <div className="relative w-full h-full">
                <Image
                  src={p.image}
                  alt={p.title}
                  fill
                  sizes="(max-width: 768px) 100vw, 33vw"
                  className="object-cover group-hover:scale-110 transition-transform duration-700"
                />
              </div>
              <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/15 to-transparent" />

              <div className="absolute top-5 left-5 flex gap-2 z-10">
                <span className={`${p.badgeBg} text-white px-3 py-1 text-[9px] font-bold tracking-[0.18em] uppercase rounded flex items-center gap-1`}>
                  {p.badge === 'Verified' && <CheckCircle2 className="w-2.5 h-2.5" />}
                  {p.badge}
                </span>
                <span className="bg-white/20 backdrop-blur-sm text-white px-3 py-1 text-[9px] font-bold tracking-[0.18em] uppercase rounded">
                  {p.category}
                </span>
              </div>

              <div className="absolute bottom-0 left-0 right-0 p-6 z-10">
                <div className="text-[#C5A880] text-[11px] font-bold tracking-widest uppercase mb-1.5">
                  {p.location}
                </div>
                <h3 className="font-serif text-xl font-bold text-white mb-4 leading-snug group-hover:text-[#C5A880] transition-colors duration-300">
                  {p.title}
                </h3>
                <div className="flex justify-between items-end gap-2">
                  <span className="font-bold text-[#fedeb2] text-lg leading-none">{p.price}</span>
                  <div className="flex items-center gap-3 text-white/65 text-[10px]">
                    <span className="flex items-center gap-1"><Bed className="w-3 h-3" /> {p.bedrooms}</span>
                    <span className="flex items-center gap-1"><Bath className="w-3 h-3" /> {p.bathrooms}</span>
                    <span className="flex items-center gap-1"><Maximize2 className="w-3 h-3" /> {p.area} sqft</span>
                  </div>
                </div>
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* Trust badges */}
      <div className="mt-16 flex flex-wrap items-center justify-center gap-8 border-t border-gray-200 pt-10">
        {['RERA Verified', 'DLD Registered', 'Title Deed Secured', 'Agent BRN Certified'].map((badge) => (
          <div key={badge} className="flex items-center gap-2 text-[11px] font-semibold text-[#725b38]">
            <CheckCircle2 className="w-4 h-4 text-emerald-500" />
            {badge}
          </div>
        ))}
      </div>
    </section>
  );
}