"use client";

import { useState } from "react";
import Image from "next/image";
import SubpageLayout from "@/components/SubpageLayout";

const CornerOrnaments = () => (
  <>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 left-2.5 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 right-2.5 rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 left-2.5 -rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 right-2.5 rotate-180 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
  </>
);

export default function ContactPage() {
  const [formData, setFormData] = useState({ name: "", email: "", msg: "" });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (formData.name && formData.email && formData.msg) {
      setSubmitted(true);
      setTimeout(() => {
        setSubmitted(false);
        setFormData({ name: "", email: "", msg: "" });
      }, 5000);
    }
  };

  return (
    <SubpageLayout>
      <div className="absolute inset-0 z-0 pointer-events-none select-none opacity-40">
        <Image
          src="/images/category_bg.jpg"
          alt="Backdrop"
          fill
          priority
          className="object-cover object-center"
        />
      </div>

      <div className="max-w-5xl mx-auto px-6 py-12 relative z-10">
        
        {/* Header */}
        <div className="text-center pb-12 max-w-2xl mx-auto select-text">
          <div className="flex items-center gap-3 justify-center mb-2">
            <span className="text-[#bc9e65] text-xs">❧</span>
            <span className="font-sans text-[10px] tracking-[0.3em] text-[#bc9e65] font-extrabold uppercase">
              GET IN TOUCH
            </span>
            <span className="text-[#bc9e65] text-xs">❧</span>
          </div>
          <h1 className="font-serif text-3xl sm:text-4xl lg:text-[42px] font-bold text-white tracking-wider leading-tight uppercase">
            Connect With <span className="text-[#bc9e65]">Us</span>
          </h1>
          <div className="w-24 h-[1px] bg-gradient-to-r from-transparent via-[#bc9e65] to-transparent mx-auto mt-4" />
        </div>

        {/* 2-Column Info & Form */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch mt-4">
          
          {/* Column 1: Info */}
          <div className="relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-8 flex flex-col justify-between group overflow-visible shadow-2xl">
            <div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
            <CornerOrnaments />

            <div className="select-text relative z-10">
              <h3 className="font-serif text-lg font-bold text-white tracking-wider uppercase mb-4">
                THE DINING COURT
              </h3>
              
              <div className="space-y-6">
                <div>
                  <h4 className="font-sans text-[10px] sm:text-[11px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1">
                    OUR HAVEN
                  </h4>
                  <p className="font-sans text-stone-300 text-xs leading-relaxed tracking-wider">
                    123 Erb Street West,<br />
                    Waterloo, ON N2L 1T4
                  </p>
                </div>

                <div>
                  <h4 className="font-sans text-[10px] sm:text-[11px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1">
                    HEAR OUR VOICE
                  </h4>
                  <p className="font-sans text-stone-300 text-xs leading-relaxed tracking-wider">
                    Direct Line: (519) 555-0199<br />
                    Royal Inquiries: concierge@mydosaplace.ca
                  </p>
                </div>

                <div>
                  <h4 className="font-sans text-[10px] sm:text-[11px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1">
                    TIMINGS OF THE COURT
                  </h4>
                  <p className="font-sans text-stone-300 text-xs leading-relaxed tracking-wider">
                    Lunch Service: 11:30 AM – 3:00 PM<br />
                    Dinner Service: 5:30 PM – 10:30 PM<br />
                    <span className="text-[#bc9e65] font-semibold mt-1 block">Closed on Tuesdays for spice curing.</span>
                  </p>
                </div>
              </div>
            </div>

            {/* Banner bottom */}
            <div className="border-t border-[#bc9e65]/20 pt-6 mt-8 relative z-10">
              <span className="font-serif text-[10px] tracking-[0.2em] text-[#bc9e65]/80 uppercase block text-center">
                ❧ HOSPITALITY SERVED WITH SOUL ☙
              </span>
            </div>
          </div>

          {/* Column 2: Form */}
          <div className="relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-8 group overflow-visible shadow-2xl">
            <div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
            <CornerOrnaments />

            <div className="relative z-10 h-full flex flex-col justify-between">
              <div>
                <h3 className="font-serif text-lg font-bold text-white tracking-wider uppercase mb-5">
                  WRITE A NOTE
                </h3>

                {submitted ? (
                  <div className="flex flex-col items-center justify-center py-10 text-center animate-pulse">
                    <svg className="w-10 h-10 text-[#bc9e65] mb-4" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
                    </svg>
                    <h4 className="font-serif text-white tracking-wider uppercase text-sm mb-2">
                      INQUIRY SENT
                    </h4>
                    <p className="font-sans text-stone-300 text-[11px] leading-relaxed max-w-[260px] mx-auto tracking-wider">
                      Thank you for contacting the court. Our hospitality concierge will respond within a single sun cycle.
                    </p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                      <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1">
                        YOUR NAME
                      </label>
                      <input
                        type="text"
                        required
                        className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-600"
                        placeholder="Enter your name"
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      />
                    </div>

                    <div>
                      <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1">
                        EMAIL ADRESS
                      </label>
                      <input
                        type="email"
                        required
                        className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-600"
                        placeholder="concierge@example.com"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      />
                    </div>

                    <div>
                      <label className="block font-sans text-[9px] tracking-widest text-[#bc9e65] uppercase font-bold mb-1">
                        MESSAGE TO THE COURT
                      </label>
                      <textarea
                        rows={4}
                        required
                        className="w-full bg-[#06120c]/60 border border-[#bc9e65]/35 p-2 text-xs font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none resize-none placeholder-stone-600"
                        placeholder="Tell us what's on your mind..."
                        value={formData.msg}
                        onChange={(e) => setFormData({ ...formData, msg: e.target.value })}
                      />
                    </div>

                    <button
                      type="submit"
                      className="clickable w-full py-2.5 border border-[#bc9e65]/50 hover:border-[#bc9e65] bg-transparent text-[#bc9e65] hover:bg-[#bc9e65] hover:text-[#06120c] font-sans font-bold text-[9px] tracking-widest uppercase transition-all duration-300 shadow-md"
                    >
                      SEND INQUIRY
                    </button>
                  </form>
                )}
              </div>
            </div>
          </div>

        </div>

      </div>
    </SubpageLayout>
  );
}
