"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"

export default function LoginPage() {
  const router = useRouter()
  const [phone, setPhone] = useState("")
  const [password, setPassword] = useState("")

  return (
    /* Full-screen dark backdrop */
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70"
      onClick={() => router.back()}
    >
      {/* Modal card */}
      <div
        className="relative w-[420px] bg-[#3a3a3a] shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Close button */}
        <button
          onClick={() => router.back()}
          className="absolute top-2 right-3 text-white/60 hover:text-white text-xl leading-none transition-colors z-10"
          aria-label="Close"
        >
          ×
        </button>

        {/* Logo */}
        <div className="flex items-center justify-center py-5 border-b border-white/10 bg-[#2e2e2e]">
          <div className="flex items-center">
            {/* Red slashes */}
            <div className="flex gap-[3px] mr-2">
              {[0, 1, 2].map((i) => (
                <div
                  key={i}
                  className="w-[5px] h-[38px] bg-[#cc2222] -skew-x-12"
                />
              ))}
            </div>
            {/* HARIF box */}
            <div className="bg-brand-accent px-3 py-1 -skew-x-12 flex items-center h-[38px]">
              <span className="text-2xl font-black text-white italic tracking-tighter skew-x-12 inline-block leading-none">
                HARIF
              </span>
            </div>
            {/* SPORT text */}
            <span className="text-2xl font-black text-brand-primary italic tracking-tighter ml-1 leading-none">
              SPORT
            </span>
          </div>
        </div>

        {/* Title */}
        <div className="text-center py-4">
          <h1 className="text-sm font-black text-white uppercase tracking-widest">
            LOGIN
          </h1>
        </div>

        {/* Form */}
        <div className="px-8 pb-6 space-y-4">
          {/* Phone Number */}
          <div>
            <label className="block text-[11px] font-semibold text-white/80 mb-1">
              Phone Number
            </label>
            <div className="flex">
              <span className="flex items-center justify-center bg-white text-[#333] text-[12px] font-bold px-3 border border-gray-300 whitespace-nowrap">
                ET +251
              </span>
              <input
                type="tel"
                value={phone}
                onChange={(e) => setPhone(e.target.value)}
                className="flex-1 bg-white border border-gray-300 px-3 py-2 text-sm text-[#333] placeholder:text-gray-400 focus:outline-none focus:border-brand-primary"
              />
            </div>
          </div>

          {/* Password */}
          <div>
            <label className="block text-[11px] font-semibold text-white/80 mb-1">
              Password
            </label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Password"
              className="w-full bg-white border border-gray-300 px-3 py-2 text-sm text-[#333] placeholder:text-gray-400 focus:outline-none focus:border-brand-primary"
            />
          </div>

          {/* Forgot password */}
          <div className="text-right">
            <Link
              href="/reset-password"
              className="text-[11px] text-white/50 hover:text-brand-primary transition-colors"
            >
              Forgot password?
            </Link>
          </div>

          {/* Login button */}
          <button className="w-full bg-[#e6b800] hover:bg-[#ffcc00] text-black font-black py-3 uppercase text-sm tracking-widest transition-colors">
            LOGIN
          </button>

          {/* Support link */}
          <p className="text-center text-[12px] text-white/60">
            <Link href="/support" className="hover:text-white transition-colors">
              Support
            </Link>
          </p>

          {/* Register link */}
          <p className="text-center text-[11px] text-white/50">
            Don&apos;t have an account?{" "}
            <Link href="/register" className="text-brand-primary hover:underline font-semibold">
              Register
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}