import Link from "next/link";
import NavAuth, { LandingAuth } from "@/components/NavAuth";

export default async function HomePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="border-b border-stone-200 bg-white">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
          <Link href="/" className="text-xl font-bold text-primary">
            СпоменQR
          </Link>
          <NavAuth />
        </div>
      </header>

      <main className="flex flex-1 items-center justify-center px-6">
        <div className="mx-auto max-w-3xl text-center">
          <div className="mb-6 text-5xl">&#128142;</div>
          <h2 className="text-4xl font-bold tracking-tight text-stone-900 sm:text-5xl">
            Во спомен на
          </h2>
          <p className="mt-4 text-lg text-stone-600">
            Креирајте убави спомен страници со QR кодови. Оддадете почит и зачувајте ги спомените на најблиските.
          </p>
          <div className="mt-8">
            <LandingAuth />
          </div>

          <div className="mt-16 grid grid-cols-1 gap-8 text-left sm:grid-cols-3">
            <div className="rounded-lg border border-stone-200 bg-white p-6">
              <div className="mb-3 text-2xl">&#9997;</div>
              <h3 className="font-semibold text-stone-900">Раскажете нивната приказна</h3>
              <p className="mt-1 text-sm text-stone-500">Напишете епитафија, биографија или песма во нивна чест.</p>
            </div>
            <div className="rounded-lg border border-stone-200 bg-white p-6">
              <div className="mb-3 text-2xl">&#128247;</div>
              <h3 className="font-semibold text-stone-900">Споделете фотографии</h3>
              <p className="mt-1 text-sm text-stone-500">Додадете до 3 фотографии што го прикажуваат нивниот дух и наслед.</p>
            </div>
            <div className="rounded-lg border border-stone-200 bg-white p-6">
              <div className="mb-3 text-2xl">&#128241;</div>
              <h3 className="font-semibold text-stone-900">QR код на споменикот</h3>
              <p className="mt-1 text-sm text-stone-500">Посетителите скенираат QR код за да ја прочитаат нивната приказна, директно на споменикот.</p>
            </div>
          </div>
        </div>
      </main>

      <footer className="border-t border-stone-200 py-6 text-center text-sm text-stone-400">
        СпоменQR — Во спомен на
      </footer>
    </div>
  );
}