import Link from "next/link";

/** The site's primary call to action: send the visitor to the search page. */
export function CtaBanner() {
  return (
    <section className="rounded-3xl border border-indigo-100 bg-gradient-to-br from-indigo-50 via-white to-sky-50 px-6 py-12 text-center sm:px-12">
      <h2 className="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
        Stop guessing what things are called
      </h2>
      <p className="mx-auto mt-3 max-w-xl text-sm text-slate-600 sm:text-base">
        Describe the outcome you want and let the vector index do the matching. No exact keywords,
        no filters to memorise, no database behind the scenes.
      </p>

      <div className="mt-7 flex flex-wrap items-center justify-center gap-3">
        <Link
          href="/products"
          className="rounded-xl bg-indigo-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:outline-none"
        >
          Start searching
        </Link>
        <Link
          href="/products?q=comfortable+shoes+for+running"
          className="rounded-xl border border-slate-300 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition-colors hover:border-slate-400 focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:outline-none"
        >
          See it in action
        </Link>
      </div>
    </section>
  );
}