"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import Image from "next/image";
import { Badge } from "@/components/badge";

const projects = [
  {
    title: "L'Encyclopédie des Savoirs",
    description: "Une archive numérique interactive regroupant les découvertes majeures du XIXe siècle.",
    image: "https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?q=80&w=800&auto=format&fit=crop",
    tags: ["Histoire", "Archive", "Web Design"],
  },
  {
    title: "Mnémosyne Engine",
    description: "Algorithme de classification sémantique inspiré des méthodes de mémorisation antiques.",
    image: "https://images.unsplash.com/photo-1507413245164-6160d8298b31?q=80&w=800&auto=format&fit=crop",
    tags: ["IA", "Algorithme", "Recherche"],
  },
  {
    title: "Le Cercle des Érudits",
    description: "Plateforme de collaboration pour chercheurs et historiens du monde entier.",
    image: "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?q=80&w=800&auto=format&fit=crop",
    tags: ["Communauté", "SaaS", "Éducation"],
  },
];

export function Projects() {
  return (
    <section id="projects" className="py-20 bg-[#f4f1ea]">
      <Container>
        <div className="text-center mb-16">
          <Badge className="mb-4 bg-[#8b7355] text-white border-none">Portfolio</Badge>
          <Heading className="font-playfair text-[#3d301c] italic">Travaux & Recherches</Heading>
          <Subheading className="text-[#5d4d37] max-w-2xl mx-auto mt-4">
            Une sélection de projets alliant rigueur académique et innovation technologique.
          </Subheading>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <Card key={index} className="bg-white border-[#dcd7cc] overflow-hidden hover:shadow-xl transition-shadow duration-300">
              <div className="aspect-video relative overflow-hidden border-b border-[#dcd7cc]">
                <Image
                  src={project.image}
                  alt={project.title}
                  width={800}
                  height={450}
                  className="object-cover hover:scale-105 transition-transform duration-500"
                />
              </div>
              <CardHeader className="p-6">
                <div className="flex gap-2 mb-3">
                  {project.tags.map((tag) => (
                    <span key={tag} className="text-[10px] uppercase tracking-widest text-[#8b7355] font-bold">
                      {tag}
                    </span>
                  ))}
                </div>
                <CardTitle className="font-playfair text-[#3d301c] text-xl mb-2">{project.title}</CardTitle>
                <CardDescription className="text-[#5d4d37] leading-relaxed">
                  {project.description}
                </CardDescription>
              </CardHeader>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}