"use client";

import { useState } from "react";
import Image from "next/image";
import { Instagram, Facebook, Mail, Phone, MapPin, Send } from "lucide-react";

export default function Footer() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    setSubscribed(true);
    setEmail("");
  };

  return (
    <footer id="footer" className="relative w-full py-16 overflow-hidden z-20">

      {/* Consolidated Mockup Background Layer */}
      <div className="absolute inset-0 z-0 pointer-events-none select-none">
        <Image
          src="/images/home/footer/footer-bg.webp"
          alt="Footer Backdrop"
          fill
          priority
          className="object-cover object-center"
        />
      </div>

      {/* Frame Container enclosing footer - content floats within the baked border box */}
      <div className="max-w-7xl w-full mx-auto px-6 relative z-10 flex flex-col h-full">

        {/* Column Grid layout */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 md:gap-8 pb-8 border-b border-[#bc9e65]/35">

          {/* Column 1: Brand & Bio (col-span 3) */}
          <div className="lg:col-span-3 flex flex-col gap-5">
            <div className="flex flex-col items-start select-text">
              {/* Brand Logo */}
              <Image
                src="/images/logo.png"
                alt="My Dosa Place"
                width={200}
                height={80}
                className="w-40 sm:w-48 h-auto mb-2 pointer-events-none select-none"
              />

              {/* Traditional Gold Leaf Separator */}
              <div className="flex items-center gap-2 w-28 mb-3 pointer-events-none select-none">
                <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
                <svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                  <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                </svg>
                <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
              </div>
            </div>

            <div className="flex items-start gap-2.5 max-w-sm text-left">
              <span className="text-[#bc9e65] text-xl font-bold leading-none mt-0.5 pointer-events-none select-none">•</span>
              <p className="font-sans text-sm text-stone-300 leading-relaxed tracking-wider select-text">
                Waterloo's premier 100% pure vegetarian restaurant, serving authentic dosa in Waterloo. Enjoy crispy ghee roast dosa, lentil sambar, and home-ground chutneys  made fresh daily using time-honoured recipes.
              </p>
            </div>

            {/* Circular outline social links */}
            <div className="flex gap-4 items-center mt-2">
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] transition-all duration-300"
              >
                <Instagram size={13} />
              </a>
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] transition-all duration-300"
              >
                <Facebook size={13} />
              </a>
              <a
                href="#"
                target="_blank"
                rel="noopener noreferrer"
                className="clickable w-8 h-8 rounded-full border border-[#bc9e65]/30 flex items-center justify-center text-[#bc9e65] hover:text-white hover:border-[#bc9e65] font-sans font-bold text-sm transition-all duration-300"
              >
                G
              </a>
            </div>
          </div>

          {/* Column 2: Quick Links (col-span 2) */}
          <div className="lg:col-span-2 flex flex-col gap-4 text-left">
            <div className="flex flex-col items-start select-text">
              <svg className="w-6 h-6 text-[#bc9e65] mb-2.5 pointer-events-none select-none" 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>
              <h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
                Quick Links
              </h4>
              {/* Separator */}
              <div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
                <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
                <svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                  <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                </svg>
                <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
              </div>
            </div>

            <ul className="flex flex-col gap-3 font-sans text-sm text-stone-300 tracking-wider">
              <li>
                <a href="#story" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
                  Our Story
                </a>
              </li>
              <li>
                <a href="#menu" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
                  Feast Menu
                </a>
              </li>
              <li>
                <a href="#chef" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
                  Our Chef
                </a>
              </li>
              <li>
                <a href="#events" className="clickable hover:text-[#bc9e65] transition-colors duration-300">
                  Royal Events
                </a>
              </li>
            </ul>
          </div>

          {/* Column 3: Feast Sessions (col-span 4, bordered vertically on desktop) */}
          <div className="lg:col-span-4 flex flex-col gap-4 text-left border-l-0 border-r-0 lg:border-l lg:border-r border-[#bc9e65]/20 lg:px-6">
            <div className="flex flex-col items-start select-text">
              <svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" 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>
              <h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
                Feast Sessions
              </h4>
              {/* Separator */}
              <div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
                <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
                <svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                  <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                </svg>
                <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
              </div>
            </div>

            <div className="flex flex-col gap-2 font-sans text-sm text-stone-300 tracking-wider">
              {/* Friday */}
              <div className="flex justify-between items-center select-text">
                <span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Friday</span>
                <span>5–10 pm</span>
              </div>
              {/* Saturday */}
              <div className="flex justify-between items-center select-text">
                <span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Saturday</span>
                <span>12–10 pm</span>
              </div>
              {/* Sunday */}
              <div className="flex justify-between items-center select-text">
                <span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Sunday</span>
                <span>12–9 pm</span>
              </div>
              {/* Monday */}
              <div className="flex justify-between items-center select-text">
                <span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Monday</span>
                <span>4–10 pm</span>
              </div>

              <div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />

              {/* Tuesday – Closed */}
              <div className="flex justify-between items-center select-text">
                <span className="text-white font-semibold uppercase tracking-widest">Tuesday</span>
                <span className="text-stone-400">Closed</span>
              </div>

              <div className="border-t border-dashed border-[#bc9e65]/20 my-1 w-full" />

              {/* Wednesday */}
              <div className="flex justify-between items-center select-text">
                <span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Wednesday</span>
                <span>4:30–10 pm</span>
              </div>
              {/* Thursday */}
              <div className="flex justify-between items-center select-text">
                <span className="text-[#bc9e65] font-semibold uppercase tracking-widest">Thursday</span>
                <span>4–10 pm</span>
              </div>
            </div>
          </div>

          {/* Column 4: The Dining Court (col-span 3, no borders) */}
          <div className="lg:col-span-3 flex flex-col gap-4 text-left">
            <div className="flex flex-col items-start select-text">
              <svg className="w-6 h-6 text-[#bc9e65] mb-2 pointer-events-none select-none" 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>
              <h4 className="font-serif font-bold text-[#bc9e65] text-sm sm:text-lg tracking-[0.25em] uppercase mb-1">
                The Dining Court
              </h4>
              {/* Separator */}
              <div className="flex items-center gap-2 w-28 mb-2 pointer-events-none select-none">
                <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
                <svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                  <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                </svg>
                <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
              </div>
            </div>

            <div className="flex flex-col gap-4 font-sans text-sm text-stone-300 tracking-wider">
              {/* Address */}
              <div className="flex items-start gap-3">
                <div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0 mt-0.5">
                  <MapPin size={13} />
                </div>
                <span className="select-text max-w-[195px]">922 Erb St. W Unit C3#3, Waterloo, ON N2T 0C9, Canada</span>
              </div>
              {/* Phone */}
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
                  <Phone size={13} />
                </div>
                <span className="select-text">+1 519-888-7459</span>
              </div>
              {/* Email */}
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-full border border-[#bc9e65]/35 flex items-center justify-center text-[#bc9e65] flex-shrink-0">
                  <Mail size={13} />
                </div>
                <span className="select-text">mydosaplacewaterloo@gmail.com</span>
              </div>
            </div>
          </div>

        </div>

        {/* Footer Bottom copyright & credits bar */}
        <div className="pt-6 mt-8 flex flex-col items-center justify-center text-center gap-2 text-stone-300 font-sans text-xs tracking-[0.2em] uppercase select-text relative z-10">
          <p>
            © 2026 My Dosa Place. All rights reserved. | Powered by <a href="https://metatroncubesolutions.com/" target="_blank" rel="noopener noreferrer" className="hover:text-[#bc9e65] transition-colors">Metatroncube</a>
          </p>
        </div>

      </div>
    </footer>
  );
}
