"use client";

import React from "react";
import { t } from "@/content/locales";

interface StartScreenProps {
  onStart: () => void;
}

export default function StartScreen({ onStart }: StartScreenProps) {
  return (
    <div className="fixed inset-0 z-[110] flex items-center justify-center bg-black overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute inset-0 opacity-30"
          style={{
            backgroundImage: `
              radial-gradient(1px 1px at 20px 30px, #fff, 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 40px 70px, #fff, 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 50px 160px, #ddd, 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 90px 40px, #fff, 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 130px 80px, #fff, 100%, rgba(0,0,0,0)),
              radial-gradient(1px 1px at 160px 120px, #ddd, 100%, rgba(0,0,0,0))
            `,
            backgroundSize: "200px 200px",
            backgroundRepeat: "repeat",
          }}
        />

        <div
          className="absolute inset-0 opacity-50"
          style={{
            backgroundImage: `
              radial-gradient(1.5px 1.5px at 100px 150px, #fff, 100%, rgba(0,0,0,0)),
              radial-gradient(1.5px 1.5px at 300px 400px, #ddd, 100%, rgba(0,0,0,0)),
              radial-gradient(1.5px 1.5px at 500px 100px, #fff, 100%, rgba(0,0,0,0))
            `,
            backgroundSize: "450px 450px",
            backgroundRepeat: "repeat",
          }}
        />
      </div>

      <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_#eab308_0%,_transparent_70%)]" />

      <div className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border-2 border-yellow-500 rounded-2xl bg-black/80 backdrop-blur-sm shadow-[0_0_50px_rgba(0,0,0,0.5)]">
        <div className="space-y-2">
          <h1 className="font-starjedi text-6xl text-yellow-500">
            {t.UI.GAME_TITLE}
          </h1>
          <p className="text-yellow-500 font-mono tracking-[0.3em] uppercase text-xs">
            {t.START_SCREEN.SUBTITLE}
          </p>
        </div>

        <div className="space-y-6 text-yellow-500 leading-relaxed">
          <p className="text-sm tracking-wider font-medium">
            {t.START_SCREEN.INTRO_TEXT}
            <span className="block mt-1 text-yellow-500 font-black">
              {t.START_SCREEN.MISSION_HIGHLIGHT}
            </span>
          </p>

          <ul className="text-[10px] space-y-3 inline-block text-left border-l-2 border-yellow-500/50 pl-6 tracking-[0.2em]">
            <li>
              • <strong>{t.START_SCREEN.FEATURE_NAV_TITLE}</strong>{" "}
              <span className="opacity-70">
                {t.START_SCREEN.FEATURE_NAV_DESC}
              </span>
            </li>
            <li>
              • <strong>{t.START_SCREEN.FEATURE_RISK_TITLE}</strong>{" "}
              <span className="opacity-70">
                {t.START_SCREEN.FEATURE_RISK_DESC}
              </span>
            </li>
            <li>
              • <strong>{t.START_SCREEN.FEATURE_COMBAT_TITLE}</strong>{" "}
              <span className="opacity-70">
                {t.START_SCREEN.FEATURE_COMBAT_DESC}
              </span>
            </li>
          </ul>
        </div>

        <div className="pt-6">
          <button
            onClick={onStart}
            className="px-12 py-5 border-2 border-yellow-500 text-yellow-500 font-black uppercase tracking-[0.3em] transition-all hover:bg-yellow-500 hover:text-black active:scale-95 shadow-[0_0_20px_rgba(234,179,8,0.2)]"
          >
            {t.UI.START_BUTTON}
          </button>

          <p className="mt-6 text-[9px] text-yellow-500/70 uppercase tracking-[0.3em]">
            {t.START_SCREEN.FOOTER_ENGINE}
          </p>
        </div>
      </div>
    </div>
  );
}