"use client";

import { useState } from "react";
import Image from "next/image";
import { Phone, Mail, MapPin, Clock, UtensilsCrossed, ShoppingBag, Truck, ChefHat } from "lucide-react";
import SubpageLayout from "@/components/SubpageLayout";
import InnerBanner from "@/components/InnerBanner";
import AnimatedSection from "@/components/AnimatedSection";

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: "", phone: "", subject: "", 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: "", phone: "", subject: "", msg: "" });
      }, 5000);
    }
  };

  return (
    <SubpageLayout>

      {/* ── Inner Banner ── */}
      <InnerBanner pageName="Contact" />

      {/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
      <div className="relative w-full">
        {/* Sandstone bg image */}
        <div className="absolute inset-0 z-0 pointer-events-none select-none">
          <Image
            src="/images/story_bg.png"
            alt="Background"
            fill
            priority
            className="object-cover object-center"
          />
        </div>

        <div className="relative z-10 max-w-6xl mx-auto px-6 py-16">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-start">

            {/* Left Column: Info */}
            <AnimatedSection variant="fadeLeft" delay={0.1}>
            <div className="select-text pt-4">
              <h2 className="font-serif text-3xl sm:text-4xl text-[#1a3a25] tracking-wider mb-10">
                Get in Touch
              </h2>

              <div className="space-y-8">
                {/* Phone */}
                <div className="flex items-start gap-5 group">
                  <div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
                    <Phone strokeWidth={1.5} className="w-5 h-5" />
                  </div>
                  <div className="pt-1">
                    <h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Phone</h4>
                    <p className="font-sans text-[#3a2e1e] text-sm tracking-wider">+1 (519) 888-7459</p>
                  </div>
                </div>

                {/* Email */}
                <div className="flex items-start gap-5 group">
                  <div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
                    <Mail strokeWidth={1.5} className="w-5 h-5" />
                  </div>
                  <div className="pt-1">
                    <h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Email</h4>
                    <p className="font-sans text-[#3a2e1e] text-sm tracking-wider">mydosaplacewaterloo@gmail.com</p>
                  </div>
                </div>

                {/* Location */}
                <div className="flex items-start gap-5 group">
                  <div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
                    <MapPin strokeWidth={1.5} className="w-5 h-5" />
                  </div>
                  <div className="pt-1">
                    <h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Location</h4>
                    <p className="font-sans text-[#3a2e1e] text-sm tracking-wider leading-relaxed uppercase">
                      922 Erb St. W Unit C3#3,<br />
                      Waterloo, ON N2T 0C9,<br />
                      Canada
                    </p>
                  </div>
                </div>

                {/* Opening Hours */}
                <div className="flex items-start gap-5 group">
                  <div className="w-12 h-12 rounded-full bg-[#0c2419]/10 border border-[#0c2419]/30 flex items-center justify-center text-[#1a3a25] group-hover:bg-[#0c2419] group-hover:text-[#bc9e65] transition-colors duration-300 shadow-sm shrink-0">
                    <Clock strokeWidth={1.5} className="w-5 h-5" />
                  </div>
                  <div className="pt-1">
                    <h4 className="font-serif text-[#1a3a25] text-base tracking-wide font-medium mb-1">Opening Hours</h4>
                    <p className="font-sans text-[#3a2e1e] text-sm tracking-wider leading-relaxed">
                      Mon - Thu: 4pm–10pm<br />
                      Fri - Sun: 11am–10pm
                    </p>
                  </div>
                </div>
              </div>
            </div>
            </AnimatedSection>

            {/* Right Column: Form — Dark green theme card */}
            <AnimatedSection variant="fadeRight" delay={0.2}>
            <div className="relative bg-gradient-to-br from-[#0c2419]/95 via-[#06120c]/98 to-[#040b07] border border-[#bc9e65]/40 p-8 sm:p-10 group overflow-visible shadow-2xl">
              <div className="absolute inset-1.5 border border-[#bc9e65]/15 pointer-events-none" />
              <CornerOrnaments />

              <div className="relative z-10">
                <h3 className="font-serif text-2xl text-[#bc9e65] mb-8">Send Us a Message</h3>

                {submitted ? (
                  <div className="flex flex-col items-center justify-center py-12 text-center animate-pulse min-h-[350px]">
                    <svg className="w-12 h-12 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-base mb-2">MESSAGE SENT</h4>
                    <p className="font-sans text-stone-300 text-sm leading-relaxed max-w-[280px] mx-auto tracking-wider">
                      Thank you for contacting us. We will get back to you shortly.
                    </p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <input
                        type="text"
                        required
                        className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
                        placeholder="Your Name"
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      />
                      <input
                        type="email"
                        required
                        className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
                        placeholder="Your Email"
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      />
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <input
                        type="tel"
                        className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
                        placeholder="Phone Number"
                        value={formData.phone}
                        onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                      />
                      <input
                        type="text"
                        className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none placeholder-stone-500"
                        placeholder="Subject"
                        value={formData.subject}
                        onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      />
                    </div>

                    <textarea
                      rows={5}
                      required
                      className="w-full bg-transparent border border-[#bc9e65]/30 p-3 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors rounded-none resize-none placeholder-stone-500"
                      placeholder="Your Message"
                      value={formData.msg}
                      onChange={(e) => setFormData({ ...formData, msg: e.target.value })}
                    />

                    <button
                      type="submit"
                      className="clickable w-full py-3.5 bg-gradient-to-r from-[#bc9e65] to-[#d4b872] hover:from-[#c5a975] hover:to-[#dfc585] text-[#06120c] font-sans font-bold text-sm tracking-wider transition-all duration-300 shadow-md rounded-sm mt-1"
                    >
                      Send Message
                    </button>
                  </form>
                )}
              </div>
            </div>
            </AnimatedSection>

          </div>
        </div>
      </div>

      {/* ── MAP SECTION: Sandstone bg ── */}
      <div className="relative w-full">
        {/* Sandstone bg image */}
        <div className="absolute inset-0 z-0 pointer-events-none select-none">
          <Image
            src="/images/story_bg.png"
            alt="Background"
            fill
            className="object-cover object-center"
          />
        </div>

        <div className="relative z-10 px-6 py-20">
          <AnimatedSection variant="scaleUp" delay={0}>
          <div className="relative w-full h-[400px] border border-[#bc9e65]/40 shadow-2xl overflow-hidden group rounded-sm max-w-6xl mx-auto">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2387.597603633402!2d-80.5796577!3d43.4438744!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882bf755b6dfbef5%3A0x21184d424ab8bf6f!2sMy%20Dosa%20Place%20(%20South%20Indian%20Pure%20VEG)!5e1!3m2!1sen!2sin!4v1784207213128!5m2!1sen!2sin"
              width="100%"
              height="100%"
              style={{ border: 0, filter: "grayscale(40%) sepia(10%) opacity(0.85)" }}
              allowFullScreen={false}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="absolute inset-0 transition-all duration-700 group-hover:filter-none group-hover:opacity-100"
            ></iframe>

            {/* Floating info card */}
            <div className="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
              <div className="bg-[#0c2419] border border-[#bc9e65]/40 p-6 sm:p-8 shadow-2xl max-w-xs w-full pointer-events-auto rounded-sm">
                <h3 className="font-serif text-white text-xl mb-3 tracking-wide">My Dosa Place</h3>
                <p className="font-sans text-stone-300 text-sm leading-relaxed tracking-wider mb-5 uppercase">
                  922 Erb Street West,<br />
                  Waterloo, ON N2T 0C9
                </p>
                <a
                  href="https://www.google.com/maps?gs_lcrp=EgZjaHJvbWUqBwgAEAAYgAQyBwgAEAAYgAQyDAgBEC4YJxivARjHATIGCAIQRRg5MgcIAxAAGIAEMgcIBBAAGIAEMgYIBRBFGDwyBggGEEUYPDIGCAcQRRg90gEIMzc1MGowajeoAgCwAgA&um=1&ie=UTF-8&fb=1&gl=in&sa=X&geocode=KfW-37ZV9yuIMW-_uEpCTRgh&daddr=922+Erb+St.+W+Unit+C3%233,+Waterloo,+ON+N2T+0C9,+Canada"
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-2 text-[#bc9e65] hover:text-white font-sans text-xs tracking-widest uppercase transition-colors group/link"
                >
                  Get Directions
                  <span className="transform group-hover/link:translate-x-1 transition-transform">→</span>
                </a>
              </div>
            </div>
          </div>
          </AnimatedSection>
        </div>
      </div>

      {/* ── BOTTOM FEATURES: Full-width dark green ── */}
      {/* <div className="relative max-w-7xl mx-auto w-[calc(100%-3rem)] bg-[#061810] rounded-2xl mb-16 border border-[#bc9e65]/30 overflow-hidden shadow-2xl">
        <div className="absolute inset-0 pointer-events-none select-none opacity-60">
          <Image
            src="/images/footer_bg.png"
            alt=""
            fill
            className="object-cover object-center"
          />
        </div>
        <div className="relative z-10 max-w-6xl mx-auto px-6 py-10">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div className="flex flex-col items-center text-center px-4 group">
              <div className="w-14 h-14 mb-4 text-[#bc9e65] group-hover:scale-110 transition-transform duration-300">
                <UtensilsCrossed strokeWidth={1} className="w-full h-full" />
              </div>
              <h4 className="font-serif text-white text-lg mb-2">Dine In</h4>
              <p className="font-sans text-stone-400 text-xs tracking-wider">A warm and cozy experience</p>
            </div>

            <div className="flex flex-col items-center text-center px-4 group">
              <div className="w-14 h-14 mb-4 text-[#bc9e65] group-hover:scale-110 transition-transform duration-300">
                <ShoppingBag strokeWidth={1} className="w-full h-full" />
              </div>
              <h4 className="font-serif text-white text-lg mb-2">Takeaway</h4>
              <p className="font-sans text-stone-400 text-xs tracking-wider">Fast &amp; convenient pick-up</p>
            </div>

            <div className="flex flex-col items-center text-center px-4 group">
              <div className="w-14 h-14 mb-4 text-[#bc9e65] group-hover:scale-110 transition-transform duration-300">
                <Truck strokeWidth={1} className="w-full h-full" />
              </div>
              <h4 className="font-serif text-white text-lg mb-2">Delivery</h4>
              <p className="font-sans text-stone-400 text-xs tracking-wider">Bringing flavor to your door</p>
            </div>

            <div className="flex flex-col items-center text-center px-4 group">
              <div className="w-14 h-14 mb-4 text-[#bc9e65] group-hover:scale-110 transition-transform duration-300">
                <ChefHat strokeWidth={1} className="w-full h-full" />
              </div>
              <h4 className="font-serif text-white text-lg mb-2">Catering</h4>
              <p className="font-sans text-stone-400 text-xs tracking-wider">Perfect for your special events</p>
            </div>
          </div>
        </div>
      </div> */}

    </SubpageLayout>
  );
}
