import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { 
  ArrowRight,
  AlertCircle,
  X,
  ChevronLeft,
  ChevronRight,
  ZoomIn,
} from 'lucide-react';
import { toast } from 'react-toastify';
import * as LucideIcons from 'lucide-react';
import {
  BannerCarousel,
  BannerSkeleton,
  RoomCardSkeleton,
  RoomCarousel,
  SearchRoomForm,
} from '../../rooms/components';
import PartnersCarousel from '../components/PartnersCarousel';
import bannerService from '../services/bannerService';
import roomService from '../../rooms/services/roomService';
import pageContentService from '../services/pageContentService';
import serviceService from '../../hotel_services/services/serviceService';
import blogService, { BlogPost } from '../services/blogService';
import { useFormatCurrency } from '../../payments/hooks/useFormatCurrency';
import type { Banner } from '../services/bannerService';
import type { Room } from '../../rooms/services/roomService';
import type { PageContent } from '../services/pageContentService';
import type { Service } from '../../hotel_services/services/serviceService';

// Helper function to get icon component from icon name (handles both PascalCase and lowercase)
const getIconComponent = (iconName?: string) => {
  if (!iconName) return null;
  
  // Try direct match first (for PascalCase names)
  if ((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[iconName]) {
    return (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[iconName];
  }
  
  // Convert to PascalCase (capitalize first letter)
  const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1).toLowerCase();
  if ((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[pascalCaseName]) {
    return (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[pascalCaseName];
  }
  
  return null;
};

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const { formatCurrency } = useFormatCurrency();
  const [banners, setBanners] = useState<Banner[]>([]);
  const [featuredRooms, setFeaturedRooms] = useState<Room[]>([]);
  const [newestRooms, setNewestRooms] = useState<Room[]>([]);
  const [pageContent, setPageContent] = useState<PageContent | null>(null);
  const [services, setServices] = useState<Service[]>([]);
  const [blogPosts, setBlogPosts] = useState<BlogPost[]>([]);
  const [isLoadingBanners, setIsLoadingBanners] = 
    useState(true);
  const [isLoadingRooms, setIsLoadingRooms] = useState(true);
  const [isLoadingNewest, setIsLoadingNewest] = useState(true);
  const [, setIsLoadingContent] = useState(true);
  const [, setIsLoadingServices] = useState(true);
  const [isLoadingBlog, setIsLoadingBlog] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [apiError, setApiError] = useState(false);
  const [apiErrorMessage, setApiErrorMessage] = useState<string>('');
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxIndex, setLightboxIndex] = useState(0);
  const [lightboxImages, setLightboxImages] = useState<string[]>([]);
  const [clickedPromotion, setClickedPromotion] = useState<number | null>(null);

  // Prevent body scroll when API error modal is shown
  useEffect(() => {
    if (apiError) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [apiError]);
  
  useEffect(() => {
    if (!lightboxOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        setLightboxOpen(false);
      } else if (e.key === 'ArrowLeft' && lightboxImages.length > 1) {
        setLightboxIndex((prev) => (prev === 0 ? lightboxImages.length - 1 : prev - 1));
      } else if (e.key === 'ArrowRight' && lightboxImages.length > 1) {
        setLightboxIndex((prev) => (prev === lightboxImages.length - 1 ? 0 : prev + 1));
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    
    document.body.style.overflow = 'hidden';

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = 'unset';
    };
  }, [lightboxOpen, lightboxImages.length]);

  
  const combinedRooms = useMemo(() => {
    const roomMap = new Map<number, Room>();
    
    
    featuredRooms.forEach(room => {
      roomMap.set(room.id, room);
    });
    
    
    newestRooms.forEach(room => {
      if (!roomMap.has(room.id)) {
        roomMap.set(room.id, room);
      }
    });
    
    return Array.from(roomMap.values());
  }, [featuredRooms, newestRooms]);

  // Enterprise-grade promotion click handler
  const handlePromotionClick = useCallback((promo: { id?: number; title?: string; description?: string; link?: string; image?: string; valid_until?: string; code?: string; discount?: number | string }, index: number, e?: React.MouseEvent) => {
    // Prevent default if event is provided (for button clicks)
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }

    try {
      // Validate promotion data
      if (!promo) {
        toast.error('Invalid promotion. Please try again.');
        return;
      }

      // Check if promotion is still valid
      if (promo.valid_until) {
        const validUntil = new Date(promo.valid_until);
        const now = new Date();
        if (validUntil < now) {
          toast.warning('This promotion has expired.');
          return;
        }
      }

      // Set loading state for this specific promotion
      setClickedPromotion(index);

      // Store promotion data in sessionStorage for booking flow
      const promotionData = {
        id: promo.code || `promo-${index}`,
        title: promo.title,
        description: promo.description,
        discount: promo.discount,
        code: promo.code || promo.title?.toUpperCase().replace(/\s+/g, '') || '',
        valid_until: promo.valid_until,
        link: promo.link,
        clicked_at: new Date().toISOString(),
      };

      try {
        sessionStorage.setItem('activePromotion', JSON.stringify(promotionData));
      } catch (storageError) {
        console.warn('Failed to store promotion data:', storageError);
        // Continue even if storage fails
      }

      // Analytics tracking (enterprise-grade)
      try {
        if (window.gtag) {
          window.gtag('event', 'promotion_click', {
            promotion_title: promo.title,
            promotion_code: promotionData.code,
            promotion_discount: promo.discount,
          });
        }
      } catch (analyticsError) {
        console.warn('Analytics tracking failed:', analyticsError);
      }

      // Determine navigation target
      let targetPath = promo.link || '/rooms';
      
      // Add promotion code to URL for visibility
      if (targetPath.startsWith('/rooms') || (!targetPath.startsWith('http') && targetPath.startsWith('/'))) {
        const url = new URL(targetPath, window.location.origin);
        if (promotionData.code) {
          url.searchParams.set('promo', promotionData.code);
        }
        targetPath = url.pathname + url.search;
      }
      
      // Show success message
      toast.success(`🎉 Promotion "${promo.title}" activated! The code will be applied when you book.`, {
        autoClose: 4000,
      });

      // Navigate after a brief delay for UX (allows loading state to show)
      setTimeout(() => {
        navigate(targetPath);
        
        // Reset loading state after navigation
        setTimeout(() => {
          setClickedPromotion(null);
        }, 500);
      }, 150);

    } catch (error: unknown) {
      console.error('Error handling promotion click:', error);
      toast.error('An error occurred. Please try again.');
      setClickedPromotion(null);
    }
  }, [navigate]);

  
  useEffect(() => {
    fetchServices();
  }, []);

  const fetchServices = async () => {
    try {
      setIsLoadingServices(true);
      const response = await serviceService.getServices({
        status: 'active',
        limit: 6, // Only fetch first 6 for homepage
      });
      if (response.success && response.data?.services) {
        setServices(response.data.services);
      }
    } catch (error: unknown) {
      console.error('Error fetching services:', error);
    } finally {
      setIsLoadingServices(false);
    }
  };

  useEffect(() => {
    const fetchPageContent = async () => {
      try {
        setIsLoadingContent(true);
        setApiError(false);
        const response = await pageContentService.getHomeContent();
        if (response.status === 'success' && response.data?.page_content) {
          const content = response.data.page_content;
          
          
          // Handle features - can be string, array, or null/undefined
          if (typeof content.features === 'string') {
            try {
              content.features = JSON.parse(content.features);
            } catch {
              content.features = [];
            }
          } else if (!Array.isArray(content.features)) {
            content.features = content.features || [];
          }
          // Handle amenities - can be string, array, or null/undefined
          if (typeof content.amenities === 'string') {
            try {
              content.amenities = JSON.parse(content.amenities);
            } catch {
              content.amenities = [];
            }
          } else if (!Array.isArray(content.amenities)) {
            content.amenities = content.amenities || [];
          }
          // Handle gallery_images - can be string, array, or null/undefined
          if (typeof content.gallery_images === 'string') {
            try {
              content.gallery_images = JSON.parse(content.gallery_images);
            } catch (e) {
              content.gallery_images = [];
            }
          } else if (!Array.isArray(content.gallery_images)) {
            content.gallery_images = content.gallery_images || [];
          }
          // Handle stats - can be string, array, or null/undefined
          if (typeof content.stats === 'string') {
            try {
              content.stats = JSON.parse(content.stats);
            } catch (e) {
              content.stats = [];
            }
          } else if (!Array.isArray(content.stats)) {
            content.stats = content.stats || [];
          }
          
          // Handle luxury_features - can be string, array, or null/undefined
          if (typeof content.luxury_features === 'string') {
            try {
              content.luxury_features = JSON.parse(content.luxury_features);
            } catch (e) {
              content.luxury_features = [];
            }
          } else if (!Array.isArray(content.luxury_features)) {
            content.luxury_features = content.luxury_features || [];
          }
          if (typeof content.luxury_gallery === 'string') {
            try {
              const parsed = JSON.parse(content.luxury_gallery);
              content.luxury_gallery = Array.isArray(parsed) ? parsed.filter(img => img && typeof img === 'string' && img.trim() !== '') : [];
            } catch (e) {
              content.luxury_gallery = [];
            }
          }
          
          if (Array.isArray(content.luxury_gallery)) {
            content.luxury_gallery = content.luxury_gallery.filter(img => img && typeof img === 'string' && img.trim() !== '');
          } else {
            content.luxury_gallery = [];
          }
          // Handle luxury_testimonials - can be string, array, or null/undefined
          if (typeof content.luxury_testimonials === 'string') {
            try {
              content.luxury_testimonials = JSON.parse(content.luxury_testimonials);
            } catch (e) {
              content.luxury_testimonials = [];
            }
          } else if (!Array.isArray(content.luxury_testimonials)) {
            content.luxury_testimonials = content.luxury_testimonials || [];
          }
          // Handle luxury_services - can be string, array, or null/undefined
          if (typeof content.luxury_services === 'string') {
            try {
              content.luxury_services = JSON.parse(content.luxury_services);
            } catch (e) {
              content.luxury_services = [];
            }
          } else if (!Array.isArray(content.luxury_services)) {
            content.luxury_services = content.luxury_services || [];
          }
          // Handle luxury_experiences - can be string, array, or null/undefined
          if (typeof content.luxury_experiences === 'string') {
            try {
              content.luxury_experiences = JSON.parse(content.luxury_experiences);
            } catch (e) {
              content.luxury_experiences = [];
            }
          } else if (!Array.isArray(content.luxury_experiences)) {
            content.luxury_experiences = content.luxury_experiences || [];
          }
          // Handle awards - can be string, array, or null/undefined
          if (typeof content.awards === 'string') {
            try {
              content.awards = JSON.parse(content.awards);
            } catch (e) {
              content.awards = [];
            }
          } else if (!Array.isArray(content.awards)) {
            content.awards = content.awards || [];
          }
          // Handle partners - can be string, array, or null/undefined
          if (typeof content.partners === 'string') {
            try {
              content.partners = JSON.parse(content.partners);
            } catch (e) {
              content.partners = [];
            }
          } else if (!Array.isArray(content.partners)) {
            content.partners = content.partners || [];
          }
          // Handle trust_badges - can be string, array, or null/undefined
          if (typeof content.trust_badges === 'string') {
            try {
              content.trust_badges = JSON.parse(content.trust_badges);
            } catch (e) {
              content.trust_badges = [];
            }
          } else if (!Array.isArray(content.trust_badges)) {
            content.trust_badges = content.trust_badges || [];
          }
          // Handle promotions - can be string, array, or null/undefined
          if (typeof content.promotions === 'string') {
            try {
              content.promotions = JSON.parse(content.promotions);
            } catch (e) {
              content.promotions = [];
            }
          } else if (!Array.isArray(content.promotions)) {
            content.promotions = content.promotions || [];
          }
          // Handle sections_enabled - can be string, object, or null/undefined
          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 (MySQL returns 1/0, convert to true/false)
          if (content.newsletter_enabled !== undefined) {
            content.newsletter_enabled = Boolean(content.newsletter_enabled);
          }
          if (content.trust_badges_enabled !== undefined) {
            content.trust_badges_enabled = Boolean(content.trust_badges_enabled);
          }
          if (content.promotions_enabled !== undefined) {
            content.promotions_enabled = Boolean(content.promotions_enabled);
          }
          if (content.blog_enabled !== undefined) {
            content.blog_enabled = Boolean(content.blog_enabled);
          }
          if (content.rooms_section_enabled !== undefined) {
            content.rooms_section_enabled = Boolean(content.rooms_section_enabled);
          }
          
          setPageContent(content);
          
          
          if (content.meta_title) {
            document.title = content.meta_title;
          }
          if (content.meta_description) {
            let metaDescription = document.querySelector('meta[name="description"]');
            if (!metaDescription) {
              metaDescription = document.createElement('meta');
              metaDescription.setAttribute('name', 'description');
              document.head.appendChild(metaDescription);
            }
            metaDescription.setAttribute('content', content.meta_description);
          }
        } else {
          setPageContent(null);
        }
      } catch (err: unknown) {
        console.error('Error fetching page content:', err);
        setApiError(true);
        setApiErrorMessage('Unable to connect to the server. Please check your internet connection and try again.');
        setPageContent(null);
      } finally {
        setIsLoadingContent(false);
      }
    };

    fetchPageContent();
  }, []);

  useEffect(() => {
    const fetchBlogPosts = async () => {
      if (!pageContent || !pageContent.blog_enabled || (pageContent.sections_enabled?.blog === false)) {
        return;
      }
      try {
        setIsLoadingBlog(true);
        const limit = pageContent.blog_posts_limit || 3;
        const response = await blogService.getBlogPosts({
          published_only: true,
          limit: limit,
          page: 1,
        });
        if (response.status === 'success' && response.data?.posts) {
          setBlogPosts(response.data.posts);
        }
      } catch (error: unknown) {
        console.error('Error fetching blog posts:', error);
      } finally {
        setIsLoadingBlog(false);
      }
    };
    if (pageContent) {
      fetchBlogPosts();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pageContent?.blog_enabled, pageContent?.sections_enabled?.blog, pageContent?.blog_posts_limit]);

  
  useEffect(() => {
    const fetchBanners = async () => {
      try {
        setIsLoadingBanners(true);
        const response = await bannerService.getBannersByPosition('home');
        
        if (response.success || response.status === 'success') {
          const fetchedBanners = response.data?.banners || [];
          setBanners(fetchedBanners);
          if (fetchedBanners.length === 0) {
            console.log('No banners found for home position');
          }
        } else {
          console.warn('Banner service returned unsuccessful response:', response);
          setBanners([]);
        }
      } catch (err: unknown) {
        console.error('Error fetching banners:', err);
        // Don't set API error for banners - it's not critical
        setBanners([]);
      } finally {
        setIsLoadingBanners(false);
      }
    };

    fetchBanners();
  }, []);

  
  useEffect(() => {
    const fetchFeaturedRooms = async () => {
      try {
        setIsLoadingRooms(true);
        setError(null);
        const response = await roomService.getFeaturedRooms({
          featured: true,
          limit: 6,
        });

        
        if (
          response.success || 
          response.status === 'success'
        ) {
          const rooms = response.data?.rooms || [];
          setFeaturedRooms(rooms);
          
          if (rooms.length === 0) {
            setError(null);
          }
        } else {
          setFeaturedRooms([]);
          setError(
            response.message || 
            'Unable to load room list'
          );
        }
      } catch (err: unknown) {
        console.error('Error fetching rooms:', err);
        setFeaturedRooms([]);
        
        const isApiError = (e: unknown): e is { response?: { status?: number } } => {
          return typeof e === 'object' && e !== null;
        };
        if (isApiError(err) && err.response?.status === 429) {
          setError(
            'Too many requests. Please wait a moment and refresh the page.'
          );
        } else {
          const getUserFriendlyError = (e: unknown): string | undefined => {
            if (typeof e === 'object' && e !== null) {
              const error = e as { response?: { data?: { detail?: string; message?: string } }; message?: string };
              return error.response?.data?.detail || error.response?.data?.message || error.message;
            }
            return undefined;
          };
          setError(
            getUserFriendlyError(err) || 'Unable to load room list'
          );
        }
      } finally {
        setIsLoadingRooms(false);
      }
    };

    fetchFeaturedRooms();
  }, []);

  
  useEffect(() => {
    const fetchNewestRooms = async () => {
      try {
        setIsLoadingNewest(true);
        const response = await roomService.getRooms({
          page: 1,
          limit: 6,
          sort: 'newest',
        });

        
        if (
          response.success || 
          response.status === 'success'
        ) {
          setNewestRooms(response.data?.rooms || []);
        } else {
          setNewestRooms([]);
        }
      } catch (err: unknown) {
        console.error('Error fetching newest rooms:', err);
        setApiError(true);
        setApiErrorMessage('Unable to connect to the server. Please check your internet connection and try again.');
        setNewestRooms([]);
      } finally {
        setIsLoadingNewest(false);
      }
    };

    fetchNewestRooms();
  }, []);

  return (
    <>
      {/* Persistent API Error Modal - Cannot be closed */}
      {apiError && (
        <div 
          className="fixed inset-0 z-[99999] bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
          style={{ pointerEvents: 'auto' }}
          onKeyDown={(e) => {
            // Prevent closing with Escape key
            if (e.key === 'Escape') {
              e.preventDefault();
              e.stopPropagation();
            }
          }}
          onClick={(e) => {
            // Prevent closing by clicking outside
            e.stopPropagation();
          }}
        >
          <div 
            className="bg-white rounded-xl shadow-2xl max-w-md w-full p-8 border-2 border-red-500"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex flex-col items-center text-center">
              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
                <AlertCircle className="w-8 h-8 text-red-600" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-3">
                API Connection Error
              </h2>
              <p className="text-gray-600 mb-6 leading-relaxed">
                {apiErrorMessage || 'Unable to connect to the server. The API is currently unavailable.'}
              </p>
              <div className="bg-red-50 border border-red-200 rounded-lg p-4 w-full">
                <p className="text-sm text-red-800 font-medium">
                  Please check:
                </p>
                <ul className="text-sm text-red-700 mt-2 text-left list-disc list-inside space-y-1">
                  <li>Your internet connection</li>
                  <li>If the server is running</li>
                  <li>If the API endpoint is accessible</li>
                </ul>
              </div>
              <div className="mt-6 w-full">
                <button
                  onClick={() => window.location.reload()}
                  className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
                >
                  Refresh Page
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {}
      <section 
        className="relative w-screen -mt-6"
        style={{ 
          marginLeft: 'calc(50% - 50vw)',
          marginRight: 'calc(50% - 50vw)'
        }}
      >
        {isLoadingBanners ? (
          <BannerSkeleton />
        ) : banners.length > 0 ? (
          <div className="animate-fade-in">
            <BannerCarousel banners={banners}>
              <SearchRoomForm className="overlay" />
            </BannerCarousel>
          </div>
        ) : pageContent ? (
          (() => {
            // Check for valid local video first
            const videoUrl = pageContent.hero_video_url;
            if (videoUrl && (
              videoUrl.startsWith('/') || 
              videoUrl.startsWith('http://localhost') ||
              videoUrl.startsWith('https://localhost') ||
              videoUrl.startsWith(window.location.origin)
            )) {
              return (
                <div className="relative w-full h-[600px] md:h-[700px] lg:h-[800px] overflow-hidden">
                  <video
                    autoPlay
                    loop
                    muted
                    playsInline
                    poster={pageContent.hero_video_poster || pageContent.hero_image || ''}
                    className="absolute inset-0 w-full h-full object-cover"
                    onError={(e) => {
                      console.warn('Video failed to load, using fallback image');
                      const videoElement = e.target as HTMLVideoElement;
                      videoElement.style.display = 'none';
                    }}
                  >
                    <source src={pageContent.hero_video_url} type="video/mp4" />
                    Your browser does not support the video tag.
                  </video>
                  {(pageContent.hero_video_poster || pageContent.hero_image) && (
                    <img 
                      src={pageContent.hero_video_poster || pageContent.hero_image || ''} 
                      alt="Hero background" 
                      className="absolute inset-0 w-full h-full object-cover"
                      style={{ zIndex: -1 }}
                    />
                  )}
                  <div className="absolute inset-0 bg-black/40"></div>
                  <div className="absolute inset-0 flex items-center justify-center z-10">
                    <SearchRoomForm className="overlay" />
                  </div>
                </div>
              );
            }

            // Check for hero image as fallback
            if (pageContent.hero_image) {
              return (
                <div className="relative w-full h-[600px] md:h-[700px] lg:h-[800px] overflow-hidden">
                  <img 
                    src={pageContent.hero_image} 
                    alt="Hero background" 
                    className="absolute inset-0 w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-black/40"></div>
                  <div className="absolute inset-0 flex items-center justify-center z-10">
                    <SearchRoomForm className="overlay" />
                  </div>
                </div>
              );
            }

            return null;
          })()
        ) : null}
      </section>

      <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50/30 relative overflow-hidden">
        {}
        <div className="fixed inset-0 opacity-[0.015] bg-[radial-gradient(circle_at_1px_1px,var(--luxury-gold)_1px,transparent_0)] bg-[length:60px_60px] pointer-events-none"></div>
        <div className="relative z-10">

      {}
      {(pageContent?.sections_enabled?.rooms !== false) && (
      <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 lg:py-16">
        {}
        <div className="text-center animate-fade-in mb-6 md:mb-8">
          <div className="inline-block mb-3">
            <div className="h-0.5 w-16 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4">
            {pageContent?.rooms_section_title || pageContent?.hero_title || (apiError ? '' : 'Featured & Newest Rooms')}
          </h2>
          <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto px-4 leading-relaxed">
            {pageContent?.rooms_section_subtitle || pageContent?.hero_subtitle || pageContent?.description || (apiError ? '' : 'Discover our most popular accommodations and latest additions')}
          </p>
          
          {}
          <div className="mt-6 md:mt-8 flex justify-center">
            <Link
              to={pageContent?.rooms_section_button_link || '/rooms'}
              className="group relative inline-flex items-center gap-2 px-6 py-2.5 md:px-8 md:py-3 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] rounded-lg font-semibold tracking-wide text-sm md:text-base shadow-md shadow-[var(--luxury-gold)]/20 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/30 hover:-translate-y-0.5 transition-all duration-300 overflow-hidden"
            >
              <span className="absolute inset-0 bg-gradient-to-r from-[var(--luxury-gold-light)] to-[var(--luxury-gold)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
              <span className="relative z-10">{pageContent?.rooms_section_button_text || 'View All Rooms'}</span>
              <ArrowRight className="w-4 h-4 md:w-5 md:h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" />
            </Link>
          </div>
        </div>

        {}
        {(isLoadingRooms || isLoadingNewest) && (
          <div className="flex justify-center">
            <div className="max-w-md w-full">
              <RoomCardSkeleton />
            </div>
          </div>
        )}

        {}
        {error && !isLoadingRooms && !isLoadingNewest && (
          <div 
            className="luxury-card p-8 text-center animate-fade-in
              border-red-200 bg-gradient-to-br from-red-50 to-red-100/50"
          >
            <div className="inline-flex items-center justify-center w-16 h-16 
              bg-red-100 rounded-full mb-4">
              <AlertCircle 
                className="w-8 h-8 text-red-600" 
              />
            </div>
            <p className="text-red-800 font-serif font-semibold text-lg mb-2 tracking-tight">
              {error}
            </p>
            <button
              onClick={() => window.location.reload()}
              className="mt-4 px-6 py-2.5 bg-gradient-to-r from-red-600 to-red-700 
                text-white rounded-sm font-medium tracking-wide
                hover:from-red-700 hover:to-red-800 
                transition-all duration-300 shadow-lg shadow-red-500/30
                hover:shadow-xl hover:shadow-red-500/40 hover:-translate-y-0.5"
            >
              Try Again
            </button>
          </div>
        )}

        {}
        {!isLoadingRooms && !isLoadingNewest && (
          <>
            {combinedRooms.length > 0 ? (
              <RoomCarousel 
                rooms={combinedRooms} 
                autoSlideInterval={4000}
                showNavigation={true}
              />
            ) : (
              <div 
                className="luxury-card p-12 text-center animate-fade-in"
              >
                <p className="text-gray-600 text-lg font-light tracking-wide">
                  No rooms available
                </p>
              </div>
            )}

          </>
        )}
      </section>
      )}

      {}
      {(pageContent?.sections_enabled?.features !== false) && (() => {
        
        const validFeatures = pageContent?.features?.filter(
          (f: { title?: string; description?: string }) => f && (f.title || f.description)
        ) || [];
        
        // Only show section if we have features from API, or if pageContent was loaded but is empty (not if API failed)
        return validFeatures.length > 0 && (
          <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
            <div className="relative bg-white rounded-xl md:rounded-2xl shadow-xl shadow-[var(--luxury-gold)]/5 p-6 md:p-8 lg:p-10 animate-fade-in overflow-hidden border border-gray-100/50">
              {}
              <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)]"></div>
              <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)]"></div>
              
              {}
              <div className="absolute inset-0 opacity-[0.015] bg-[radial-gradient(circle_at_1px_1px,var(--luxury-gold)_1px,transparent_0)] bg-[length:40px_40px]"></div>
              
              {(pageContent?.features_section_title || pageContent?.features_section_subtitle) && (
                <div className="text-center mb-8 md:mb-10 animate-fade-in">
                  <div className="inline-block mb-3">
                    <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
                  </div>
                  {pageContent.features_section_title && (
                    <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
                      {pageContent.features_section_title}
                    </h2>
                  )}
                  {pageContent.features_section_subtitle && (
                    <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                      {pageContent.features_section_subtitle}
                    </p>
                  )}
                </div>
              )}
              
              <div className="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
                {validFeatures.length > 0 ? (
                  validFeatures.map((feature: { title?: string; description?: string; image?: string; icon?: string }, index: number) => (
                    <div key={`feature-${index}-${feature.title || index}`} className="text-center group relative">
                      {feature.image ? (
                        <div className="w-16 h-16 md:w-20 md:h-20 mx-auto mb-4 md:mb-5 rounded-lg overflow-hidden shadow-lg shadow-[var(--luxury-gold)]/15 group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-[var(--luxury-gold)]/25 transition-all duration-300 border border-[var(--luxury-gold)]/20">
                          <img src={feature.image} alt={feature.title || 'Feature'} className="w-full h-full object-cover" />
                        </div>
                      ) : (
                        <div 
                          className="w-16 h-16 md:w-18 md:h-18 bg-gradient-to-br from-[var(--luxury-gold)]/15 via-[var(--luxury-gold-light)]/10 to-[var(--luxury-gold)]/15 
                            rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-5
                            shadow-lg shadow-[var(--luxury-gold)]/15 border border-[var(--luxury-gold)]/25
                            group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-[var(--luxury-gold)]/30 group-hover:border-[var(--luxury-gold)]/40
                            transition-all duration-300 backdrop-blur-sm"
                        >
                          {feature.icon && (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[feature.icon] ? (
                            React.createElement((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[feature.icon], { 
                              className: 'w-7 h-7 md:w-8 md:h-8 text-[var(--luxury-gold)] drop-shadow-md' 
                            })
                          ) : (
                            <span className="text-3xl">✨</span>
                          )}
                        </div>
                      )}
                      {feature.title && (
                        <h3 
                          className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3
                            text-gray-900 group-hover:text-[var(--luxury-gold)] transition-colors duration-300 tracking-tight leading-tight"
                        >
                          {feature.title}
                        </h3>
                      )}
                      {feature.description && (
                        <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide max-w-xs mx-auto">
                          {feature.description}
                        </p>
                      )}
                    </div>
                  ))
                ) : null}
              </div>
            </div>
          </section>
        );
      })()}

      {}
      {(pageContent?.sections_enabled?.luxury !== false) && (pageContent?.luxury_section_title || (pageContent?.luxury_features && pageContent.luxury_features.length > 0)) && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 bg-gradient-to-b from-white via-gray-50/20 to-white">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent.luxury_section_title || 'Experience Unparalleled Luxury'}
            </h2>
            {pageContent.luxury_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.luxury_section_subtitle}
              </p>
            )}
          </div>
          {pageContent.luxury_section_image && (
            <div className="mb-8 md:mb-10 animate-fade-in px-4">
              <div className="relative rounded-xl md:rounded-2xl overflow-hidden shadow-xl shadow-[var(--luxury-gold)]/10 group">
                <img 
                  src={pageContent.luxury_section_image} 
                  alt="Luxury Experience" 
                  className="w-full h-48 sm:h-64 md:h-80 lg:h-96 object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>
              </div>
            </div>
          )}
          {pageContent.luxury_features && pageContent.luxury_features.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 px-4">
              {pageContent.luxury_features.map((feature, index) => (
                <div key={index} className="relative bg-white rounded-lg md:rounded-xl p-5 md:p-6 group hover:shadow-xl hover:shadow-[var(--luxury-gold)]/10 transition-all duration-300 animate-fade-in border border-gray-100/50 hover:border-[var(--luxury-gold)]/25 hover:-translate-y-1" style={{ animationDelay: `${index * 0.1}s` }}>
                  <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-lg md:rounded-t-xl"></div>
                  <div className="w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-[var(--luxury-gold)]/15 via-[var(--luxury-gold-light)]/10 to-[var(--luxury-gold)]/15 rounded-lg flex items-center justify-center mb-4 md:mb-5 mx-auto group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--luxury-gold)]/20 transition-all duration-300 border border-[var(--luxury-gold)]/25 group-hover:border-[var(--luxury-gold)]/40">
                    {feature.icon && (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[feature.icon] ? (
                      React.createElement((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[feature.icon], { 
                        className: 'w-7 h-7 md:w-8 md:h-8 text-[var(--luxury-gold)] drop-shadow-md' 
                      })
                    ) : (
                      <span className="text-2xl md:text-3xl">✨</span>
                    )}
                  </div>
                  <h3 className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3 text-gray-900 group-hover:text-[var(--luxury-gold)] transition-colors duration-300 text-center tracking-tight leading-tight">
                    {feature.title}
                  </h3>
                  <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light text-center tracking-wide">
                    {feature.description}
                  </p>
                </div>
              ))}
            </div>
          )}
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.gallery !== false) && pageContent?.luxury_gallery && Array.isArray(pageContent.luxury_gallery) && pageContent.luxury_gallery.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent.luxury_gallery_section_title || 'Luxury Gallery'}
            </h2>
            {pageContent.luxury_gallery_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.luxury_gallery_section_subtitle}
              </p>
            )}
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2.5 md:gap-3 lg:gap-4 px-4">
            {pageContent.luxury_gallery.map((image, index) => {
              
              const imageUrl = image && typeof image === 'string' 
                ? (image.startsWith('http://') || image.startsWith('https://')
                    ? image 
                    : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}/${image}`)
                : '';
              
              if (!imageUrl) return null;
              
              return (
                <div 
                  key={`luxury-gallery-${index}-${image}`} 
                  className="relative group overflow-hidden rounded-lg md:rounded-xl aspect-square animate-fade-in shadow-md shadow-gray-900/5 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/15 transition-all duration-300 cursor-pointer" 
                  style={{ animationDelay: `${index * 0.05}s` }}
                  onClick={() => {
                    const normalizedImages = (pageContent.luxury_gallery || [])
                      .map(img => {
                        if (!img || typeof img !== 'string') return null;
                        return img.startsWith('http://') || img.startsWith('https://')
                          ? img 
                          : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}/${img}`
                      })
                      .filter(Boolean) as string[];
                    setLightboxImages(normalizedImages);
                    setLightboxIndex(index);
                    setLightboxOpen(true);
                  }}
                >
                  <img 
                    src={imageUrl} 
                    alt={`Luxury gallery image ${index + 1}`} 
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    onError={(e) => {
                      console.error(`Failed to load luxury gallery image: ${imageUrl}`);
                      (e.target as HTMLImageElement).style.display = 'none';
                    }}
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <div className="transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
                      <ZoomIn className="w-8 h-8 md:w-10 md:h-10 text-white drop-shadow-2xl" />
                    </div>
                  </div>
                  <div className="absolute inset-0 border-2 border-transparent group-hover:border-[var(--luxury-gold)]/60 transition-colors duration-300 rounded-lg md:rounded-xl"></div>
                </div>
              );
            })}
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.testimonials !== false) && pageContent?.luxury_testimonials && pageContent.luxury_testimonials.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 bg-gradient-to-b from-white via-gray-50/20 to-white">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent.luxury_testimonials_section_title || 'Guest Experiences'}
            </h2>
            {pageContent.luxury_testimonials_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.luxury_testimonials_section_subtitle}
              </p>
            )}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 px-4">
            {pageContent.luxury_testimonials.map((testimonial, index) => (
              <div key={index} className="relative bg-white rounded-lg md:rounded-xl p-5 md:p-6 shadow-lg shadow-gray-900/5 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/8 transition-all duration-300 animate-fade-in border border-gray-100/50 hover:border-[var(--luxury-gold)]/25 hover:-translate-y-1" style={{ animationDelay: `${index * 0.1}s` }}>
                <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] opacity-0 hover:opacity-100 transition-opacity duration-300 rounded-t-lg md:rounded-t-xl"></div>
                <div className="flex items-center mb-4 md:mb-5">
                  {testimonial.image ? (
                    <div className="relative">
                      <img src={testimonial.image} alt={testimonial.name} className="w-12 h-12 md:w-14 md:h-14 rounded-full object-cover mr-3 md:mr-4 border-2 border-[var(--luxury-gold)]/20 shadow-md" />
                      <div className="absolute inset-0 rounded-full border border-[var(--luxury-gold)]/40"></div>
                    </div>
                  ) : (
                    <div className="w-12 h-12 md:w-14 md:h-14 rounded-full bg-gradient-to-br from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] flex items-center justify-center text-white font-bold text-base md:text-lg mr-3 md:mr-4 shadow-md border-2 border-white">
                      {testimonial.name.charAt(0).toUpperCase()}
                    </div>
                  )}
                  <div>
                    <h4 className="font-semibold text-gray-900 text-base md:text-lg">{testimonial.name}</h4>
                    {testimonial.title && (
                      <p className="text-xs md:text-sm text-gray-500 font-light">{testimonial.title}</p>
                    )}
                  </div>
                </div>
                <div className="relative">
                  <div className="absolute -top-1 -left-1 text-4xl md:text-5xl text-[var(--luxury-gold)]/8 font-serif">"</div>
                  <p className="text-sm md:text-base text-gray-700 leading-relaxed italic relative z-10 font-light">{testimonial.quote}</p>
                </div>
              </div>
            ))}
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.stats !== false) && pageContent?.stats && Array.isArray(pageContent.stats) && pageContent.stats.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-xl md:rounded-2xl p-6 md:p-8 lg:p-10 shadow-xl shadow-black/30 animate-fade-in overflow-hidden border border-[var(--luxury-gold)]/15">
            {}
            <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)]"></div>
            <div className="absolute inset-0 opacity-8 bg-[radial-gradient(circle_at_1px_1px,var(--luxury-gold)_1px,transparent_0)] bg-[length:40px_40px]"></div>
            
            {(pageContent?.stats_section_title || pageContent?.stats_section_subtitle) && (
              <div className="text-center mb-8 md:mb-10 animate-fade-in relative z-10">
                <div className="inline-block mb-3">
                  <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
                </div>
                {pageContent.stats_section_title && (
                  <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-white tracking-tight mb-3 md:mb-4 px-4">
                    {pageContent.stats_section_title}
                  </h2>
                )}
                {pageContent.stats_section_subtitle && (
                  <p className="text-sm sm:text-base md:text-lg text-gray-300 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                    {pageContent.stats_section_subtitle}
                  </p>
                )}
              </div>
            )}
            
            <div className="relative grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
              {pageContent.stats.map((stat, index) => {
                const IconComponent = stat?.icon ? getIconComponent(stat.icon) : null;
                return (
                  <div key={`stat-${index}-${stat.label || index}`} className="text-center group relative">
                    {stat?.icon && (
                      <div className="mb-3 md:mb-4 group-hover:scale-110 transition-transform duration-300 flex items-center justify-center">
                        {IconComponent ? (
                          React.createElement(IconComponent, { 
                            className: 'w-8 h-8 md:w-10 md:h-10 text-[var(--luxury-gold)] drop-shadow-md' 
                          })
                        ) : (
                          <span className="text-3xl md:text-4xl">✨</span>
                        )}
                      </div>
                    )}
                    {stat?.number && (
                      <div className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--luxury-gold)] mb-1 md:mb-2 font-serif tracking-tight">
                        {stat.number}
                      </div>
                    )}
                    {stat?.label && (
                      <div className="text-gray-300 text-xs sm:text-sm md:text-base font-light tracking-wider uppercase">
                        {stat.label}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.amenities !== false) && pageContent?.amenities && pageContent.amenities.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent.amenities_section_title || 'Luxury Amenities'}
            </h2>
            <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
              {pageContent.amenities_section_subtitle || 'Experience world-class amenities designed for your comfort'}
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 px-4">
            {pageContent.amenities.map((amenity, index) => (
              <div key={index} className="relative bg-white rounded-lg md:rounded-xl p-5 md:p-6 group hover:shadow-xl hover:shadow-[var(--luxury-gold)]/10 transition-all duration-300 animate-fade-in border border-gray-100/50 hover:border-[var(--luxury-gold)]/25 hover:-translate-y-1" style={{ animationDelay: `${index * 0.1}s` }}>
                <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-lg md:rounded-t-xl"></div>
                {amenity.image ? (
                  <div className="w-full h-40 md:h-48 mb-4 md:mb-5 rounded-lg md:rounded-xl overflow-hidden shadow-lg group-hover:scale-105 transition-transform duration-300 border border-gray-100 group-hover:border-[var(--luxury-gold)]/25">
                    <img src={amenity.image} alt={amenity.title} className="w-full h-full object-cover" />
                  </div>
                ) : (
                  <div className="w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-[var(--luxury-gold)]/15 via-[var(--luxury-gold-light)]/10 to-[var(--luxury-gold)]/15 rounded-lg flex items-center justify-center mb-4 md:mb-5 mx-auto group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--luxury-gold)]/20 transition-all duration-300 border border-[var(--luxury-gold)]/25 group-hover:border-[var(--luxury-gold)]/40">
                    {amenity.icon && (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[amenity.icon] ? (
                      React.createElement((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[amenity.icon], { 
                        className: 'w-7 h-7 md:w-8 md:h-8 text-[var(--luxury-gold)] drop-shadow-md' 
                      })
                    ) : (
                      <span className="text-2xl md:text-3xl">✨</span>
                    )}
                  </div>
                )}
                <h3 className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3 text-gray-900 group-hover:text-[var(--luxury-gold)] transition-colors duration-300 tracking-tight">
                  {amenity.title}
                </h3>
                <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide">
                  {amenity.description}
                </p>
              </div>
            ))}
          </div>
        </section>
      )}

      {}

      {}
      {(pageContent?.sections_enabled?.about_preview !== false) && (pageContent?.about_preview_title || pageContent?.about_preview_content) && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="relative bg-white rounded-xl md:rounded-2xl shadow-xl shadow-[var(--luxury-gold)]/5 overflow-hidden animate-fade-in border border-gray-100/50">
            {}
            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)]"></div>
            <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)]"></div>
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
              {pageContent.about_preview_image && (
                <div className="relative h-56 sm:h-64 md:h-80 lg:h-auto lg:min-h-[400px] overflow-hidden group">
                  <img 
                    src={pageContent.about_preview_image} 
                    alt="About us" 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-transparent lg:hidden"></div>
                </div>
              )}
              <div className="p-6 md:p-8 lg:p-10 xl:p-12 flex flex-col justify-center bg-gradient-to-br from-white to-gray-50/20">
                <div className="inline-block mb-3 md:mb-4">
                  <div className="h-0.5 w-12 md:w-16 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] rounded-full"></div>
                </div>
                <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-3 md:mb-4 tracking-tight leading-tight">
                  {pageContent.about_preview_title || 'About Our Hotel'}
                </h2>
                {pageContent.about_preview_subtitle && (
                  <p className="text-sm sm:text-base md:text-lg text-gray-600 leading-relaxed font-light mb-3 md:mb-4 tracking-wide">
                    {pageContent.about_preview_subtitle}
                  </p>
                )}
                {pageContent.about_preview_content && (
                  <p className="text-sm sm:text-base md:text-lg text-gray-600 leading-relaxed font-light mb-5 md:mb-6 tracking-wide">
                    {pageContent.about_preview_content}
                  </p>
                )}
                <Link
                  to="/about"
                  className="group relative inline-flex items-center gap-2 px-6 py-2.5 md:px-8 md:py-3 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] rounded-lg font-semibold tracking-wide text-sm md:text-base shadow-md shadow-[var(--luxury-gold)]/20 hover:shadow-lg hover:shadow-[var(--luxury-gold)]/30 hover:-translate-y-0.5 transition-all duration-300 overflow-hidden w-fit"
                >
                  <span className="absolute inset-0 bg-gradient-to-r from-[var(--luxury-gold-light)] to-[var(--luxury-gold)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  <span className="relative z-10">Learn More</span>
                  <ArrowRight className="w-4 h-4 md:w-5 md:h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" />
                </Link>
              </div>
            </div>
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.services !== false) && services.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent?.luxury_services_section_title || 'Luxury Services'}
            </h2>
            {pageContent?.luxury_services_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.luxury_services_section_subtitle}
              </p>
            )}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 px-4">
            {services.slice(0, pageContent?.services_section_limit || 6).map((service, index: number) => {
              const serviceSlug = service.slug || service.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
              return (
                <Link
                  key={service.id}
                  to={`/services/${serviceSlug}`}
                  className="relative bg-white rounded-lg md:rounded-xl p-5 md:p-6 group hover:shadow-xl hover:shadow-[var(--luxury-gold)]/10 transition-all duration-300 animate-fade-in border border-gray-100/50 hover:border-[var(--luxury-gold)]/25 hover:-translate-y-1 block" 
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-lg md:rounded-t-xl"></div>
                  {service.image ? (
                    <div className="w-full h-40 md:h-48 mb-4 md:mb-5 rounded-lg md:rounded-xl overflow-hidden shadow-lg group-hover:scale-105 transition-transform duration-300 border border-gray-100 group-hover:border-[var(--luxury-gold)]/25">
                      <img src={service.image} alt={service.name} className="w-full h-full object-cover" />
                    </div>
                  ) : (
                    <div className="w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-[var(--luxury-gold)]/15 via-[var(--luxury-gold-light)]/10 to-[var(--luxury-gold)]/15 rounded-lg flex items-center justify-center mb-4 md:mb-5 mx-auto group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--luxury-gold)]/20 transition-all duration-300 border border-[var(--luxury-gold)]/25 group-hover:border-[var(--luxury-gold)]/40">
                      <span className="text-2xl md:text-3xl">✨</span>
                    </div>
                  )}
                  <h3 className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3 text-gray-900 group-hover:text-[var(--luxury-gold)] transition-colors duration-300 tracking-tight">
                    {service.name}
                  </h3>
                  <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide">
                    {service.description || 'Premium service for your comfort'}
                  </p>
                  {service.price && (
                    <div className="mt-3 text-sm font-semibold text-[var(--luxury-gold)]">
                      Starting from {formatCurrency(service.price)}
                    </div>
                  )}
                </Link>
              );
            })}
          </div>
          <div className="text-center mt-8 md:mt-10">
            <Link
              to={pageContent?.services_section_button_link || '/services'}
              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] rounded-lg font-medium 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 hover:-translate-y-0.5"
            >
              <span>{pageContent?.services_section_button_text || 'View All Services'}</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.experiences !== false) && pageContent?.luxury_experiences && pageContent.luxury_experiences.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 bg-gradient-to-b from-white via-gray-50/20 to-white">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent.luxury_experiences_section_title || 'Unique Experiences'}
            </h2>
            {pageContent.luxury_experiences_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.luxury_experiences_section_subtitle}
              </p>
            )}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 px-4">
            {pageContent.luxury_experiences.map((experience: { title?: string; description?: string; image?: string; icon?: string }, index: number) => (
              <div key={index} className="relative bg-white rounded-lg md:rounded-xl p-5 md:p-6 group hover:shadow-xl hover:shadow-[var(--luxury-gold)]/10 transition-all duration-300 animate-fade-in border border-gray-100/50 hover:border-[var(--luxury-gold)]/25 hover:-translate-y-1" style={{ animationDelay: `${index * 0.1}s` }}>
                <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-lg md:rounded-t-xl"></div>
                {experience.image ? (
                  <div className="w-full h-40 md:h-48 mb-4 md:mb-5 rounded-lg md:rounded-xl overflow-hidden shadow-lg group-hover:scale-105 transition-transform duration-300 border border-gray-100 group-hover:border-[var(--luxury-gold)]/25">
                    <img src={experience.image} alt={experience.title} className="w-full h-full object-cover" />
                  </div>
                ) : (
                  <div className="w-14 h-14 md:w-16 md:h-16 bg-gradient-to-br from-[var(--luxury-gold)]/15 via-[var(--luxury-gold-light)]/10 to-[var(--luxury-gold)]/15 rounded-lg flex items-center justify-center mb-4 md:mb-5 mx-auto group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--luxury-gold)]/20 transition-all duration-300 border border-[var(--luxury-gold)]/25 group-hover:border-[var(--luxury-gold)]/40">
                    {experience.icon && (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[experience.icon] ? (
                      React.createElement((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[experience.icon], { 
                        className: 'w-7 h-7 md:w-8 md:h-8 text-[var(--luxury-gold)] drop-shadow-md' 
                      })
                    ) : (
                      <span className="text-2xl md:text-3xl">✨</span>
                    )}
                  </div>
                )}
                <h3 className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3 text-gray-900 group-hover:text-[var(--luxury-gold)] transition-colors duration-300 tracking-tight">
                  {experience.title}
                </h3>
                <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide">
                  {experience.description}
                </p>
              </div>
            ))}
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.awards !== false) && pageContent?.awards && pageContent.awards.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
              {pageContent.awards_section_title || 'Awards & Recognition'}
            </h2>
            {pageContent.awards_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.awards_section_subtitle}
              </p>
            )}
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 md:gap-6 px-4">
            {pageContent.awards.map((award: { title?: string; description?: string; image?: string; year?: string; icon?: string }, index: number) => (
              <div key={index} className="relative bg-white rounded-lg md:rounded-xl p-5 md:p-6 group hover:shadow-xl hover:shadow-[var(--luxury-gold)]/10 transition-all duration-300 animate-fade-in border border-gray-100/50 hover:border-[var(--luxury-gold)]/25 hover:-translate-y-1 text-center" style={{ animationDelay: `${index * 0.1}s` }}>
                <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-t-lg md:rounded-t-xl"></div>
                {award.image ? (
                  <div className="w-20 h-20 md:w-24 md:h-24 mx-auto mb-4 md:mb-5 rounded-lg overflow-hidden shadow-lg">
                    <img src={award.image} alt={award.title} className="w-full h-full object-cover" />
                  </div>
                ) : (
                  <div className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-[var(--luxury-gold)]/15 via-[var(--luxury-gold-light)]/10 to-[var(--luxury-gold)]/15 rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-5 group-hover:scale-110 group-hover:shadow-lg group-hover:shadow-[var(--luxury-gold)]/20 transition-all duration-300 border border-[var(--luxury-gold)]/25 group-hover:border-[var(--luxury-gold)]/40">
                    {award.icon && (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[award.icon] ? (
                      React.createElement((LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[award.icon], { 
                        className: 'w-8 h-8 md:w-10 md:h-10 text-[var(--luxury-gold)] drop-shadow-md' 
                      })
                    ) : (
                      <span className="text-3xl">🏆</span>
                    )}
                  </div>
                )}
                {award.year && (
                  <div className="text-xs md:text-sm text-[var(--luxury-gold)] font-semibold mb-2">{award.year}</div>
                )}
                <h3 className="text-base md:text-lg font-serif font-semibold mb-2 text-gray-900 group-hover:text-[var(--luxury-gold)] transition-colors duration-300 tracking-tight">
                  {award.title}
                </h3>
                {award.description && (
                  <p className="text-xs md:text-sm text-gray-600 leading-relaxed font-light tracking-wide">
                    {award.description}
                  </p>
                )}
              </div>
            ))}
          </div>
        </section>
      )}

      {}
      {(pageContent?.cta_title || pageContent?.cta_subtitle) && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
          <div className="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-xl md:rounded-2xl p-8 md:p-12 lg:p-16 shadow-xl shadow-black/30 animate-fade-in overflow-hidden border border-[var(--luxury-gold)]/15">
            {pageContent.cta_image && (
              <div className="absolute inset-0 opacity-20">
                <img src={pageContent.cta_image} alt="CTA Background" className="w-full h-full object-cover" />
              </div>
            )}
            <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60"></div>
            <div className="relative z-10 text-center">
              <div className="inline-block mb-4">
                <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
              </div>
              <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-white mb-4 md:mb-6 tracking-tight">
                {pageContent.cta_title}
              </h2>
              {pageContent.cta_subtitle && (
                <p className="text-base sm:text-lg md:text-xl text-gray-200 font-light mb-6 md:mb-8 max-w-2xl mx-auto">
                  {pageContent.cta_subtitle}
                </p>
              )}
              {pageContent.cta_button_text && pageContent.cta_button_link && (
                <Link
                  to={pageContent.cta_button_link}
                  className="group relative inline-flex items-center gap-2 px-8 py-3 md:px-10 md:py-4 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] rounded-lg font-semibold tracking-wide text-base md:text-lg shadow-lg shadow-[var(--luxury-gold)]/30 hover:shadow-xl hover:shadow-[var(--luxury-gold)]/40 hover:-translate-y-1 transition-all duration-300 overflow-hidden"
                >
                  <span className="absolute inset-0 bg-gradient-to-r from-[var(--luxury-gold-light)] to-[var(--luxury-gold)] opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  <span className="relative z-10">{pageContent.cta_button_text}</span>
                  <ArrowRight className="w-5 h-5 md:w-6 md:h-6 relative z-10 group-hover:translate-x-1 transition-transform duration-300" />
                </Link>
              )}
            </div>
          </div>
        </section>
      )}

      {}
      {(pageContent?.sections_enabled?.partners !== false) && pageContent?.partners && pageContent.partners.length > 0 && (
        <section className="w-full py-12 md:py-16 bg-gradient-to-b from-white via-gray-50/20 to-white">
          <div className="container mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-8 md:mb-10 animate-fade-in">
              <div className="inline-block mb-3">
                <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
              </div>
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
                {pageContent.partners_section_title || 'Our Partners'}
              </h2>
              {pageContent.partners_section_subtitle && (
                <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                  {pageContent.partners_section_subtitle}
                </p>
              )}
            </div>
          </div>
          <PartnersCarousel
            partners={pageContent.partners}
            autoSlideInterval={5000}
            showNavigation={true}
            itemsPerView={6}
          />
        </section>
      )}

      {/* Promotions Section */}
      {(pageContent?.sections_enabled?.promotions !== false) && pageContent?.promotions_enabled && pageContent?.promotions && Array.isArray(pageContent.promotions) && pageContent.promotions.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 bg-gradient-to-b from-white via-gray-50/20 to-white">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            {pageContent.promotions_section_title && (
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
                {pageContent.promotions_section_title}
              </h2>
            )}
            {pageContent.promotions_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.promotions_section_subtitle}
              </p>
            )}
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 px-4">
            {pageContent.promotions.map((promo, index) => {
              const isClicked = clickedPromotion === index;
              const now = new Date();
              now.setHours(0, 0, 0, 0);
              const validUntilDate = promo.valid_until ? new Date(promo.valid_until) : null;
              if (validUntilDate) {
                validUntilDate.setHours(23, 59, 59, 999);
              }
              const isValid = validUntilDate ? validUntilDate >= now : true;
              
              const handleCardClick = () => {
                if (!isValid) {
                  toast.warning('This promotion has expired.');
                  return;
                }
                if (!isClicked) {
                  handlePromotionClick(promo, index);
                }
              };
              
              return (
                <div
                  key={index}
                  onClick={handleCardClick}
                  className={`relative bg-white rounded-xl shadow-xl overflow-hidden border transition-all duration-300 group ${
                    isValid 
                      ? 'border-gray-200 hover:shadow-2xl hover:-translate-y-1 cursor-pointer' 
                      : 'border-gray-300 opacity-75 cursor-not-allowed'
                  } ${
                    isClicked ? 'opacity-75 pointer-events-none' : ''
                  }`}
                  role="button"
                  tabIndex={isValid ? 0 : -1}
                  onKeyDown={(e) => {
                    if (isValid && (e.key === 'Enter' || e.key === ' ')) {
                      e.preventDefault();
                      handleCardClick();
                    }
                  }}
                  aria-label={`${isValid ? 'View' : 'Expired'} promotion: ${promo.title}`}
                  aria-disabled={!isValid}
                >
                  {promo.image && (
                    <div className="relative h-48 overflow-hidden">
                      <img 
                        src={promo.image} 
                        alt={promo.title || 'Promotion'} 
                        className={`w-full h-full object-cover transition-transform duration-500 ${
                          isValid ? 'group-hover:scale-110' : 'grayscale'
                        }`}
                        loading="lazy"
                      />
                      {promo.discount && (
                        <div className={`absolute top-4 right-4 px-4 py-2 rounded-full font-bold text-lg shadow-lg z-10 ${
                          isValid ? 'bg-red-600 text-white' : 'bg-gray-500 text-white'
                        }`}>
                          {promo.discount}
                        </div>
                      )}
                      {!isValid && (
                        <div className="absolute inset-0 bg-black/60 flex items-center justify-center z-20">
                          <span className="bg-red-600 text-white px-6 py-3 rounded-lg font-bold text-base shadow-xl">
                            EXPIRED
                          </span>
                        </div>
                      )}
                    </div>
                  )}
                  <div className="p-6">
                    <div className="flex items-start justify-between mb-2">
                      <h3 className={`text-xl font-bold mb-2 transition-colors ${
                        isValid ? 'text-gray-900 group-hover:text-[var(--luxury-gold)]' : 'text-gray-500'
                      }`}>
                        {promo.title}
                      </h3>
                      {!isValid && (
                        <span className="ml-2 px-2 py-1 bg-gray-200 text-gray-600 text-xs font-semibold rounded">
                          Expired
                        </span>
                      )}
                    </div>
                    {promo.description && (
                      <p className={`mb-4 line-clamp-3 ${isValid ? 'text-gray-600' : 'text-gray-400'}`}>
                        {promo.description}
                      </p>
                    )}
                    {promo.valid_until && (
                      <p className={`text-sm mb-4 ${
                        isValid ? 'text-gray-500' : 'text-red-500 font-medium'
                      }`}>
                        {isValid ? 'Valid until:' : 'Expired on:'} {new Date(promo.valid_until).toLocaleDateString('en-US', {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric'
                        })}
                      </p>
                    )}
                    <div 
                      onClick={(e) => {
                        e.stopPropagation();
                        if (!isValid) {
                          toast.warning('This promotion has expired.');
                          return;
                        }
                        handlePromotionClick(promo, index, e);
                      }}
                      className={`inline-flex items-center gap-2 px-6 py-2 rounded-lg font-semibold transition-all duration-300 ${
                        isValid
                          ? 'bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] cursor-pointer group-hover:shadow-lg'
                          : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                      }`}
                      role="button"
                      tabIndex={-1}
                      aria-disabled={!isValid}
                    >
                      <span>{isClicked ? 'Loading...' : (promo.button_text || (isValid ? 'View Offer' : 'Expired'))}</span>
                      {!isClicked && isValid && <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />}
                      {isClicked && (
                        <div className="w-4 h-4 border-2 border-[#0f0f0f] border-t-transparent rounded-full animate-spin" />
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </section>
      )}

      {/* Blog Section */}
      {(pageContent?.sections_enabled?.blog !== false) && pageContent?.blog_enabled && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16 bg-gradient-to-b from-white via-gray-50/20 to-white">
          <div className="text-center mb-8 md:mb-10 animate-fade-in">
            <div className="inline-block mb-3">
              <div className="h-0.5 w-16 md:w-20 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] mx-auto rounded-full"></div>
            </div>
            {pageContent.blog_section_title && (
              <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4 px-4">
                {pageContent.blog_section_title}
              </h2>
            )}
            {pageContent.blog_section_subtitle && (
              <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto mt-3 md:mt-4 px-4 leading-relaxed">
                {pageContent.blog_section_subtitle}
              </p>
            )}
          </div>
          {isLoadingBlog ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 px-4">
              {[1, 2, 3].map((i) => (
                <div key={i} className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 animate-pulse">
                  <div className="h-48 bg-gray-200"></div>
                  <div className="p-6">
                    <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
                    <div className="h-4 bg-gray-200 rounded w-full mb-2"></div>
                    <div className="h-4 bg-gray-200 rounded w-5/6"></div>
                  </div>
                </div>
              ))}
            </div>
          ) : blogPosts.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 px-4">
              {blogPosts.map((post) => (
                <Link
                  key={post.id}
                  to={`/blog/${post.slug}`}
                  className="group bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
                >
                  {post.featured_image && (
                    <div className="relative h-48 overflow-hidden">
                      <img
                        src={post.featured_image}
                        alt={post.title}
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                      />
                    </div>
                  )}
                  <div className="p-6">
                    {post.published_at && (
                      <p className="text-xs text-gray-500 mb-2">
                        {new Date(post.published_at).toLocaleDateString()}
                      </p>
                    )}
                    <h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-[var(--luxury-gold)] transition-colors">
                      {post.title}
                    </h3>
                    {post.excerpt && (
                      <p className="text-gray-600 mb-4 line-clamp-3">{post.excerpt}</p>
                    )}
                    <div className="flex items-center gap-2 text-[var(--luxury-gold)] font-semibold group-hover:gap-3 transition-all">
                      Read More
                      <ArrowRight className="w-4 h-4" />
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          ) : null}
          {blogPosts.length > 0 && (
            <div className="text-center mt-8 md:mt-10">
              <Link
                to="/blog"
                className="inline-flex items-center gap-2 px-8 py-3 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 hover:-translate-y-0.5"
              >
                View All Posts
                <ArrowRight className="w-5 h-5" />
              </Link>
            </div>
          )}
        </section>
      )}

        </div>
      </div>

      {}
      {lightboxOpen && lightboxImages.length > 0 && (
        <div
          className="fixed inset-0 z-[9999] bg-black/95 backdrop-blur-md flex items-center justify-center animate-fade-in"
          onClick={() => setLightboxOpen(false)}
        >
          {}
          <button
            onClick={(e) => {
              e.stopPropagation();
              setLightboxOpen(false);
            }}
            className="absolute top-4 right-4 md:top-6 md:right-6 z-50 p-3 bg-black/50 hover:bg-black/70 rounded-full text-white hover:text-[var(--luxury-gold)] transition-all duration-300 backdrop-blur-sm border border-white/10 hover:border-[var(--luxury-gold)]/50"
            aria-label="Close"
          >
            <X className="w-6 h-6 md:w-7 md:h-7" />
          </button>

          {}
          {lightboxImages.length > 1 && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                setLightboxIndex((prev) => (prev === 0 ? lightboxImages.length - 1 : prev - 1));
              }}
              className="absolute left-4 md:left-6 z-50 p-3 bg-black/50 hover:bg-black/70 rounded-full text-white hover:text-[var(--luxury-gold)] transition-all duration-300 backdrop-blur-sm border border-white/10 hover:border-[var(--luxury-gold)]/50"
              aria-label="Previous image"
            >
              <ChevronLeft className="w-6 h-6 md:w-7 md:h-7" />
            </button>
          )}

          {}
          {lightboxImages.length > 1 && (
            <button
              onClick={(e) => {
                e.stopPropagation();
                setLightboxIndex((prev) => (prev === lightboxImages.length - 1 ? 0 : prev + 1));
              }}
              className="absolute right-4 md:right-6 z-50 p-3 bg-black/50 hover:bg-black/70 rounded-full text-white hover:text-[var(--luxury-gold)] transition-all duration-300 backdrop-blur-sm border border-white/10 hover:border-[var(--luxury-gold)]/50"
              aria-label="Next image"
            >
              <ChevronRight className="w-6 h-6 md:w-7 md:h-7" />
            </button>
          )}

          {}
          <div
            className="max-w-7xl max-h-[95vh] w-full h-full flex items-center justify-center p-4 md:p-8"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="relative w-full h-full flex items-center justify-center">
              <img
                src={lightboxImages[lightboxIndex]}
                alt={`Luxury gallery image ${lightboxIndex + 1}`}
                className="max-w-full max-h-full object-contain rounded-lg shadow-2xl animate-scale-in"
                onError={() => {
                  console.error(`Failed to load lightbox image: ${lightboxImages[lightboxIndex]}`);
                }}
              />
              
              {}
              {lightboxImages.length > 1 && (
                <div className="absolute bottom-4 md:bottom-6 left-1/2 transform -translate-x-1/2 bg-black/60 backdrop-blur-md text-white px-4 py-2 rounded-full text-sm md:text-base font-medium border border-white/20 shadow-lg">
                  {lightboxIndex + 1} / {lightboxImages.length}
                </div>
              )}

              {}
              {lightboxImages.length > 1 && lightboxImages.length <= 10 && (
                <div className="absolute bottom-20 md:bottom-24 left-1/2 transform -translate-x-1/2 flex gap-2 max-w-full overflow-x-auto px-4">
                  {lightboxImages.map((thumb, idx) => (
                    <button
                      key={idx}
                      onClick={(e) => {
                        e.stopPropagation();
                        setLightboxIndex(idx);
                      }}
                      className={`flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden border-2 transition-all duration-300 ${
                        idx === lightboxIndex
                          ? 'border-[var(--luxury-gold)] shadow-lg shadow-[var(--luxury-gold)]/50 scale-110'
                          : 'border-white/30 hover:border-white/60 opacity-70 hover:opacity-100'
                      }`}
                    >
                      <img
                        src={thumb}
                        alt={`Thumbnail ${idx + 1}`}
                        className="w-full h-full object-cover"
                      />
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default HomePage;
