"use client";

import { useState } from "react";
import Image from "next/image";
import { User, Mail, Phone, Calendar, Clock, Users, MapPin } from "lucide-react";
import SubpageLayout from "@/components/SubpageLayout";
import AnimatedSection from "@/components/AnimatedSection";
import InnerBanner from "@/components/InnerBanner";

export default function ReservationPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    guests: "2 Guests",
    date: "",
    time: "07:00 PM",
    area: "Heritage Dining Court"
  });
  const [reserved, setReserved] = useState(false);

  const handleReserve = (e: React.FormEvent) => {
    e.preventDefault();
    setReserved(true);
    setTimeout(() => {
      setReserved(false);
      setFormData({ ...formData, name: "", email: "", phone: "", date: "" });
    }, 6000);
  };

  return (
    <SubpageLayout>
      <InnerBanner pageName="Reservation" bgImage="/images/inner-banner/6.webp" />
      <div className="relative w-full bg-[#fdfaf4] overflow-hidden flex flex-col justify-center py-24">
        
        {/* Full Page Background with Pots and Temple */}
        <div className="absolute inset-0 z-0 pointer-events-none select-none">
          <Image
            src="/images/story_bg.png"
            alt="Royal Background"
            fill
            priority
            className="object-cover object-bottom opacity-90 mix-blend-multiply"
          />
        </div>

        {/* Ornate Page Border */}
        <div className="absolute inset-4 sm:inset-8 border-[1.5px] border-[#bc9e65] pointer-events-none z-10 hidden md:block">
          {/* Corner Ornaments */}
          <div className="absolute top-0 left-0 w-16 h-16 transform">
             <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
               <path d="M0,0 L50,0 Q50,50 0,50 Z" />
               <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
             </svg>
          </div>
          <div className="absolute top-0 right-0 w-16 h-16 transform rotate-90">
             <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
               <path d="M0,0 L50,0 Q50,50 0,50 Z" />
               <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
             </svg>
          </div>
          <div className="absolute bottom-0 left-0 w-16 h-16 transform -rotate-90">
             <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
               <path d="M0,0 L50,0 Q50,50 0,50 Z" />
               <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
             </svg>
          </div>
          <div className="absolute bottom-0 right-0 w-16 h-16 transform rotate-180">
             <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
               <path d="M0,0 L50,0 Q50,50 0,50 Z" />
               <path d="M10,10 L40,10 Q40,40 10,40 Z" fill="none" stroke="currentColor" strokeWidth="1" />
             </svg>
          </div>
        </div>

        <div className="relative z-20 max-w-2xl mx-auto w-full px-4 sm:px-8">
          
          {/* Form Card */}
          <div className="w-full">
            <AnimatedSection variant="fadeUp" delay={0.1}>
              <div className="relative bg-[#0a2e1f] p-8 sm:p-12 shadow-[0_30px_60px_rgba(0,0,0,0.6)] rounded-xl border-[4px] border-[#082418]">
                {/* Ornate Gold Border inside */}
                <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />
                
                {/* Corner Ornaments */}
                <div className="absolute top-2 left-2 w-12 h-12 pointer-events-none">
                   <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                     <path d="M0,0 L40,0 Q40,40 0,40 Z" />
                     <path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
                   </svg>
                </div>
                <div className="absolute top-2 right-2 w-12 h-12 pointer-events-none transform rotate-90">
                   <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                     <path d="M0,0 L40,0 Q40,40 0,40 Z" />
                     <path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
                   </svg>
                </div>
                <div className="absolute bottom-2 left-2 w-12 h-12 pointer-events-none transform -rotate-90">
                   <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                     <path d="M0,0 L40,0 Q40,40 0,40 Z" />
                     <path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
                   </svg>
                </div>
                <div className="absolute bottom-2 right-2 w-12 h-12 pointer-events-none transform rotate-180">
                   <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 100 100" fill="currentColor">
                     <path d="M0,0 L40,0 Q40,40 0,40 Z" />
                     <path d="M10,10 L30,10 Q30,30 10,30 Z" fill="none" stroke="currentColor" strokeWidth="2" />
                   </svg>
                </div>

                <div className="relative z-10 flex flex-col items-center">
                  <svg className="w-10 h-10 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                  </svg>
                  <h3 className="font-serif text-2xl sm:text-[28px] text-[#bc9e65] tracking-widest uppercase mb-4 text-center">
                    Table Reservation
                  </h3>
                  
                  <div className="flex items-center gap-4 mb-8 w-full justify-center">
                     <div className="w-16 h-[1px] bg-[#bc9e65]" />
                     <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                       <path d="M12 2L15 8L22 9L17 14L18.5 21L12 17.5L5.5 21L7 14L2 9L9 8L12 2Z" />
                     </svg>
                     <div className="w-16 h-[1px] bg-[#bc9e65]" />
                  </div>

                  {reserved ? (
                    <div className="flex flex-col items-center justify-center py-12 text-center min-h-[350px]">
                      <svg className="w-16 h-16 text-[#bc9e65] mb-6" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
                      </svg>
                      <h4 className="font-serif text-[#bc9e65] tracking-widest uppercase text-xl mb-3">
                        Reservation Confirmed
                      </h4>
                      <div className="w-24 h-[1px] bg-[#bc9e65]/50 mb-5" />
                      <p className="font-sans text-[#e8dcb5] text-sm leading-relaxed max-w-[300px] mx-auto tracking-wider">
                        Dear {formData.name}, your table for <strong className="text-white">{formData.guests}</strong> on <strong className="text-white">{formData.date}</strong> at <strong className="text-white">{formData.time}</strong> in our <strong className="text-white">{formData.area}</strong> has been secured.
                      </p>
                      <p className="font-sans text-[#bc9e65] text-[10px] tracking-widest uppercase mt-6">
                        A verification parchment has been sent to your email.
                      </p>
                    </div>
                  ) : (
                    <form onSubmit={handleReserve} className="w-full space-y-5">
                      
                      {/* Personal Info Row */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <User strokeWidth={1.5} className="w-5 h-5" />
                          </div>
                          <input
                            type="text"
                            required
                            className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
                            placeholder="Full Name"
                            value={formData.name}
                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                          />
                        </div>
                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <Phone strokeWidth={1.5} className="w-5 h-5" />
                          </div>
                          <input
                            type="tel"
                            required
                            className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
                            placeholder="Phone Number"
                            value={formData.phone}
                            onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                          />
                        </div>
                      </div>

                      <div className="relative w-full">
                        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                          <Mail strokeWidth={1.5} className="w-5 h-5" />
                        </div>
                        <input
                          type="email"
                          required
                          className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
                          placeholder="Email Address"
                          value={formData.email}
                          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        />
                      </div>

                      {/* Booking Info Row 1 */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <Users strokeWidth={1.5} className="w-5 h-5" />
                          </div>
                          <select
                            className="w-full bg-[#0a2e1f] border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-10 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors cursor-pointer appearance-none"
                            value={formData.guests}
                            onChange={(e) => setFormData({ ...formData, guests: e.target.value })}
                          >
                            <option value="1 Guest">1 Guest</option>
                            <option value="2 Guests">2 Guests</option>
                            <option value="3 Guests">3 Guests</option>
                            <option value="4 Guests">4 Guests</option>
                            <option value="5 Guests">5 Guests</option>
                            <option value="6+ Guests">6+ Guests (Banquet)</option>
                          </select>
                          <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
                          </div>
                        </div>

                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <Calendar strokeWidth={1.5} className="w-5 h-5" />
                          </div>
                          <input
                            type="date"
                            required
                            className="w-full bg-[#0a2e1f] sm:bg-transparent border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors placeholder-[#bc9e65]/80"
                            value={formData.date}
                            onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                          />
                        </div>
                      </div>

                      {/* Booking Info Row 2 */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <Clock strokeWidth={1.5} className="w-5 h-5" />
                          </div>
                          <select
                            className="w-full bg-[#0a2e1f] border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-10 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors cursor-pointer appearance-none"
                            value={formData.time}
                            onChange={(e) => setFormData({ ...formData, time: e.target.value })}
                          >
                            <optgroup label="Lunch Service">
                              <option value="11:30 AM">11:30 AM</option>
                              <option value="12:00 PM">12:00 PM</option>
                              <option value="01:00 PM">01:00 PM</option>
                              <option value="02:00 PM">02:00 PM</option>
                            </optgroup>
                            <optgroup label="Dinner Service">
                              <option value="05:30 PM">05:30 PM</option>
                              <option value="06:00 PM">06:00 PM</option>
                              <option value="07:00 PM">07:00 PM</option>
                              <option value="08:00 PM">08:00 PM</option>
                              <option value="09:00 PM">09:00 PM</option>
                              <option value="10:00 PM">10:00 PM</option>
                            </optgroup>
                          </select>
                          <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
                          </div>
                        </div>

                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <MapPin strokeWidth={1.5} className="w-5 h-5" />
                          </div>
                          <select
                            className="w-full bg-[#0a2e1f] border border-[#bc9e65]/60 rounded-md py-3.5 pl-12 pr-10 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors cursor-pointer appearance-none"
                            value={formData.area}
                            onChange={(e) => setFormData({ ...formData, area: e.target.value })}
                          >
                            <option value="Heritage Dining Court">Heritage Court</option>
                            <option value="Banana Leaf Courtyard">Courtyard</option>
                            <option value="Royal Maharaja Chambers">Maharaja Chambers</option>
                          </select>
                          <div className="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /></svg>
                          </div>
                        </div>
                      </div>

                      <button
                        type="submit"
                        className="group relative flex items-center justify-center w-full py-4 mt-8 bg-gradient-to-r from-[#c5a975] via-[#d9b876] to-[#c5a975] hover:from-[#e8dcb5] hover:via-[#c5a975] hover:to-[#e8dcb5] text-[#1a3a25] font-serif tracking-widest uppercase transition-all duration-500 rounded shadow-[0_5px_15px_rgba(0,0,0,0.3)] overflow-hidden"
                      >
                        <div className="absolute inset-1 border border-[#1a3a25]/20 rounded-sm pointer-events-none" />
                        <span className="relative z-10 text-[13px] font-bold">Secure Royal Seat</span>
                        <svg className="relative z-10 w-4 h-4 ml-3 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
                      </button>

                    </form>
                  )}
                </div>
              </div>
            </AnimatedSection>
          </div>
        </div>

      </div>
    </SubpageLayout>
  );
}
