"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";


const cities = [
  {
    name: "NAIROBI, KENYA",
    description: "The capital city with premium residential and commercial opportunities.",
    properties: 85,
    image: "https://images.unsplash.com/photo-1611348524140-53c9a25263d6?q=80&w=2073&auto=format&fit=crop",
  },
  {
    name: "MOMBASA, KENYA",
    description: "Coastal properties with tourism and investment potential.",
    properties: 42,
    image: "https://images.unsplash.com/photo-1596005554384-d293674c91d7?q=80&w=2070&auto=format&fit=crop",
  },
  {
    name: "KISUMU, KENYA",
    description: "Growing lakeside city with affordable land and housing.",
    properties: 28,
    image: "https://images.unsplash.com/photo-1504233529578-6d46baba6d34?q=80&w=2070&auto=format&fit=crop",
  },
  {
    name: "NAKURU, KENYA",
    description: "Rapidly developing city with great ROI potential.",
    properties: 35,
    image: "https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?q=80&w=2072&auto=format&fit=crop",
  },
  {
    name: "ELDORET, KENYA",
    description: "Agricultural hub with growing real estate demand.",
    properties: 22,
    image: "https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=2070&auto=format&fit=crop",
  },
  {
    name: "THIKA, KENYA",
    description: "Industrial town with booming residential development.",
    properties: 31,
    image: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2070&auto=format&fit=crop",
  },
];

export function ExploreCities() {
  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="text-center mb-16"
        >
          <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
            //EXPLORE CITIES
          </p>
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-obsidian-700 leading-tight">
            TAKE A STROLL AROUND
            <br />
            <span className="text-primary">KENYAN CITIES</span>
          </h2>
        </motion.div>

        {/* Cities Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {cities.map((city, i) => (
            <motion.div
              key={city.name}
              initial={{ opacity: 0, y: 40 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ duration: 0.6, delay: i * 0.1 }}
              className="group relative aspect-[4/3] overflow-hidden cursor-pointer"
            >
              <img
                src={city.image}
                alt={city.name}
                className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-obsidian-900/90 via-obsidian-900/30 to-transparent" />

              {/* Content */}
              <div className="absolute inset-0 flex flex-col justify-end p-6">
                <div className="transform transition-transform duration-500 group-hover:translate-y-0 translate-y-2">
                  <h3 className="font-display text-xl font-bold text-white mb-2">
                    {city.name}
                  </h3>
                  <p className="text-sm text-white/70 mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                    {city.description}
                  </p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
