"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { MapPin, Bed, Bath, Maximize, ArrowRight } from "lucide-react";

const properties = [
  {
    title: "Modern 4BR Villa in Karen",
    location: "Karen, Nairobi",
    price: "KES 45,000,000",
    beds: 4,
    baths: 3,
    area: "350 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1613490493576-7fde63acd811?q=80&w=2071&auto=format&fit=crop",
  },
  {
    title: "2BR Apartment in Kilimani",
    location: "Kilimani, Nairobi",
    price: "KES 12,500,000",
    beds: 2,
    baths: 2,
    area: "120 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=2075&auto=format&fit=crop",
  },
  {
    title: "Beachfront Cottage in Diani",
    location: "Diani, Mombasa",
    price: "KES 28,000,000",
    beds: 3,
    baths: 2,
    area: "220 sqm",
    tag: "New",
    image: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2070&auto=format&fit=crop",
  },
  {
    title: "1-Acre Land in Nanyuki",
    location: "Nanyuki, Laikipia",
    price: "KES 8,500,000",
    beds: 0,
    baths: 0,
    area: "4,046 sqm",
    tag: "Hot Deal",
    image: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=2232&auto=format&fit=crop",
  },
  {
    title: "Penthouse in Westlands",
    location: "Westlands, Nairobi",
    price: "KES 35,000,000",
    beds: 3,
    baths: 3,
    area: "280 sqm",
    tag: "Premium",
    image: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=2053&auto=format&fit=crop",
  },
  {
    title: "Townhouse in Runda",
    location: "Runda, Nairobi",
    price: "KES 52,000,000",
    beds: 5,
    baths: 4,
    area: "400 sqm",
    tag: "For Sale",
    image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop",
  },
];

export function FeaturedProperties() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section className="py-24 lg:py-32 bg-obsidian-50" ref={ref}>
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7 }}
          className="flex flex-col sm:flex-row sm:items-end sm:justify-between mb-16"
        >
          <div>
            <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
              //LATEST PROPERTIES
            </p>
            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-obsidian-700 leading-tight">
              EXPLORE FEATURED
              <br />
              <span className="text-primary">PROPERTIES</span>
            </h2>
          </div>
          <a
            href="/properties"
            className="mt-6 sm:mt-0 inline-flex items-center gap-2 bg-obsidian-700 text-white px-8 py-4 text-sm font-semibold uppercase tracking-wider hover:bg-obsidian-900 transition-colors"
          >
            Explore More <ArrowRight size={16} />
          </a>
        </motion.div>

        {/* Properties Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {properties.map((property, i) => (
            <motion.div
              key={property.title}
              initial={{ opacity: 0, y: 40 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: i * 0.1 }}
              className="group cursor-pointer"
            >
              {/* Image */}
              <div className="relative aspect-[4/3] overflow-hidden">
                <img
                  src={property.image}
                  alt={property.title}
                  className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute top-4 left-4">
                  <span className="bg-primary text-white text-xs font-semibold px-3 py-1.5 uppercase tracking-wider">
                    {property.tag}
                  </span>
                </div>
                <div className="absolute inset-0 bg-obsidian-900/0 group-hover:bg-obsidian-900/20 transition-colors duration-500" />
              </div>

              {/* Content */}
              <div className="pt-5">
                <p className="text-primary font-display font-bold text-lg">
                  {property.price}
                </p>
                <h3 className="mt-1 font-display text-lg font-bold text-obsidian-700 group-hover:text-primary transition-colors">
                  {property.title}
                </h3>
                <div className="flex items-center gap-1 mt-2 text-obsidian-400">
                  <MapPin size={14} />
                  <span className="text-sm">{property.location}</span>
                </div>

                {/* Features */}
                <div className="mt-4 pt-4 border-t border-obsidian-100 flex items-center gap-5">
                  {property.beds > 0 && (
                    <div className="flex items-center gap-1.5 text-obsidian-400">
                      <Bed size={14} />
                      <span className="text-xs">{property.beds} Beds</span>
                    </div>
                  )}
                  {property.baths > 0 && (
                    <div className="flex items-center gap-1.5 text-obsidian-400">
                      <Bath size={14} />
                      <span className="text-xs">{property.baths} Baths</span>
                    </div>
                  )}
                  <div className="flex items-center gap-1.5 text-obsidian-400">
                    <Maximize size={14} />
                    <span className="text-xs">{property.area}</span>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}