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

export const metadata: Metadata = {
  title: "Resources",
  description: "Browse articles and models on nasarek.dev",
}

export default function ResourcesPage() {
  return (
    <article className="mx-auto flex min-h-full flex-1 flex-col max-w-7xl">
      <header className="mb-12">
        <h1 className="mb-4 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl">
          Resources
        </h1>
        <p className="max-w-2xl text-lg text-slate-600">
          Explore my curated collection of articles and models.
        </p>
      </header>

      <section className="grid gap-8 sm:grid-cols-2">
        <Link
          href="/resources/articles"
          className="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"
        >
          <div className="mb-4 inline-flex rounded-lg bg-emerald-100 p-3 text-emerald-600">
            <FileText className="size-6" aria-hidden />
          </div>
          <h2 className="mb-3 text-xl font-semibold text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
            Articles
          </h2>
          <p className="mb-4 text-slate-600">
            Written content covering tutorials, guides, and insights. Articles
            are published pieces with full text, images, and structured
            formatting.
          </p>
          <span className="inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
            Browse articles
            <ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
          </span>
        </Link>

        <Link
          href="/resources/datamodelling"
          className="group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-fuchsia-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2"
        >
          <div className="mb-4 inline-flex rounded-lg bg-fuchsia-100 p-3 text-fuchsia-600">
            <Database className="size-6" aria-hidden />
          </div>
          <h2 className="mb-3 text-xl font-semibold text-fuchsia-600 transition-colors duration-200 ease-out group-hover:text-fuchsia-500">
            Datamodelling
          </h2>
          <p className="mb-4 text-slate-600">
            Structured data models and schemas from my projects.
          </p>
          <span className="inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
            Browse models
            <ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
          </span>
        </Link>
      </section>
    </article>
  )
}