import Link from "next/link";

import { SearchIcon } from "@/components/ui";

const EXAMPLE_QUERIES = [
  "headphones for travelling",
  "something for working out",
  "comfortable shoes for running",
  "gift for someone who loves music",
  "cheap wireless headphones",
];

/**
 * Hero. The search field submits to `/products`, which is the main CTA of the
 * site and the entry point to the semantic search experience.
 */
export function Hero({ productCount }: { productCount: number }) {
  return (
    <section className="relative overflow-hidden bg-slate-900">
      <div
        className="absolute inset-0 bg-[radial-gradient(65%_60%_at_50%_0%,var(--color-indigo-500),transparent)] opacity-40"
        aria-hidden="true"
      />

      <div className="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 sm:py-28 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-3 py-1 text-xs font-medium text-indigo-100">
            <span className="size-1.5 rounded-full bg-emerald-400" aria-hidden="true" />
            Vector search, no database
          </span>

          <h1 className="mt-5 text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
            Search the way you{" "}
            <span className="bg-gradient-to-r from-indigo-300 to-sky-300 bg-clip-text text-transparent">
              actually think
            </span>
          </h1>

          <p className="mx-auto mt-5 max-w-xl text-base text-slate-300 sm:text-lg">
            {productCount} products, every one of them embedded into a vector. Describe what you
            need in plain language and the catalogue will understand it.
          </p>

          <form
            role="search"
            action="/products"
            className="mx-auto mt-8 flex max-w-xl flex-col gap-2.5 sm:flex-row"
          >
            <div className="relative flex-1">
              <label htmlFor="hero-search" className="sr-only">
                Search products
              </label>
              <SearchIcon className="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-slate-400" />
              <input
                id="hero-search"
                name="q"
                type="search"
                placeholder="Try “something for working out”"
                className="w-full rounded-xl border border-white/10 bg-white/10 py-3.5 pr-4 pl-12 text-base text-white placeholder:text-slate-400 focus:border-white/30 focus:ring-4 focus:ring-indigo-500/30 focus:outline-none"
              />
            </div>
            <button
              type="submit"
              className="rounded-xl bg-indigo-500 px-6 py-3.5 text-base font-semibold text-white transition-colors hover:bg-indigo-400 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 focus-visible:outline-none"
            >
              Search
            </button>
          </form>

          <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
            <span className="text-xs text-slate-400">Popular:</span>
            {EXAMPLE_QUERIES.slice(0, 3).map((query) => (
              <Link
                key={query}
                href={`/products?q=${encodeURIComponent(query)}`}
                className="rounded-full border border-white/15 px-3 py-1 text-xs text-slate-200 transition-colors hover:border-white/40 hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-none"
              >
                {query}
              </Link>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}