import type { Metadata } from "next";
import { pageSeo } from "@/content/page-seo";
import { createPageMetadata } from "@/lib/seo";
import Link from "next/link";
import { pitchCompetition } from "@/content/pitch";
import { site } from "@/content/site";
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 (
    <>
      <Section className="pt-24">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#ffb300]">
          Pitch competition
        </p>
        <h1 className="mt-3 text-4xl font-bold md:text-5xl">
          <GrantHeadline />
        </h1>
        <p className="mt-2 text-xl text-[#1f3d7e]">{pitchCompetition.subheadline}</p>
        <p className="mt-6 max-w-3xl text-muted-foreground leading-relaxed">
          {pitchCompetition.description}
        </p>
        <Button className="mt-8 rounded-full bg-[#ffb300] text-[#0f0404] hover:bg-[#ffb300]/90" asChild>
          <Link href={site.links.pitchApplyUrl}>Apply now</Link>
        </Button>
      </Section>
      <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="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>
    </>
  );
}