import { BadgeCheck, MapPin, ShieldCheck, Users } from "lucide-react";
import Link from "next/link";

import { Button } from "@/components/ui/button";

const features = [
  {
    icon: Users,
    title: "Family and land, together",
    body: "People, relationships, and life events alongside property and chain-of-title — one documented story of where you come from.",
  },
  {
    icon: BadgeCheck,
    title: "Sourced or it didn't happen",
    body: "Every fact can carry a citation back to the record it came from. Sources are first-class, reusable, and visible.",
  },
  {
    icon: ShieldCheck,
    title: "Yours to keep",
    body: "Self-hosted and source-available. Living people protected by default. Open formats — export anytime, run it anywhere.",
  },
];

export default function Home() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="border-b border-[var(--border)]">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
          <Link href="/" aria-label="Provenance — home">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/provenance-logo-plain.svg" alt="Provenance" className="h-7 w-auto" />
          </Link>
          <nav className="flex items-center gap-5 text-sm">
            <Link href="/explore" className="text-[var(--muted)] hover:text-[var(--foreground)]">
              Explore
            </Link>
            <Link href="/trees" className="text-[var(--muted)] hover:text-[var(--foreground)]">
              Trees
            </Link>
            <Link
              href="/login"
              className="rounded-full border border-[var(--border)] px-4 py-1.5 font-medium hover:border-bronze hover:text-bronze"
            >
              Sign in
            </Link>
          </nav>
        </div>
      </header>

      <main className="mx-auto w-full max-w-5xl flex-1 px-6">
        <section className="grid items-center gap-10 py-16 sm:grid-cols-[1.3fr_1fr] sm:py-24">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-bronze">
              Family · Land · Provenance
            </p>
            <h1 className="mt-4 text-5xl font-semibold leading-[1.04] tracking-tight sm:text-6xl">
              Where it came from <span className="italic text-bronze">matters</span>.
            </h1>
            <p className="mt-6 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
              Trace your family and your land in one place — every name, every parcel, every claim
              linked to the record it came from. Self-hosted, sourced, and yours to keep.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link href="/register">
                <Button size="lg">Create your account</Button>
              </Link>
              <Link href="/login">
                <Button size="lg" variant="outline">
                  Sign in
                </Button>
              </Link>
              <Link href="/explore">
                <Button size="lg" variant="ghost">
                  Explore public trees
                </Button>
              </Link>
            </div>
          </div>

          <div className="hidden justify-self-end sm:block">
            <div className="relative grid h-64 w-64 place-items-center rounded-full border border-[var(--border)] bg-[var(--surface)] shadow-[0_24px_60px_-24px_rgba(160,106,66,0.35)]">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src="/provenance-mark.svg" alt="" className="h-36 w-36" />
              <MapPin className="absolute -right-2 top-10 h-7 w-7 text-bronze" />
            </div>
          </div>
        </section>

        <section className="grid gap-5 pb-20 sm:grid-cols-3">
          {features.map((f) => (
            <div
              key={f.title}
              className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[0_1px_2px_rgba(26,26,23,0.04)]"
            >
              <div className="grid h-10 w-10 place-items-center rounded-lg bg-bronze/12 text-bronze">
                <f.icon className="h-5 w-5" />
              </div>
              <h2 className="mt-4 text-lg font-semibold">{f.title}</h2>
              <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">{f.body}</p>
            </div>
          ))}
        </section>
      </main>

      <footer className="border-t border-[var(--border)]">
        <div className="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-2 px-6 py-6 text-sm text-[var(--muted)]">
          <span className="font-serif text-base italic">where it came from matters</span>
          <span>Self-hosted · source-available · your data, your infrastructure</span>
        </div>
      </footer>
    </div>
  );
}