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

export function HomeCta() {
  return (
    <section className="home-cta py-10">
      <div className="home-cta-card animate-fade-in-up rounded-2xl border border-slate-200 bg-linear-to-br from-slate-50 to-emerald-50/30 p-8 text-center sm:p-10">
        <h2 className="home-cta-title mb-3 font-bold tracking-tight text-slate-900" style={{ fontSize: "var(--fluid-section-title)" }}>
          Hi There!
        </h2>
        <p className="home-cta-description mx-auto mb-6 max-w-xl text-slate-600">
          Browse articles and data models for your next project.
        </p>
        <Link
          href="/resources"
          className="home-cta-link inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 font-medium text-white outline-none transition-all duration-200 ease-out hover:bg-emerald-500 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2"
        >
          View all resources
          <ArrowRight className="size-4" aria-hidden />
        </Link>
      </div>
    </section>
  )
}