'use client';

import { motion } from "framer-motion";
import { Heart, Mail, Phone, MapPin } from "lucide-react";
import { useEffect, useState } from "react";
import Link from "next/link";

export function Footer() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const checkTheme = () => {
      setIsDark(document.documentElement.classList.contains('dark'));
    };
    
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    
    return () => observer.disconnect();
  }, []);

  const scrollToSection = (id: string) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  const quickLinks = [
    { name: 'Home', href: '#home', isScroll: true },
    { name: 'About', href: '#about', isScroll: true },
    { name: 'Services', href: '#services', isScroll: true },
    { name: 'Contact', href: '#contact', isScroll: true },
    { name: 'Admin Panel', href: '/login', isScroll: false },
  ];

  return (
    <footer 
      className="relative py-12 overflow-hidden border-t border-border/50"
      style={{
        backgroundColor: isDark ? '#1a1e26' : '#ffffff'
      }}
    >
      {!isDark && (
        <div className="absolute inset-0 bg-gradient-to-br from-rose-50/30 via-pink-50/30 to-orange-50/30" />
      )}
      {isDark && (
        <div className="absolute inset-0 bg-gradient-to-br from-gray-900/40 via-gray-800/40 to-gray-900/40" />
      )}

      <div className="container mx-auto px-4 relative z-10">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
          {/* Brand Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
            className="lg:col-span-1"
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="bg-gradient-to-br from-rose-500 to-pink-600 p-2 rounded-xl">
                <Heart className="h-5 w-5 text-white fill-white" />
              </div>
              <span className="font-bold text-lg bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
                Attune Heart Therapy
              </span>
            </div>
            <p className="text-sm text-muted-foreground mb-2">
              Nathalie Mac-Guffie, LMHC, RPT-S, IMH-E, TF-CBT
            </p>
            <p className="text-sm text-muted-foreground">
              Licensed Mental Health Counselor • Florida
            </p>
          </motion.div>

          {/* Quick Links */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="lg:col-span-1"
          >
            <h3 className="font-semibold mb-4 text-foreground">Quick Links</h3>
            <ul className="space-y-2">
              {quickLinks.map((link) => (
                <li key={link.name}>
                  {link.isScroll ? (
                    <button
                      onClick={() => scrollToSection(link.href.replace('#', ''))}
                      className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer hover:translate-x-1 inline-block transition-transform"
                    >
                      {link.name}
                    </button>
                  ) : (
                    <Link
                      href={link.href}
                      className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer hover:translate-x-1 inline-block transition-transform"
                    >
                      {link.name}
                    </Link>
                  )}
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Contact Info */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="lg:col-span-1"
          >
            <h3 className="font-semibold mb-4 text-foreground">Contact</h3>
            <ul className="space-y-3">
              <li className="flex items-start gap-3">
                <Phone className="h-4 w-4 mt-1 text-rose-600 dark:text-rose-400 flex-shrink-0" />
                <a 
                  href="tel:+19548073027" 
                  className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors"
                >
                  (954) 807-3027
                </a>
              </li>
              <li className="flex items-start gap-3">
                <Mail className="h-4 w-4 mt-1 text-rose-600 dark:text-rose-400 flex-shrink-0" />
                <a 
                  href="mailto:info@attunehearttherapy.com" 
                  className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors"
                >
                  info@attunehearttherapy.com
                </a>
              </li>
              <li className="flex items-start gap-3">
                <MapPin className="h-4 w-4 mt-1 text-rose-600 dark:text-rose-400 flex-shrink-0" />
                <span className="text-sm text-muted-foreground">
                  Miami, Florida
                </span>
              </li>
            </ul>
          </motion.div>

          {/* Services Summary */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="lg:col-span-1"
          >
            <h3 className="font-semibold mb-4 text-foreground">Services</h3>
            <ul className="space-y-2 text-sm text-muted-foreground">
              <li>Trauma-Focused Therapy</li>
              <li>Play Therapy</li>
              <li>Infant Mental Health</li>
              <li>Dyadic Therapy</li>
              <li>Social-Emotional Support</li>
            </ul>
          </motion.div>
        </div>

        {/* Bottom Section */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.4 }}
          className="mt-8 pt-8 border-t border-border/50"
        >
          <div className="grid grid-cols-1 items-center gap-3 text-center md:grid-cols-3 md:text-left">
            <p className="text-sm text-muted-foreground md:justify-self-start">
              © {new Date().getFullYear()} Attune Heart Therapy. All rights reserved.
            </p>
            <p className="text-xs text-muted-foreground md:justify-self-center">
              This site is for informational purposes only and does not constitute medical advice.
            </p>
            <p className="text-sm text-muted-foreground md:justify-self-end md:text-right">
              Providing compassionate, trauma-informed care for children and families.
            </p>
          </div>
        </motion.div>
      </div>
    </footer>
  );
}