`src/app/claim/[slug]/page.tsx`

77 lines
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { getListingBySlug } from '@/lib/db';
import { BreadcrumbArchive } from '@/components/BreadcrumbArchive';

export const metadata: Metadata = {
  robots: { index: false, follow: false },
};

const SLUG_RE = /^[a-z0-9-]{1,128}$/;

export default async function ClaimPage({ params }: { params: { slug: string } }) {
  if (!SLUG_RE.test(params.slug)) notFound();
  const listing = await getListingBySlug(params.slug);
  if (!listing) notFound();

  return (
    <>
      <div className="max-w-2xl mx-auto px-6 pt-6">
        <BreadcrumbArchive
          items={[
            { label: 'Archive', href: '/browse' },
            { label: listing.title, href: `/address/${listing.slug}` },
            { label: 'Claim' },
          ]}
        />
      </div>

      <section className="max-w-2xl mx-auto px-6 py-10">
        <h1 className="font-display text-5xl text-ink tracking-[-0.02em] leading-[1.02]">
          Claim {listing.title}
        </h1>
        <p className="mt-4 font-display italic text-xl text-ink/70">
          Confirm ownership to add photos, contact info, and a booking link.
        </p>

        <form className="mt-8 grid gap-4">
          <label className="flex flex-col gap-1 text-xs uppercase tracking-wider text-ink/60">
            Your email
            <input
              type="email"
              required
              name="email"
              maxLength={254}
              className="border border-ink/20 px-3 py-2 text-sm font-sans focus:outline-none focus:border-moss"
              placeholder="you@example.com"
            />
          </label>
          <label className="flex flex-col gap-1 text-xs uppercase tracking-wider text-ink/60">
            Proof of ownership
            <textarea
              name="proof"
              rows={4}
              maxLength={4000}
              className="border border-ink/20 px-3 py-2 text-sm font-sans focus:outline-none focus:border-moss"
              placeholder="Recent utility bill, deed snippet, or grant book/page reference. Notarized upload also accepted."
            />
          </label>
          <button
            type="submit"
            className="bg-moss text-sand px-5 py-3 text-xs uppercase tracking-wider hover:bg-ink transition"
          >
            Submit claim for review
          </button>
        </form>

        <p className="mt-10 text-xs text-ink/40 leading-relaxed">
          Free forever — no subscription, no upgrade tier. We&rsquo;ll email you to confirm the address
          matches on public record. Claims that affect historical associations require additional
          editorial review — you can edit your address copy and photos freely; the historical ledger
          stays independent.
        </p>
      </section>
    </>
  );
}