"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-[#050505] overflow-hidden">
      {/* Hintergrund-Deko */}
      <div className="absolute inset-0 opacity-20 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 border-yellow-500/20 bg-black/60 backdrop-blur-md rounded-2xl shadow-[0_0_100px_rgba(234,179,8,0.1)]">
        <div className="space-y-2">
          <h1 className="font-starjedi text-6xl text-white">
            {t.UI.GAME_TITLE}
          </h1>
          <p className="text-yellow-500/60 font-mono tracking-[0.3em] uppercase text-xs">
            {t.START_SCREEN.SUBTITLE}
          </p>
        </div>

        <div className="space-y-4 text-gray-400 font-light leading-relaxed">
          <p>
            {t.START_SCREEN.INTRO_TEXT}
            <span className="text-white font-medium">
              {" "}
              {t.START_SCREEN.MISSION_HIGHLIGHT}
            </span>
          </p>
          <ul className="text-sm space-y-2 inline-block text-left border-l-2 border-yellow-500/30 pl-6">
            <li>
              •{" "}
              <strong className="text-yellow-500/80">
                {t.START_SCREEN.FEATURE_NAV_TITLE}
              </strong>{" "}
              {t.START_SCREEN.FEATURE_NAV_DESC}
            </li>
            <li>
              •{" "}
              <strong className="text-yellow-500/80">
                {t.START_SCREEN.FEATURE_RISK_TITLE}
              </strong>{" "}
              {t.START_SCREEN.FEATURE_RISK_DESC}
            </li>
            <li>
              •{" "}
              <strong className="text-yellow-500/80">
                {t.START_SCREEN.FEATURE_COMBAT_TITLE}
              </strong>{" "}
              {t.START_SCREEN.FEATURE_COMBAT_DESC}
            </li>
          </ul>
        </div>

        <div className="pt-6">
          <button
            onClick={onStart}
            className="group relative px-12 py-5 bg-yellow-500 text-black font-black uppercase tracking-[0.2em] transition-all hover:scale-105 hover:shadow-[0_0_40px_rgba(234,179,8,0.4)] overflow-hidden"
          >
            <span className="relative z-10">{t.UI.START_BUTTON}</span>
            <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity" />
          </button>

          <p className="mt-4 text-[10px] text-gray-600 uppercase tracking-widest">
            {t.START_SCREEN.FOOTER_ENGINE}
          </p>
        </div>
      </div>
    </div>
  );
}