"use client";

import React from "react";
import { BoothConfig } from "@/types/booth";
import { useI18n } from "@/lib/i18n";
import { MascotGuide } from "@/components/MascotGuide";

interface StandbyScreenProps {
  config: BoothConfig;
  onStart: () => void;
}

export const StandbyScreen: React.FC<StandbyScreenProps> = ({
  config,
  onStart,
}) => {
  const { labels } = config;
  const { t, language } = useI18n();

  return (
    <div
      onClick={onStart}
      className="relative flex-1 flex flex-col items-center justify-between px-3 py-2 sm:px-6 sm:py-4 cursor-pointer select-none overflow-hidden"
    >
      {/* Center Hero Character - Clean 3D Mascot */}
      <div className="my-auto flex flex-col items-center text-center z-10 space-y-2 sm:space-y-3 px-2 max-w-sm">
        {/* Title & Subtitle with Stylized Typography */}
        <div className="space-y-0.5">
          <h2 className={`text-2xl sm:text-3xl md:text-4xl font-black text-amber-100 tracking-wider drop-shadow-[0_4px_12px_rgba(0,0,0,0.95)] ${language === 'en' ? 'font-cinzel' : 'font-dojo'}`}>
            {t(labels.welcomeTitle)}
          </h2>
          <p className="text-amber-400/95 font-semibold text-[11px] sm:text-xs tracking-widest uppercase drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]">
            {t(labels.welcomeSubtitle)}
          </p>
        </div>

        {/* Floating 3D Karate Ghost Mascot with Comic Speech Bubble */}
        <MascotGuide
          pose="bow"
          size="lg"
          speechPosition="top"
          className="my-1"
          speechText={{
            en: "Osu! Welcome to our dojo! Strike your fiercest martial arts pose & become an epic Shanghai legend!",
            zh: "押忍！欢迎来到道馆！摆出你最帅气的武道姿势，成为魔都万圣传奇！",
          }}
        />
      </div>

      {/* Halloween Game Action Button */}
      <div className="z-10 w-full flex flex-col items-center pb-1">
        <button
          onClick={onStart}
          className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg"
        >
          <span>{t(labels.welcomeCta)}</span>
        </button>
      </div>
    </div>
  );
};