import Link from 'next/link';
import type { ComponentType } from 'react';
import { Backdrop } from '@/components/marketing/Backdrop';
import { CtaBand } from '@/components/marketing/CtaBand';
import { HeroStage } from '@/components/marketing/HeroStage';
import { JsonLd } from '@/components/marketing/JsonLd';
import { RushBoard } from '@/components/marketing/RushBoard';
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 {
  ArrowRightIcon,
  BoltIcon,
  ChartIcon,
  CheckIcon,
  ClockIcon,
  DoubleDownIcon,
  GridIcon,
  MapPinIcon,
  MoonIcon,
  PhoneIcon,
  PlayIcon,
  QrIcon,
  SecondChanceIcon,
  SwapIcon,
  TrophyIcon,
  TvIcon,
  UsersIcon,
} from '@/components/ui/icons';
import type { IconProps } from '@/components/ui/icons';
import { Container, Section } from '@/components/ui/Section';
import { absoluteUrl, pageMetadata, site } from '@/lib/site';

export const metadata = pageMetadata({ description: site.description, path: '/' });

const categories = ['Pop Culture', 'History', 'Sports', 'Science', 'Geography', 'Music', 'Food & Drink', 'Movies & TV', 'Wildcard'];

const steps: { n: string; title: string; body: string; icon: ComponentType<IconProps>; tone: string }[] = [
  {
    n: '01',
    title: 'Scan',
    body: 'Point a phone at the QR code on any TV. The game opens in the browser — no app, no account, just a nickname.',
    icon: QrIcon,
    tone: 'text-cyan bg-cyan/10 border-cyan/40',
  },
  {
    n: '02',
    title: 'Play',
    body: 'Answer timed questions with big thumb-friendly buttons. Every correct answer lights a tile on your 3×3 board.',
    icon: PhoneIcon,
    tone: 'text-violet-soft bg-violet/15 border-violet/45',
  },
  {
    n: '03',
    title: 'Win the Night',
    body: 'Speed bonuses, lines and full boards stack up. The TV keeps the leaderboard live until a champion is crowned.',
    icon: TrophyIcon,
    tone: 'text-amber bg-amber/10 border-amber/45',
  },
];

const rushFeatures: { title: string; body: string; icon: ComponentType<IconProps> }[] = [
  { title: 'Live trivia', body: 'Questions hit the TV, answers come from phones. Quick, correct answers earn up to 50 bonus points.', icon: BoltIcon },
  { title: '3×3 bingo board', body: 'Each correct answer lights its category tile. Every line is worth 250; a full board, 500.', icon: GridIcon },
  { title: 'Table battles', body: 'Tables go head to head in Table Wars. Scores are averaged, so a table of two can beat a table of eight.', icon: UsersIcon },
  { title: 'Power-ups', body: 'Complete a line to earn Double Down, Second Chance or Category Swap.', icon: SwapIcon },
];

const powerUps: { name: string; body: string; icon: ComponentType<IconProps> }[] = [
  { name: 'Double Down', body: 'Bet 100 before a question opens. Right: +200. Wrong: −100.', icon: DoubleDownIcon },
  { name: 'Second Chance', body: 'Knock out one wrong option on a multiple-choice question.', icon: SecondChanceIcon },
  { name: 'Category Swap', body: 'Swap two unlit tiles on your board to set up the perfect line.', icon: SwapIcon },
];

const benefits: { title: string; body: string; icon: ComponentType<IconProps> }[] = [
  { title: 'Longer stays', body: 'A new round every few minutes gives guests a reason to stay for one more.', icon: ClockIcon },
  { title: 'Busier slow nights', body: 'Schedule a Championship and turn a quiet Tuesday into an event.', icon: MoonIcon },
  { title: 'Just a TV', body: 'Any screen that opens a web page. No consoles, buzzers or boxes.', icon: TvIcon },
  { title: 'Live in minutes', body: 'Open the TV link, put QR codes on the tables, and you’re running.', icon: BoltIcon },
  { title: 'No app for guests', body: 'Scan, pick a nickname, play. Nothing to install, nothing to sign up for.', icon: PhoneIcon },
  { title: 'Host tools & metrics', body: 'Start, pause and moderate from your phone. See joins and repeat players.', icon: ChartIcon },
];

const structuredData = {
  '@context': 'https://schema.org',
  '@graph': [
    {
      '@type': 'Organization',
      '@id': absoluteUrl('/#organization'),
      name: site.name,
      url: absoluteUrl('/'),
      logo: absoluteUrl('/icon/512'),
      slogan: site.promise,
      areaServed: site.region,
    },
    {
      '@type': 'SoftwareApplication',
      name: site.name,
      applicationCategory: 'EntertainmentApplication',
      operatingSystem: 'Web browser',
      url: absoluteUrl('/'),
      description: site.description,
      publisher: { '@id': absoluteUrl('/#organization') },
      offers: {
        '@type': 'AggregateOffer',
        priceCurrency: 'USD',
        lowPrice: '79',
        highPrice: '249',
        offerCount: 3,
        description: 'Pilot pricing per venue per month',
      },
    },
  ],
};

export default function HomePage() {
  return (
    <>
      <JsonLd data={structuredData} />

      {/* ───────────── Hero ───────────── */}
      <section className="relative isolate overflow-hidden pb-16 sm:pb-24" aria-labelledby="hero-title">
        <Backdrop />
        <Container className="flex flex-col items-center pt-12 text-center sm:pt-20">
          <Badge tone="cyan" className="motion-safe:animate-rise">
            <MapPinIcon /> Pilot spots open · Long Island
          </Badge>
          <h1 id="hero-title" className="mt-6 font-display text-hero font-extrabold text-fg">
            The Bar Is the Arena.
            <span className="mt-1 block text-gradient-brand sm:mt-2">Everyone Plays.</span>
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted sm:text-xl">
            PintRush turns your TVs into a live game show. Guests scan a QR code and play <strong className="font-semibold text-fg">The Rush</strong>{' '}
            from their phones — trivia, a 3×3 board, table battles and power-ups. No app. No sign-up.
          </p>
          <div className="mt-8 flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
            <ButtonLink href="/pilot" size="lg">
              Join the pilot
              <ArrowRightIcon />
            </ButtonLink>
            <ButtonLink href="/demo" size="lg" variant="secondary">
              <PlayIcon />
              Try the live demo
            </ButtonLink>
          </div>
          <ul className="mt-7 flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-muted">
            {['Works on any TV with a browser', 'Original trivia, no wagering', 'Set up in minutes'].map((item) => (
              <li key={item} className="flex items-center gap-2">
                <CheckIcon className="size-4 text-lime" />
                {item}
              </li>
            ))}
          </ul>
        </Container>
        <Container className="mt-14 sm:mt-20">
          <HeroStage className="mx-auto max-w-5xl" />
        </Container>
      </section>

      {/* ───────────── Category ticker ───────────── */}
      <div className="mask-fade-x overflow-hidden border-y border-line/70 bg-surface/60 py-5">
        <div className="flex w-max gap-10 motion-safe:animate-marquee motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-3">
          {[0, 1].map((copy) => (
            <ul
              key={copy}
              aria-label={copy === 0 ? 'Trivia categories' : undefined}
              aria-hidden={copy === 1 ? true : undefined}
              className={copy === 1 ? 'flex shrink-0 gap-10 motion-reduce:hidden' : 'flex shrink-0 flex-wrap justify-center gap-x-10 gap-y-3'}
            >
              {categories.map((category) => (
                <li key={category} className="flex items-center gap-10 font-display text-sm font-semibold tracking-[0.14em] whitespace-nowrap text-muted uppercase sm:text-base">
                  {category}
                  <BoltIcon className="size-4 text-violet" />
                </li>
              ))}
            </ul>
          ))}
        </div>
      </div>

      {/* ───────────── How it works ───────────── */}
      <Section spacing="lg" aria-labelledby="steps-title" id="how">
        <SectionHeader
          kicker="How it works"
          title="Scan. Play. Win the Night."
          lead="Three steps from bar stool to leaderboard. Nothing to download, nothing to sign up for."
          align="center"
          id="steps-title"
        />
        <div className="relative mt-14">
        <div aria-hidden="true" className="absolute top-14 right-[16%] left-[16%] hidden h-px bg-[linear-gradient(90deg,var(--color-cyan),var(--color-violet),var(--color-amber))] opacity-60 md:block" />
        <ol className="relative grid gap-5 md:grid-cols-3">
          {steps.map(({ n, title, body, icon: Icon, tone }) => (
            <li key={n} className="relative">
              <Card className="flex h-full flex-col gap-4 overflow-hidden" interactive>
                <span aria-hidden="true" className="num absolute -top-3 -right-1 font-display text-8xl font-extrabold text-white/[0.04]">
                  {n}
                </span>
                <span className={`relative grid size-14 place-items-center rounded-2xl border ${tone}`}>
                  <Icon className="size-7" />
                </span>
                <Heading as="h3" size="lg">
                  <span className="num mr-2 text-subtle">{n}</span>
                  {title}
                </Heading>
                <p className="leading-relaxed text-muted">{body}</p>
              </Card>
            </li>
          ))}
        </ol>
        </div>
      </Section>

      {/* ───────────── The Rush ───────────── */}
      <Section tone="band" spacing="lg" aria-labelledby="rush-title">
        <div className="grid items-center gap-14 lg:grid-cols-[1.1fr_1fr] lg:gap-20">
          <div className="flex flex-col gap-8">
            <SectionHeader
              kicker="The signature game"
              kickerTone="violet"
              title={
                <>
                  <span className="text-gradient-brand">The Rush:</span> trivia with a board, a crowd and a twist.
                </>
              }
              lead="Ten questions, nine categories, one 3×3 board. Answer right to light a tile, complete lines for bonus points, fill the board for a big finish."
              id="rush-title"
            />
            <ul className="grid gap-5 sm:grid-cols-2">
              {rushFeatures.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>
                  <div className="flex flex-col gap-1">
                    <h3 className="font-semibold text-fg">{title}</h3>
                    <p className="text-sm leading-relaxed text-muted">{body}</p>
                  </div>
                </li>
              ))}
            </ul>
            <Link href="/how-it-works#rules" className="inline-flex min-h-12 items-center gap-2 self-start font-semibold text-violet-soft hover:text-fg">
              Read the full rules <ArrowRightIcon className="size-5" />
            </Link>
          </div>
          <div className="relative mx-auto w-full max-w-md">
            <RushBoard />
            <span className="absolute -top-4 -left-3 rotate-[-6deg] rounded-xl bg-amber px-3 py-1.5 font-display text-sm font-extrabold text-on-bright shadow-glow-amber sm:-left-8">
              +250 LINE
            </span>
            <span className="absolute -right-2 -bottom-4 rotate-[5deg] rounded-xl bg-cyan px-3 py-1.5 font-display text-sm font-extrabold text-on-bright shadow-glow-cyan sm:-right-6">
              +50 SPEED
            </span>
          </div>
        </div>
      </Section>

      {/* ───────────── Modes ───────────── */}
      <Section spacing="lg" aria-labelledby="modes-title">
        <SectionHeader kicker="Two ways to play" title="Every night. Or the main event." id="modes-title" align="center" />
        <div className="mt-14 grid gap-5 lg:grid-cols-2">
          <Card tone="raised" padding="lg" className="flex flex-col gap-5">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <Heading as="h3" size="title">
                Always-on
              </Heading>
              <Badge tone="cyan">No host needed</Badge>
            </div>
            <p className="text-lg leading-relaxed text-muted">
              Back-to-back rounds that run themselves whenever you’re open. Guests drop in, play a round or ten, and chase tonight’s leaderboard.
            </p>
            <ul className="flex flex-col gap-3">
              {['3–5 minute rounds, all night', 'Nightly leaderboard on every TV', 'Late arrivals can jump in until question 3'].map((item) => (
                <li key={item} className="flex items-center gap-3 text-fg">
                  <CheckIcon className="size-5 shrink-0 text-cyan" /> {item}
                </li>
              ))}
            </ul>
          </Card>
          <Card tone="glow" padding="lg" className="flex flex-col gap-5">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <Heading as="h3" size="title">
                Championship
              </Heading>
              <Badge tone="amber">Host-run show</Badge>
            </div>
            <p className="text-lg leading-relaxed text-muted">
              A scheduled 45–60 minute show with a host and five segments — from The Rush to Music Mayhem to a top-five Final Rush.
            </p>
            <ul className="flex flex-col gap-3">
              {['Built for your big weekly night', 'Separate event leaderboard', 'Table Wars, Power Round and Final Rush'].map((item) => (
                <li key={item} className="flex items-center gap-3 text-fg">
                  <CheckIcon className="size-5 shrink-0 text-amber" /> {item}
                </li>
              ))}
            </ul>
          </Card>
        </div>
        <p className="mt-8 text-center">
          <Link href="/how-it-works#modes" className="inline-flex min-h-12 items-center gap-2 font-semibold text-violet-soft hover:text-fg">
            Compare the modes <ArrowRightIcon className="size-5" />
          </Link>
        </p>
      </Section>

      {/* ───────────── Power-ups ───────────── */}
      <Section tone="glow" spacing="lg" aria-labelledby="powerups-title" className="border-t border-line/60">
        <div className="grid gap-12 xl:grid-cols-[1fr_1.4fr] xl:items-center">
          <SectionHeader
            kicker="Power-ups"
            kickerTone="amber"
            title="Earned on the board. Never sold."
            lead="Complete a line to earn a power-up token. Each power-up can be used once per event — no purchases, no pay-to-win."
            id="powerups-title"
          />
          <ul className="grid gap-4 sm:grid-cols-3">
            {powerUps.map(({ name, body, icon: Icon }, index) => (
              <li key={name}>
                <Card className="flex h-full flex-col gap-4" interactive>
                  <span
                    className={
                      index === 0
                        ? 'grid size-12 place-items-center rounded-xl bg-amber text-on-bright shadow-glow-amber'
                        : index === 1
                          ? 'grid size-12 place-items-center rounded-xl bg-cyan text-on-bright shadow-glow-cyan'
                          : 'grid size-12 place-items-center rounded-xl bg-lime text-on-bright shadow-glow-lime'
                    }
                  >
                    <Icon className="size-6" />
                  </span>
                  <h3 className="font-display text-lg font-bold">{name}</h3>
                  <p className="text-sm leading-relaxed text-muted">{body}</p>
                </Card>
              </li>
            ))}
          </ul>
        </div>
      </Section>

      {/* ───────────── Venue benefits ───────────── */}
      <Section tone="band" spacing="lg" aria-labelledby="venues-title">
        <div className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <SectionHeader kicker="For venues" title="Built for the people behind the bar." id="venues-title" />
          <ButtonLink href="/for-venues" variant="secondary" className="self-start md:self-auto">
            Why venues love it <ArrowRightIcon />
          </ButtonLink>
        </div>
        <ul className="mt-12 grid gap-px overflow-hidden rounded-card border border-line bg-line sm:grid-cols-2 lg:grid-cols-3">
          {benefits.map(({ title, body, icon: Icon }) => (
            <li key={title} className="flex gap-4 bg-surface p-6 sm:p-7">
              <Icon className="mt-0.5 size-6 shrink-0 text-cyan" />
              <div className="flex flex-col gap-1.5">
                <h3 className="font-display font-semibold text-fg">{title}</h3>
                <p className="text-sm leading-relaxed text-muted">{body}</p>
              </div>
            </li>
          ))}
        </ul>
      </Section>

      {/* ───────────── Pilot (honest testimonial placeholder) ───────────── */}
      <Section spacing="lg" aria-labelledby="pilot-title">
        <Card tone="glow" padding="none" className="grid overflow-hidden lg:grid-cols-[1.2fr_1fr]">
          <div className="flex flex-col gap-5 p-7 sm:p-10 lg:p-12">
            <Badge tone="amber" className="self-start">
              <MapPinIcon /> Pilot program · Long Island
            </Badge>
            <Heading id="pilot-title" size="title">
              Pilot venues on Long Island — your bar could be next.
            </Heading>
            <p className="text-lg leading-relaxed text-muted">
              We’re launching PintRush with a small group of Long Island bars. Pilot venues get hands-on setup, early pricing and a
              direct line to the team building the game.
            </p>
            <p className="leading-relaxed text-subtle">
              You won’t find invented reviews here. This space is saved for real stories from real game nights — maybe yours.
            </p>
            <div className="mt-2 flex flex-col gap-3 sm:flex-row">
              <ButtonLink href="/pilot" size="lg">
                Apply for the pilot <ArrowRightIcon />
              </ButtonLink>
              <ButtonLink href="/pricing" size="lg" variant="ghost">
                See pilot pricing
              </ButtonLink>
            </div>
          </div>
          <div className="relative border-t border-violet/30 bg-night/40 p-7 sm:p-10 lg:border-t-0 lg:border-l">
            <p className="mb-5 text-xs font-bold tracking-[0.2em] text-subtle uppercase">Pilot venues</p>
            <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-2">
              {['01', '02', '03', '04', '05'].map((slot) => (
                <li
                  key={slot}
                  className="flex aspect-[4/3] flex-col justify-between rounded-tile border border-dashed border-line-strong/70 bg-surface/50 p-3.5"
                >
                  <span className="num font-display text-sm font-bold text-subtle">#{slot}</span>
                  <span className="text-sm font-semibold text-muted">Open seat</span>
                </li>
              ))}
              <li className="flex aspect-[4/3] flex-col justify-between rounded-tile border border-amber/60 bg-amber/10 p-3.5 shadow-glow-amber">
                <MapPinIcon className="size-5 text-amber" />
                <span className="text-sm font-bold text-amber-soft">Your bar here?</span>
              </li>
            </ul>
          </div>
        </Card>
      </Section>

      <CtaBand />
    </>
  );
}