import type { Metadata } from "next";
import Link from "next/link";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import { pitchCompetition } from "@/content/pitch";
import { site } from "@/content/site";
import { PageRiftHeader } from "@/components/layout/PageRiftHeader";
import { Section } from "@/components/layout/Section";
import { GrantHeadline } from "@/components/grants/GrantHeadline";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

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

export default function PitchCompetitionPage() {
  return (
    <>
      <PageRiftHeader
        variant="pitch"
        eyebrow="Pitch competition"
        title={
          <h1 className="text-4xl font-bold md:text-5xl">
            <GrantHeadline />
          </h1>
        }
        description={
          <>
            <p className="text-xl text-[#1f3d7e]">{pitchCompetition.subheadline}</p>
            <p className="mt-4 leading-relaxed">{pitchCompetition.description}</p>
          </>
        }
      >
        <Button className="rounded-full bg-[#ffb300] text-[#0f0404] hover:bg-[#ffb300]/90" asChild>
          <Link href={site.links.pitchApplyUrl}>Apply now</Link>
        </Button>
      </PageRiftHeader>

      <Section variant="muted">
        <h2 className="text-2xl font-bold">Award criteria</h2>
        <ul className="mt-6 space-y-3">
          {pitchCompetition.criteria.map((c) => (
            <li key={c} className="flex gap-2 text-muted-foreground">
              <span className="text-[#ffb300]">✓</span>
              {c}
            </li>
          ))}
        </ul>
      </Section>

      <Section>
        <h2 className="text-2xl font-bold">Timeline</h2>
        <Accordion type="single" collapsible className="relative z-10 mt-6 max-w-xl">
          {pitchCompetition.timeline.map((t) => (
            <AccordionItem key={t.phase} value={t.phase}>
              <AccordionTrigger>{t.phase}</AccordionTrigger>
              <AccordionContent>{t.date}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </Section>
    </>
  );
}