import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import Image from "next/image";
import { exhibitCopy } from "@/content/exhibit";
import { Section } from "@/components/layout/Section";
import { BoothPackages } from "@/components/exhibit/BoothPackages";
import { ExhibitorBoothForm } from "@/components/exhibit/ExhibitorBoothForm";
import { Faq } from "@/components/home/Faq";

export const metadata: Metadata = createPageMetadata(pageSeo.exhibit);

const benefits = [
  "Connect with 500+ investors, startups, and professionals",
  "Showcase and advertise your products in the exhibitor hall",
  "Meet emerging talent in agriculture, health, and education",
  "Brand visibility across summit programming and materials",
];

export default function ExhibitPage() {
  return (
    <>
      <Section className="pt-24">
        <div className="grid gap-10 lg:grid-cols-2">
          <div>
            <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
              {exhibitCopy.eyebrow}
            </p>
            <h1 className="mt-3 text-4xl font-bold">{exhibitCopy.headline}</h1>
            <p className="mt-4 text-muted-foreground leading-relaxed">{exhibitCopy.subheadline}</p>
            <ul className="mt-6 space-y-3">
              {benefits.map((b) => (
                <li key={b} className="flex gap-2 text-sm">
                  <span className="text-[#ffb300]">→</span>
                  {b}
                </li>
              ))}
            </ul>
          </div>
          <div className="relative aspect-video overflow-hidden rounded-2xl">
            <Image
              src="/branding/booth-mockup.png"
              alt="Exhibition booth"
              fill
              className="object-cover"
            />
          </div>
        </div>
      </Section>

      <Section variant="muted">
        <h2 className="text-2xl font-bold">Booth packages</h2>
        <p className="mt-2 max-w-2xl text-muted-foreground">
          Choose a footprint that fits how you want to present your brand and products. Final
          placement and pricing are confirmed by our exhibitions team.
        </p>
        <div className="mt-10">
          <BoothPackages />
        </div>
      </Section>

      <Section id="reserve-booth">
        <div className="mx-auto max-w-3xl">
          <h2 className="text-2xl font-bold">Acquire your booth</h2>
          <p className="mt-2 text-muted-foreground">
            Complete the form below with details about your company, the products you want to
            advertise, and your booth requirements. We will follow up with availability and next
            steps.
          </p>
          <div className="mt-8">
            <ExhibitorBoothForm />
          </div>
        </div>
      </Section>

      <Faq />
    </>
  );
}