"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" bgImage="/images/inner-banner/5.webp" />

      {/* ── TOP SECTION: Sandstone bg — Info + Form ── */}
      <div className="relative w-full bg-[#fdfaf4] overflow-hidden">
        {/* Sandstone bg image with pots and diyas on the bottom corners */}
        <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 opacity-90 mix-blend-multiply"
          />
        </div>

        <div className="relative z-10 max-w-[1300px] mx-auto px-6 py-16 sm:py-24">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-stretch">

            {/* Left Column: Info */}
            <AnimatedSection variant="fadeLeft" delay={0.1}>
              <div className="select-text flex flex-col items-center lg:items-start text-center lg:text-left">
                <h2 className="font-serif text-4xl sm:text-5xl text-[#1a3a25] tracking-wider mb-2 uppercase">
                  Get In Touch
                </h2>

                <div className="flex items-center gap-3 mb-12 justify-center lg:justify-start w-full lg:w-auto">
                  <div className="w-16 h-px bg-[#bc9e65]" />
                  <svg className="w-3 h-3 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-px bg-[#bc9e65]" />
                </div>

                <div className="space-y-8 w-full max-w-md mx-auto lg:mx-0">

                  {/* Phone */}
                  <div className="flex items-center lg:items-start gap-6 group">
                    <div className="relative w-14 h-14 flex items-center justify-center shrink-0">
                      <svg className="absolute inset-0 w-full h-full text-[#0a2e1f]" viewBox="0 0 100 100">
                        <path d="M50 2 C60 2 62 10 70 12 C78 14 84 8 88 15 C92 22 86 28 88 36 C90 44 98 46 98 55 C98 64 90 66 88 74 C86 82 92 88 88 95 C84 102 78 96 70 98 C62 100 60 108 50 108 C40 108 38 100 30 98 C22 96 16 102 12 95 C8 88 14 82 12 74 C10 66 2 64 2 55 C2 46 10 44 12 36 C14 28 8 22 12 15 C16 8 22 14 30 12 C38 10 40 2 50 2 Z" fill="currentColor" stroke="#bc9e65" strokeWidth="3" />
                      </svg>
                      <Phone strokeWidth={1.5} className="w-6 h-6 text-[#bc9e65] relative z-10" />
                    </div>
                    <div className="pt-1 text-left">
                      <h4 className="font-serif text-[#1a3a25] text-lg tracking-wide uppercase mb-1">Phone</h4>
                      <p className="font-sans text-[#4a3c28] text-sm tracking-wide">+1 519-888-7459</p>
                    </div>
                  </div>

                  <div className="w-full h-px bg-gradient-to-r from-transparent via-[#bc9e65]/50 to-transparent lg:hidden" />
                  <div className="w-48 h-px bg-gradient-to-r from-[#bc9e65]/50 to-transparent hidden lg:block" />

                  {/* Email */}
                  <div className="flex items-center lg:items-start gap-6 group">
                    <div className="relative w-14 h-14 flex items-center justify-center shrink-0">
                      <svg className="absolute inset-0 w-full h-full text-[#0a2e1f]" viewBox="0 0 100 100">
                        <path d="M50 2 C60 2 62 10 70 12 C78 14 84 8 88 15 C92 22 86 28 88 36 C90 44 98 46 98 55 C98 64 90 66 88 74 C86 82 92 88 88 95 C84 102 78 96 70 98 C62 100 60 108 50 108 C40 108 38 100 30 98 C22 96 16 102 12 95 C8 88 14 82 12 74 C10 66 2 64 2 55 C2 46 10 44 12 36 C14 28 8 22 12 15 C16 8 22 14 30 12 C38 10 40 2 50 2 Z" fill="currentColor" stroke="#bc9e65" strokeWidth="3" />
                      </svg>
                      <Mail strokeWidth={1.5} className="w-6 h-6 text-[#bc9e65] relative z-10" />
                    </div>
                    <div className="pt-1 text-left flex-1 min-w-0">
                      <h4 className="font-serif text-[#1a3a25] text-lg tracking-wide uppercase mb-1">Email</h4>
                      <p className="font-sans text-[#4a3c28] text-sm tracking-wide break-all">mydosaplacewaterloo@gmail.com</p>
                    </div>
                  </div>

                  <div className="w-full h-px bg-gradient-to-r from-transparent via-[#bc9e65]/50 to-transparent lg:hidden" />
                  <div className="w-48 h-px bg-gradient-to-r from-[#bc9e65]/50 to-transparent hidden lg:block" />

                  {/* Location */}
                  <div className="flex items-center lg:items-start gap-6 group">
                    <div className="relative w-14 h-14 flex items-center justify-center shrink-0">
                      <svg className="absolute inset-0 w-full h-full text-[#0a2e1f]" viewBox="0 0 100 100">
                        <path d="M50 2 C60 2 62 10 70 12 C78 14 84 8 88 15 C92 22 86 28 88 36 C90 44 98 46 98 55 C98 64 90 66 88 74 C86 82 92 88 88 95 C84 102 78 96 70 98 C62 100 60 108 50 108 C40 108 38 100 30 98 C22 96 16 102 12 95 C8 88 14 82 12 74 C10 66 2 64 2 55 C2 46 10 44 12 36 C14 28 8 22 12 15 C16 8 22 14 30 12 C38 10 40 2 50 2 Z" fill="currentColor" stroke="#bc9e65" strokeWidth="3" />
                      </svg>
                      <MapPin strokeWidth={1.5} className="w-6 h-6 text-[#bc9e65] relative z-10" />
                    </div>
                    <div className="pt-1 text-left">
                      <h4 className="font-serif text-[#1a3a25] text-lg tracking-wide uppercase mb-1">Location</h4>
                      <p className="font-sans text-[#4a3c28] text-sm tracking-wide leading-relaxed">
                        922 Erb St. W Unit C3#3, Waterloo,<br /> ON N2T 0C9,
                        Canada
                      </p>
                    </div>
                  </div>

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

            {/* Right Column: Form — Dark green theme card */}
            <AnimatedSection variant="fadeRight" delay={0.2}>
              <div className="relative p-8 sm:p-12 overflow-hidden">
                {/* Background Image */}
                <div className="absolute inset-0 z-0 pointer-events-none select-none">
                  <Image
                    src="/images/contact/contact.webp"
                    alt=""
                    fill
                    className="object-cover object-center"
                  />
                </div>
                {/* Ornate Gold Border inside */}
                {/* <div className="absolute inset-2 border-[1.5px] border-[#bc9e65] rounded-lg pointer-events-none" />

                <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="absolute bottom-16 left-1/2 -translate-x-1/2 w-64 h-40 overflow-hidden pointer-events-none opacity-5">
                  <svg viewBox="0 0 100 50" fill="currentColor" className="w-full h-full text-[#bc9e65]">
                    <path d="M50 50 C50 20 20 0 0 0 L100 0 C80 0 50 20 50 50 Z" />
                    <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="2" />
                    <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="2" />
                    <circle cx="50" cy="50" r="20" 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">
                    Send Us A Message
                  </h3>

                  <div className="flex items-center gap-4 mb-10 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>

                  {submitted ? (
                    <div className="flex flex-col items-center justify-center py-12 text-center min-h-[300px]">
                      <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-[#bc9e65] tracking-widest uppercase text-lg mb-2">Message Sent</h4>
                      <p className="font-sans text-[#e8dcb5] 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="w-full space-y-6">
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                          </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="Your 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]">
                            <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="Your Email"
                            value={formData.email}
                            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                          />
                        </div>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <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"
                            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 className="relative w-full">
                          <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-[#bc9e65]">
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
                          </div>
                          <input
                            type="text"
                            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="Subject"
                            value={formData.subject}
                            onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                          />
                        </div>
                      </div>

                      <div className="relative w-full">
                        <div className="absolute top-4 left-0 pl-4 flex items-start pointer-events-none text-[#bc9e65]">
                          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></svg>
                        </div>
                        <textarea
                          rows={4}
                          required
                          className="w-full bg-transparent border border-[#bc9e65]/60 rounded-md py-4 pl-12 pr-4 text-sm font-sans text-white focus:outline-none focus:border-[#bc9e65] transition-colors resize-none placeholder-[#bc9e65]/80"
                          placeholder="Your Message"
                          value={formData.msg}
                          onChange={(e) => setFormData({ ...formData, msg: e.target.value })}
                        />
                      </div>

                      <button
                        type="submit"
                        className="group relative flex items-center justify-center w-full py-4 mt-6 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"
                      >
                        {/* Inner border line on button */}
                        <div className="absolute inset-1 border border-[#1a3a25]/20 rounded-sm pointer-events-none" />
                        <span className="relative z-10 text-sm font-bold">Send Message</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>

        {/* ── OPENING HOURS + MAP ROW ── */}
        <AnimatedSection variant="fadeUp" delay={0.1}>
          <div className="relative max-w-7xl mx-auto w-[calc(100%-3rem)] bg-[#0a2e1f] border border-[#bc9e65]/20 rounded-2xl mb-16 overflow-hidden shadow-2xl">
            <div className="absolute inset-0 pointer-events-none select-none opacity-20">
              <Image
                src="/images/footer_bg.png"
                alt="Background"
                fill
                className="object-cover object-center"
              />
            </div>
            <div className="relative z-10 px-6 py-16 grid grid-cols-1 lg:grid-cols-2 gap-0">

              {/* Opening Hours Panel */}
              <div className="flex flex-col justify-center px-0 lg:pr-16 pb-12 lg:pb-0 border-b lg:border-b-0 lg:border-r border-[#bc9e65]/20">
                <div className="flex items-center gap-4 mb-8">
                  <div className="w-10 h-10 rounded-full bg-[#bc9e65]/10 border border-[#bc9e65]/40 flex items-center justify-center shrink-0">
                    <Clock strokeWidth={1.5} className="w-5 h-5 text-[#bc9e65]" />
                  </div>
                  <div>
                    <p className="font-sans text-[11px] tracking-[0.3em] text-[#bc9e65]/70 uppercase font-bold mb-0.5">We are open</p>
                    <h3 className="font-serif text-2xl text-white tracking-wide">Opening Hours</h3>
                  </div>
                </div>
                <div className="space-y-1">
                  {[
                    { day: 'Friday', time: '5:00 – 10:00 pm' },
                    { day: 'Saturday', time: '12:00 – 10:00 pm' },
                    { day: 'Sunday', time: '12:00 – 9:00 pm' },
                    { day: 'Monday', time: '4:00 – 10:00 pm' },
                    { day: 'Tuesday', time: 'Closed', closed: true },
                    { day: 'Wednesday', time: '4:30 – 10:00 pm' },
                    { day: 'Thursday', time: '4:00 – 10:00 pm' },
                  ].map(({ day, time, closed }) => (
                    <div key={day} className="flex items-center justify-between py-2.5 border-b border-[#bc9e65]/10 last:border-0">
                      <span className="font-sans text-sm font-semibold text-[#e8dcb5] tracking-wide">{day}</span>
                      <span className={`font-sans text-sm tracking-wide ${closed ? 'text-red-400 font-bold' : 'text-[#bc9e65]'}`}>{time}</span>
                    </div>
                  ))}
                </div>
              </div>

              {/* Map Panel */}
              <div className="flex flex-col justify-center pt-12 lg:pt-0 lg:pl-16">
                <div className="flex items-center gap-4 mb-8">
                  <div className="w-10 h-10 rounded-full bg-[#bc9e65]/10 border border-[#bc9e65]/40 flex items-center justify-center shrink-0">
                    <MapPin strokeWidth={1.5} className="w-5 h-5 text-[#bc9e65]" />
                  </div>
                  <div>
                    <p className="font-sans text-[11px] tracking-[0.3em] text-[#bc9e65]/70 uppercase font-bold mb-0.5">Find us at</p>
                    <h3 className="font-serif text-2xl text-white tracking-wide">Our Location</h3>
                  </div>
                </div>
                <div className="rounded-xl overflow-hidden border border-[#bc9e65]/30 shadow-2xl" style={{ height: '280px' }}>
                  <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 }}
                    allowFullScreen
                    loading="lazy"
                    referrerPolicy="no-referrer-when-downgrade"
                    title="My Dosa Place on Google Maps"
                  />
                </div>
              </div>

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

      {/* ── MAP SECTION (commented) ── */}
      {/* <div className="relative w-full">
        <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>

    
            <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>
  );
}