import React from "react";
import { Link } from "react-router-dom";
import { motion } from "motion/react";
import {
  Mountain, Tent, Sailboat, Waves, Map,
  Music, Palette, BookOpen, Globe, CookingPot, Sprout, Utensils, Plane,
} from "lucide-react";
import PageHeader from "../components/PageHeader";

interface PursuitItem {
  slug: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  color: string;
}

const allPursuits: PursuitItem[] = [
  { slug: "camping", title: "Camping", description: "Weekend trips and multi-day expeditions", icon: <Tent size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
  { slug: "skiing", title: "Skiing", description: "Alpine and backcountry adventures", icon: <Mountain size={22} />, color: "bg-primary-container/15 text-primary" },
  { slug: "hiking", title: "Hiking", description: "Trails through national parks", icon: <Map size={22} />, color: "bg-secondary-container/15 text-secondary" },
  { slug: "canoeing", title: "Canoeing", description: "River and lake paddling", icon: <Sailboat size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
  { slug: "surfing", title: "Surfing", description: "Chasing waves along the coast", icon: <Waves size={22} />, color: "bg-secondary-container/15 text-secondary" },
  { slug: "music", title: "Music", description: "Guitar, production, and performance", icon: <Music size={22} />, color: "bg-primary-container/15 text-primary" },
  { slug: "fine-art", title: "Fine Art", description: "Painting, sketching, and digital art", icon: <Palette size={22} />, color: "bg-secondary-container/15 text-secondary" },
  { slug: "philosophy", title: "Philosophy", description: "Stoicism, existentialism, and ethics", icon: <BookOpen size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
  { slug: "reading", title: "Reading", description: "Fiction, non-fiction, and technical lit", icon: <BookOpen size={22} />, color: "bg-primary-container/15 text-primary" },
  { slug: "cooking", title: "Cooking", description: "World cuisines and techniques", icon: <CookingPot size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
  { slug: "gardening", title: "Gardening", description: "Organic growing and sustainability", icon: <Sprout size={22} />, color: "bg-secondary-container/15 text-secondary" },
  { slug: "food-production", title: "Food Production", description: "Salami, cheese, honey, and salt", icon: <Utensils size={22} />, color: "bg-primary-container/15 text-primary" },
  { slug: "italy-travel", title: "Italy Travel", description: "Skiing, dining, and exploration", icon: <Plane size={22} />, color: "bg-secondary-container/15 text-secondary" },
  { slug: "global-politics", title: "Global Politics", description: "International relations and theory", icon: <Globe size={22} />, color: "bg-tertiary-container/15 text-tertiary" },
];

export default function Interests() {
  return (
    <div>
      <PageHeader
        title="Interests"
        description="A complete catalog of passions and pursuits that define how I spend my time and energy."
        tag="all pursuits"
      />

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {allPursuits.map((pursuit, index) => (
          <Link key={pursuit.slug} to={`/interests/${pursuit.slug}`}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.05 }}
              whileHover={{ y: -4, scale: 1.02 }}
              className="bg-surface-container-low border border-outline-variant/40 rounded-2xl p-5 shadow-ambient hover:shadow-ambient-lg transition-all duration-200 cursor-pointer group"
            >
              <div className="flex items-start gap-4">
                <div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 ${pursuit.color}`}>
                  {pursuit.icon}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <h3 className="font-display font-semibold text-base text-on-surface group-hover:text-primary transition-colors">
                      {pursuit.title}
                    </h3>
                    <svg
                      className="w-4 h-4 text-on-surface-variant opacity-0 group-hover:opacity-100 transition-all transform group-hover:translate-x-1"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </div>
                  <p className="text-sm text-on-surface-variant mt-1">{pursuit.description}</p>
                </div>
              </div>
            </motion.div>
          </Link>
        ))}
      </div>
    </div>
  );
}