import { CtaBand } from '@/components/marketing/CtaBand';
import { FaqList } from '@/components/marketing/FaqList';
import { PageHero } from '@/components/marketing/PageHero';
import { Badge } from '@/components/ui/Badge';
import { ButtonLink } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { Heading, SectionHeader } from '@/components/ui/Heading';
import { CheckIcon, InfoIcon } from '@/components/ui/icons';
import { Section } from '@/components/ui/Section';
import type { FaqItem } from '@/content/faq';
import { cn } from '@/lib/cn';
import { pageMetadata } from '@/lib/site';

export const metadata = pageMetadata({
  title: 'Pricing',
  description:
    'Pilot pricing for PintRush: Starter $79, Pro $149 and Network $249 per venue per month. Always-on games, TV display and QR join, plus Championships, power-ups, leagues and reporting.',
  path: '/pricing',
});

interface Tier {
  name: string;
  price: number;
  tagline: string;
  includes: string[];
  featured?: boolean;
}

// Spec §9 (pilot hypotheses, display only — there is no billing).
const tiers: Tier[] = [
  {
    name: 'Starter',
    price: 79,
    tagline: 'Game night that runs itself, every night.',
    includes: ['Always-on games', 'TV display', 'QR join — no app for guests', 'Nightly leaderboard'],
  },
  {
    name: 'Pro',
    price: 149,
    tagline: 'For venues that want a weekly main event.',
    includes: ['Everything in Starter', 'Hosted Championships', 'Power-ups', 'Venue leagues', 'Reporting'],
    featured: true,
  },
  {
    name: 'Network',
    price: 249,
    tagline: 'For groups running more than one bar.',
    includes: ['Everything in Pro', 'Multi-venue features (when available)'],
  },
];

const pricingFaq: FaqItem[] = [
  {
    id: 'pricing-billing',
    question: 'Can I pay online?',
    answer: [
      'Not yet, on purpose. These prices are pilot hypotheses we’re testing with launch venues. There is no checkout and nothing is charged through this website — pilot terms are agreed with you directly.',
    ],
  },
  {
    id: 'pricing-guests',
    question: 'Do guests pay anything?',
    answer: ['Never. There is no paid entry, nothing to buy in the game, and power-ups are earned on the board, not sold.'],
  },
  {
    id: 'pricing-venue',
    question: 'What counts as a venue?',
    answer: [
      'One physical location. Run as many TVs as you like there — they all show the same game. Groups with several locations should look at Network.',
    ],
  },
];

export default function PricingPage() {
  return (
    <>
      <PageHero
        kicker="Pricing"
        title={
          <>
            One venue. <span className="block text-gradient-brand">One simple price.</span>
          </>
        }
        lead="One flat monthly price per venue, unlimited guests. During the pilot there’s no checkout — join and we’ll set you up personally."
      >
        <Badge tone="amber">
          <InfoIcon /> Pilot pricing · no billing yet
        </Badge>
      </PageHero>

      <Section spacing="lg" aria-labelledby="tiers-title">
        <h2 id="tiers-title" className="sr-only">
          Plans
        </h2>
        <ul className="grid gap-5 lg:grid-cols-3 lg:items-stretch">
          {tiers.map((tier) => (
            <li key={tier.name} className={cn(tier.featured && 'lg:-my-4')}>
              <Card tone={tier.featured ? 'glow' : 'raised'} padding="lg" className="flex h-full flex-col gap-6">
                <div className="flex items-center justify-between gap-3">
                  <Heading as="h3" size="lg">
                    {tier.name}
                  </Heading>
                  {tier.featured ? <Badge tone="violet">Recommended</Badge> : <Badge tone="neutral">Pilot</Badge>}
                </div>
                <p className="text-muted">{tier.tagline}</p>
                <p className="flex items-end gap-2">
                  <span className="num font-display text-5xl font-extrabold tracking-[-0.04em] text-fg">${tier.price}</span>
                  <span className="pb-1.5 text-sm leading-tight text-muted">
                    per venue
                    <br />
                    per month
                  </span>
                </p>
                <ul className="flex flex-col gap-3 border-t border-line/70 pt-6">
                  {tier.includes.map((item) => (
                    <li key={item} className="flex gap-3 text-fg">
                      <CheckIcon className={cn('mt-0.5 size-5 shrink-0', tier.featured ? 'text-lime' : 'text-cyan')} />
                      {item}
                    </li>
                  ))}
                </ul>
                <ButtonLink href="/pilot" size="lg" variant={tier.featured ? 'primary' : 'secondary'} fullWidth className="mt-auto">
                  Join the pilot
                </ButtonLink>
              </Card>
            </li>
          ))}
        </ul>
        <p className="mx-auto mt-12 max-w-2xl text-center text-sm leading-relaxed text-subtle">
          Prices are pilot hypotheses in US dollars, shown for discussion. Nothing is billed through this site, and no plan includes paid entry or
          wagering for guests.
        </p>
      </Section>

      <Section tone="band" spacing="md" aria-labelledby="pricing-faq-title">
        <div className="grid gap-10 lg:grid-cols-[1fr_1.6fr] lg:gap-16">
          <SectionHeader kicker="Pricing questions" title="The fine print, in big print" id="pricing-faq-title" />
          <FaqList items={pricingFaq} />
        </div>
      </Section>

      <CtaBand />
    </>
  );
}