`src/components/CrossPromo.tsx`

51 lines
/**
 * CrossPromo — links from one surface to the other two in the pastdoor ecosystem.
 *
 * Rendered as two slim cards. Designed to feel native (editorial) rather than
 * banner-ad-y. Place at the bottom of high-intent pages: address detail,
 * post-claim success, neighborhood pages.
 *
 * Usage:
 *   const surface = await currentSurface();
 *   <CrossPromo current={surface.key} />
 */
import Link from 'next/link';
import { sisterSurfaces, type SurfaceKey } from '@/lib/site';

const ACCENT_CLASSES: Record<string, string> = {
  green: 'border-emerald-900/30 hover:border-emerald-800',
  red: 'border-red-900/30 hover:border-red-800',
  gold: 'border-amber-700/30 hover:border-amber-700',
};

export function CrossPromo({ current }: { current: SurfaceKey }) {
  const sisters = sisterSurfaces(current);
  if (sisters.length === 0) return null;

  return (
    <section className="max-w-5xl mx-auto px-6 py-10 mt-16 border-t border-ink/10">
      <p className="text-[11px] uppercase tracking-[0.18em] text-ink/40 mb-4">
        Also part of the archive
      </p>
      <div className="grid sm:grid-cols-2 gap-4">
        {sisters.map((s) => (
          <Link
            key={s.domain}
            href={`https://${s.domain}${s.primaryCta.href}`}
            className={`block border ${ACCENT_CLASSES[s.themeAccent]} bg-white/40 px-5 py-4 transition group`}
          >
            <p className="text-[10px] uppercase tracking-[0.2em] text-ink/45">{s.domain}</p>
            <h3 className="font-display text-xl text-ink tracking-[-0.005em] mt-1 group-hover:text-coral transition">
              {s.brandName}
            </h3>
            <p className="text-sm text-ink/70 mt-1">{s.tagline}</p>
            <span className="inline-block text-xs uppercase tracking-[0.15em] text-ink/55 mt-3 group-hover:text-coral transition">
              {s.primaryCta.label} →
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}