`src/components/StreetView.tsx`

73 lines
/**
 * StreetView — companion to the live Street View hero in AddressMasthead.
 * Renders the aerial map iframe and out-links to Google Maps for both the
 * Street View time-machine and the full aerial view.
 *
 * No Google API key required — uses the no-key embed URL pattern.
 * Year-by-year captures live in <StreetViewHistory /> and need a key.
 */

type Props = {
  lat: number;
  lng: number;
  addressLabel?: string;
  height?: number;
};

export function StreetView({ lat, lng, addressLabel, height = 380 }: Props) {
  if (!Number.isFinite(lat) || !Number.isFinite(lng) || (lat === 0 && lng === 0)) return null;
  const satelliteSrc = `https://www.google.com/maps?q=${lat},${lng}&t=k&z=19&ie=UTF8&iwloc=&output=embed`;
  const openSv = `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${lat},${lng}`;
  const openSat = `https://www.google.com/maps/search/?api=1&query=${lat},${lng}`;

  return (
    <section className="my-10">
      <div className="flex items-baseline justify-between mb-4 flex-wrap gap-2">
        <h2 className="font-display text-3xl text-ink tracking-[-0.01em]">From above</h2>
        <span className="text-[10px] uppercase tracking-[0.15em] text-ink/45">
          live · google maps
        </span>
      </div>

      <div className="relative overflow-hidden border border-ink/10 bg-ink">
        <iframe
          title={`Aerial view of ${addressLabel ?? 'property'}`}
          src={satelliteSrc}
          width="100%"
          height={height}
          style={{ border: 0, display: 'block' }}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          allowFullScreen
        />
        <span className="absolute top-2 left-2 bg-ink/85 text-sand text-[10px] uppercase tracking-[0.15em] px-2 py-1">
          Aerial
        </span>
      </div>

      <div className="mt-4 flex flex-wrap items-center gap-3">
        <a
          href={openSv}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 bg-ink text-sand px-4 py-2 text-xs uppercase tracking-wider hover:bg-moss transition"
        >
          Open Street View →
        </a>
        <a
          href={openSat}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 border border-ink/30 text-ink px-4 py-2 text-xs uppercase tracking-wider hover:border-coral hover:text-coral transition"
        >
          Open aerial map →
        </a>
        <p className="text-[11px] text-ink/55 leading-relaxed max-w-md">
          Inside Street View, click the <strong>clock icon</strong> (top-left) to scrub the
          property&rsquo;s historical captures — typically back to 2007.
        </p>
      </div>
    </section>
  );
}