import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { exhibitCopy } from "@/content/exhibit";
import { PageRiftHeader } from "@/components/layout/PageRiftHeader";
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 (
    <>
      <PageRiftHeader
        variant="exhibit"
        eyebrow={exhibitCopy.eyebrow}
        title={<h1 className="text-4xl font-bold">{exhibitCopy.headline}</h1>}
        description={<p className="leading-relaxed">{exhibitCopy.subheadline}</p>}
      >
        <ul className="space-y-3 text-left">
          {benefits.map((b) => (
            <li key={b} className="flex gap-2 text-sm">
              <span className="text-[#37a47a]">→</span>
              {b}
            </li>
          ))}
        </ul>
      </PageRiftHeader>

      <Section variant="muted">
        <div className="topo-on-green-bg max-w-2xl">
          <h2 className="text-2xl font-bold">Booth packages</h2>
          <p className="mt-2 text-white/85">
            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>
        <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 />
    </>
  );
}