`src/components/StarsCtaRow.tsx`

102 lines
/**
 * StarsCtaRow — homepage CTA strip that surfaces the four address-adjacent
 * destinations launched 2026-04-30:
 *   - /stars         — Map of historical celebrity residences
 *   - /restaurants   — Where they ate (sourced sightings)
 *   - /stars/walk    — Hollywood Walk of Fame
 *   - /stars/nearby  — Mobile GPS "stars near me"
 *
 * Per-surface labels and accent colors per SurfaceKey:
 *   flagship  → "Open archive" voice, #1f4d40 accent (moss)
 *   claim     → "Filmed here" voice,  #c9292e accent (red)
 *   community → "From the block" voice, #7a6a3f accent (gold)
 */
import Link from 'next/link';
import type { SurfaceKey } from '@/lib/site';

type Card = {
  kicker: string;
  title: string;
  blurb: string;
  href: string;
};

const CARDS: Record<SurfaceKey, Card[]> = {
  flagship: [
    { kicker: 'Map of the stars',  title: 'Where they really lived',  blurb: 'Historical residences, sourced and dated', href: '/stars' },
    { kicker: 'Where they ate',    title: 'Celebrity restaurants',    blurb: 'Musso & Frank to The Ivy — sightings sourced', href: '/restaurants' },
    { kicker: 'Walk of Fame',      title: 'Every star’s address', blurb: 'Hollywood Blvd, Vine St — pin by pin',     href: '/stars/walk' },
    { kicker: 'Mobile · GPS',      title: 'Stars near me',            blurb: 'Walking-distance lookup from your phone',  href: '/stars/nearby' },
  ],
  claim: [
    { kicker: 'Filmed here',       title: 'Map of the stars',         blurb: 'Was a name you know once at this address?', href: '/stars' },
    { kicker: 'Where they ate',    title: 'Celebrity restaurants',    blurb: 'Sourced patron lists, by neighborhood',     href: '/restaurants' },
    { kicker: 'Walk of Fame',      title: 'Hollywood, mapped',        blurb: 'Every honoree, every sidewalk star',        href: '/stars/walk' },
    { kicker: 'On the move',       title: 'Stars near me',            blurb: 'Pull up the closest star from your phone',  href: '/stars/nearby' },
  ],
  community: [
    { kicker: 'From the block',    title: 'Map of the stars',         blurb: 'The famous neighbors, then',                href: '/stars' },
    { kicker: 'Where the block ate', title: 'Celebrity restaurants',  blurb: 'The rooms our neighbors went to',           href: '/restaurants' },
    { kicker: 'Pages of fame',     title: 'Walk of Fame',             blurb: 'Hollywood Blvd, the long version',          href: '/stars/walk' },
    { kicker: 'On a walk',         title: 'Stars near me',            blurb: 'What’s star-shaped within a block',    href: '/stars/nearby' },
  ],
};

const ACCENT: Record<SurfaceKey, string> = {
  flagship:  '#1f4d40',
  claim:     '#c9292e',
  community: '#7a6a3f',
};

const SECTION_KICKER: Record<SurfaceKey, string> = {
  flagship:  'Around the archive',
  claim:     'Beyond your address',
  community: 'Off the block',
};

export function StarsCtaRow({ surface }: { surface: SurfaceKey }) {
  const cards = CARDS[surface];
  const accent = ACCENT[surface];
  const kicker = SECTION_KICKER[surface];

  return (
    <section className="border-b border-ink/10 bg-[#fbf6e8]">
      <div className="max-w-6xl mx-auto px-6 py-10 md:py-14">
        <p
          className="font-mono text-[10px] uppercase tracking-[0.22em] mb-6"
          style={{ color: accent }}
        >
          {kicker}
        </p>
        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {cards.map(c => (
            <li key={c.href}>
              <Link
                href={c.href}
                className="group block bg-white border border-ink/15 hover:border-ink/40 transition px-5 py-5 h-full"
              >
                <p
                  className="font-mono text-[9px] uppercase tracking-[0.18em] mb-2"
                  style={{ color: accent }}
                >
                  {c.kicker}
                </p>
                <h3 className="font-display text-2xl text-ink leading-[1.05] tracking-[-0.01em] group-hover:text-coral transition">
                  {c.title}
                </h3>
                <p className="mt-2 text-sm text-ink/65 leading-snug">{c.blurb}</p>
                <p
                  className="mt-3 font-mono text-[10px] uppercase tracking-[0.18em] inline-flex items-center gap-1"
                  style={{ color: accent }}
                >
                  Open <span aria-hidden>&rarr;</span>
                </p>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}