import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { 
  Hotel, 
  Facebook, 
  Twitter, 
  Instagram, 
  Mail, 
  Phone, 
  MapPin,
  Linkedin,
  Youtube,
  Award,
  Shield,
  Star,
  Trophy,
  Medal,
  BadgeCheck,
  CheckCircle,
  Heart,
  Crown,
  Gem,
  Zap,
  Target,
  TrendingUp,
  LucideIcon
} from 'lucide-react';
import CookiePreferencesLink from './CookiePreferencesLink';
import ChatWidget from '../../features/notifications/components/ChatWidget';
import pageContentService, { type PageContent } from '../../features/content/services/pageContentService';
import { useCompanySettings } from '../contexts/CompanySettingsContext';
import { useTheme } from '../contexts/ThemeContext';
import apiClient from '../services/apiClient';
import { formatWorkingHours } from '../utils/format';
import { Clock } from 'lucide-react';
import { getThemeTextClasses } from '../utils/themeUtils';

const Footer: React.FC = () => {
  const { settings } = useCompanySettings();
  const { theme } = useTheme();
  const [pageContent, setPageContent] = useState<PageContent | null>(null);
  const textClasses = getThemeTextClasses(theme.theme_layout_mode);
  const [homePageContent, setHomePageContent] = useState<PageContent | null>(null);
  const [enabledPages, setEnabledPages] = useState<Set<string>>(new Set());
  const [apiError, setApiError] = useState(false);
  const [newsletterEmail, setNewsletterEmail] = useState('');
  const [newsletterSubmitting, setNewsletterSubmitting] = useState(false);
  const [newsletterMessage, setNewsletterMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);

  useEffect(() => {
    const fetchPageContent = async () => {
      try {
        setApiError(false);
        const response = await pageContentService.getFooterContent();
        if (response.status === 'success' && response.data?.page_content) {
          setPageContent(response.data.page_content);
        } else {
          setPageContent(null);
        }
      } catch (err: unknown) {
        console.error('Error fetching footer content:', err);
        setApiError(true);
        setPageContent(null);
      }
    };

    const fetchHomePageContent = async () => {
      try {
        const response = await pageContentService.getHomeContent();
        if (response.status === 'success' && response.data?.page_content) {
          const content = response.data.page_content;
          // Parse sections_enabled if it's a string
          if (typeof content.sections_enabled === 'string') {
            try {
              content.sections_enabled = JSON.parse(content.sections_enabled);
            } catch (e) {
              content.sections_enabled = {};
            }
          } else if (typeof content.sections_enabled !== 'object' || content.sections_enabled === null) {
            content.sections_enabled = content.sections_enabled || {};
          }
          // Normalize boolean values
          if (content.newsletter_enabled !== undefined) {
            content.newsletter_enabled = Boolean(content.newsletter_enabled);
          }
          setHomePageContent(content);
        }
      } catch (err: unknown) {
        console.error('Error fetching home content for newsletter:', err);
      }
    };

    const checkEnabledPages = async () => {
      const enabled = new Set<string>();
      const policyPages = [
        { type: 'privacy', url: '/privacy', service: () => pageContentService.getPrivacyContent() },
        { type: 'terms', url: '/terms', service: () => pageContentService.getTermsContent() },
        { type: 'refunds', url: '/refunds', service: () => pageContentService.getRefundsContent() },
        { type: 'cancellation', url: '/cancellation', service: () => pageContentService.getCancellationContent() },
        { type: 'accessibility', url: '/accessibility', service: () => pageContentService.getAccessibilityContent() },
        { type: 'faq', url: '/faq', service: () => pageContentService.getFAQContent() },
      ];

      await Promise.all(
        policyPages.map(async (page) => {
          try {
            const response = await page.service();
            if (response.status === 'success' && response.data?.page_content?.is_active) {
              enabled.add(page.url);
            }
          } catch (err: unknown) {
            // If 404, page is disabled, don't add to enabled set
            if ((err as { response?: { status?: number } }).response?.status !== 404) {
              console.error(`Error checking ${page.type} page:`, err);
            }
          }
        })
      );

      setEnabledPages(enabled);
    };

    fetchPageContent();
    fetchHomePageContent();
    checkEnabledPages();
  }, []);

  
  // Only use company settings from API, no hardcoded fallbacks
  const displayPhone = settings.company_phone || null;
  const displayEmail = settings.company_email || null;
  const displayAddress = settings.company_address || null;
  const phoneNumber = displayPhone ? displayPhone.replace(/\s+/g, '').replace(/[()]/g, '') : '';
  const phoneHref = displayPhone ? 'tel:' + phoneNumber : '';
  
  
  const logoUrl = settings.company_logo_url
    ? (settings.company_logo_url.startsWith('http')
        ? settings.company_logo_url
        : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`)
    : null;

  
  const iconMap: Record<string, LucideIcon> = {
    Award,
    Star,
    Trophy,
    Medal,
    BadgeCheck,
    CheckCircle,
    Shield,
    Heart,
    Crown,
    Gem,
    Zap,
    Target,
    TrendingUp,
  };

  
  const badges = pageContent?.badges || [];

  
  const defaultQuickLinks = [
    { label: 'Home', url: '/' },
    { label: 'Rooms & Suites', url: '/rooms' },
    { label: 'My Bookings', url: '/bookings' },
    { label: 'About Us', url: '/about' },
    { label: 'Blog', url: '/blog' }
  ];

  const defaultSupportLinks = [
    { label: 'FAQ', url: '/faq' },
    { label: 'Terms of Service', url: '/terms' },
    { label: 'Privacy Policy', url: '/privacy' },
    { label: 'Refunds Policy', url: '/refunds' },
    { label: 'Cancellation Policy', url: '/cancellation' },
    { label: 'Accessibility', url: '/accessibility' },
    { label: 'Contact Us', url: '/contact' }
  ];

  // Only use default links if pageContent was successfully loaded but is empty
  // Don't use defaults if API failed
  const quickLinks = pageContent?.footer_links?.quick_links && pageContent.footer_links.quick_links.length > 0
    ? pageContent.footer_links.quick_links
    : (pageContent && !apiError ? defaultQuickLinks : []);

  const allSupportLinks = pageContent?.footer_links?.support_links && pageContent.footer_links.support_links.length > 0
    ? pageContent.footer_links.support_links
    : (pageContent && !apiError ? defaultSupportLinks : []);

  // Filter support links to only show enabled policy pages
  const supportLinks = allSupportLinks.filter((link) => {
    // Always show Contact Us
    if (link.url === '/contact') return true;
    // Only show policy pages if they are enabled
    return enabledPages.has(link.url);
  });

  return (
    <footer className={`relative ${theme.theme_layout_mode === 'light' 
      ? 'bg-gradient-to-b from-gray-50 via-white to-gray-100' 
      : 'bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-black'} ${textClasses.secondary} overflow-hidden`}>
      {/* Top Gold Accent Line */}
      <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[var(--luxury-gold)] to-transparent shadow-lg shadow-[var(--luxury-gold)]/50"></div>
      
      {/* Decorative Pattern Overlay */}
      <div className="absolute inset-0 opacity-[0.03]" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9zM25 0h2v20h-2zM41 0h2v20h-2zM57 0h2v20h-2zM0 9h20v2H0zM0 25h20v2H0zM0 41h20v2H0zM0 57h20v2H0zM40 9h20v2H40zM40 25h20v2H40zM40 41h20v2H40zM40 57h20v2H40zM9 40h2v20H9zM25 40h2v20h-2zM41 40h2v20h-2zM57 40h2v20h-2z' fill='%23d4af37'/%3E%3C/svg%3E")`
      }}></div>

      {/* Subtle Gradient Overlay */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent pointer-events-none"></div>

      <div className="relative container mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24">
        {/* Main Content Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 sm:gap-10 lg:gap-8 mb-16 sm:mb-20">
          {/* Brand Section */}
          <div className="lg:col-span-4">
            <div className="flex items-center space-x-4 mb-6 sm:mb-8">
              {logoUrl ? (
                <div className="relative group">
                  <div className="absolute inset-0 bg-gradient-to-r from-[var(--luxury-gold)]/20 to-transparent rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  <img 
                    src={logoUrl}
                    alt={settings.company_name}
                    className="h-12 sm:h-14 w-auto object-contain drop-shadow-2xl relative z-10 filter brightness-110"
                  />
                </div>
              ) : (
                <div className="relative group">
                  <div className="p-3 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 backdrop-blur-sm">
                    <Hotel className="w-8 h-8 sm:w-10 sm:h-10 text-[var(--luxury-gold)] relative z-10 drop-shadow-lg" />
                  </div>
                  <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-2xl opacity-50 group-hover:opacity-75 transition-opacity duration-500"></div>
                </div>
              )}
              <div>
                <h2 className={`text-2xl sm:text-3xl font-display font-semibold ${textClasses.primary} tracking-tight mb-1`}>
                  {settings.company_name || pageContent?.title || 'Luxury Hotel'}
                </h2>
                <p className="text-xs sm:text-sm text-[var(--luxury-gold)] font-light tracking-[3px] sm:tracking-[4px] uppercase">
                  {settings.company_tagline || 'Excellence Redefined'}
                </p>
              </div>
            </div>
            <p className={`text-sm sm:text-base ${textClasses.muted} mb-8 leading-relaxed max-w-md font-light`}>
              {pageContent?.description || 'Experience unparalleled luxury and world-class hospitality. Your journey to exceptional comfort begins here.'}
            </p>
            
            {/* Badges */}
            {badges.length > 0 && badges.some(b => b.text) && (
              <div className="flex flex-wrap items-center gap-4 sm:gap-6 mb-8">
                {badges.map((badge, index) => {
                  if (!badge.text) return null;
                  const BadgeIcon = iconMap[badge.icon] || Award;
                  return (
                    <div 
                      key={index} 
                      className="group flex items-center space-x-2 px-3 py-2 bg-gradient-to-r from-[var(--luxury-gold)]/5 to-transparent border border-[var(--luxury-gold)]/10 rounded-lg hover:border-[var(--luxury-gold)]/30 hover:from-[var(--luxury-gold)]/10 transition-all duration-300"
                    >
                      <BadgeIcon className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] group-hover:scale-110 transition-transform duration-300" />
                      <span className={`text-xs sm:text-sm font-medium tracking-wide ${textClasses.secondary} group-hover:text-[var(--luxury-gold)] transition-colors`}>{badge.text}</span>
                    </div>
                  );
                })}
              </div>
            )}

            {/* Social Media Links */}
            <div className="flex items-center space-x-3 sm:space-x-4">
              {pageContent?.social_links?.facebook && (
                <a 
                  href={pageContent.social_links.facebook} 
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg ${theme.theme_layout_mode === 'light' 
                    ? 'bg-white border border-gray-300 shadow-sm' 
                    : 'bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50'} hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5`}
                  aria-label="Facebook"
                >
                  <Facebook className={`w-5 h-5 sm:w-6 sm:h-6 ${textClasses.secondary} group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110`} />
                  <div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
                </a>
              )}
              {pageContent?.social_links?.twitter && (
                <a 
                  href={pageContent.social_links.twitter} 
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg ${theme.theme_layout_mode === 'light' 
                    ? 'bg-white border border-gray-300 shadow-sm' 
                    : 'bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50'} hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5`}
                  aria-label="Twitter"
                >
                  <Twitter className={`w-5 h-5 sm:w-6 sm:h-6 ${textClasses.secondary} group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110`} />
                  <div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
                </a>
              )}
              {pageContent?.social_links?.instagram && (
                <a 
                  href={pageContent.social_links.instagram} 
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg ${theme.theme_layout_mode === 'light' 
                    ? 'bg-white border border-gray-300 shadow-sm' 
                    : 'bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50'} hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5`}
                  aria-label="Instagram"
                >
                  <Instagram className={`w-5 h-5 sm:w-6 sm:h-6 ${textClasses.secondary} group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110`} />
                  <div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
                </a>
              )}
              {pageContent?.social_links?.linkedin && (
                <a 
                  href={pageContent.social_links.linkedin} 
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg ${theme.theme_layout_mode === 'light' 
                    ? 'bg-white border border-gray-300 shadow-sm' 
                    : 'bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50'} hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5`}
                  aria-label="LinkedIn"
                >
                  <Linkedin className={`w-5 h-5 sm:w-6 sm:h-6 ${textClasses.secondary} group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110`} />
                  <div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
                </a>
              )}
              {pageContent?.social_links?.youtube && (
                <a 
                  href={pageContent.social_links.youtube} 
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`group relative w-12 h-12 sm:w-14 sm:h-14 flex items-center justify-center rounded-lg ${theme.theme_layout_mode === 'light' 
                    ? 'bg-white border border-gray-300 shadow-sm' 
                    : 'bg-gradient-to-br from-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/50'} hover:border-[var(--luxury-gold)]/60 transition-all duration-300 hover:bg-gradient-to-br hover:from-[var(--luxury-gold)]/10 hover:to-[var(--luxury-gold-dark)]/10 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/20 hover:-translate-y-0.5`}
                  aria-label="YouTube"
                >
                  <Youtube className={`w-5 h-5 sm:w-6 sm:h-6 ${textClasses.secondary} group-hover:text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110`} />
                  <div className="absolute inset-0 rounded-lg bg-[var(--luxury-gold)]/0 group-hover:bg-[var(--luxury-gold)]/10 blur-xl transition-all duration-500"></div>
                </a>
              )}
            </div>
          </div>

          {/* Quick Links */}
          {quickLinks.length > 0 && (
          <div className="lg:col-span-2">
            <h3 className={`${textClasses.primary} font-elegant font-semibold text-lg sm:text-xl mb-4 sm:mb-6 relative inline-block tracking-wide`}>
              <span className="relative z-10">Quick Links</span>
              <span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
            </h3>
            <ul className="space-y-3 sm:space-y-4">
              {quickLinks.map((link) => (
                <li key={link.url}>
                  <Link 
                    to={link.url}
                    className={`group flex items-center text-sm sm:text-base ${textClasses.muted} hover:text-[var(--luxury-gold)] transition-all duration-300 relative font-light tracking-wide`}
                  >
                    <span className="absolute left-0 w-0 h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] group-hover:w-8 transition-all duration-300 rounded-full"></span>
                    <span className="ml-10 group-hover:translate-x-2 transition-transform duration-300 group-hover:font-medium">{link.label}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          )}

          {/* Guest Services */}
          {supportLinks.length > 0 && (
          <div className="lg:col-span-2">
            <h3 className={`${textClasses.primary} font-elegant font-semibold text-lg sm:text-xl mb-4 sm:mb-6 relative inline-block tracking-wide`}>
              <span className="relative z-10">Guest Services</span>
              <span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
            </h3>
            <ul className="space-y-3 sm:space-y-4">
              {supportLinks.map((link) => (
                <li key={link.url}>
                  <Link 
                    to={link.url}
                    className={`group flex items-center text-sm sm:text-base ${textClasses.muted} hover:text-[var(--luxury-gold)] transition-all duration-300 relative font-light tracking-wide`}
                  >
                    <span className="absolute left-0 w-0 h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] group-hover:w-8 transition-all duration-300 rounded-full"></span>
                    <span className="ml-10 group-hover:translate-x-2 transition-transform duration-300 group-hover:font-medium">{link.label}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          )}

          {/* Newsletter Subscription - Always Enabled */}
          <div className="lg:col-span-2">
            <h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-6 sm:mb-8 relative inline-block tracking-wide">
              <span className="relative z-10">{homePageContent?.newsletter_section_title || 'Newsletter'}</span>
              <span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
            </h3>
            {homePageContent?.newsletter_section_subtitle && (
              <p className={`text-sm ${textClasses.muted} mb-4 font-light leading-relaxed`}>
                {homePageContent.newsletter_section_subtitle}
              </p>
            )}
            <form 
              className="space-y-3" 
              onSubmit={async (e) => {
                e.preventDefault();
                if (!newsletterEmail || newsletterSubmitting) return;
                
                setNewsletterSubmitting(true);
                setNewsletterMessage(null);
                
                try {
                  const response = await apiClient.post('/email-campaigns/newsletter/subscribe', {
                    email: newsletterEmail
                  });
                  
                  if (response.data?.status === 'success') {
                    setNewsletterMessage({ type: 'success', text: 'Successfully subscribed!' });
                    setNewsletterEmail('');
                    setTimeout(() => setNewsletterMessage(null), 5000);
                  } else {
                    setNewsletterMessage({ type: 'error', text: 'Failed to subscribe. Please try again.' });
                  }
                } catch (error: unknown) {
                  console.error('Newsletter subscription error:', error);
                  const errorMessage = getUserFriendlyError(error) || getUserFriendlyError(error) || 'Failed to subscribe. Please try again.';
                  setNewsletterMessage({ type: 'error', text: errorMessage });
                } finally {
                  setNewsletterSubmitting(false);
                }
              }}
            >
              <input
                type="email"
                value={newsletterEmail}
                onChange={(e) => setNewsletterEmail(e.target.value)}
                placeholder={homePageContent?.newsletter_placeholder || 'Enter your email'}
                className={`w-full px-4 py-2.5 rounded-lg border ${theme.theme_layout_mode === 'light' 
                  ? 'border-gray-300 bg-white text-gray-900 placeholder-gray-500' 
                  : 'border-gray-700 bg-gray-800/50 text-white placeholder-gray-400'} focus:border-[var(--luxury-gold)] focus:ring-2 focus:ring-[var(--luxury-gold)]/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed text-sm`}
                required
                disabled={newsletterSubmitting}
              />
              <button
                type="submit"
                disabled={newsletterSubmitting || !newsletterEmail}
                className="w-full px-4 py-2.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] rounded-lg font-semibold hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] transition-all duration-300 shadow-lg shadow-[var(--luxury-gold)]/30 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/40 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
              >
                {newsletterSubmitting ? 'Subscribing...' : (homePageContent?.newsletter_button_text || 'Subscribe')}
              </button>
              {newsletterMessage && (
                <div className={`text-xs px-3 py-2 rounded-lg ${
                  newsletterMessage.type === 'success' 
                    ? 'bg-green-500/20 text-green-300 border border-green-500/30' 
                    : 'bg-red-500/20 text-red-300 border border-red-500/30'
                }`}>
                  {newsletterMessage.text}
                </div>
              )}
            </form>
          </div>

          {/* Contact Information */}
          <div className="lg:col-span-2">
            <h3 className={`${textClasses.primary} font-elegant font-semibold text-lg sm:text-xl mb-4 sm:mb-6 relative inline-block tracking-wide`}>
              <span className="relative z-10">Contact</span>
              <span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold)]/50 to-transparent"></span>
            </h3>
            {(displayAddress || displayPhone || displayEmail) && (
            <ul className="space-y-5 sm:space-y-6">
              {displayAddress && (
              <li className="flex items-start space-x-4 group">
                <div className="relative mt-1 flex-shrink-0">
                  <div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
                    <MapPin className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
                  </div>
                  <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                </div>
                <span className={`text-sm sm:text-base ${textClasses.muted} group-hover:${textClasses.secondary} transition-colors leading-relaxed font-light pt-1`}>
                  {displayAddress
                    .split('\n').map((line, i) => (
                      <React.Fragment key={i}>
                        {line}
                        {i < displayAddress.split('\n').length - 1 && <br />}
                      </React.Fragment>
                    ))}
                </span>
              </li>
              )}
              {displayPhone && (
                <li className="flex items-center space-x-4 group">
                  <div className="relative flex-shrink-0">
                    <div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
                      <Phone className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
                    </div>
                    <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  </div>
                  <a href={phoneHref} className={`text-sm sm:text-base ${textClasses.muted} group-hover:text-[var(--luxury-gold)] transition-colors font-light tracking-wide`}>
                    {displayPhone}
                  </a>
                </li>
              )}
              {displayEmail && (
                <li className="flex items-center space-x-4 group">
                  <div className="relative flex-shrink-0">
                    <div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
                      <Mail className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
                    </div>
                    <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  </div>
                  <a href={`mailto:${displayEmail}`} className={`text-sm sm:text-base ${textClasses.muted} group-hover:text-[var(--luxury-gold)] transition-colors font-light tracking-wide break-all`}>
                    {displayEmail}
                  </a>
                </li>
              )}
              {settings.chat_working_hours_start !== undefined && settings.chat_working_hours_end !== undefined && (
                <li className="flex items-start space-x-4 group">
                  <div className="relative mt-1 flex-shrink-0">
                    <div className="p-2 bg-gradient-to-br from-[var(--luxury-gold)]/10 to-[var(--luxury-gold-dark)]/5 rounded-lg border border-[var(--luxury-gold)]/20 group-hover:border-[var(--luxury-gold)]/40 transition-all duration-300">
                      <Clock className="w-4 h-4 sm:w-5 sm:h-5 text-[var(--luxury-gold)] transition-all duration-300 group-hover:scale-110" />
                    </div>
                    <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  </div>
                  <div className="pt-1">
                    <span className={`text-sm sm:text-base ${textClasses.muted} group-hover:${textClasses.secondary} transition-colors font-light tracking-wide block`}>
                      Chat Support Hours
                    </span>
                    <span className="text-xs sm:text-sm text-gray-500 font-light">
                      {formatWorkingHours(settings.chat_working_hours_start, settings.chat_working_hours_end)}
                    </span>
                  </div>
                </li>
              )}
            </ul>
            )}

            {/* Rating Section */}
            <div className="mt-8 sm:mt-10 pt-6 sm:pt-8 border-t border-gray-800/50">
              <div className="flex items-center space-x-1 mb-3">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-4 h-4 sm:w-5 sm:h-5 fill-[var(--luxury-gold)] text-[var(--luxury-gold)] drop-shadow-lg" />
                ))}
              </div>
              <p className="text-xs sm:text-sm text-gray-500 font-light tracking-wide">Rated 5.0 by 10,000+ guests</p>
            </div>
          </div>
        </div>

        {/* Divider */}
        <div className="relative my-12 sm:my-16">
          <div className="absolute inset-0 flex items-center">
            <div className="w-full border-t border-gray-800/50"></div>
          </div>
          <div className="relative flex justify-center">
            <div className="bg-gradient-to-b from-[#0f0f0f] to-[#1a1a1a] px-6">
              <div className="w-24 sm:w-32 h-[2px] bg-gradient-to-r from-transparent via-[var(--luxury-gold)]/50 to-transparent shadow-lg shadow-[var(--luxury-gold)]/30"></div>
            </div>
          </div>
        </div>

        {/* Bottom Section */}
        <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <div className="text-sm sm:text-base text-gray-500 font-light tracking-wide text-center md:text-left">
            {(() => {
              const currentYear = new Date().getFullYear();
              const copyrightText = pageContent?.copyright_text || '© {YEAR} Luxury Hotel. All rights reserved.';
              
              return copyrightText.replace(/{YEAR}/g, currentYear.toString());
            })()}
          </div>
          <div className="flex items-center space-x-4 sm:space-x-6 text-xs sm:text-sm text-gray-600">
            <Link to="/privacy" className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide">Privacy</Link>
            <span className="text-gray-700">•</span>
            <Link to="/terms" className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide">Terms</Link>
            <span className="text-gray-700">•</span>
            <Link to="/refunds" className="hover:text-[var(--luxury-gold)] transition-colors cursor-pointer font-light tracking-wide">Refunds</Link>
            <span className="text-gray-700">•</span>
            <CookiePreferencesLink />
          </div>
        </div>
      </div>

      {/* Bottom Gold Accent Line */}
      <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[var(--luxury-gold)] to-transparent shadow-lg shadow-[var(--luxury-gold)]/50"></div>
      
      {/* Chat Widget */}
      <ChatWidget />
    </footer>
  );
};

export default Footer;
