"use client"

import { stations } from "@/data";
import { motion } from "framer-motion";
import Link from "next/link";
import { SectionHeader } from "@/components/ui/SectionHeader";

export function Stations() {
  return (
    <section id="stations" className="py-20 bg-muted/30">
      <div className="container px-4">
        <SectionHeader 
          title="Our Stations" 
          subtitle="The key landmarks connecting our district."
        />

        <div className="grid gap-8 md:grid-cols-3 lg:grid-cols-4">
          {stations.map((station, index) => (
            <Link
              key={station.id}
              href={`/station/${station.id}`}
            >
              <motion.div
                initial={{ opacity: 0, scale: 0.95 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ delay: index * 0.1 }}
                viewport={{ once: true }}
                className="group overflow-hidden rounded-xl bg-background border shadow-sm hover:shadow-md transition-all cursor-pointer"
              >
                <div className="aspect-video relative overflow-hidden">
                  <img 
                    src={station.image} 
                    alt={station.name}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  <div className="absolute top-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
                    {station.badge}
                  </div>
                </div>
                
                <div className="p-6">
                  <h3 className="text-lg font-bold mb-2">{station.name}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">
                    {station.description}
                  </p>
                </div>
              </motion.div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}
