import Link from "next/link"
import { FileText, Database, ArrowRight } from "lucide-react"

const features = [
  {
    title: "Articles",
    description:
      "Tutorials, guides, and insights on data engineering and software development.",
    href: "/resources/articles",
    icon: FileText,
    color: "emerald",
  },
  {
    title: "Datamodelling",
    description:
      "Structured data models and schemas from real-world projects.",
    href: "/resources/datamodelling",
    icon: Database,
    color: "fuchsia",
  },
]

export function HomeFeatures() {
  return (
    <section className="home-features py-10">
      <div className="home-features-header mb-6 text-center">
        <h2 className="home-features-title mb-3 text-3xl font-bold tracking-tight text-slate-900">
          Resources
        </h2>
        <p className="home-features-description mx-auto max-w-3xl text-slate-600" style={{ fontSize: "var(--fluid-hero-desc)" }}>
          Use one or all. Curated content for data engineers and developers.
        </p>
      </div>
      <div className="home-features-grid grid gap-8 sm:grid-cols-2">
        {features.map((feature, index) => (
          <Link
            key={feature.href}
            href={feature.href}
            className={`home-features-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 animate-fade-in-up ${index === 1 ? "animate-delay-100" : ""}`}
          >
            <div
              className={`home-features-card-icon mb-4 inline-flex rounded-lg p-3 ${
                feature.color === "emerald"
                  ? "bg-emerald-100 text-emerald-600"
                  : "bg-fuchsia-100 text-fuchsia-600"
              }`}
            >
              <feature.icon className="size-6" aria-hidden />
            </div>
            <h3 className="home-features-card-title mb-2 text-xl font-semibold text-slate-900">
              {feature.title}
            </h3>
            <p className="home-features-card-description mb-4 text-slate-600">{feature.description}</p>
            <span className="home-features-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">
              Learn more
              <ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
            </span>
          </Link>
        ))}
      </div>
    </section>
  )
}