import { cn } from '@/lib/cn';
import { PhoneFrame, TvFrame } from './mocks/Devices';
import { PhoneAnswerScreen } from './mocks/PhoneScreens';
import { TvQuestionScreen } from './mocks/TvScreens';
import s from './mocks/stage.module.css';

/**
 * The hero's TV + phone mock: a gentle 10 s CSS loop (question → pick → reveal → line → leaderboard
 * shuffle). Pure CSS, no client JS; a still frame when the visitor prefers reduced motion.
 */
export function HeroStage({ className }: { className?: string }) {
  return (
    <figure className={cn('relative', s.live, className)}>
      <div aria-hidden="true" className="relative pr-[19%] pb-[11%]">
        {/* stage lighting */}
        <div className="pointer-events-none absolute -inset-[8%] -z-10 bg-[radial-gradient(45%_50%_at_40%_45%,rgb(124_92_255/0.35),transparent_70%),radial-gradient(30%_35%_at_85%_70%,rgb(34_211_238/0.25),transparent_70%)] blur-2xl" />
        <TvFrame className="w-full">
          <TvQuestionScreen />
        </TvFrame>
        <PhoneFrame className="absolute right-0 bottom-0 w-[24%] motion-safe:animate-float">
          <PhoneAnswerScreen />
        </PhoneFrame>
      </div>
      <figcaption className="sr-only">
        Preview of a PintRush game night: the bar TV shows a live trivia question with a countdown ring and the
        nightly leaderboard, while a guest&apos;s phone shows their 3×3 board and big answer buttons. A correct answer
        lights a tile, completes a line for 250 bonus points and moves the player up the leaderboard.
      </figcaption>
    </figure>
  );
}