import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
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 (
    <>
      <Section className="pt-24">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">Sponsor</p>
        <h1 className="mt-3 max-w-3xl text-4xl font-bold">
          Partner with Ethiopia&apos;s flagship innovation summit
        </h1>
        <p className="mt-4 max-w-2xl text-muted-foreground">
          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>
        <div className="mt-12 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>
    </>
  );
}