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

80 lines
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
import { getListingBySlug } from '@/lib/db';
import { BreadcrumbArchive } from '@/components/BreadcrumbArchive';
import { SponsoredCard } from '@/components/sponsored/SponsoredCard';
import { PromoteFormClient } from './PromoteFormClient';
import { FREE_FOREVER } from '@/lib/flags';
import { RetiredFeatureNotice } from '@/components/RetiredFeatureNotice';

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

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

const SLUG_RE = /^[a-z0-9-]+$/i;
const isHttpUrl = (u: unknown): u is string =>
  typeof u === 'string' && /^https?:\/\//i.test(u.trim());

export default async function PromoteForm({ params }: { params: { slug: string } }) {
  if (FREE_FOREVER) {
    return (
      <RetiredFeatureNotice
        title="Promotion has been retired"
      />
    );
  }
  if (!params?.slug || !SLUG_RE.test(params.slug)) notFound();
  let listing: Awaited<ReturnType<typeof getListingBySlug>> | null = null;
  try {
    listing = await getListingBySlug(params.slug);
  } catch {
    listing = null;
  }
  if (!listing) notFound();

  return (
    <>
      <div className="max-w-3xl mx-auto px-6 pt-6">
        <BreadcrumbArchive
          items={[
            { label: 'Archive', href: '/' },
            { label: 'Promote', href: '/promote' },
            { label: listing.title },
          ]}
        />
      </div>

      <section className="max-w-3xl mx-auto px-6 py-10">
        <p className="text-xs uppercase tracking-[0.15em] text-ink/50 mb-2">Sponsored placement</p>
        <h1 className="font-display text-5xl text-ink tracking-[-0.02em] leading-[1.02]">
          Promote {listing.title}
        </h1>
        <p className="mt-4 font-display italic text-xl text-ink/70 max-w-prose">
          $29/mo flat. Renders on the address page above the timeline. Editorial-firewalled by design.
        </p>

        <PromoteFormClient
          listingId={listing.id}
          defaultHeadline={`${listing.title} — for sale`}
        />

        <div className="mt-14">
          <p className="text-xs uppercase tracking-[0.15em] text-ink/50 mb-3">
            Example layout — your own copy goes here
          </p>
          <SponsoredCard
            source="zillow"
            title={`${listing.title} — for sale`}
            priceLabel="Your price & open-house line will appear here"
            url="#"
            imageUrl={isHttpUrl(listing.hero_image) ? listing.hero_image : undefined}
          />
        </div>
      </section>
    </>
  );
}