import Link from "next/link"
import Image from "next/image"
import { ArrowUpRight } from "lucide-react"
import { ScrollRevealCard } from "@/components/scroll-reveal-card"

const projects = [
  {
    title: "Böhler re:search",
    description:
      "Digital edition of the Munich art dealer Julius Böhler's object card system, photo folders and customer index (1903–1948). Research data on traded artworks, transactions and actors.",
    href: "https://boehler.zikg.eu/",
    icon: "/assets/icons/boehler-research.png",
  },
  {
    title: "Objektsprache und Ästhetik",
    description:
      "Shell collections at Leopoldina, Goldfuß-Museum Bonn, and Central Institute for Natural Collections MLU. Historical object references and synonym networks for conchylia.",
    href: "https://konchylien.leopoldina.org/sammlungen",
    icon: "/assets/logos/lzfw_logo.png",
  },
  {
    title: "SCS Manager",
    description:
      "Semantic Co-Working Space for academic university collections. Model, transform, analyse and publish data with JupyterLab, OpenRefine, WissKI and more.",
    href: "https://manager.scs.sammlungen.io/",
    icon: "/assets/icons/scs-manager.png",
  },
  {
    title: "WissKI",
    description:
      "Semantic data management system for GLAM institutions. Virtual research environment extending Drupal with CIDOC CRM, Pathbuilder and linked open data.",
    href: "https://wiss-ki.eu/",
    icon: "/assets/icons/wisski.svg",
  },
]

export function HomeProjects() {
  return (
    <section className="home-projects py-10" aria-labelledby="projects-heading">
      <div className="home-projects-header mb-6 text-center">
        <h2
          id="projects-heading"
          className="home-projects-title mb-3 font-bold tracking-tight text-slate-900"
          style={{ fontSize: "var(--fluid-section-title)" }}
        >
          Projects
        </h2>
        <p
          className="home-projects-description mx-auto max-w-3xl text-slate-600"
          style={{ fontSize: "var(--fluid-hero-desc)" }}
        >
          Data- and information-focused websites and applications.
        </p>
      </div>
      <div className="home-projects-grid grid gap-8 sm:grid-cols-2">
        {projects.map((project) => (
          <ScrollRevealCard key={project.href}>
            <Link
              href={project.href}
              target="_blank"
              rel="noopener noreferrer"
              className="home-projects-card group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-emerald-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
            >
            <h3 className="home-projects-card-title mb-2 flex items-center gap-3 text-xl font-semibold text-slate-900">
              <Image
                src={project.icon}
                alt=""
                width={24}
                height={24}
                className="size-6 shrink-0 object-contain"
                unoptimized
              />
              {project.title}
            </h3>
            <p className="home-projects-card-description mb-4 text-slate-600">
              {project.description}
            </p>
            <span className="home-projects-card-link inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
              Visit project
              <ArrowUpRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-0.5 group-hover:-translate-y-0.5" aria-hidden />
            </span>
          </Link>
          </ScrollRevealCard>
        ))}
      </div>
    </section>
  )
}