import Link from "next/link";
import Image from "next/image";
import { exhibitCopy } from "@/content/exhibit";
import { Section } from "@/components/layout/Section";
import { Button } from "@/components/ui/button";

export function BoothAcquisitionBand() {
  return (
    <Section id="booth" riftPattern="arc-bottom">
      <div className="grid items-center gap-10 lg:grid-cols-2">
        <div className="relative aspect-[4/3] overflow-hidden rounded-2xl order-2 lg:order-1">
          <Image
            src="/branding/booth-mockup.png"
            alt="Exhibition booth at GRV Summit"
            fill
            className="object-cover"
          />
        </div>
        <div className="order-1 lg:order-2">
          <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
            {exhibitCopy.eyebrow}
          </p>
          <h2 className="mt-3 text-3xl font-bold md:text-4xl">{exhibitCopy.headline}</h2>
          <p className="mt-4 text-muted-foreground leading-relaxed">{exhibitCopy.subheadline}</p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Button className="rounded-full bg-[#ffb300] text-[#0f0404] hover:bg-[#ffb300]/90" asChild>
              <Link href="/exhibit#reserve-booth">Reserve a booth</Link>
            </Button>
            <Button variant="outline" className="rounded-full" asChild>
              <Link href="/exhibit">View booth packages</Link>
            </Button>
          </div>
        </div>
      </div>
    </Section>
  );
}