"use client"

import { trainTypes } from "@/data";
import { motion } from "framer-motion";
import { SectionHeader } from "@/components/ui/SectionHeader";

export function TrainTypes() {
  return (
    <section id="train-types" className="py-16 bg-background">
      <div className="container px-4">
        <SectionHeader 
          title="Types of Trains" 
          subtitle="Discover the different train services connecting Rajbari."
        />

        <div className="grid gap-6 md:grid-cols-3">
          {trainTypes.map((type, index) => (
            <a
              key={type.id}
              href="#schedule"
              className="block"
            >
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                viewport={{ once: true }}
                className={`p-6 rounded-xl border-2 shadow-sm hover:shadow-md transition-all cursor-pointer ${type.color}`}
              >
                <div className="text-4xl mb-3">{type.icon}</div>
                <h3 className="text-xl font-bold mb-2">{type.title}</h3>
                <p className="text-sm mb-3 opacity-90">{type.description}</p>
                <span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white/50">
                  {type.vibe}
                </span>
              </motion.div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
