import { site } from "@/content/site";
import { Section } from "@/components/layout/Section";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export function Venue() {
  return (
    <Section id="venue" variant="muted">
      <div className="grid gap-8 lg:grid-cols-2">
        <div className="topo-on-green-bg">
          <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">The venue</p>
          <h2 className="mt-2 text-3xl font-bold text-white">{site.venue.name}</h2>
          <p className="mt-4 text-white/85">{site.venue.address}</p>
          <Button
            className="mt-6 rounded-full border-white/40 text-white hover:bg-white/10 hover:text-white"
            variant="outline"
            asChild
          >
            <Link href={site.venue.mapsUrl} target="_blank" rel="noopener noreferrer">
              Open in Google Maps
            </Link>
          </Button>
        </div>
        <Card className="overflow-hidden p-0">
          <CardHeader className="sr-only">
            <CardTitle>Map</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <iframe
              title="Venue map"
              className="h-[320px] w-full border-0"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              src={`https://www.openstreetmap.org/export/embed.html?bbox=${site.venue.lng - 0.02}%2C${site.venue.lat - 0.02}%2C${site.venue.lng + 0.02}%2C${site.venue.lat + 0.02}&layer=mapnik&marker=${site.venue.lat}%2C${site.venue.lng}`}
            />
          </CardContent>
        </Card>
      </div>
    </Section>
  );
}