'use client';

import Image from 'next/image';
import { ShieldCheck, Users, Lock, ArrowRight } from 'lucide-react';

interface Feature {
  icon:        typeof ShieldCheck;
  title:       string;
  subtitle:    string;
  description: string;
  stat:        string;
  statLabel:   string;
  image:       string;
  accent:      string;
}

const FEATURES: Feature[] = [
  {
    icon:        ShieldCheck,
    title:       'Verified Properties',
    subtitle:    'RERA Certified',
    description: "Every listing is manually verified and compliant with RERA regulations. Browse with full confidence knowing each property meets Dubai's strictest legal standards.",
    stat:        '5,000+',
    statLabel:   'Verified Listings',
    image:       'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=600&q=80',
    accent:      '#10B981',
  },
  {
    icon:        Users,
    title:       'Licensed Agents',
    subtitle:    'BRN & ORN Verified',
    description: 'Connect only with RERA-certified agents and verified agencies. Our network includes professionals with valid BRN and ORN credentials — no exceptions.',
    stat:        '200+',
    statLabel:   'Certified Agents',
    image:       'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=600&q=80',
    accent:      '#C5A880',
  },
  {
    icon:        Lock,
    title:       'Secure Platform',
    subtitle:    'Bank-Level Security',
    description: 'End-to-end encryption for all communications and secure payment processing. Your personal data and every transaction are protected at every single step.',
    stat:        '100%',
    statLabel:   'Secure Transactions',
    image:       'https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=600&q=80',
    accent:      '#3B82F6',
  },
];

export function FeaturesSection() {
  return (
    <section id="why-wild-dubai" className="py-24 px-6 lg:px-20 bg-white">
      {/* ── Section header ─────────────────────────────────── */}
      <div className="text-center mb-16">
        <span className="text-[10px] font-bold text-[#725b38] uppercase tracking-[0.22em] mb-3 block">
          Why Choose Us
        </span>
        <h2 className="text-4xl md:text-5xl font-serif font-bold text-[#0d1c32] mb-5 leading-tight">
          Dubai&apos;s Most Trusted<br />
          <span className="text-[#C5A880]">Real Estate Platform</span>
        </h2>
        <p className="text-gray-500 max-w-xl mx-auto text-base leading-relaxed">
          Cutting-edge technology meets deep local expertise — delivering an unmatched
          property experience across every Dubai community.
        </p>
      </div>

      {/* ── Feature cards ───────────────────────────────────── */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {FEATURES.map((f) => {
          const Icon = f.icon;
          return (
            <div
              key={f.title}
              className="group relative overflow-hidden bg-[#f7f9fb] border border-transparent
                hover:bg-white hover:border-gray-100 hover:shadow-xl
                transition-all duration-500 rounded-sm"
            >
              {/* Image */}
              <div className="relative h-52 overflow-hidden">
                <div className="relative w-full h-full">
                  <Image
                    src={f.image}
                    alt={f.title}
                    fill
                    sizes="(max-width: 768px) 100vw, 33vw"
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                  />
                </div>
                {/* Fade bottom into card bg */}
                <div className="absolute inset-0 bg-gradient-to-t from-[#f7f9fb] group-hover:from-white
                  via-transparent to-transparent transition-colors duration-500" />
              </div>

              {/* Content */}
              <div className="p-7">
                {/* Icon badge */}
                <div
                  className="w-12 h-12 rounded-lg flex items-center justify-center mb-5"
                  style={{ backgroundColor: `${f.accent}1A` }}
                >
                  <Icon className="w-6 h-6" style={{ color: f.accent }} />
                </div>

                <div
                  className="text-[9px] font-bold tracking-[0.2em] uppercase mb-1.5"
                  style={{ color: f.accent }}
                >
                  {f.subtitle}
                </div>

                <h3 className="text-xl font-serif font-bold text-[#0d1c32] mb-3 leading-snug">
                  {f.title}
                </h3>
                <p className="text-gray-500 text-sm leading-relaxed mb-6">
                  {f.description}
                </p>

                {/* Stat */}
                <div className="border-t border-gray-200 pt-5 flex items-baseline justify-between">
                  <div className="flex items-baseline gap-2">
                    <span className="text-2xl font-black" style={{ color: f.accent }}>
                      {f.stat}
                    </span>
                    <span className="text-[10px] text-gray-400 uppercase tracking-widest">
                      {f.statLabel}
                    </span>
                  </div>
                  <ArrowRight
                    className="w-5 h-5 text-gray-300 group-hover:text-[#C5A880]
                      group-hover:translate-x-1 transition-all duration-300"
                  />
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}