import Link from 'next/link';

export default function AppointmentPage() {
  return (
    <div className="relative min-h-screen bg-black tech-grid scanlines">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
        <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
      </div>

      <div className="relative mx-auto max-w-4xl px-4 py-12">
        <div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
          <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
          <div className="relative">
            <div className="mb-6 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
                <h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
                  Book a New Appointment
                </h1>
              </div>
              <Link
                href="/"
                className="text-sm font-medium text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider border border-white/20 px-3 py-1 rounded hover:border-white/40 hover:bg-white/10"
              >
                ← Back to Home
              </Link>
            </div>

            <p className="mb-8 text-white/70 font-mono">
              FILL OUT THE FORM BELOW TO SCHEDULE A SERVICE APPOINTMENT FOR YOUR VEHICLE.
            </p>

            {/* Appointment Form */}
            <form className="space-y-6">
              <div className="grid gap-6 sm:grid-cols-2">
                <div>
                  <label
                    htmlFor="vehicleNumber"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Vehicle Number <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="vehicleNumber"
                    type="text"
                    placeholder="ABC-1234"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="vehicleMake"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Vehicle Make <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="vehicleMake"
                    type="text"
                    placeholder="Honda, Toyota"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="vehicleModel"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Vehicle Model <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="vehicleModel"
                    type="text"
                    placeholder="Civic, Camry"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="serviceType"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Service Type <span className="text-red-500">*</span>
                  </label>
                  <select
                    id="serviceType"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&>option]:bg-black [&>option]:text-white"
                    required
                  >
                    <option value="">SELECT SERVICE TYPE</option>
                    <option value="regular">Regular Service</option>
                    <option value="repair">Repair</option>
                    <option value="inspection">Inspection</option>
                    <option value="other">Other</option>
                  </select>
                </div>

                <div>
                  <label
                    htmlFor="preferredDate"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Preferred Date <span className="text-red-500">*</span>
                  </label>
                  <input
                    id="preferredDate"
                    type="date"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&::-webkit-calendar-picker-indicator]:invert [&::-webkit-calendar-picker-indicator]:cursor-pointer"
                    required
                  />
                </div>

                <div>
                  <label
                    htmlFor="preferredTime"
                    className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                  >
                    Preferred Time <span className="text-red-500">*</span>
                  </label>
                  <select
                    id="preferredTime"
                    className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all [&>option]:bg-black [&>option]:text-white"
                    required
                  >
                    <option value="">SELECT TIME</option>
                    <option value="09:00">09:00 AM</option>
                    <option value="10:00">10:00 AM</option>
                    <option value="11:00">11:00 AM</option>
                    <option value="12:00">12:00 PM</option>
                    <option value="13:00">13:00 PM</option>
                    <option value="14:00">14:00 PM</option>
                    <option value="15:00">15:00 PM</option>
                    <option value="16:00">16:00 PM</option>
                    <option value="17:00">17:00 PM</option>
                  </select>
                </div>
              </div>

              <div>
                <label
                  htmlFor="additionalNotes"
                  className="mb-2 block text-sm font-medium text-white uppercase tracking-wider"
                >
                  Additional Notes
                </label>
                <textarea
                  id="additionalNotes"
                  rows={4}
                  placeholder="ANY SPECIFIC REQUIREMENTS OR ISSUES..."
                  className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                />
              </div>

              <div className="flex gap-4 pt-4">
                <Link
                  href="/"
                  className="flex-1 rounded-lg border-2 border-white/30 bg-black/50 px-6 py-3 text-center font-medium uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
                >
                  Cancel
                </Link>
                <button
                  type="submit"
                  className="flex-1 rounded-lg border-2 border-white/30 bg-white/5 px-6 py-3 font-bold uppercase tracking-wider text-white transition-all hover:bg-white/10 hover:border-white/50 hover:text-gray-200 hover:shadow-[0_0_20px_rgba(255,255,255,0.3)] focus:outline-none focus:ring-2 focus:ring-white/30"
                >
                  Book Appointment
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}