import Link from 'next/link';
import type { ComponentType } from 'react';
import { CtaBand } from '@/components/marketing/CtaBand';
import { FaqList } from '@/components/marketing/FaqList';
import { TvFrame } from '@/components/marketing/mocks/Devices';
import { TvAttractScreen } from '@/components/marketing/mocks/TvScreens';
import { PageHero } from '@/components/marketing/PageHero';
import { ButtonLink } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { SectionHeader } from '@/components/ui/Heading';
import {
  ArrowRightIcon,
  BoltIcon,
  ChartIcon,
  ClockIcon,
  MicIcon,
  MoonIcon,
  PhoneIcon,
  ShieldIcon,
  TvIcon,
  WifiIcon,
} from '@/components/ui/icons';
import type { IconProps } from '@/components/ui/icons';
import { Section } from '@/components/ui/Section';
import { faqItems } from '@/content/faq';
import { pageMetadata } from '@/lib/site';

export const metadata = pageMetadata({
  title: 'For venues',
  description:
    'Give guests a reason to stay for one more round. PintRush needs nothing but a TV, sets up in minutes, needs no app for guests and comes with host tools and nightly metrics.',
  path: '/for-venues',
});

const benefits: { title: string; body: string; icon: ComponentType<IconProps>; accent: string }[] = [
  {
    title: 'Longer stays',
    body: 'A fresh round every few minutes, a live leaderboard and a nightly crown give guests a reason to stay for one more — and order one more.',
    icon: ClockIcon,
    accent: 'text-cyan',
  },
  {
    title: 'Traffic on slow nights',
    body: 'Schedule a Championship for your quietest night and give regulars a reason to bring friends.',
    icon: MoonIcon,
    accent: 'text-violet-soft',
  },
  {
    title: 'Zero hardware beyond a TV',
    body: 'Any screen that opens a web page: a smart TV, a streaming stick or a laptop on HDMI. No buzzers, no consoles, no boxes to rent.',
    icon: TvIcon,
    accent: 'text-amber',
  },
  {
    title: 'Set up in minutes',
    body: 'Open your TV link, put QR codes on the tables and you’re live. Always-on rounds start by themselves.',
    icon: BoltIcon,
    accent: 'text-lime',
  },
  {
    title: 'No app for guests',
    body: 'Guests scan and play in the browser with just a nickname. No downloads, no accounts, no friction at the table.',
    icon: PhoneIcon,
    accent: 'text-cyan',
  },
  {
    title: 'Host tools',
    body: 'Start, pause, skip and end shows from a phone. Rename or remove players with rude nicknames in one tap.',
    icon: MicIcon,
    accent: 'text-violet-soft',
  },
  {
    title: 'Metrics that matter',
    body: 'See guest joins, rounds completed and repeat players by night, so you know which nights are working.',
    icon: ChartIcon,
    accent: 'text-amber',
  },
  {
    title: 'Responsible by design',
    body: 'No paid entry, no wagering, original trivia, and guest data deleted after 90 days.',
    icon: ShieldIcon,
    accent: 'text-lime',
  },
];

const setupSteps = [
  { title: 'Apply for the pilot', body: 'Tell us about your venue, your screens and your busiest nights. It takes two minutes.' },
  { title: 'We set up your venue', body: 'We create your venue and rooms, walk you through the host tools and pick your game schedule together.' },
  { title: 'Open the TV link', body: 'Open your venue’s TV link on each screen. Every TV stays in sync.' },
  { title: 'QR codes on the tables', body: 'Print table cards or let the TV show the code between rounds. Guests scan and play.' },
];

const needs: { title: string; body: string; icon: ComponentType<IconProps> }[] = [
  { title: 'A TV with a browser', body: 'Smart TV, streaming stick or laptop over HDMI.', icon: TvIcon },
  { title: 'Internet for the TV', body: 'Guests use your guest Wi-Fi or their own data.', icon: WifiIcon },
  { title: 'A host for Championships', body: 'Optional. A bartender with a phone is plenty.', icon: MicIcon },
];

export default function ForVenuesPage() {
  return (
    <>
      <PageHero
        kicker="For bar owners & managers"
        title={
          <>
            Fill the room on the nights <span className="text-gradient-brand">that need it most.</span>
          </>
        }
        lead="PintRush turns the TVs you already have into a game night that runs itself — and a hosted show when you want one. Guests play on their phones; you pour."
        aside={
          <TvFrame className="w-full">
            <div aria-hidden="true">
              <TvAttractScreen />
            </div>
          </TvFrame>
        }
      >
        <ButtonLink href="/pilot" size="lg">
          Join the pilot <ArrowRightIcon />
        </ButtonLink>
        <ButtonLink href="/pricing" size="lg" variant="secondary">
          See pricing
        </ButtonLink>
      </PageHero>

      <Section spacing="lg" aria-labelledby="benefits-title">
        <SectionHeader
          kicker="Why PintRush"
          title="Made for the business side of game night"
          lead="Built around what matters behind the bar: guests who stay, slow nights that pick up, and nothing new to buy or babysit."
          id="benefits-title"
        />
        <ul className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {benefits.map(({ title, body, icon: Icon, accent }) => (
            <li key={title}>
              <Card className="flex h-full flex-col gap-3" interactive>
                <Icon className={`size-7 ${accent}`} />
                <h3 className="font-display text-lg font-bold">{title}</h3>
                <p className="text-sm leading-relaxed text-muted">{body}</p>
              </Card>
            </li>
          ))}
        </ul>
      </Section>

      <Section tone="band" spacing="lg" aria-labelledby="setup-title">
        <div className="grid gap-12 lg:grid-cols-[1fr_1.4fr] lg:gap-20">
          <div className="flex flex-col gap-8">
            <SectionHeader kicker="Setup" title="From sign-up to first round in four steps" id="setup-title" />
            <Card tone="raised" className="flex flex-col gap-4">
              <h3 className="font-display font-bold">What you need</h3>
              <ul className="flex flex-col gap-4">
                {needs.map(({ title, body, icon: Icon }) => (
                  <li key={title} className="flex gap-3">
                    <Icon className="mt-0.5 size-5 shrink-0 text-cyan" />
                    <span>
                      <span className="block font-semibold text-fg">{title}</span>
                      <span className="text-sm text-muted">{body}</span>
                    </span>
                  </li>
                ))}
              </ul>
            </Card>
          </div>
          <ol className="flex flex-col gap-4">
            {setupSteps.map((step, index) => (
              <li key={step.title}>
                <Card className="flex gap-5" padding="md">
                  <span className="num grid size-12 shrink-0 place-items-center rounded-xl bg-[linear-gradient(135deg,var(--color-violet-strong),var(--color-violet-deep))] font-display text-lg font-bold text-white shadow-glow-violet">
                    {index + 1}
                  </span>
                  <div className="flex flex-col gap-1">
                    <h3 className="font-display text-lg font-bold">{step.title}</h3>
                    <p className="leading-relaxed text-muted">{step.body}</p>
                  </div>
                </Card>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section spacing="lg" aria-labelledby="venue-faq-title">
        <div className="grid gap-10 lg:grid-cols-[1fr_1.6fr] lg:gap-16">
          <div className="flex flex-col gap-5">
            <SectionHeader kicker="Questions" title="What owners ask first" id="venue-faq-title" />
            <Link href="/faq" className="inline-flex min-h-12 items-center gap-2 self-start font-semibold text-violet-soft hover:text-fg">
              All FAQs <ArrowRightIcon className="size-5" />
            </Link>
          </div>
          <FaqList items={faqItems(['hardware', 'setup', 'multiple-tvs', 'legality', 'cost'])} />
        </div>
      </Section>

      <CtaBand title="Ready for your first game night?" />
    </>
  );
}