"use client"

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

export default function RegisterPage() {
  const router = useRouter()
  const [phone, setPhone] = useState("")
  const [password, setPassword] = useState("")
  const [repeatPassword, setRepeatPassword] = useState("")
  const [ageConfirmed, setAgeConfirmed] = useState(false)

  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 — stop clicks propagating to backdrop */}
      <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">
            REGISTER
          </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>

          {/* Repeat Password */}
          <div>
            <label className="block text-[11px] font-semibold text-white/80 mb-1">
              Repeat Password
            </label>
            <input
              type="password"
              value={repeatPassword}
              onChange={(e) => setRepeatPassword(e.target.value)}
              placeholder="Repeat 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>

          {/* Age confirmation */}
          <label className="flex items-center gap-2 cursor-pointer">
            <input
              type="checkbox"
              checked={ageConfirmed}
              onChange={(e) => setAgeConfirmed(e.target.checked)}
              className="w-4 h-4 accent-brand-primary"
            />
            <span className="text-[12px] text-white/80">
              I confirm I&apos;m over 21 years old
            </span>
          </label>

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

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

          {/* Login link */}
          <p className="text-center text-[11px] text-white/50">
            Already have an account?{" "}
            <Link href="/login" className="text-brand-primary hover:underline font-semibold">
              Login
            </Link>
          </p>
        </div>
      </div>
    </div>
  )
}