`src/app/submit/page.tsx`

91 lines
import type { Metadata } from 'next';
import { BreadcrumbArchive } from '@/components/BreadcrumbArchive';
import { SubmitFormClient } from './SubmitFormClient';
import { FilmsGridServer } from '@/components/FilmsGridServer';
import { HeroCollage } from '@/components/HeroCollage';
import { ClaimExamples } from '@/components/ClaimExamples';
import { StarsCtaRow } from '@/components/StarsCtaRow';
import { currentSurface } from '@/lib/site';

export const runtime = 'nodejs';
export const dynamic = 'force-dynamic';

// Metadata varies by host: on claimmyaddress.com middleware rewrites `/`
// to /submit, so this page IS that domain's homepage and must be indexable.
// On wholivedthere/bubbesblock it's a private form — keep noindexed.
export async function generateMetadata(): Promise<Metadata> {
  const surface = await currentSurface();
  const isClaimRoot = surface.key === 'claim';
  return isClaimRoot
    ? {
        title: surface.ogTitle,
        description: surface.description,
        alternates: { canonical: '/' },
      }
    : { robots: { index: false, follow: false } };
}

export default async function SubmitPage() {
  const surface = await currentSurface();
  return (
    <>
      <HeroCollage />
      <StarsCtaRow surface={surface.key} />
      <ClaimExamples />
      <div className="max-w-2xl mx-auto px-6 pt-6">
        <BreadcrumbArchive items={[{ label: 'Archive', href: '/' }, { label: 'Submit an address' }]} />
      </div>

      <header className="max-w-2xl mx-auto px-6 py-12 border-b border-ink/10">
        <div className="flex items-center gap-3 mb-3 flex-wrap">
          <span className="text-xs uppercase tracking-[0.15em] text-ink/50">Submit</span>
          {/* R6 fix: surface the pricing answer up-front. Steve's PLAN.md decision
              #2 was Free Forever — make that visible before the form. */}
          <span className="inline-block bg-[#c9292e] text-white px-2 py-0.5 text-[10px] font-mono tracking-[0.2em] uppercase font-bold">
            Free forever
          </span>
        </div>
        <h1 className="font-display text-5xl md:text-6xl text-ink tracking-[-0.02em] leading-[1.02]">
          Add an address to the archive.
        </h1>
        <p className="mt-4 font-display italic text-xl text-ink/70">
          We&rsquo;ll verify and ingest. Submissions are queued, not auto-published.
        </p>
        <p className="mt-3 font-mono text-[11px] uppercase tracking-[0.15em] text-ink/45">
          No card · no signup · no fee. Public-record by design.
        </p>
      </header>

      <section className="max-w-2xl mx-auto px-6 py-10">
        <SubmitFormClient />
      </section>

      {/* R7 fix: connect the films grid to the form so it reads as proof,
          not decoration. Without this header the grid looked like a stock
          photo strip below an unrelated form. */}
      <section className="bg-[#fdf9ee] border-t-2 border-[#c9292e] pt-12 pb-2">
        <div className="max-w-2xl mx-auto px-6">
          <p className="text-[10px] font-mono uppercase tracking-[0.2em] text-[#c9292e] mb-3">
            Sample of the archive
          </p>
          <h2 className="font-mono uppercase text-xl md:text-2xl tracking-tight text-[#1a1a1a] font-bold leading-snug">
            This is the kind of record we&apos;ll build for your address.
          </h2>
          <p className="mt-3 font-sans text-sm text-[#1a1a1a]/70">
            Below is a live sample of films and television catalogued in the public-domain
            image archive — pulled from Library of Congress, Internet Archive, Wikimedia,
            the Met, and the Media History Digital Library. Every address you submit gets
            cross-referenced against the same sources.
          </p>
        </div>
      </section>

      <FilmsGridServer
        heading="What's been filmed near here"
        kicker="Filmed here"
        limit={48}
      />
    </>
  );
}