`src/components/MapHero.tsx`

42 lines
import { InteractiveMapMount, type MapPin } from './InteractiveMapMount';

/**
 * MapHero — homepage hero with a real Leaflet map of the archive.
 * Editorial overlay (title, search) sits on top of the map.
 */
export function MapHero({ pins }: { pins: MapPin[] }) {
  return (
    <section className="relative bg-ink text-sand" aria-label="Archive map">
      <div className="relative h-[64vh] min-h-[480px] overflow-hidden">
        <div className="absolute inset-0">
          <InteractiveMapMount pins={pins} variant="dark" height={9999} />
        </div>
        {/* Editorial overlay — readable scrim */}
        <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-ink/90 via-ink/60 to-transparent" />
        <div className="relative z-10 max-w-6xl mx-auto px-6 py-14 h-full flex flex-col justify-end">
          <p className="text-[10px] uppercase tracking-[0.2em] text-sand/65 mb-2">
            Beverly Hills · pilot geography
          </p>
          <h1 className="font-display text-5xl md:text-7xl leading-[0.95] tracking-[-0.02em]">
            Nextdoor,<br />but for then.
          </h1>
          <p className="mt-4 text-base md:text-lg text-sand/75 max-w-xl">
            Every address has a story. Look up the history of a house — who lived there, what was built and when, what the archival maps show. Every fact is tiered by source.
          </p>
          <form action="/browse" className="mt-6 flex items-center gap-2 max-w-md pointer-events-auto">
            <input
              type="search"
              name="q"
              placeholder="Type a Beverly Hills address…"
              className="flex-1 bg-sand/15 border border-sand/25 text-sand placeholder:text-sand/45 px-4 py-3 font-sans text-sm focus:outline-none focus:border-coral backdrop-blur"
            />
            <button type="submit" className="bg-coral text-ink px-5 py-3 text-xs uppercase tracking-wider hover:bg-sand transition">
              Search
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}