import type { ComponentType } from 'react';
import { Backdrop } from '@/components/marketing/Backdrop';
import { Badge } from '@/components/ui/Badge';
import { Card } from '@/components/ui/Card';
import { Heading, Kicker, Lead } from '@/components/ui/Heading';
import { ChartIcon, MapPinIcon, MicIcon, SparklesIcon } from '@/components/ui/icons';
import type { IconProps } from '@/components/ui/icons';
import { Container } from '@/components/ui/Section';
import { pageMetadata } from '@/lib/site';
import { PilotForm } from './PilotForm';

export const metadata = pageMetadata({
  title: 'Join the pilot',
  description:
    'Apply to bring PintRush to your bar. Pilot venues on Long Island get hands-on setup, early pricing and a direct line to the team building the game.',
  path: '/pilot',
});

const perks: { title: string; body: string; icon: ComponentType<IconProps> }[] = [
  { title: 'Hands-on setup', body: 'We set up your venue with you and stick around for your first game nights.', icon: MicIcon },
  { title: 'Early pricing', body: 'Pilot venues help shape pricing before anything is billed.', icon: SparklesIcon },
  { title: 'Shape the game', body: 'Your feedback goes straight into new rounds, packs and host tools.', icon: ChartIcon },
];

export default function PilotPage() {
  return (
    <section className="relative isolate overflow-hidden" aria-labelledby="pilot-title">
      <Backdrop intensity="soft" />
      <Container className="grid gap-12 py-14 sm:py-20 lg:grid-cols-[1fr_1.15fr] lg:gap-16">
        <div className="flex flex-col gap-6 lg:sticky lg:top-28 lg:self-start">
          <Badge tone="amber" className="self-start">
            <MapPinIcon /> Long Island pilot
          </Badge>
          <Kicker>Join the pilot</Kicker>
          <Heading as="h1" size="display" id="pilot-title">
            Bring PintRush <span className="text-gradient-brand">to your bar.</span>
          </Heading>
          <Lead>
            We’re starting with a handful of bars on Long Island. Tell us about your venue and we’ll get back to you about the next steps.
          </Lead>
          <ul className="mt-2 flex flex-col gap-5">
            {perks.map(({ title, body, icon: Icon }) => (
              <li key={title} className="flex gap-4">
                <span className="grid size-11 shrink-0 place-items-center rounded-xl border border-violet/45 bg-violet/15 text-violet-soft">
                  <Icon className="size-5" />
                </span>
                <span className="flex flex-col gap-0.5">
                  <span className="font-display font-semibold text-fg">{title}</span>
                  <span className="text-sm leading-relaxed text-muted">{body}</span>
                </span>
              </li>
            ))}
          </ul>
          <p className="text-sm text-subtle">Takes about two minutes. No payment details, no commitment.</p>
        </div>
        <Card tone="raised" padding="lg" className="self-start">
          <PilotForm />
        </Card>
      </Container>
    </section>
  );
}