"use client";

import { useState } from "react";
import { Instagram, Facebook, Mail, Phone, MapPin, Send, Compass } 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 className="relative bg-darkbg border-t-2 border-gold-dark/30 pt-16 pb-8 px-6 md:px-12 overflow-hidden">
      
      {/* Traditional Toran Hanging Garland at the very top of footer */}
      <div className="absolute top-0 inset-x-0 h-8 bg-repeat-x bg-[length:80px_auto] bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2224%22 viewBox=%220 0 80 24%22><path d=%22M0,0 Q20,20 40,0 Q60,20 80,0 M40,0 L40,15 M80,0 L80,15 M0,0 L0,15%22 fill=%22none%22 stroke=%22%23AA7C11%22 stroke-width=%221.5%22/><circle cx=%2240%22 cy=%2215%22 r=%223.5%22 fill=%22%23D4AF37%22/><circle cx=%220%22 cy=%2215%22 r=%223.5%22 fill=%22%23D4AF37%22/><circle cx=%2280%22 cy=%2215%22 r=%223.5%22 fill=%22%23D4AF37%22/></svg>')] bg-top pointer-events-none opacity-40" />

      {/* Floating Diyas (Lamps) floating gently */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {/* Diya 1 */}
        <div className="absolute bottom-16 left-[8%] w-10 h-6 bg-brass rounded-b-full border-t border-gold flex justify-center items-start shadow-lg opacity-35 animate-[float-diya_8s_infinite_ease-in-out_alternate]">
          <div className="w-2.5 h-5 bg-gradient-to-t from-orange to-gold-light rounded-full absolute -top-4 left-1/2 -translate-x-1/2 diya-flame" />
        </div>
        
        {/* Diya 2 */}
        <div className="absolute bottom-24 right-[12%] w-8 h-5 bg-brass rounded-b-full border-t border-gold flex justify-center items-start shadow-lg opacity-30 animate-[float-diya_10s_infinite_ease-in-out_alternate-reverse]">
          <div className="w-2 h-4 bg-gradient-to-t from-orange to-gold-light rounded-full absolute -top-3 left-1/2 -translate-x-1/2 diya-flame" />
        </div>
      </div>

      <div className="container max-w-6xl mx-auto relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 mb-12">
        
        {/* Col 1: Brand & Bio */}
        <div className="lg:col-span-4 flex flex-col gap-5">
          <div className="flex flex-col">
            <span className="font-serif text-gold text-base tracking-[0.3em] uppercase text-glow">MY DOSA</span>
            <span className="font-serif text-gold-light text-xl tracking-[0.5em] uppercase text-glow">PLACE</span>
            <div className="w-20 h-[1px] bg-gold/30 mt-2" />
          </div>
          
          <p className="font-sans text-xs text-stone-400 leading-relaxed tracking-wider max-w-sm">
            Waterloo's premier destination for authentic, pure vegetarian South Indian flavors. Crispy ghee-roasted dosas, steaming lentil sambar, and home-ground chutneys crafted with devotion.
          </p>

          {/* Social Icons */}
          <div className="flex gap-4 items-center mt-2">
            <a
              href="https://www.instagram.com"
              target="_blank"
              rel="noopener noreferrer"
              className="clickable w-8 h-8 rounded-full border border-gold/20 flex items-center justify-center text-gold hover:text-gold-light hover:border-gold shadow-[0_0_8px_rgba(212,175,55,0.05)] transition-all duration-300"
            >
              <Instagram size={14} />
            </a>
            <a
              href="https://www.facebook.com"
              target="_blank"
              rel="noopener noreferrer"
              className="clickable w-8 h-8 rounded-full border border-gold/20 flex items-center justify-center text-gold hover:text-gold-light hover:border-gold shadow-[0_0_8px_rgba(212,175,55,0.05)] transition-all duration-300"
            >
              <Facebook size={14} />
            </a>
          </div>
        </div>

        {/* Col 2: Opening Hours */}
        <div className="lg:col-span-3 flex flex-col gap-4">
          <h4 className="font-serif text-gold text-xs tracking-widest uppercase border-b border-gold/10 pb-2">
            Feast Sessions
          </h4>
          <ul className="flex flex-col gap-3 font-sans text-xs text-stone-300 tracking-wider">
            <li className="flex flex-col">
              <span className="font-bold text-white uppercase text-[10px] tracking-widest text-glow">Wednesday – Monday</span>
              <span className="text-stone-400 mt-0.5">04:30 PM – 10:00 PM</span>
            </li>
            <li className="flex flex-col mt-2">
              <span className="font-bold text-white uppercase text-[10px] tracking-widest text-glow">Tuesday</span>
              <span className="text-stone-400 mt-0.5">Closed</span>
            </li>
          </ul>
        </div>

        {/* Col 3: Contact & Address */}
        <div className="lg:col-span-3 flex flex-col gap-4">
          <h4 className="font-serif text-gold text-xs tracking-widest uppercase border-b border-gold/10 pb-2">
            The Dining Court
          </h4>
          <ul className="flex flex-col gap-3 font-sans text-xs text-stone-300 tracking-wider">
            <li className="flex items-start gap-2.5">
              <MapPin size={14} className="text-gold mt-0.5 flex-shrink-0" />
              <span>922 Erb St. W Unit C3#3, Waterloo, ON N2T 0C9, Canada</span>
            </li>
            <li className="flex items-center gap-2.5">
              <Phone size={14} className="text-gold flex-shrink-0" />
              <span>+1 519-888-7459</span>
            </li>
            <li className="flex items-center gap-2.5">
              <Mail size={14} className="text-gold flex-shrink-0" />
              <span>info@mydosaplace.com</span>
            </li>
          </ul>
        </div>

        {/* Col 4: Newsletter */}
        <div className="lg:col-span-2 flex flex-col gap-4">
          <h4 className="font-serif text-gold text-xs tracking-widest uppercase border-b border-gold/10 pb-2">
            Invite Dispatch
          </h4>
          <p className="font-sans text-[11px] text-stone-400 leading-relaxed tracking-wide">
            Subscribe to receive exclusive banquet menus and seasonal festival calendars.
          </p>

          {!subscribed ? (
            <form onSubmit={handleSubscribe} className="flex gap-2">
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Digital address"
                className="font-sans text-[10px] text-white bg-darkbg-light border border-gold/25 focus:border-gold px-3 py-2 outline-none rounded flex-1 transition-colors duration-300"
              />
              <button
                type="submit"
                className="clickable w-8 h-8 rounded bg-gold border border-gold text-darkbg flex items-center justify-center hover:bg-gold-light hover:border-gold-light transition-all duration-300"
                aria-label="Subscribe"
              >
                <Send size={12} />
              </button>
            </form>
          ) : (
            <span className="font-serif text-[10px] text-gold tracking-widest uppercase animate-pulse block">
              Seal Dispatched!
            </span>
          )}
        </div>

      </div>

      {/* Footer Bottom copyright & credits */}
      <div className="container max-w-6xl mx-auto pt-8 border-t border-gold/10 flex flex-col md:flex-row justify-between items-center gap-4 text-stone-500 font-sans text-[9px] tracking-[0.2em] uppercase">
        <span>© 2026 My Dosa Place. All rights reserved.</span>
        <span>Pure Veg South Indian Heritage.</span>
      </div>

      <style jsx>{`
        @keyframes float-diya {
          0% { transform: translateY(0) rotate(0deg); }
          100% { transform: translateY(-20px) rotate(2deg); }
        }
      `}</style>
    </footer>
  );
}
