GRV-Summit-Site/app/sponsor/page.tsx

import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { PageRiftHeader } from "@/components/layout/PageRiftHeader";
import { Section } from "@/components/layout/Section";
import { InquiryForm } from "@/components/forms/InquiryForm";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

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

const tiers = [
  {
    name: "Lead Sponsor",
    description: "Premier visibility across all summit touchpoints and keynote branding.",
    perks: ["Logo on all materials", "Keynote introduction", "VIP hospitality", "Speaking slot"],
  },
  {
    name: "Gold Sponsor",
    description: "High-impact brand presence in exhibition and programming.",
    perks: ["Exhibition branding", "Panel sponsorship", "Digital promotion", "4 VIP passes"],
  },
  {
    name: "Supporting Sponsor",
    description: "Align your brand with Ethiopia's innovation mission.",
    perks: ["Website listing", "Program mention", "2 passes", "Newsletter feature"],
  },
];

export default function SponsorPage() {
  return (
    <>
      <PageRiftHeader
        variant="sponsor"
        eyebrow="Sponsor"
        title={
          <h1 className="max-w-3xl text-4xl font-bold">
            Partner with Ethiopia&apos;s flagship innovation summit
          </h1>
        }
        description={
          <p>
            Support the Ethiopian Diaspora Trust Fund&apos;s mission to foster tech-enabled
            innovation. Sponsorship connects your organization with investors, founders, and leaders
            across agriculture, healthcare, and education.
          </p>
        }
      />

      <Section>
        <div className="grid gap-6 md:grid-cols-3">
          {tiers.map((tier) => (
            <Card key={tier.name}>
              <CardHeader>
                <CardTitle>{tier.name}</CardTitle>
                <CardDescription>{tier.description}</CardDescription>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  {tier.perks.map((p) => (
                    <li key={p}>· {p}</li>
                  ))}
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>

      <Section variant="muted">
        <h2 className="text-2xl font-bold">Sponsorship inquiry</h2>
        <p className="mt-2 text-muted-foreground">
          Share your goals and we&apos;ll tailor a partnership package for your organization.
        </p>
        <div className="mt-8 max-w-lg">
          <InquiryForm intent="sponsor" submitLabel="Submit sponsorship inquiry" />
        </div>
      </Section>
    </>
  );
}