import React, { useState, useEffect } from 'react';
import { 
  Home,
  Mail,
  Info,
  FileText,
  Search,
  Save,
  Globe,
  X,
  Plus,
  Trash2,
  Image as ImageIcon,
  Eye,
  Edit,
  Upload,
  Loader2,
  Check,
  XCircle,
  Award,
  Shield,
  RefreshCw,
  Accessibility,
  HelpCircle,
  Sparkles,
  ArrowRight
} from 'lucide-react';
import pageContentService, { PageContent, PageType, UpdatePageContentData } from '../../features/content/services/pageContentService';
import bannerService, { Banner } from '../../features/content/services/bannerService';
import serviceService, { Service, ServiceSection, CreateServiceData, UpdateServiceData } from '../../features/hotel_services/services/serviceService';
import { toast } from 'react-toastify';
import Loading from '../../shared/components/Loading';
import ConfirmationDialog from '../../shared/components/ConfirmationDialog';
import IconPicker from '../../features/system/components/IconPicker';
import Pagination from '../../shared/components/Pagination';
import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
import { getUserFriendlyError } from '../../shared/utils/errorSanitizer';

type ContentTab = 'overview' | 'home' | 'contact' | 'about' | 'footer' | 'seo' | 'privacy' | 'terms' | 'refunds' | 'cancellation' | 'accessibility' | 'faq' | 'services';

const PageContentDashboard: React.FC = () => {
  const [activeTab, setActiveTab] = useState<ContentTab>('overview');
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [pageContents, setPageContents] = useState<Record<PageType, PageContent | null>>({
    home: null,
    contact: null,
    about: null,
    footer: null,
    seo: null,
    privacy: null,
    terms: null,
    refunds: null,
    cancellation: null,
    accessibility: null,
    faq: null,
  });

  // Form states for each page
  const [homeData, setHomeData] = useState<UpdatePageContentData>({});
  const [contactData, setContactData] = useState<UpdatePageContentData>({});
  const [aboutData, setAboutData] = useState<UpdatePageContentData>({});
  const [footerData, setFooterData] = useState<UpdatePageContentData>({});
  const [seoData, setSeoData] = useState<UpdatePageContentData>({});
  const [privacyData, setPrivacyData] = useState<UpdatePageContentData>({ is_active: true });
  const [termsData, setTermsData] = useState<UpdatePageContentData>({ is_active: true });
  const [refundsData, setRefundsData] = useState<UpdatePageContentData>({ is_active: true });
  const [cancellationData, setCancellationData] = useState<UpdatePageContentData>({ is_active: true });
  const [accessibilityData, setAccessibilityData] = useState<UpdatePageContentData>({ is_active: true });
  const [faqData, setFaqData] = useState<UpdatePageContentData>({ is_active: true });

  // Banner management state
  const [banners, setBanners] = useState<Banner[]>([]);
  const [loadingBanners, setLoadingBanners] = useState(false);
  const [showBannerModal, setShowBannerModal] = useState(false);
  const [editingBanner, setEditingBanner] = useState<Banner | null>(null);
  const [bannerFormData, setBannerFormData] = useState({
    title: '',
    description: '',
    image_url: '',
    link_url: '',
    position: 'home',
    display_order: 0,
    is_active: true,
    start_date: '',
    end_date: '',
  });
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [uploadingImage, setUploadingImage] = useState(false);
  const [useFileUpload, setUseFileUpload] = useState(true);
  const [deleteConfirm, setDeleteConfirm] = useState<{ show: boolean; id: number | null }>({ show: false, id: null });

  // Service management state
  const { formatCurrency } = useFormatCurrency();
  const [services, setServices] = useState<Service[]>([]);
  const [servicesLoading, setServicesLoading] = useState(false);
  const [showServiceModal, setShowServiceModal] = useState(false);
  const [editingService, setEditingService] = useState<Service | null>(null);
  const [serviceFilters, setServiceFilters] = useState({
    search: '',
    status: '',
  });
  const [serviceCurrentPage, setServiceCurrentPage] = useState<number>(1);
  const [serviceTotalPages, setServiceTotalPages] = useState(1);
  const [serviceTotalItems, setServiceTotalItems] = useState(0);
  const serviceItemsPerPage = 10;
  const [serviceFormData, setServiceFormData] = useState({
    name: '',
    description: '',
    price: 0,
    unit: 'time',
    category: '',
    slug: '',
    image: '',
    content: '',
    sections: [] as ServiceSection[],
    meta_title: '',
    meta_description: '',
    meta_keywords: '',
    status: 'active' as 'active' | 'inactive',
  });
  const [serviceImagePreview, setServiceImagePreview] = useState<string | null>(null);
  const [_uploadingServiceImage, setUploadingServiceImage] = useState(false);
  const [deleteServiceConfirm, setDeleteServiceConfirm] = useState<{ show: boolean; id: number | null }>({ show: false, id: null });

  useEffect(() => {
    fetchAllPageContents();
    if (activeTab === 'home') {
      fetchBanners();
    }
    if (activeTab === 'services') {
      fetchServices();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeTab]);

  useEffect(() => {
    if (activeTab === 'services') {
      setServiceCurrentPage(1);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [serviceFilters]);

  useEffect(() => {
    if (activeTab === 'services') {
      fetchServices();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [serviceFilters, serviceCurrentPage, activeTab]);

  const fetchAllPageContents = async () => {
    try {
      setLoading(true);
      const response = await pageContentService.getAllPageContents();
      const contents = response.data.page_contents || [];
      
      const contentsMap: Record<PageType, PageContent | null> = {
        home: null,
        contact: null,
        about: null,
        footer: null,
        seo: null,
        privacy: null,
        terms: null,
        refunds: null,
        cancellation: null,
        accessibility: null,
        faq: null,
      };

      contents.forEach((content) => {
        if (content.page_type in contentsMap) {
          contentsMap[content.page_type as PageType] = content;
        }
      });

      setPageContents(contentsMap);
      
      // Initialize form data
      initializeFormData(contentsMap);
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to load page contents');
    } finally {
      setLoading(false);
    }
  };

  // Type guard for API errors
  const isApiError = (error: unknown): error is { response?: { data?: { message?: string; detail?: string | unknown[]; errors?: unknown[] } } } => {
    return typeof error === 'object' && error !== null;
  };

  // Helper function to normalize arrays (handle both arrays and JSON strings)
  const normalizeArray = <T,>(value: unknown): T[] => {
    if (!value) return [];
    if (Array.isArray(value)) return value as T[];
    if (typeof value === 'string') {
      try {
        const parsed = JSON.parse(value);
        return Array.isArray(parsed) ? (parsed as T[]) : [];
      } catch {
        return [];
      }
    }
    return [];
  };

  const initializeFormData = (contents: Record<PageType, PageContent | null>) => {
    // Home
    if (contents.home) {
      setHomeData({
        title: contents.home.title || '',
        subtitle: contents.home.subtitle || '',
        description: contents.home.description || '',
        content: contents.home.content || '',
        hero_title: contents.home.hero_title || '',
        hero_subtitle: contents.home.hero_subtitle || '',
        hero_image: contents.home.hero_image || '',
        meta_title: contents.home.meta_title || '',
        meta_description: contents.home.meta_description || '',
        meta_keywords: contents.home.meta_keywords || '',
        og_title: contents.home.og_title || '',
        og_description: contents.home.og_description || '',
        og_image: contents.home.og_image || '',
        features: normalizeArray<{ icon?: string; title: string; description: string; image?: string }>(contents.home.features),
        features_section_title: contents.home.features_section_title || '',
        features_section_subtitle: contents.home.features_section_subtitle || '',
        amenities_section_title: contents.home.amenities_section_title || '',
        amenities_section_subtitle: contents.home.amenities_section_subtitle || '',
        amenities: normalizeArray<{ icon?: string; title: string; description: string; image?: string }>(contents.home.amenities),
        testimonials_section_title: contents.home.testimonials_section_title || '',
        testimonials_section_subtitle: contents.home.testimonials_section_subtitle || '',
        testimonials: normalizeArray<{ name: string; role: string; image?: string; rating: number; comment: string }>(contents.home.testimonials),
        about_preview_title: contents.home.about_preview_title || '',
        about_preview_subtitle: contents.home.about_preview_subtitle || '',
        about_preview_content: contents.home.about_preview_content || '',
        about_preview_image: contents.home.about_preview_image || '',
        stats: normalizeArray<{ number: string; label: string; icon?: string }>(contents.home.stats),
        stats_section_title: contents.home.stats_section_title || '',
        stats_section_subtitle: contents.home.stats_section_subtitle || '',
        rooms_section_title: contents.home.rooms_section_title || '',
        rooms_section_subtitle: contents.home.rooms_section_subtitle || '',
        rooms_section_button_text: contents.home.rooms_section_button_text || '',
        rooms_section_button_link: contents.home.rooms_section_button_link || '',
        rooms_section_enabled: contents.home.rooms_section_enabled ?? true,
        luxury_section_title: contents.home.luxury_section_title || '',
        luxury_section_subtitle: contents.home.luxury_section_subtitle || '',
        luxury_section_image: contents.home.luxury_section_image || '',
        luxury_features: normalizeArray<{ icon?: string; title: string; description: string }>(contents.home.luxury_features),
        luxury_gallery_section_title: contents.home.luxury_gallery_section_title || '',
        luxury_gallery_section_subtitle: contents.home.luxury_gallery_section_subtitle || '',
        luxury_gallery: normalizeArray<string>(contents.home.luxury_gallery),
        luxury_testimonials_section_title: contents.home.luxury_testimonials_section_title || '',
        luxury_testimonials_section_subtitle: contents.home.luxury_testimonials_section_subtitle || '',
        luxury_testimonials: normalizeArray<{ name: string; title?: string; quote: string; image?: string }>(contents.home.luxury_testimonials),
        luxury_services_section_title: contents.home.luxury_services_section_title || '',
        luxury_services_section_subtitle: contents.home.luxury_services_section_subtitle || '',
        services_section_button_text: contents.home.services_section_button_text || '',
        services_section_button_link: contents.home.services_section_button_link || '',
        services_section_limit: contents.home.services_section_limit || 6,
        services_fallback_icon: contents.home.services_fallback_icon || 'Award',
        luxury_experiences_section_title: contents.home.luxury_experiences_section_title || '',
        luxury_experiences_section_subtitle: contents.home.luxury_experiences_section_subtitle || '',
        luxury_experiences: normalizeArray<{ icon?: string; title: string; description: string; year?: string; image?: string }>(contents.home.luxury_experiences),
        awards_section_title: contents.home.awards_section_title || '',
        awards_section_subtitle: contents.home.awards_section_subtitle || '',
        awards: normalizeArray<{ icon?: string; title: string; description: string; year?: string; image?: string }>(contents.home.awards),
        cta_title: contents.home.cta_title || '',
        cta_subtitle: contents.home.cta_subtitle || '',
        cta_button_text: contents.home.cta_button_text || '',
        cta_button_link: contents.home.cta_button_link || '',
        cta_image: contents.home.cta_image || '',
        partners_section_title: contents.home.partners_section_title || '',
        partners_section_subtitle: contents.home.partners_section_subtitle || '',
        partners: normalizeArray<{ name: string; logo: string; link?: string }>(contents.home.partners),
        sections_enabled: contents.home.sections_enabled || {},
        trust_badges_section_title: contents.home.trust_badges_section_title || '',
        trust_badges_section_subtitle: contents.home.trust_badges_section_subtitle || '',
        trust_badges: normalizeArray<{ name: string; logo: string; description?: string; link?: string }>(contents.home.trust_badges),
        trust_badges_enabled: contents.home.trust_badges_enabled ?? false,
        promotions_section_title: contents.home.promotions_section_title || '',
        promotions_section_subtitle: contents.home.promotions_section_subtitle || '',
        promotions: normalizeArray<{ title: string; description: string; image?: string; discount?: string; valid_until?: string; link?: string; button_text?: string }>(contents.home.promotions),
        promotions_enabled: contents.home.promotions_enabled ?? false,
        blog_section_title: contents.home.blog_section_title || '',
        blog_section_subtitle: contents.home.blog_section_subtitle || '',
        blog_posts_limit: contents.home.blog_posts_limit || 3,
        blog_enabled: contents.home.blog_enabled ?? false,
        hero_video_url: contents.home.hero_video_url || '',
        hero_video_poster: contents.home.hero_video_poster || '',
      });
    }

      // Contact
    if (contents.contact) {
      const defaultContactIcons = {
        hero: 'Mail',
        email: 'Mail',
        phone: 'Phone',
        location: 'MapPin',
        name_field: 'User',
        email_field: 'Mail',
        phone_field: 'Phone',
        subject_field: 'MessageSquare',
        message_field: 'MessageSquare',
        submit_button: 'Send',
      };
      setContactData({
        title: contents.contact.title || '',
        subtitle: contents.contact.subtitle || '',
        description: contents.contact.description || '',
        content: contents.contact.content || '',
        map_url: contents.contact.map_url || '',
        contact_icons: contents.contact.contact_icons ? {
          ...defaultContactIcons,
          ...contents.contact.contact_icons,
        } : defaultContactIcons,
        meta_title: contents.contact.meta_title || '',
        meta_description: contents.contact.meta_description || '',
      });
    } else {
      // Initialize with defaults even if no contact data exists
      setContactData({
        contact_icons: {
          hero: 'Mail',
          email: 'Mail',
          phone: 'Phone',
          location: 'MapPin',
          name_field: 'User',
          email_field: 'Mail',
          phone_field: 'Phone',
          subject_field: 'MessageSquare',
          message_field: 'MessageSquare',
          submit_button: 'Send',
        },
      });
    }

    // About
    if (contents.about) {
      const defaultAboutContactIcons = {
        location: 'MapPin',
        phone: 'Phone',
        email: 'Mail',
      };
      setAboutData({
        title: contents.about.title || '',
        subtitle: contents.about.subtitle || '',
        description: contents.about.description || '',
        content: contents.about.content || '',
        story_content: contents.about.story_content || '',
        values: normalizeArray<{ icon?: string; title: string; description: string }>(contents.about.values),
        features: normalizeArray<{ icon?: string; title: string; description: string; image?: string }>(contents.about.features),
        about_hero_image: contents.about.about_hero_image || '',
        about_hero_icon: contents.about.about_hero_icon || 'Hotel',
        about_contact_icons: contents.about.about_contact_icons ? {
          ...defaultAboutContactIcons,
          ...contents.about.about_contact_icons,
        } : defaultAboutContactIcons,
        about_learn_more_icon: contents.about.about_learn_more_icon || 'Hotel',
        mission: contents.about.mission || '',
        vision: contents.about.vision || '',
        team: normalizeArray<{ name: string; role: string; image?: string; bio?: string; social_links?: { linkedin?: string; twitter?: string; email?: string } }>(contents.about.team),
        timeline: normalizeArray<{ year: string; title: string; description: string; image?: string }>(contents.about.timeline),
        achievements: normalizeArray<{ icon?: string; title: string; description: string; year?: string; image?: string }>(contents.about.achievements),
        meta_title: contents.about.meta_title || '',
        meta_description: contents.about.meta_description || '',
      });
    } else {
      // Initialize with defaults even if no about data exists
      setAboutData({
        about_hero_icon: 'Hotel',
        about_contact_icons: {
          location: 'MapPin',
          phone: 'Phone',
          email: 'Mail',
        },
        about_learn_more_icon: 'Hotel',
      });
    }

    // Footer
    if (contents.footer) {
      setFooterData({
        title: contents.footer.title || '',
        description: contents.footer.description || '',
        social_links: contents.footer.social_links || {},
        footer_links: contents.footer.footer_links || { quick_links: [], support_links: [] },
        badges: contents.footer.badges || [],
        copyright_text: contents.footer.copyright_text || '',
        meta_title: contents.footer.meta_title || '',
        meta_description: contents.footer.meta_description || '',
      });
    }

    // SEO
    if (contents.seo) {
      setSeoData({
        meta_title: contents.seo.meta_title || '',
        meta_description: contents.seo.meta_description || '',
        meta_keywords: contents.seo.meta_keywords || '',
        og_title: contents.seo.og_title || '',
        og_description: contents.seo.og_description || '',
        og_image: contents.seo.og_image || '',
        canonical_url: contents.seo.canonical_url || '',
      });
    }

    // Privacy
    if (contents.privacy) {
      setPrivacyData({
        title: contents.privacy.title || '',
        subtitle: contents.privacy.subtitle || '',
        description: contents.privacy.description || '',
        content: contents.privacy.content || '',
        meta_title: contents.privacy.meta_title || '',
        meta_description: contents.privacy.meta_description || '',
        is_active: contents.privacy.is_active ?? true,
      });
    }

    // Terms
    if (contents.terms) {
      setTermsData({
        title: contents.terms.title || '',
        subtitle: contents.terms.subtitle || '',
        description: contents.terms.description || '',
        content: contents.terms.content || '',
        meta_title: contents.terms.meta_title || '',
        meta_description: contents.terms.meta_description || '',
        is_active: contents.terms.is_active ?? true,
      });
    }

    // Refunds
    if (contents.refunds) {
      setRefundsData({
        title: contents.refunds.title || '',
        subtitle: contents.refunds.subtitle || '',
        description: contents.refunds.description || '',
        content: contents.refunds.content || '',
        meta_title: contents.refunds.meta_title || '',
        meta_description: contents.refunds.meta_description || '',
        is_active: contents.refunds.is_active ?? true,
      });
    }

    // Cancellation
    if (contents.cancellation) {
      setCancellationData({
        title: contents.cancellation.title || '',
        subtitle: contents.cancellation.subtitle || '',
        description: contents.cancellation.description || '',
        content: contents.cancellation.content || '',
        meta_title: contents.cancellation.meta_title || '',
        meta_description: contents.cancellation.meta_description || '',
        is_active: contents.cancellation.is_active ?? true,
      });
    }

    // Accessibility
    if (contents.accessibility) {
      setAccessibilityData({
        title: contents.accessibility.title || '',
        subtitle: contents.accessibility.subtitle || '',
        description: contents.accessibility.description || '',
        content: contents.accessibility.content || '',
        meta_title: contents.accessibility.meta_title || '',
        meta_description: contents.accessibility.meta_description || '',
        is_active: contents.accessibility.is_active ?? true,
      });
    }

    // FAQ
    if (contents.faq) {
      setFaqData({
        title: contents.faq.title || '',
        subtitle: contents.faq.subtitle || '',
        description: contents.faq.description || '',
        content: contents.faq.content || '',
        meta_title: contents.faq.meta_title || '',
        meta_description: contents.faq.meta_description || '',
        is_active: contents.faq.is_active ?? true,
      });
    }
  };

  const handleSave = async (pageType: PageType, data: UpdatePageContentData) => {
    try {
      setSaving(true);
      // Remove contact_info for contact and footer pages since it's now managed centrally
      const { contact_info: _contact_info, luxury_services: _luxury_services, ...dataToSave } = data;
      
      // Clean up data: remove undefined values and ensure proper types
      const cleanData: Record<string, unknown> = {};
      
      // List of fields that should be strings (not objects/arrays)
      const stringFields = [
        'title', 'subtitle', 'description', 'content', 'meta_title', 'meta_description', 'meta_keywords',
        'og_title', 'og_description', 'og_image', 'canonical_url', 'hero_title', 'hero_subtitle', 'hero_image',
        'hero_video_url', 'hero_video_poster',
        'story_content', 'about_hero_image', 'mission', 'vision',
        'features_section_title', 'features_section_subtitle',
        'amenities_section_title', 'amenities_section_subtitle',
        'testimonials_section_title', 'testimonials_section_subtitle',
        'gallery_section_title', 'gallery_section_subtitle',
        'luxury_section_title', 'luxury_section_subtitle', 'luxury_section_image',
        'luxury_gallery_section_title', 'luxury_gallery_section_subtitle',
        'luxury_testimonials_section_title', 'luxury_testimonials_section_subtitle',
        'about_preview_title', 'about_preview_subtitle', 'about_preview_content', 'about_preview_image',
        'stats_section_title', 'stats_section_subtitle',
        'rooms_section_title', 'rooms_section_subtitle', 'rooms_section_button_text', 'rooms_section_button_link',
        'luxury_services_section_title', 'luxury_services_section_subtitle',
        'services_section_button_text', 'services_section_button_link',
        'luxury_experiences_section_title', 'luxury_experiences_section_subtitle',
        'awards_section_title', 'awards_section_subtitle',
        'cta_title', 'cta_subtitle', 'cta_button_text', 'cta_button_link', 'cta_image',
        'partners_section_title', 'partners_section_subtitle',
        'trust_badges_section_title', 'trust_badges_section_subtitle',
        'promotions_section_title', 'promotions_section_subtitle',
        'blog_section_title', 'blog_section_subtitle',
        'copyright_text', 'map_url'
      ];
      
      const dataObj = dataToSave as Record<string, unknown>;
      Object.keys(dataObj).forEach((key) => {
        const value = dataObj[key];
        
        // Skip undefined values
        if (value === undefined) return;
        
        // Handle string fields - ensure they're strings, skip empty/null values
        if (stringFields.includes(key)) {
          if (typeof value === 'string' && value.trim() !== '') {
            cleanData[key] = value.trim();
          } else {
            // Skip empty strings and null values - don't send them
            return;
          }
          return;
        }
        
        // Handle empty strings - skip them (don't send empty values)
        if (value === '' || value === null) {
          return;
        }
        
        // Handle arrays - only send non-empty arrays
        if (Array.isArray(value)) {
          if (value.length > 0) {
            cleanData[key] = value;
          }
          // Skip empty arrays - don't send them
          return;
        }
        
        // Handle objects - keep as is (for contact_info, social_links, etc.)
        if (typeof value === 'object' && value !== null) {
          cleanData[key] = value;
          return;
        }
        
        // Handle special fields that might be numbers or booleans
        if (key === 'services_section_limit' || key === 'blog_posts_limit') {
          if (typeof value === 'number' && value > 0) {
            cleanData[key] = value;
          }
          return;
        }
        if (key === 'rooms_section_enabled' || key === 'trust_badges_enabled' || 
            key === 'promotions_enabled' || key === 'blog_enabled') {
          cleanData[key] = value === true;
          return;
        }
        
        // Handle other types - ensure they're valid
        if (typeof value === 'number' || typeof value === 'boolean') {
          cleanData[key] = value;
          return;
        }
        
        // Skip any other unexpected types
        console.warn(`Skipping field ${key} with unexpected type: ${typeof value}`, value);
      });
      
      // Log the data being sent for debugging
      console.log(`Saving ${pageType} page content:`, {
        fieldCount: Object.keys(cleanData).length,
        fields: Object.keys(cleanData),
        sampleData: Object.entries(cleanData).slice(0, 5).reduce((acc, [key, value]) => {
          acc[key] = Array.isArray(value) ? `Array[${value.length}]` : typeof value === 'object' ? 'Object' : value;
          return acc;
        }, {} as Record<string, unknown>)
      });
      
      if (pageType === 'contact' || pageType === 'footer') {
        await pageContentService.updatePageContent(pageType, cleanData);
      } else if (pageType === 'home') {
        // For home page, exclude luxury_services (services are managed in Service Management)
        await pageContentService.updatePageContent(pageType, cleanData);
      } else {
        await pageContentService.updatePageContent(pageType, cleanData);
      }
      toast.success(`${pageType.charAt(0).toUpperCase() + pageType.slice(1)} content saved successfully`);
      await fetchAllPageContents();
    } catch (error: unknown) {
      console.error('Error saving page content:', error);
      
      let errorMessage: string | undefined;
      
      if (isApiError(error)) {
        // Log detailed validation errors
        if (error.response?.data?.errors && Array.isArray(error.response.data.errors)) {
          console.error('Full validation errors:', JSON.stringify(error.response.data.errors, null, 2));
          const fieldErrors = error.response.data.errors.map((err: unknown, index: number) => {
            const errObj = err as Record<string, unknown>;
            const field = Array.isArray(errObj.loc) ? errObj.loc.join('.') : (errObj.loc || errObj.field || `error_${index}`);
            const msg = errObj.msg || errObj.message || 'Unknown error';
            const type = errObj.type || 'validation_error';
            return { field, msg, type, full: errObj };
          });
          console.error('Parsed field errors:', fieldErrors);
        }
        
        // Get error message - check multiple possible error formats
        errorMessage = typeof error.response?.data?.detail === 'string' 
          ? error.response.data.detail 
          : error.response?.data?.message;
        
        // Format validation errors for display - handle different error formats
        if (error.response?.data?.errors && Array.isArray(error.response.data.errors) && error.response.data.errors.length > 0) {
          const errorList = error.response.data.errors.map((err: unknown, index: number) => {
            const errObj = err as Record<string, unknown>;
            const field = Array.isArray(errObj.loc) ? errObj.loc.join('.') : (errObj.loc || errObj.field || `Field ${index + 1}`);
            const msg = errObj.msg || errObj.message || 'Invalid value';
            return `${field}: ${msg}`;
          }).join('\n');
          errorMessage = `Validation errors:\n${errorList}`;
          
          // Also log to console for debugging
          console.error('Validation error details:', errorList);
        }
        
        // Handle FastAPI validation error format
        if (error.response?.data?.detail && Array.isArray(error.response.data.detail)) {
          const errorList = error.response.data.detail.map((err: unknown, index: number) => {
            const errObj = err as Record<string, unknown>;
            const field = Array.isArray(errObj.loc) ? errObj.loc.join('.') : (errObj.loc || `Field ${index + 1}`);
            const msg = errObj.msg || 'Invalid value';
            return `${field}: ${msg}`;
          }).join('\n');
          errorMessage = `Validation errors:\n${errorList}`;
          console.error('FastAPI validation errors:', errorList);
        }
      }
      
      if (!errorMessage) {
        errorMessage = getUserFriendlyError(error) || `Failed to save ${pageType} content`;
      }
      
      toast.error(errorMessage);
    } finally {
      setSaving(false);
    }
  };

  // Banner management functions
  const fetchBanners = async () => {
    try {
      setLoadingBanners(true);
      const response = await bannerService.getAllBanners({ position: 'home' });
      if (response.success || response.status === 'success') {
        setBanners(response.data?.banners || []);
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to load banners');
    } finally {
      setLoadingBanners(false);
    }
  };

  const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 5 * 1024 * 1024) {
      toast.error('Image size must be less than 5MB');
      return;
    }

    setImageFile(file);

    // Create preview
    const reader = new FileReader();
    reader.onloadend = () => {
      setImagePreview(reader.result as string);
    };
    reader.readAsDataURL(file);

    // Upload image immediately
    try {
      setUploadingImage(true);
      const response = await bannerService.uploadBannerImage(file);
      if (response.success) {
        setBannerFormData({ ...bannerFormData, image_url: response.data.image_url });
        toast.success('Image uploaded successfully');
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to upload image');
      setImageFile(null);
      setImagePreview(null);
    } finally {
      setUploadingImage(false);
    }
  };

  // Generic image upload handler for page content images
  const handlePageContentImageUpload = async (
    file: File,
    onSuccess: (imageUrl: string) => void
  ) => {
    if (file.size > 5 * 1024 * 1024) {
      toast.error('Image size must be less than 5MB');
      return;
    }

    try {
      const response = await pageContentService.uploadImage(file);
      if (response.success) {
        onSuccess(response.data.image_url);
        toast.success('Image uploaded successfully');
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to upload image');
    }
  };

  const handleBannerSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!bannerFormData.image_url && !imageFile) {
      toast.error('Please upload an image or provide an image URL');
      return;
    }

    try {
      let imageUrl = bannerFormData.image_url;
      if (imageFile && !imageUrl) {
        setUploadingImage(true);
        const uploadResponse = await bannerService.uploadBannerImage(imageFile);
        if (uploadResponse.success) {
          imageUrl = uploadResponse.data.image_url;
        } else {
          throw new Error('Failed to upload image');
        }
        setUploadingImage(false);
      }

      const submitData = {
        ...bannerFormData,
        image_url: imageUrl,
        start_date: bannerFormData.start_date || undefined,
        end_date: bannerFormData.end_date || undefined,
      };

      if (editingBanner) {
        await bannerService.updateBanner(editingBanner.id, submitData);
        toast.success('Banner updated successfully');
      } else {
        await bannerService.createBanner(submitData);
        toast.success('Banner created successfully');
      }
      setShowBannerModal(false);
      resetBannerForm();
      fetchBanners();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'An error occurred');
      setUploadingImage(false);
    }
  };

  const handleEditBanner = (banner: Banner) => {
    setEditingBanner(banner);
    setBannerFormData({
      title: banner.title || '',
      description: banner.description || '',
      image_url: banner.image_url || '',
      link_url: banner.link_url || '',
      position: banner.position || 'home',
      display_order: banner.display_order || 0,
      is_active: banner.is_active ?? true,
      start_date: banner.start_date ? banner.start_date.split('T')[0] : '',
      end_date: banner.end_date ? banner.end_date.split('T')[0] : '',
    });
    setImageFile(null);
    const previewUrl = banner.image_url 
      ? (banner.image_url.startsWith('http') 
          ? banner.image_url 
          : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${banner.image_url}`)
      : null;
    setImagePreview(previewUrl);
    setUseFileUpload(false);
    setShowBannerModal(true);
  };

  const handleDeleteBanner = async () => {
    if (!deleteConfirm.id) return;
    
    try {
      await bannerService.deleteBanner(deleteConfirm.id);
      toast.success('Banner deleted successfully');
      setDeleteConfirm({ show: false, id: null });
      fetchBanners();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to delete banner');
    }
  };

  const resetBannerForm = () => {
    setBannerFormData({
      title: '',
      description: '',
      image_url: '',
      link_url: '',
      position: 'home',
      display_order: 0,
      is_active: true,
      start_date: '',
      end_date: '',
    });
    setImageFile(null);
    setImagePreview(null);
    setUseFileUpload(true);
    setEditingBanner(null);
  };

  const toggleBannerActive = async (banner: Banner) => {
    try {
      await bannerService.updateBanner(banner.id, {
        is_active: !banner.is_active,
      });
      toast.success(`Banner ${!banner.is_active ? 'activated' : 'deactivated'}`);
      fetchBanners();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to update banner');
    }
  };

  // Service management functions
  const fetchServices = async () => {
    try {
      setServicesLoading(true);
      const response = await serviceService.getServices({
        ...serviceFilters,
        page: serviceCurrentPage,
        limit: serviceItemsPerPage,
      });
      setServices(response.data.services);
      if (response.data.pagination) {
        setServiceTotalPages(response.data.pagination.totalPages);
        setServiceTotalItems(response.data.pagination.total);
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to load services list');
    } finally {
      setServicesLoading(false);
    }
  };

  const handleServiceSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      // Auto-generate slug if not provided
      const baseData = {
        ...serviceFormData,
        slug: serviceFormData.slug || serviceFormData.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, ''),
      };
      
      // Only include sections if there are any
      const sectionsData = serviceFormData.sections.length > 0
        ? { sections: JSON.stringify(serviceFormData.sections) }
        : {};
      
      if (editingService) {
        const dataToSubmit: UpdateServiceData = {
          ...baseData,
          ...sectionsData,
        };
        await serviceService.updateService(editingService.id, dataToSubmit);
        toast.success('Service updated successfully');
      } else {
        const dataToSubmit: CreateServiceData = {
          ...baseData,
          ...sectionsData,
        };
        await serviceService.createService(dataToSubmit);
        toast.success('Service added successfully');
      }
      setShowServiceModal(false);
      resetServiceForm();
      fetchServices();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'An error occurred');
    }
  };

  const handleEditService = (service: Service) => {
    setEditingService(service);
    
    // Parse sections if it's a string
    let sections: ServiceSection[] = [];
    if (service.sections) {
      if (typeof service.sections === 'string') {
        try {
          sections = JSON.parse(service.sections);
        } catch {
          sections = [];
        }
      } else if (Array.isArray(service.sections)) {
        sections = service.sections;
      }
    }
    
    setServiceFormData({
      name: service.name,
      description: service.description || '',
      price: service.price,
      unit: service.unit || 'time',
      category: service.category || '',
      slug: service.slug || '',
      image: service.image || '',
      content: service.content || '',
      sections: sections,
      meta_title: service.meta_title || '',
      meta_description: service.meta_description || '',
      meta_keywords: service.meta_keywords || '',
      status: service.status,
    });
    
    // Set image preview if image exists
    if (service.image) {
      setServiceImagePreview(service.image.startsWith('http') ? service.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${service.image}`);
    } else {
      setServiceImagePreview(null);
    }
    
    setShowServiceModal(true);
  };

  const handleDeleteServiceClick = (id: number) => {
    setDeleteServiceConfirm({ show: true, id });
  };

  const handleDeleteService = async () => {
    if (!deleteServiceConfirm.id) return;
    
    try {
      await serviceService.deleteService(deleteServiceConfirm.id);
      toast.success('Service deleted successfully');
      setDeleteServiceConfirm({ show: false, id: null });
      fetchServices();
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Unable to delete service');
      setDeleteServiceConfirm({ show: false, id: null });
    }
  };

  const resetServiceForm = () => {
    setEditingService(null);
    setServiceFormData({
      name: '',
      description: '',
      price: 0,
      unit: 'time',
      category: '',
      slug: '',
      image: '',
      content: '',
      sections: [],
      meta_title: '',
      meta_description: '',
      meta_keywords: '',
      status: 'active',
    });
    setServiceImagePreview(null);
  };

  const handleServiceImageUpload = async (file: File) => {
    try {
      setUploadingServiceImage(true);
      const formData = new FormData();
      formData.append('image', file);
      
      const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/page-content/upload-image`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${localStorage.getItem('token')}`,
        },
        body: formData,
      });
      
      const data = await response.json();
      if (data.status === 'success' && data.data?.image_url) {
        setServiceFormData(prev => ({ ...prev, image: data.data.image_url }));
        setServiceImagePreview(data.data.image_url);
        toast.success('Image uploaded successfully');
      } else {
        throw new Error(data.message || 'Upload failed');
      }
    } catch (error: unknown) {
      toast.error(getUserFriendlyError(error) || 'Failed to upload image');
    } finally {
      setUploadingServiceImage(false);
    }
  };

  const tabs = [
    { id: 'overview' as ContentTab, label: 'Overview', icon: Home },
    { id: 'home' as ContentTab, label: 'Home', icon: Home },
    { id: 'contact' as ContentTab, label: 'Contact', icon: Mail },
    { id: 'about' as ContentTab, label: 'About', icon: Info },
    { id: 'privacy' as ContentTab, label: 'Privacy', icon: Shield },
    { id: 'terms' as ContentTab, label: 'Terms', icon: FileText },
    { id: 'refunds' as ContentTab, label: 'Refunds', icon: RefreshCw },
    { id: 'cancellation' as ContentTab, label: 'Cancellation', icon: XCircle },
    { id: 'accessibility' as ContentTab, label: 'Accessibility', icon: Accessibility },
    { id: 'faq' as ContentTab, label: 'FAQ', icon: HelpCircle },
    { id: 'footer' as ContentTab, label: 'Footer', icon: FileText },
    { id: 'services' as ContentTab, label: 'Services', icon: Sparkles },
    { id: 'seo' as ContentTab, label: 'SEO', icon: Search },
  ];

  if (loading) {
    return <Loading />;
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
      <div className="max-w-7xl mx-auto px-2 sm:px-3 md:px-4 lg:px-6 xl:px-8 py-2 sm:py-4 md:py-6 lg:py-8 space-y-3 sm:space-y-4 md:space-y-6 lg:space-y-8">
        {/* Luxury Header */}
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-purple-400/5 via-transparent to-indigo-600/5 rounded-3xl blur-3xl"></div>
          <div className="relative bg-white/80 backdrop-blur-xl rounded-xl sm:rounded-2xl md:rounded-3xl shadow-2xl border border-purple-200/30 p-3 sm:p-4 md:p-6 lg:p-8">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 sm:gap-6 md:gap-8">
              <div className="flex items-start gap-3 sm:gap-4 md:gap-5">
                <div className="relative flex-shrink-0">
                  <div className="absolute inset-0 bg-gradient-to-br from-purple-400 to-indigo-600 rounded-xl sm:rounded-2xl blur-lg opacity-50"></div>
                  <div className="relative p-2.5 sm:p-3 md:p-4 rounded-xl sm:rounded-2xl bg-gradient-to-br from-purple-500 via-purple-500 to-indigo-600 shadow-xl border border-purple-400/50">
                    <Globe className="w-5 h-5 sm:w-6 sm:h-6 md:w-8 md:h-8 text-white" />
                  </div>
                </div>
                <div className="space-y-2 sm:space-y-3 flex-1">
                  <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
                    <h1 className="text-2xl sm:text-3xl md:text-3xl font-extrabold bg-gradient-to-r from-slate-900 via-purple-700 to-slate-900 bg-clip-text text-transparent">
                      Page Content Management
                    </h1>
                  </div>
                  <p className="text-gray-600 text-xs sm:text-sm md:text-sm max-w-2xl leading-relaxed">
                    Centralized control for all frontend pages and SEO optimization
                  </p>
                </div>
              </div>
            </div>

            {/* Premium Tab Navigation */}
            <div className="mt-4 sm:mt-6 md:mt-8 lg:mt-10 pt-4 sm:pt-6 md:pt-8 border-t border-gradient-to-r from-transparent via-purple-200/30 to-transparent">
              <div className="overflow-x-auto -mx-2 sm:-mx-3 px-2 sm:px-3 scrollbar-hide">
                <div className="flex gap-2 sm:gap-3 min-w-max sm:min-w-0 sm:flex-wrap">
                  {tabs.map((tab) => {
                    const Icon = tab.icon;
                    const isActive = activeTab === tab.id;
                    return (
                      <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id)}
                        className={`
                          group relative flex items-center gap-1.5 sm:gap-2 md:gap-3 px-3 sm:px-4 md:px-6 py-2 sm:py-2.5 md:py-3.5 rounded-lg sm:rounded-xl font-semibold text-xs sm:text-sm flex-shrink-0
                          transition-all duration-300 overflow-hidden
                          ${
                            isActive
                              ? 'bg-gradient-to-r from-purple-500 via-purple-500 to-indigo-600 text-white shadow-xl shadow-purple-500/40 scale-105'
                              : 'bg-white/80 text-gray-700 border border-gray-200/60 hover:border-purple-300/60 hover:bg-gradient-to-r hover:from-purple-50/50 hover:to-indigo-50/30 hover:shadow-lg hover:scale-102'
                          }
                        `}
                      >
                        {isActive && (
                          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
                        )}
                        <Icon className={`w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-5 md:h-5 transition-transform duration-300 flex-shrink-0 ${isActive ? 'text-white' : 'text-gray-600 group-hover:text-purple-600 group-hover:scale-110'}`} />
                        <span className="relative z-10 whitespace-nowrap">{tab.label}</span>
                        {isActive && (
                          <div className="absolute bottom-0 left-0 right-0 h-0.5 sm:h-1 bg-gradient-to-r from-purple-300 via-purple-400 to-indigo-400"></div>
                        )}
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Overview Tab */}
        {activeTab === 'overview' && (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 lg:gap-8">
            {[
              { id: 'home' as PageType, label: 'Home Page', icon: Home, color: 'blue', description: 'Manage hero section, featured content' },
              { id: 'services' as PageType, label: 'Services', icon: Sparkles, color: 'amber', description: 'Manage hotel services and amenities', isSpecial: true },
              { id: 'contact' as PageType, label: 'Contact Page', icon: Mail, color: 'green', description: 'Manage contact information and form' },
              { id: 'about' as PageType, label: 'About Page', icon: Info, color: 'amber', description: 'Manage story, values, and features' },
              { id: 'privacy' as PageType, label: 'Privacy Policy', icon: Shield, color: 'red', description: 'Manage privacy policy content' },
              { id: 'terms' as PageType, label: 'Terms & Conditions', icon: FileText, color: 'teal', description: 'Manage terms and conditions' },
              { id: 'refunds' as PageType, label: 'Refunds Policy', icon: RefreshCw, color: 'orange', description: 'Manage refunds policy content' },
              { id: 'cancellation' as PageType, label: 'Cancellation Policy', icon: XCircle, color: 'pink', description: 'Manage cancellation policy content' },
              { id: 'accessibility' as PageType, label: 'Accessibility', icon: Accessibility, color: 'cyan', description: 'Manage accessibility information' },
              { id: 'faq' as PageType, label: 'FAQ', icon: HelpCircle, color: 'violet', description: 'Manage frequently asked questions' },
              { id: 'footer' as PageType, label: 'Footer', icon: FileText, color: 'purple', description: 'Manage footer links and social media' },
              { id: 'seo' as PageType, label: 'SEO Settings', icon: Search, color: 'indigo', description: 'Manage meta tags and SEO optimization' },
            ].map((page) => {
              const Icon = page.icon;
              const hasContent = page.id in pageContents && pageContents[page.id as PageType] !== null;
              const handleClick = () => {
                setActiveTab(page.id as ContentTab);
              };
              return (
                <div 
                  key={page.id}
                  onClick={handleClick}
                  className={`group relative bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border p-8 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:scale-105 overflow-hidden ${
                    page.color === 'blue' ? 'border-blue-100/50 hover:border-blue-300/60' :
                    page.color === 'green' ? 'border-green-100/50 hover:border-green-300/60' :
                    page.color === 'amber' ? 'border-amber-100/50 hover:border-amber-300/60' :
                    page.color === 'purple' ? 'border-purple-100/50 hover:border-purple-300/60' :
                    page.color === 'red' ? 'border-red-100/50 hover:border-red-300/60' :
                    page.color === 'teal' ? 'border-teal-100/50 hover:border-teal-300/60' :
                    page.color === 'orange' ? 'border-orange-100/50 hover:border-orange-300/60' :
                    'border-indigo-100/50 hover:border-indigo-300/60'
                  }`}
                >
                  <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br opacity-10 to-transparent rounded-bl-full ${
                    page.color === 'blue' ? 'from-blue-400' :
                    page.color === 'green' ? 'from-green-400' :
                    page.color === 'amber' ? 'from-amber-400' :
                    page.color === 'purple' ? 'from-purple-400' :
                    page.color === 'red' ? 'from-red-400' :
                    page.color === 'teal' ? 'from-teal-400' :
                    page.color === 'orange' ? 'from-orange-400' :
                    'from-indigo-400'
                  }`}></div>
                  <div className="relative space-y-5">
                    <div className="flex items-start justify-between">
                      <div className="flex items-center gap-4">
                        <div className={`relative p-3.5 rounded-xl shadow-lg border group-hover:scale-110 transition-transform ${
                          page.color === 'blue' ? 'bg-gradient-to-br from-blue-500 to-blue-600 border-blue-400/50' :
                          page.color === 'green' ? 'bg-gradient-to-br from-green-500 to-green-600 border-green-400/50' :
                          page.color === 'amber' ? 'bg-gradient-to-br from-amber-500 to-amber-600 border-amber-400/50' :
                          page.color === 'purple' ? 'bg-gradient-to-br from-purple-500 to-purple-600 border-purple-400/50' :
                          page.color === 'red' ? 'bg-gradient-to-br from-red-500 to-red-600 border-red-400/50' :
                          page.color === 'teal' ? 'bg-gradient-to-br from-teal-500 to-teal-600 border-teal-400/50' :
                          page.color === 'orange' ? 'bg-gradient-to-br from-orange-500 to-orange-600 border-orange-400/50' :
                          'bg-gradient-to-br from-indigo-500 to-indigo-600 border-indigo-400/50'
                        }`}>
                          <Icon className="w-6 h-6 text-white" />
                        </div>
                        <div>
                          <h3 className="font-bold text-gray-900 text-xl mb-1">{page.label}</h3>
                          <div className={`h-1 w-12 rounded-full ${
                            page.color === 'blue' ? 'bg-gradient-to-r from-blue-500 to-blue-600' :
                            page.color === 'red' ? 'bg-gradient-to-r from-red-500 to-red-600' :
                            page.color === 'teal' ? 'bg-gradient-to-r from-teal-500 to-teal-600' :
                            page.color === 'orange' ? 'bg-gradient-to-r from-orange-500 to-orange-600' :
                            page.color === 'green' ? 'bg-gradient-to-r from-green-500 to-green-600' :
                            page.color === 'amber' ? 'bg-gradient-to-r from-amber-500 to-amber-600' :
                            page.color === 'purple' ? 'bg-gradient-to-r from-purple-500 to-purple-600' :
                            'bg-gradient-to-r from-indigo-500 to-indigo-600'
                          }`}></div>
                        </div>
                      </div>
                      {hasContent && (
                        <div className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">
                          <Eye className="w-3 h-3 inline mr-1" />
                          Active
                        </div>
                      )}
                    </div>
                    <p className="text-gray-600 text-sm leading-relaxed">
                      {page.description}
                    </p>
                    <div className="pt-5 border-t border-gray-100">
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-gray-500 font-medium">{hasContent ? 'Edit Content' : 'Add Content'}</span>
                        <span className={`text-sm font-semibold ${
                          page.color === 'blue' ? 'text-blue-600' :
                          page.color === 'green' ? 'text-green-600' :
                          page.color === 'amber' ? 'text-amber-600' :
                          page.color === 'purple' ? 'text-purple-600' :
                          'text-indigo-600'
                        }`}>→</span>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Home Tab */}
        {activeTab === 'home' && (
          <div className="space-y-8">
            {/* Quick Navigation */}
            <div className="bg-gradient-to-r from-amber-50 to-orange-50 border border-amber-200 rounded-xl p-4">
              <p className="text-sm text-gray-700 mb-2 font-semibold">Quick Navigation:</p>
              <div className="flex flex-wrap gap-2">
                <a href="#luxury-services-section" className="px-3 py-1 bg-amber-500 text-white rounded-lg text-sm hover:bg-amber-600 transition-colors">
                  Luxury Services
                </a>
                <a href="#luxury-experiences-section" className="px-3 py-1 bg-purple-500 text-white rounded-lg text-sm hover:bg-purple-600 transition-colors">
                  Luxury Experiences
                </a>
                <a href="#stats-section" className="px-3 py-1 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors">
                  Statistics
                </a>
              </div>
            </div>

            {/* Home Page Content Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-3xl font-extrabold text-gray-900 mb-6">Home Page Content</h2>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Hero Title</label>
                  <input
                    type="text"
                    value={homeData.hero_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, hero_title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Welcome to Luxury Hotel"
                  />
                </div>
                
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Hero Subtitle</label>
                  <input
                    type="text"
                    value={homeData.hero_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, hero_subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Experience unparalleled luxury"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Hero Image</label>
                  <div className="flex gap-2">
                    <input
                      type="url"
                      value={homeData.hero_image || ''}
                      onChange={(e) => setHomeData({ ...homeData, hero_image: e.target.value })}
                      className="flex-1 px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      placeholder="https://example.com/hero-image.jpg or upload"
                    />
                    <label className="px-5 py-3.5 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-bold hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer flex items-center gap-2 shadow-lg hover:shadow-xl border-2 border-purple-500/50 hover:border-purple-400">
                      <Upload className="w-5 h-5" />
                      Upload
                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            await handlePageContentImageUpload(file, (imageUrl) => {
                              setHomeData((prevData) => ({ ...prevData, hero_image: imageUrl }));
                            });
                          }
                        }}
                        className="hidden"
                      />
                    </label>
                  </div>
                  {homeData.hero_image && (
                    <div className="mt-2">
                      <img src={homeData.hero_image.startsWith('http') ? homeData.hero_image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${homeData.hero_image}`} alt="Hero preview" className="max-w-full max-h-48 rounded-lg border border-gray-200" />
                    </div>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Page Title</label>
                  <input
                    type="text"
                    value={homeData.title || ''}
                    onChange={(e) => setHomeData({ ...homeData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                  <textarea
                    value={homeData.description || ''}
                    onChange={(e) => setHomeData({ ...homeData, description: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                    <input
                      type="text"
                      value={homeData.meta_title || ''}
                      onChange={(e) => setHomeData({ ...homeData, meta_title: e.target.value })}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      placeholder="SEO Meta Title"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">OG Image URL</label>
                    <div className="flex gap-2">
                      <input
                        type="url"
                        value={homeData.og_image || ''}
                        onChange={(e) => setHomeData({ ...homeData, og_image: e.target.value })}
                        className="flex-1 px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://example.com/og-image.jpg or upload"
                      />
                      <label className="px-5 py-3.5 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-bold hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer flex items-center gap-2 shadow-lg hover:shadow-xl border-2 border-purple-500/50 hover:border-purple-400">
                        <Upload className="w-5 h-5" />
                        Upload
                        <input
                          type="file"
                          accept="image/*"
                          onChange={async (e) => {
                            const file = e.target.files?.[0];
                            if (file) {
                              await handlePageContentImageUpload(file, (imageUrl) => {
                                setHomeData((prevData) => ({ ...prevData, og_image: imageUrl }));
                              });
                            }
                          }}
                          className="hidden"
                        />
                      </label>
                    </div>
                    {homeData.og_image && (
                      <div className="mt-2">
                        <img 
                          src={homeData.og_image.startsWith('http') ? homeData.og_image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${homeData.og_image}`} 
                          alt="OG Image preview" 
                          className="max-w-full max-h-48 rounded-lg border border-gray-200" 
                        />
                      </div>
                    )}
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                  <textarea
                    value={homeData.meta_description || ''}
                    onChange={(e) => setHomeData({ ...homeData, meta_description: e.target.value })}
                    rows={3}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="SEO Meta Description"
                  />
                </div>
              </div>
            </div>

            {/* Amenities Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Amenities Section</h2>
              <div className="space-y-6 mb-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.amenities_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, amenities_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Luxury Amenities"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.amenities_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, amenities_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Experience world-class amenities"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">Amenities</h3>
                <button
                  onClick={() => {
                    setHomeData((prevData) => {
                      const current = Array.isArray(prevData.amenities) ? prevData.amenities : [];
                      return {
                        ...prevData,
                        amenities: [...current, { icon: 'Sparkles', title: '', description: '', image: '' }]
                      };
                    });
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Amenity
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.amenities) && homeData.amenities.map((amenity, index) => (
                  <div key={`amenity-${index}-${amenity.title || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Amenity {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          setHomeData((prevData) => {
                            const currentAmenities = Array.isArray(prevData.amenities) ? prevData.amenities : [];
                            const updated = currentAmenities.filter((_, i) => i !== index);
                            return { ...prevData, amenities: updated };
                          });
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <IconPicker
                          value={amenity?.icon && amenity.icon.trim() ? amenity.icon : 'Sparkles'}
                          onChange={(iconName) => {
                            setHomeData((prevData) => {
                              const currentAmenities = Array.isArray(prevData.amenities) ? [...prevData.amenities] : [];
                              currentAmenities[index] = { ...currentAmenities[index], icon: iconName };
                              return { ...prevData, amenities: currentAmenities };
                            });
                          }}
                          label="Icon"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Image (optional)</label>
                        <div className="flex gap-2">
                          <input
                            type="url"
                            value={amenity?.image || ''}
                            onChange={(e) => {
                              setHomeData((prevData) => {
                                const currentAmenities = Array.isArray(prevData.amenities) ? [...prevData.amenities] : [];
                                currentAmenities[index] = { ...currentAmenities[index], image: e.target.value };
                                return { ...prevData, amenities: currentAmenities };
                              });
                            }}
                            className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="URL or upload"
                          />
                          <label className="px-5 py-3 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-lg font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400 min-w-[120px] justify-center">
                            <Upload className="w-5 h-5" />
                            Upload
                            <input
                              type="file"
                              accept="image/*"
                              onChange={async (e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  await handlePageContentImageUpload(file, (imageUrl) => {
                                    setHomeData((prevData) => {
                                      const currentAmenities = Array.isArray(prevData.amenities) ? [...prevData.amenities] : [];
                                      currentAmenities[index] = { ...currentAmenities[index], image: imageUrl };
                                      return { ...prevData, amenities: currentAmenities };
                                    });
                                  });
                                }
                              }}
                              className="hidden"
                            />
                          </label>
                        </div>
                        {amenity?.image && (
                          <div className="mt-2">
                            <img src={amenity.image.startsWith('http') ? amenity.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${amenity.image}`} alt="Amenity preview" className="max-w-full max-h-32 rounded-lg border border-gray-200" />
                          </div>
                        )}
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                      <input
                        type="text"
                        value={amenity?.title || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentAmenities = Array.isArray(prevData.amenities) ? [...prevData.amenities] : [];
                            currentAmenities[index] = { ...currentAmenities[index], title: e.target.value };
                            return { ...prevData, amenities: currentAmenities };
                          });
                        }}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                      <textarea
                        value={amenity?.description || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentAmenities = Array.isArray(prevData.amenities) ? [...prevData.amenities] : [];
                            currentAmenities[index] = { ...currentAmenities[index], description: e.target.value };
                            return { ...prevData, amenities: currentAmenities };
                          });
                        }}
                        rows={2}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                      />
                    </div>
                  </div>
                ))}
                {(!homeData.amenities || homeData.amenities.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No amenities added yet. Click "Add Amenity" to get started.</p>
                )}
              </div>
            </div>

            {/* Luxury Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Luxury Section</h2>
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.luxury_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Experience Unparalleled Luxury"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.luxury_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Where elegance meets comfort in every detail"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Image</label>
                  <div className="flex gap-2">
                    <input
                      type="url"
                      value={homeData.luxury_section_image || ''}
                      onChange={(e) => setHomeData({ ...homeData, luxury_section_image: e.target.value })}
                      className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="https://example.com/luxury-image.jpg or upload"
                    />
                    <label className="px-5 py-3.5 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-xl font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400">
                      <Upload className="w-5 h-5" />
                      Upload
                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            await handlePageContentImageUpload(file, (imageUrl) => {
                              setHomeData((prevData) => ({ ...prevData, luxury_section_image: imageUrl }));
                            });
                          }
                        }}
                        className="hidden"
                      />
                    </label>
                  </div>
                  {homeData.luxury_section_image && (
                    <div className="mt-2">
                      <img src={homeData.luxury_section_image.startsWith('http') ? homeData.luxury_section_image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${homeData.luxury_section_image}`} alt="Luxury section preview" className="max-w-full max-h-48 rounded-lg border border-gray-200" />
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Luxury Features Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Luxury Features</h2>
                <button
                  onClick={() => {
                    setHomeData((prevData) => {
                      const currentFeatures = Array.isArray(prevData.luxury_features) ? prevData.luxury_features : [];
                      return {
                        ...prevData,
                        luxury_features: [...currentFeatures, { icon: 'Sparkles', title: '', description: '' }]
                      };
                    });
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Luxury Feature
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.luxury_features) && homeData.luxury_features.map((feature, index) => (
                  <div key={`luxury-feature-${index}-${feature.title || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h3 className="font-semibold text-gray-900">Luxury Feature {index + 1}</h3>
                      <button
                        type="button"
                        onClick={() => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.luxury_features) ? prevData.luxury_features : [];
                            const updated = currentFeatures.filter((_, i) => i !== index);
                            return { ...prevData, luxury_features: updated };
                          });
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div>
                      <IconPicker
                        value={feature?.icon && feature.icon.trim() ? feature.icon : 'Star'}
                        onChange={(iconName) => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.luxury_features) ? [...prevData.luxury_features] : [];
                            currentFeatures[index] = { ...currentFeatures[index], icon: iconName };
                            return { ...prevData, luxury_features: currentFeatures };
                          });
                        }}
                        label="Icon"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                      <input
                        type="text"
                        value={feature?.title || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.luxury_features) ? [...prevData.luxury_features] : [];
                            currentFeatures[index] = { ...currentFeatures[index], title: e.target.value };
                            return { ...prevData, luxury_features: currentFeatures };
                          });
                        }}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                        placeholder="Feature Title"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                      <textarea
                        value={feature?.description || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.luxury_features) ? [...prevData.luxury_features] : [];
                            currentFeatures[index] = { ...currentFeatures[index], description: e.target.value };
                            return { ...prevData, luxury_features: currentFeatures };
                          });
                        }}
                        rows={2}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                        placeholder="Feature description"
                      />
                    </div>
                  </div>
                ))}
                {(!homeData.luxury_features || homeData.luxury_features.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No luxury features added yet. Click "Add Luxury Feature" to get started.</p>
                )}
              </div>
            </div>

            {/* Luxury Gallery Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Luxury Gallery</h2>
              </div>
              <div className="mb-6 space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.luxury_gallery_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_gallery_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Luxury Gallery"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.luxury_gallery_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_gallery_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Discover our exquisite spaces and amenities"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-6">
                <button
                  onClick={() => {
                    setHomeData((prevData) => {
                      const currentGallery = Array.isArray(prevData.luxury_gallery) ? prevData.luxury_gallery : [];
                      return {
                        ...prevData,
                        luxury_gallery: [...currentGallery, '']
                      };
                    });
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Gallery Image
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.luxury_gallery) && homeData.luxury_gallery.map((image, index) => (
                  <div key={`luxury-gallery-${index}-${image || index}`} className="flex gap-2 items-start">
                    <input
                      type="url"
                      value={image || ''}
                      onChange={(e) => {
                        setHomeData((prevData) => {
                          const currentGallery = Array.isArray(prevData.luxury_gallery) ? [...prevData.luxury_gallery] : [];
                          currentGallery[index] = e.target.value;
                          return { ...prevData, luxury_gallery: currentGallery };
                        });
                      }}
                      className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-lg"
                      placeholder="URL or upload"
                    />
                          <label className="px-5 py-3 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-lg font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400 min-w-[120px] justify-center">
                            <Upload className="w-5 h-5" />
                            Upload
                            <input
                              type="file"
                              accept="image/*"
                              onChange={async (e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  await handlePageContentImageUpload(file, (imageUrl) => {
                                    setHomeData((prevData) => {
                                      const currentGallery = Array.isArray(prevData.luxury_gallery) ? [...prevData.luxury_gallery] : [];
                                      currentGallery[index] = imageUrl;
                                      return { ...prevData, luxury_gallery: currentGallery };
                                    });
                                  });
                                }
                              }}
                              className="hidden"
                            />
                          </label>
                    <button
                      type="button"
                      onClick={() => {
                        setHomeData((prevData) => {
                          const currentGallery = Array.isArray(prevData.luxury_gallery) ? prevData.luxury_gallery : [];
                          const updated = currentGallery.filter((_, i) => i !== index);
                          return { ...prevData, luxury_gallery: updated };
                        });
                      }}
                      className="text-red-600 hover:text-red-700 p-2"
                    >
                      <Trash2 className="w-5 h-5" />
                    </button>
                    {image && (
                      <div className="w-20 h-20 flex-shrink-0">
                        <img src={image.startsWith('http') ? image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${image}`} alt={`Luxury gallery ${index + 1}`} className="w-full h-full object-cover rounded-lg border border-gray-200" />
                      </div>
                    )}
                  </div>
                ))}
                {(!homeData.luxury_gallery || homeData.luxury_gallery.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No gallery images added yet. Click "Add Gallery Image" to get started.</p>
                )}
              </div>
            </div>

            {/* Luxury Testimonials Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Luxury Testimonials</h2>
              </div>
              <div className="mb-6 space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.luxury_testimonials_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_testimonials_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Guest Experiences"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.luxury_testimonials_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_testimonials_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Hear from our valued guests about their luxury stay"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-6">
                <button
                  onClick={() => {
                    setHomeData((prevData) => {
                      const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? prevData.luxury_testimonials : [];
                      return {
                        ...prevData,
                        luxury_testimonials: [...currentTestimonials, { name: '', title: '', quote: '', image: '' }]
                      };
                    });
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Luxury Testimonial
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.luxury_testimonials) && homeData.luxury_testimonials.map((testimonial, index) => (
                  <div key={`luxury-testimonial-${index}-${testimonial.name || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Luxury Testimonial {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          setHomeData((prevData) => {
                            const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? prevData.luxury_testimonials : [];
                            const updated = currentTestimonials.filter((_, i) => i !== index);
                            return { ...prevData, luxury_testimonials: updated };
                          });
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Name</label>
                        <input
                          type="text"
                          value={testimonial?.name || ''}
                          onChange={(e) => {
                            setHomeData((prevData) => {
                              const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? [...prevData.luxury_testimonials] : [];
                              currentTestimonials[index] = { ...currentTestimonials[index], name: e.target.value };
                              return { ...prevData, luxury_testimonials: currentTestimonials };
                            });
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                        <input
                          type="text"
                          value={testimonial?.title || ''}
                          onChange={(e) => {
                            setHomeData((prevData) => {
                              const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? [...prevData.luxury_testimonials] : [];
                              currentTestimonials[index] = { ...currentTestimonials[index], title: e.target.value };
                              return { ...prevData, luxury_testimonials: currentTestimonials };
                            });
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Image (optional)</label>
                      <div className="flex gap-2">
                        <input
                          type="url"
                          value={testimonial?.image || ''}
                          onChange={(e) => {
                            setHomeData((prevData) => {
                              const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? [...prevData.luxury_testimonials] : [];
                              currentTestimonials[index] = { ...currentTestimonials[index], image: e.target.value };
                              return { ...prevData, luxury_testimonials: currentTestimonials };
                            });
                          }}
                          className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="URL or upload"
                        />
                        <label className="px-4 py-2.5 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-lg font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 text-sm shadow-md hover:shadow-lg border-2 border-amber-500/50 hover:border-amber-400 min-w-[100px] justify-center">
                          <Upload className="w-4 h-4" />
                          <input
                            type="file"
                            accept="image/*"
                            onChange={async (e) => {
                              const file = e.target.files?.[0];
                              if (file) {
                                await handlePageContentImageUpload(file, (imageUrl) => {
                                  setHomeData((prevData) => {
                                    const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? [...prevData.luxury_testimonials] : [];
                                    currentTestimonials[index] = { ...currentTestimonials[index], image: imageUrl };
                                    return { ...prevData, luxury_testimonials: currentTestimonials };
                                  });
                                });
                              }
                            }}
                            className="hidden"
                          />
                        </label>
                      </div>
                      {testimonial?.image && (
                        <div className="mt-2">
                          <img src={testimonial.image.startsWith('http') ? testimonial.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${testimonial.image}`} alt="Testimonial preview" className="w-16 h-16 rounded-full object-cover border border-gray-200" />
                        </div>
                      )}
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Quote</label>
                      <textarea
                        value={testimonial?.quote || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentTestimonials = Array.isArray(prevData.luxury_testimonials) ? [...prevData.luxury_testimonials] : [];
                            currentTestimonials[index] = { ...currentTestimonials[index], quote: e.target.value };
                            return { ...prevData, luxury_testimonials: currentTestimonials };
                          });
                        }}
                        rows={3}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                      />
                    </div>
                  </div>
                ))}
                {(!homeData.luxury_testimonials || homeData.luxury_testimonials.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No luxury testimonials added yet. Click "Add Luxury Testimonial" to get started.</p>
                )}
              </div>
            </div>

            {/* About Preview Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">About Preview Section</h2>
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={homeData.about_preview_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, about_preview_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="About Our Hotel"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={homeData.about_preview_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, about_preview_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content</label>
                  <textarea
                    value={homeData.about_preview_content || ''}
                    onChange={(e) => setHomeData({ ...homeData, about_preview_content: e.target.value })}
                    rows={6}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Write about your hotel..."
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">About Preview Image</label>
                  <div className="flex gap-2">
                    <input
                      type="url"
                      value={homeData.about_preview_image || ''}
                      onChange={(e) => setHomeData({ ...homeData, about_preview_image: e.target.value })}
                      className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="https://example.com/about-image.jpg or upload"
                    />
                    <label className="px-5 py-3.5 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-xl font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400">
                      <Upload className="w-5 h-5" />
                      Upload
                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            await handlePageContentImageUpload(file, (imageUrl) => {
                              setHomeData((prevData) => ({ ...prevData, about_preview_image: imageUrl }));
                            });
                          }
                        }}
                        className="hidden"
                      />
                    </label>
                  </div>
                  {homeData.about_preview_image && (
                    <div className="mt-2">
                      <img src={homeData.about_preview_image.startsWith('http') ? homeData.about_preview_image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${homeData.about_preview_image}`} alt="About preview" className="max-w-full max-h-48 rounded-lg border border-gray-200" />
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Stats Section */}
            <div id="stats-section" className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Statistics Section</h2>
              </div>
              <div className="space-y-6 mb-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.stats_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, stats_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Our Achievements"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.stats_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, stats_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Numbers that speak for themselves"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-xl font-semibold text-gray-900">Statistics</h3>
                <button
                  type="button"
                  onClick={() => {
                    const current = Array.isArray(homeData.stats) ? homeData.stats : [];
                    setHomeData({
                      ...homeData,
                      stats: [...current, { number: '', label: '', icon: 'BarChart' }]
                    });
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Stat
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.stats) && homeData.stats.map((stat, index) => (
                  <div key={`stat-${index}-${stat.label || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Stat {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          const currentStats = Array.isArray(homeData.stats) ? homeData.stats : [];
                          const updated = currentStats.filter((_, i) => i !== index);
                          setHomeData({ ...homeData, stats: updated });
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Number</label>
                        <input
                          type="text"
                          value={stat?.number || ''}
                          onChange={(e) => {
                            const currentStats = Array.isArray(homeData.stats) ? [...homeData.stats] : [];
                            currentStats[index] = { ...currentStats[index], number: e.target.value };
                            setHomeData({ ...homeData, stats: currentStats });
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="1000+"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Label</label>
                        <input
                          type="text"
                          value={stat?.label || ''}
                          onChange={(e) => {
                            const currentStats = Array.isArray(homeData.stats) ? [...homeData.stats] : [];
                            currentStats[index] = { ...currentStats[index], label: e.target.value };
                            setHomeData({ ...homeData, stats: currentStats });
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="Happy Guests"
                        />
                      </div>
                      <div>
                        <IconPicker
                          value={stat?.icon && stat.icon.trim() ? stat.icon : 'TrendingUp'}
                          onChange={(iconName) => {
                            const currentStats = Array.isArray(homeData.stats) ? [...homeData.stats] : [];
                            currentStats[index] = { ...currentStats[index], icon: iconName };
                            setHomeData({ ...homeData, stats: currentStats });
                          }}
                          label="Icon"
                        />
                      </div>
                    </div>
                  </div>
                ))}
                {(!homeData.stats || homeData.stats.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No statistics added yet. Click "Add Stat" to get started.</p>
                )}
              </div>
            </div>

            {/* Rooms Section */}
            <div id="rooms-section" className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Rooms Section</h2>
              <div className="space-y-6">
                <div className="flex items-center gap-4 mb-4">
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={homeData.rooms_section_enabled !== false}
                      onChange={(e) => setHomeData({ ...homeData, rooms_section_enabled: e.target.checked })}
                      className="w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
                    />
                    <span className="text-sm font-semibold text-gray-700">Enable Rooms Section</span>
                  </label>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                    <input
                      type="text"
                      value={homeData.rooms_section_title || homeData.hero_title || ''}
                      onChange={(e) => setHomeData({ ...homeData, rooms_section_title: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="Featured & Newest Rooms"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                    <input
                      type="text"
                      value={homeData.rooms_section_subtitle || homeData.hero_subtitle || ''}
                      onChange={(e) => setHomeData({ ...homeData, rooms_section_subtitle: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="Discover our most popular accommodations"
                    />
                  </div>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Button Text</label>
                    <input
                      type="text"
                      value={homeData.rooms_section_button_text || 'View All Rooms'}
                      onChange={(e) => setHomeData({ ...homeData, rooms_section_button_text: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="View All Rooms"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Button Link</label>
                    <input
                      type="text"
                      value={homeData.rooms_section_button_link || '/rooms'}
                      onChange={(e) => setHomeData({ ...homeData, rooms_section_button_link: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="/rooms"
                    />
                  </div>
                </div>
              </div>
            </div>

            {/* Features Section */}
            <div id="features-section" className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Features Section</h2>
              <div className="space-y-6 mb-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                    <input
                      type="text"
                      value={homeData.features_section_title || ''}
                      onChange={(e) => setHomeData({ ...homeData, features_section_title: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="Why Choose Us"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                    <input
                      type="text"
                      value={homeData.features_section_subtitle || ''}
                      onChange={(e) => setHomeData({ ...homeData, features_section_subtitle: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="Experience excellence in every detail"
                    />
                  </div>
                </div>
              </div>
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-900">Features</h3>
                <button
                  onClick={() => {
                    setHomeData((prevData) => {
                      const current = Array.isArray(prevData.features) ? prevData.features : [];
                      return {
                        ...prevData,
                        features: [...current, { icon: 'Star', title: '', description: '', image: '' }]
                      };
                    });
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-lg font-semibold hover:from-purple-600 hover:to-purple-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Feature
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.features) && homeData.features.map((feature, index) => (
                  <div key={`feature-${index}-${feature.title || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Feature {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.features) ? prevData.features : [];
                            const updated = currentFeatures.filter((_, i) => i !== index);
                            return { ...prevData, features: updated };
                          });
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div>
                      <IconPicker
                        value={feature?.icon && feature.icon.trim() ? feature.icon : 'Star'}
                        onChange={(iconName) => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.features) ? [...prevData.features] : [];
                            currentFeatures[index] = { ...currentFeatures[index], icon: iconName };
                            return { ...prevData, features: currentFeatures };
                          });
                        }}
                        label="Icon"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                      <input
                        type="text"
                        value={feature?.title || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.features) ? [...prevData.features] : [];
                            currentFeatures[index] = { ...currentFeatures[index], title: e.target.value };
                            return { ...prevData, features: currentFeatures };
                          });
                        }}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                        placeholder="Feature Title"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                      <textarea
                        value={feature?.description || ''}
                        onChange={(e) => {
                          setHomeData((prevData) => {
                            const currentFeatures = Array.isArray(prevData.features) ? [...prevData.features] : [];
                            currentFeatures[index] = { ...currentFeatures[index], description: e.target.value };
                            return { ...prevData, features: currentFeatures };
                          });
                        }}
                        rows={2}
                        className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                        placeholder="Feature description"
                      />
                    </div>
                  </div>
                ))}
                {(!homeData.features || homeData.features.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No features added yet. Click "Add Feature" to get started.</p>
                )}
              </div>
            </div>

            {/* Luxury Services Section */}
            <div id="luxury-services-section" className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Luxury Services Section</h2>
              
              <div className="mb-6 p-4 bg-amber-50 border-2 border-amber-200 rounded-xl">
                <p className="text-sm text-amber-900 mb-3">
                  <strong>Note:</strong> Services are managed in <strong>Service Management</strong>. Use this section only to customize the section title and subtitle displayed on the homepage.
                </p>
                <button
                  onClick={() => setActiveTab('services')}
                  className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-md hover:shadow-lg"
                >
                  <span>Go to Service Management</span>
                  <ArrowRight className="w-4 h-4" />
                </button>
              </div>
              
              {/* Section Title and Subtitle */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.luxury_services_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_services_section_title: e.target.value })}
                    className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                    placeholder="Premium Services"
                  />
                  <p className="text-xs text-gray-500 mt-1">Title displayed above services on homepage</p>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.luxury_services_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_services_section_subtitle: e.target.value })}
                    className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                    placeholder="Indulge in our world-class amenities"
                  />
                  <p className="text-xs text-gray-500 mt-1">Subtitle displayed below the title on homepage</p>
                </div>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Button Text</label>
                  <input
                    type="text"
                    value={homeData.services_section_button_text || 'View All Services'}
                    onChange={(e) => setHomeData({ ...homeData, services_section_button_text: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="View All Services"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Button Link</label>
                  <input
                    type="text"
                    value={homeData.services_section_button_link || '/services'}
                    onChange={(e) => setHomeData({ ...homeData, services_section_button_link: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="/services"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Services to Display</label>
                  <input
                    type="number"
                    min="1"
                    max="12"
                    value={homeData.services_section_limit || 6}
                    onChange={(e) => setHomeData({ ...homeData, services_section_limit: parseInt(e.target.value) || 6 })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="6"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Services Fallback Icon</label>
                  <p className="text-xs text-gray-500 mb-2">Icon shown when a service has no icon set</p>
                  <IconPicker
                    value={homeData.services_fallback_icon && homeData.services_fallback_icon.trim() ? homeData.services_fallback_icon : 'Award'}
                    onChange={(icon) => setHomeData({ ...homeData, services_fallback_icon: icon })}
                  />
                </div>
              </div>
            </div>

            {/* Services are now managed in Service Management page only */}

            {/* Luxury Experiences Section */}
            <div id="luxury-experiences-section" className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Luxury Experiences</h2>
              </div>
              <div className="mb-6 space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.luxury_experiences_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_experiences_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Unique Experiences"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.luxury_experiences_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, luxury_experiences_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Unforgettable moments await"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-6">
                <button
                  type="button"
                  onClick={() => {
                    const current = Array.isArray(homeData.luxury_experiences) ? homeData.luxury_experiences : [];
                    setHomeData((prevData) => ({
                      ...prevData,
                      luxury_experiences: [...current, { icon: 'Star', title: '', description: '', image: '' }]
                    }));
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Experience
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.luxury_experiences) && homeData.luxury_experiences.map((experience, index) => (
                  <div key={`experience-${index}-${experience.title || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Experience {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          const current = Array.isArray(homeData.luxury_experiences) ? homeData.luxury_experiences : [];
                          const updated = current.filter((_, i) => i !== index);
                          setHomeData((prevData) => ({ ...prevData, luxury_experiences: updated }));
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <IconPicker
                          value={experience?.icon && experience.icon.trim() ? experience.icon : 'Sparkles'}
                          onChange={(iconName) => {
                            const current = Array.isArray(homeData.luxury_experiences) ? [...homeData.luxury_experiences] : [];
                            current[index] = { ...current[index], icon: iconName };
                            setHomeData((prevData) => ({ ...prevData, luxury_experiences: current }));
                          }}
                          label="Icon"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Image</label>
                        <div className="flex gap-2">
                          <input
                            type="url"
                            value={experience?.image || ''}
                            onChange={(e) => {
                              const current = Array.isArray(homeData.luxury_experiences) ? [...homeData.luxury_experiences] : [];
                              current[index] = { ...current[index], image: e.target.value };
                              setHomeData((prevData) => ({ ...prevData, luxury_experiences: current }));
                            }}
                            className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="URL or upload"
                          />
                          <label className="px-5 py-3 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-lg font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400 min-w-[120px] justify-center">
                            <Upload className="w-5 h-5" />
                            Upload
                            <input
                              type="file"
                              accept="image/*"
                              onChange={async (e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  await handlePageContentImageUpload(file, (imageUrl) => {
                                    setHomeData((prevData) => {
                                      const current = Array.isArray(prevData.luxury_experiences) ? [...prevData.luxury_experiences] : [];
                                      current[index] = { ...current[index], image: imageUrl };
                                      return { ...prevData, luxury_experiences: current };
                                    });
                                  });
                                }
                              }}
                              className="hidden"
                            />
                          </label>
                        </div>
                        {experience?.image && (
                          <div className="mt-2">
                            <img src={experience.image.startsWith('http') ? experience.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${experience.image}`} alt="Experience preview" className="max-w-full max-h-32 rounded-lg border border-gray-200" />
                          </div>
                        )}
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                        <input
                          type="text"
                          value={experience?.title || ''}
                          onChange={(e) => {
                            const current = Array.isArray(homeData.luxury_experiences) ? [...homeData.luxury_experiences] : [];
                            current[index] = { ...current[index], title: e.target.value };
                            setHomeData((prevData) => ({ ...prevData, luxury_experiences: current }));
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="Experience Title"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                        <textarea
                          value={experience?.description || ''}
                          onChange={(e) => {
                            const current = Array.isArray(homeData.luxury_experiences) ? [...homeData.luxury_experiences] : [];
                            current[index] = { ...current[index], description: e.target.value };
                            setHomeData((prevData) => ({ ...prevData, luxury_experiences: current }));
                          }}
                          rows={3}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="Experience description"
                        />
                      </div>
                    </div>
                  </div>
                ))}
                {(!homeData.luxury_experiences || homeData.luxury_experiences.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No experiences added yet. Click "Add Experience" to get started.</p>
                )}
              </div>
            </div>

            {/* Awards Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Awards & Certifications</h2>
              </div>
              <div className="mb-6 space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.awards_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, awards_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Awards & Recognition"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.awards_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, awards_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Recognized excellence in hospitality"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-6">
                <button
                  type="button"
                  onClick={() => {
                    const current = Array.isArray(homeData.awards) ? homeData.awards : [];
                    setHomeData((prevData) => ({
                      ...prevData,
                      awards: [...current, { icon: 'Award', title: '', description: '', image: '', year: '' }]
                    }));
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Award
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.awards) && homeData.awards.map((award, index) => (
                  <div key={`award-${index}-${award.title || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Award {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          const current = Array.isArray(homeData.awards) ? homeData.awards : [];
                          const updated = current.filter((_, i) => i !== index);
                          setHomeData((prevData) => ({ ...prevData, awards: updated }));
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <IconPicker
                          value={award?.icon && award.icon.trim() ? award.icon : 'Award'}
                          onChange={(iconName) => {
                            const current = Array.isArray(homeData.awards) ? [...homeData.awards] : [];
                            current[index] = { ...current[index], icon: iconName };
                            setHomeData((prevData) => ({ ...prevData, awards: current }));
                          }}
                          label="Icon"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Year</label>
                        <input
                          type="text"
                          value={award?.year || ''}
                          onChange={(e) => {
                            const current = Array.isArray(homeData.awards) ? [...homeData.awards] : [];
                            current[index] = { ...current[index], year: e.target.value };
                            setHomeData((prevData) => ({ ...prevData, awards: current }));
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="2024"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Image</label>
                        <div className="flex gap-2">
                          <input
                            type="url"
                            value={award?.image || ''}
                            onChange={(e) => {
                              const current = Array.isArray(homeData.awards) ? [...homeData.awards] : [];
                              current[index] = { ...current[index], image: e.target.value };
                              setHomeData((prevData) => ({ ...prevData, awards: current }));
                            }}
                            className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="URL or upload"
                          />
                          <label className="px-5 py-3 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-lg font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400 min-w-[120px] justify-center">
                            <Upload className="w-5 h-5" />
                            Upload
                            <input
                              type="file"
                              accept="image/*"
                              onChange={async (e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  await handlePageContentImageUpload(file, (imageUrl) => {
                                    setHomeData((prevData) => {
                                      const current = Array.isArray(prevData.awards) ? [...prevData.awards] : [];
                                      current[index] = { ...current[index], image: imageUrl };
                                      return { ...prevData, awards: current };
                                    });
                                  });
                                }
                              }}
                              className="hidden"
                            />
                          </label>
                        </div>
                        {award?.image && (
                          <div className="mt-2">
                            <img src={award.image.startsWith('http') ? award.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${award.image}`} alt="Award preview" className="max-w-full max-h-32 rounded-lg border border-gray-200" />
                          </div>
                        )}
                      </div>
                      <div>
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                        <input
                          type="text"
                          value={award?.title || ''}
                          onChange={(e) => {
                            const current = Array.isArray(homeData.awards) ? [...homeData.awards] : [];
                            current[index] = { ...current[index], title: e.target.value };
                            setHomeData((prevData) => ({ ...prevData, awards: current }));
                          }}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="Award Title"
                        />
                      </div>
                      <div className="md:col-span-2">
                        <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                        <textarea
                          value={award?.description || ''}
                          onChange={(e) => {
                            const current = Array.isArray(homeData.awards) ? [...homeData.awards] : [];
                            current[index] = { ...current[index], description: e.target.value };
                            setHomeData((prevData) => ({ ...prevData, awards: current }));
                          }}
                          rows={3}
                          className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                          placeholder="Award description"
                        />
                      </div>
                    </div>
                  </div>
                ))}
                {(!homeData.awards || homeData.awards.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No awards added yet. Click "Add Award" to get started.</p>
                )}
              </div>
            </div>

            {/* CTA Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Call to Action Section</h2>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={homeData.cta_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, cta_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Ready to Experience Luxury?"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={homeData.cta_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, cta_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Book your stay today"
                  />
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Button Text</label>
                    <input
                      type="text"
                      value={homeData.cta_button_text || ''}
                      onChange={(e) => setHomeData({ ...homeData, cta_button_text: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="Book Now"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Button Link</label>
                    <input
                      type="url"
                      value={homeData.cta_button_link || ''}
                      onChange={(e) => setHomeData({ ...homeData, cta_button_link: e.target.value })}
                      className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="/rooms"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">CTA Background Image</label>
                  <div className="flex gap-2">
                    <input
                      type="url"
                      value={homeData.cta_image || ''}
                      onChange={(e) => setHomeData({ ...homeData, cta_image: e.target.value })}
                      className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="https://example.com/cta-image.jpg or upload"
                    />
                    <label className="px-5 py-3.5 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-xl font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400">
                      <Upload className="w-5 h-5" />
                      Upload
                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            await handlePageContentImageUpload(file, (imageUrl) => {
                              setHomeData((prevData) => ({ ...prevData, cta_image: imageUrl }));
                            });
                          }
                        }}
                        className="hidden"
                      />
                    </label>
                  </div>
                  {homeData.cta_image && (
                    <div className="mt-2">
                      <img src={homeData.cta_image.startsWith('http') ? homeData.cta_image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${homeData.cta_image}`} alt="CTA preview" className="max-w-full max-h-48 rounded-lg border border-gray-200" />
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Partners Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Partners & Brands</h2>
              </div>
              <div className="mb-6 space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                  <input
                    type="text"
                    value={homeData.partners_section_title || ''}
                    onChange={(e) => setHomeData({ ...homeData, partners_section_title: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Our Partners"
                  />
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                  <input
                    type="text"
                    value={homeData.partners_section_subtitle || ''}
                    onChange={(e) => setHomeData({ ...homeData, partners_section_subtitle: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="Trusted by leading brands"
                  />
                </div>
              </div>
              <div className="flex items-center justify-between mb-6">
                <button
                  type="button"
                  onClick={() => {
                    const current = Array.isArray(homeData.partners) ? homeData.partners : [];
                    setHomeData((prevData) => ({
                      ...prevData,
                      partners: [...current, { name: '', logo: '', link: '' }]
                    }));
                  }}
                  className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg font-semibold hover:from-amber-600 hover:to-amber-700 transition-all"
                >
                  <Plus className="w-4 h-4" />
                  Add Partner
                </button>
              </div>
              <div className="space-y-4">
                {Array.isArray(homeData.partners) && homeData.partners.map((partner, index) => (
                  <div key={`partner-${index}-${partner.name || index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                    <div className="flex justify-between items-center">
                      <h4 className="font-semibold text-gray-900">Partner {index + 1}</h4>
                      <button
                        type="button"
                        onClick={() => {
                          const current = Array.isArray(homeData.partners) ? homeData.partners : [];
                          const updated = current.filter((_, i) => i !== index);
                          setHomeData((prevData) => ({ ...prevData, partners: updated }));
                        }}
                        className="text-red-600 hover:text-red-700 p-1"
                      >
                        <Trash2 className="w-5 h-5" />
                      </button>
                    </div>
                    <div className="space-y-6">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-2">Name</label>
                          <input
                            type="text"
                            value={partner?.name || ''}
                            onChange={(e) => {
                              const current = Array.isArray(homeData.partners) ? [...homeData.partners] : [];
                              current[index] = { ...current[index], name: e.target.value };
                              setHomeData((prevData) => ({ ...prevData, partners: current }));
                            }}
                            className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="Partner Name"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-2">Link (Optional)</label>
                          <input
                            type="url"
                            value={partner?.link || ''}
                            onChange={(e) => {
                              const current = Array.isArray(homeData.partners) ? [...homeData.partners] : [];
                              current[index] = { ...current[index], link: e.target.value };
                              setHomeData((prevData) => ({ ...prevData, partners: current }));
                            }}
                            className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="https://example.com"
                          />
                        </div>
                      </div>
                      <div className="border-t-2 border-gray-300 pt-8 mt-4">
                        <label className="block text-sm font-semibold text-gray-700 mb-4">Logo</label>
                        <div className="space-y-4">
                          <input
                            type="url"
                            value={partner?.logo || ''}
                            onChange={(e) => {
                              const current = Array.isArray(homeData.partners) ? [...homeData.partners] : [];
                              current[index] = { ...current[index], logo: e.target.value };
                              setHomeData((prevData) => ({ ...prevData, partners: current }));
                            }}
                            className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="https://example.com/logo.png or upload below"
                          />
                          <label className="block w-full px-5 py-4 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-lg font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center justify-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400">
                            <Upload className="w-5 h-5" />
                            Upload Logo Image
                            <input
                              type="file"
                              accept="image/*"
                              onChange={async (e) => {
                                const file = e.target.files?.[0];
                                if (file) {
                                  await handlePageContentImageUpload(file, (imageUrl) => {
                                    setHomeData((prevData) => {
                                      const current = Array.isArray(prevData.partners) ? [...prevData.partners] : [];
                                      current[index] = { ...current[index], logo: imageUrl };
                                      return { ...prevData, partners: current };
                                    });
                                  });
                                }
                              }}
                              className="hidden"
                            />
                          </label>
                          {partner?.logo && (
                            <div className="mt-3 p-3 bg-gray-50 rounded-lg border border-gray-200">
                              <p className="text-xs text-gray-600 mb-2 font-semibold">Preview:</p>
                              <img 
                                src={partner.logo.startsWith('http') ? partner.logo : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${partner.logo}`} 
                                alt="Partner logo preview" 
                                className="max-w-full max-h-32 rounded-lg border border-gray-200" 
                              />
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
                {(!homeData.partners || homeData.partners.length === 0) && (
                  <p className="text-gray-500 text-center py-8">No partners added yet. Click "Add Partner" to get started.</p>
                )}
              </div>
            </div>

            {/* Section Visibility Toggles */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Section Visibility</h2>
              <p className="text-gray-600 mb-6">Toggle sections on/off to control what appears on the homepage</p>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {[
                  { key: 'rooms', label: 'Rooms Section' },
                  { key: 'features', label: 'Features Section' },
                  { key: 'luxury', label: 'Luxury Section' },
                  { key: 'gallery', label: 'Gallery Section' },
                  { key: 'testimonials', label: 'Testimonials Section' },
                  { key: 'stats', label: 'Statistics Section' },
                  { key: 'amenities', label: 'Amenities Section' },
                  { key: 'about_preview', label: 'About Preview Section' },
                  { key: 'services', label: 'Services Section' },
                  { key: 'experiences', label: 'Experiences Section' },
                  { key: 'awards', label: 'Awards Section' },
                  { key: 'cta', label: 'CTA Section' },
                  { key: 'partners', label: 'Partners Section' },
                ].map((section) => (
                  <label key={section.key} className="flex items-center gap-3 p-4 border-2 border-gray-200 rounded-xl cursor-pointer hover:border-purple-300 transition-colors">
                    <input
                      type="checkbox"
                      checked={(homeData.sections_enabled?.[section.key as keyof typeof homeData.sections_enabled] ?? true)}
                      onChange={(e) => {
                        setHomeData({
                          ...homeData,
                          sections_enabled: {
                            ...homeData.sections_enabled,
                            [section.key]: e.target.checked,
                          },
                        });
                      }}
                      className="w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
                    />
                    <span className="text-sm font-semibold text-gray-700">{section.label}</span>
                  </label>
                ))}
              </div>
            </div>

            {/* Promotions Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-2xl font-extrabold text-gray-900">Promotions & Special Offers</h2>
                <label className="flex items-center gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={homeData.promotions_enabled ?? false}
                    onChange={(e) => setHomeData({ ...homeData, promotions_enabled: e.target.checked })}
                    className="w-5 h-5 text-purple-600 rounded focus:ring-purple-500"
                  />
                  <span className="text-sm font-semibold text-gray-700">Enable Promotions</span>
                </label>
              </div>
              {homeData.promotions_enabled && (
                <div className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Section Title</label>
                      <input
                        type="text"
                        value={homeData.promotions_section_title || ''}
                        onChange={(e) => setHomeData({ ...homeData, promotions_section_title: e.target.value })}
                        className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                        placeholder="Special Offers"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Section Subtitle</label>
                      <input
                        type="text"
                        value={homeData.promotions_section_subtitle || ''}
                        onChange={(e) => setHomeData({ ...homeData, promotions_section_subtitle: e.target.value })}
                        className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                        placeholder="Limited time offers"
                      />
                    </div>
                  </div>
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold text-gray-900">Promotions</h3>
                    <button
                      type="button"
                      onClick={() => {
                        const current = Array.isArray(homeData.promotions) ? homeData.promotions : [];
                        setHomeData({
                          ...homeData,
                          promotions: [...current, { title: '', description: '', image: '', discount: '', valid_until: '', link: '', button_text: '' }]
                        });
                      }}
                      className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg font-semibold hover:from-orange-600 hover:to-orange-700 transition-all"
                    >
                      <Plus className="w-4 h-4" />
                      Add Promotion
                    </button>
                  </div>
                  <div className="space-y-4">
                    {Array.isArray(homeData.promotions) && homeData.promotions.map((promo, index) => (
                      <div key={`promo-${index}`} className="p-6 border-2 border-gray-200 rounded-xl space-y-4">
                        <div className="flex justify-between items-center">
                          <h4 className="font-semibold text-gray-900">Promotion {index + 1}</h4>
                          <button
                            type="button"
                            onClick={() => {
                              const current = Array.isArray(homeData.promotions) ? homeData.promotions : [];
                              const updated = current.filter((_, i) => i !== index);
                              setHomeData({ ...homeData, promotions: updated });
                            }}
                            className="text-red-600 hover:text-red-700 p-1"
                          >
                            <Trash2 className="w-5 h-5" />
                          </button>
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                            <input
                              type="text"
                              value={promo?.title || ''}
                              onChange={(e) => {
                                const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                current[index] = { ...current[index], title: e.target.value };
                                setHomeData({ ...homeData, promotions: current });
                              }}
                              className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                              placeholder="Promotion Title"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">Discount</label>
                            <input
                              type="text"
                              value={promo?.discount || ''}
                              onChange={(e) => {
                                const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                current[index] = { ...current[index], discount: e.target.value };
                                setHomeData({ ...homeData, promotions: current });
                              }}
                              className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                              placeholder="20% OFF"
                            />
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                          <textarea
                            value={promo?.description || ''}
                            onChange={(e) => {
                              const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                              current[index] = { ...current[index], description: e.target.value };
                              setHomeData({ ...homeData, promotions: current });
                            }}
                            rows={2}
                            className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                            placeholder="Promotion description"
                          />
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">Valid Until</label>
                            <input
                              type="date"
                              value={promo?.valid_until || ''}
                              onChange={(e) => {
                                const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                current[index] = { ...current[index], valid_until: e.target.value };
                                setHomeData({ ...homeData, promotions: current });
                              }}
                              className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">Button Text</label>
                            <input
                              type="text"
                              value={promo?.button_text || ''}
                              onChange={(e) => {
                                const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                current[index] = { ...current[index], button_text: e.target.value };
                                setHomeData({ ...homeData, promotions: current });
                              }}
                              className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                              placeholder="Book Now"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-semibold text-gray-700 mb-2">Link</label>
                            <input
                              type="url"
                              value={promo?.link || ''}
                              onChange={(e) => {
                                const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                current[index] = { ...current[index], link: e.target.value };
                                setHomeData({ ...homeData, promotions: current });
                              }}
                              className="w-full px-4 py-2 border-2 border-gray-200 rounded-lg"
                              placeholder="/rooms or /booking"
                            />
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-semibold text-gray-700 mb-2">Image</label>
                          <div className="flex gap-2">
                            <input
                              type="url"
                              value={promo?.image || ''}
                              onChange={(e) => {
                                const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                current[index] = { ...current[index], image: e.target.value };
                                setHomeData({ ...homeData, promotions: current });
                              }}
                              className="flex-1 px-4 py-2 border-2 border-gray-200 rounded-lg"
                              placeholder="Image URL or upload"
                            />
                            <label className="px-5 py-2 bg-gradient-to-r from-orange-600 to-orange-700 text-white rounded-lg font-bold hover:from-orange-700 hover:to-orange-800 transition-all cursor-pointer flex items-center gap-2">
                              <Upload className="w-4 h-4" />
                              Upload
                              <input
                                type="file"
                                accept="image/*"
                                onChange={async (e) => {
                                  const file = e.target.files?.[0];
                                  if (file) {
                                    await handlePageContentImageUpload(file, (imageUrl) => {
                                      const current = Array.isArray(homeData.promotions) ? [...homeData.promotions] : [];
                                      current[index] = { ...current[index], image: imageUrl };
                                      setHomeData({ ...homeData, promotions: current });
                                    });
                                  }
                                }}
                                className="hidden"
                              />
                            </label>
                          </div>
                        </div>
                      </div>
                    ))}
                    {(!homeData.promotions || homeData.promotions.length === 0) && (
                      <p className="text-gray-500 text-center py-8">No promotions added yet. Click "Add Promotion" to get started.</p>
                    )}
                  </div>
                </div>
              )}
            </div>

            {/* Hero Video Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-2xl font-extrabold text-gray-900 mb-6">Hero Video (Optional)</h2>
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Video URL</label>
                  <input
                    type="url"
                    value={homeData.hero_video_url || ''}
                    onChange={(e) => setHomeData({ ...homeData, hero_video_url: e.target.value })}
                    className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl"
                    placeholder="https://youtube.com/watch?v=... or direct video URL"
                  />
                  <p className="text-xs text-gray-500 mt-1">Supports YouTube, Vimeo, or direct video URLs</p>
                </div>
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Video Poster Image (Optional)</label>
                  <div className="flex gap-2">
                    <input
                      type="url"
                      value={homeData.hero_video_poster || ''}
                      onChange={(e) => setHomeData({ ...homeData, hero_video_poster: e.target.value })}
                      className="flex-1 px-4 py-3 border-2 border-gray-200 rounded-xl"
                      placeholder="Poster image URL or upload"
                    />
                    <label className="px-5 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl font-bold hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer flex items-center gap-2">
                      <Upload className="w-5 h-5" />
                      Upload
                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            await handlePageContentImageUpload(file, (imageUrl) => {
                              setHomeData({ ...homeData, hero_video_poster: imageUrl });
                            });
                          }
                        }}
                        className="hidden"
                      />
                    </label>
                  </div>
                  <p className="text-xs text-gray-500 mt-1">Thumbnail image shown before video plays</p>
                </div>
              </div>
            </div>

            {/* Save Button */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex justify-end">
                <button
                  onClick={() => handleSave('home', homeData)}
                  disabled={saving}
                  className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                >
                  <Save className="w-5 h-5" />
                  {saving ? 'Saving...' : 'Save All Home Content'}
                </button>
              </div>
            </div>

            {/* Banner Carousel Management Section */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h2 className="text-3xl font-extrabold text-gray-900 mb-2">Banner Carousel</h2>
                  <p className="text-gray-600">Manage homepage banner carousel images</p>
                </div>
                <button
                  onClick={() => {
                    resetBannerForm();
                    setShowBannerModal(true);
                  }}
                  className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
                >
                  <Plus className="w-5 h-5" />
                  <span>Add Banner</span>
                </button>
              </div>

              {loadingBanners ? (
                <div className="flex justify-center py-12">
                  <Loader2 className="w-8 h-8 animate-spin text-purple-500" />
                </div>
              ) : banners.length === 0 ? (
                <div className="text-center py-12 border-2 border-dashed border-gray-300 rounded-xl">
                  <ImageIcon className="w-12 h-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-gray-600 font-medium mb-2">No banners found</p>
                  <p className="text-gray-500 text-sm">Add your first banner to get started</p>
                </div>
              ) : (
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-gray-50 border-b border-gray-200">
                      <tr>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Image</th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Title</th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Order</th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                        <th className="px-6 py-4 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Actions</th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {banners
                        .sort((a, b) => a.display_order - b.display_order)
                        .map((banner) => (
                        <tr key={banner.id} className="hover:bg-gray-50 transition-colors">
                          <td className="px-6 py-4 whitespace-nowrap">
                            {banner.image_url ? (
                              <img
                                src={banner.image_url}
                                alt={banner.title}
                                className="w-20 h-20 object-cover rounded-lg border border-gray-200"
                              />
                            ) : (
                              <div className="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center border border-gray-200">
                                <ImageIcon className="w-8 h-8 text-gray-400" />
                              </div>
                            )}
                          </td>
                          <td className="px-6 py-4">
                            <div className="text-sm font-semibold text-gray-900">{banner.title}</div>
                            {banner.description && (
                              <div className="text-xs text-gray-600 mt-1 line-clamp-2 max-w-xs">{banner.description}</div>
                            )}
                            {banner.link_url && (
                              <div className="text-xs text-gray-500 truncate max-w-xs mt-1">{banner.link_url}</div>
                            )}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <span className="text-sm font-medium text-gray-900">{banner.display_order}</span>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <button
                              onClick={() => toggleBannerActive(banner)}
                              className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
                                banner.is_active
                                  ? 'bg-green-100 text-green-700 hover:bg-green-200'
                                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                              }`}
                            >
                              {banner.is_active ? (
                                <span className="flex items-center gap-1">
                                  <Check className="w-3 h-3" /> Active
                                </span>
                              ) : (
                                <span className="flex items-center gap-1">
                                  <XCircle className="w-3 h-3" /> Inactive
                                </span>
                              )}
                            </button>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div className="flex items-center gap-3">
                              <button
                                onClick={() => handleEditBanner(banner)}
                                className="text-purple-600 hover:text-purple-700 font-semibold transition-colors"
                              >
                                <Edit className="w-4 h-4" />
                              </button>
                              <button
                                onClick={() => setDeleteConfirm({ show: true, id: banner.id })}
                                className="text-red-600 hover:text-red-700 font-semibold transition-colors"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>

            {/* Banner Modal */}
            {showBannerModal && (
              <div className="fixed inset-0 z-50 overflow-y-auto">
                <div className="fixed inset-0 bg-black/70 backdrop-blur-md" onClick={() => setShowBannerModal(false)}></div>
                <div className="flex min-h-full items-center justify-center p-3 sm:p-4">
                  <div className="relative bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
                    <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
                      <div className="flex justify-between items-center">
                        <div>
                          <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-amber-100">
                            {editingBanner ? 'Edit Banner' : 'Add Banner'}
                          </h3>
                          <p className="text-amber-200/80 text-xs sm:text-sm font-light mt-1">
                            {editingBanner ? 'Modify banner information' : 'Create a new promotional banner'}
                          </p>
                        </div>
                        <button
                          onClick={() => {
                            setShowBannerModal(false);
                            resetBannerForm();
                          }}
                          className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-xl text-amber-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-amber-400"
                        >
                          <X className="w-5 h-5 sm:w-6 sm:h-6" />
                        </button>
                      </div>
                    </div>

                    <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
                      <form onSubmit={handleBannerSubmit} className="p-4 sm:p-6 space-y-5 sm:space-y-6">
                      <div>
                        <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Title *</label>
                        <input
                          type="text"
                          required
                          value={bannerFormData.title}
                          onChange={(e) => setBannerFormData({ ...bannerFormData, title: e.target.value })}
                          className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                          placeholder="Banner title"
                        />
                      </div>

                      <div>
                        <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Description (Optional)</label>
                        <textarea
                          value={bannerFormData.description}
                          onChange={(e) => setBannerFormData({ ...bannerFormData, description: e.target.value })}
                          className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 min-h-[100px] resize-y text-slate-700 font-medium shadow-sm"
                          placeholder="Banner description text that appears below the title"
                          rows={3}
                        />
                        <p className="text-xs text-slate-500 mt-1">This description will appear below the title on the banner</p>
                      </div>

                      <div>
                        <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Link (Optional)</label>
                        <input
                          type="url"
                          value={bannerFormData.link_url}
                          onChange={(e) => setBannerFormData({ ...bannerFormData, link_url: e.target.value })}
                          className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                          placeholder="https://example.com"
                        />
                      </div>

                      <div>
                        <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Display Order</label>
                        <input
                          type="number"
                          min="0"
                          value={bannerFormData.display_order}
                          onChange={(e) => setBannerFormData({ ...bannerFormData, display_order: parseInt(e.target.value) || 0 })}
                          className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                          placeholder="0"
                        />
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Start Date (Optional)</label>
                          <input
                            type="date"
                            value={bannerFormData.start_date}
                            onChange={(e) => setBannerFormData({ ...bannerFormData, start_date: e.target.value })}
                            className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                          />
                        </div>
                        <div>
                          <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">End Date (Optional)</label>
                          <input
                            type="date"
                            value={bannerFormData.end_date}
                            onChange={(e) => setBannerFormData({ ...bannerFormData, end_date: e.target.value })}
                            className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                          />
                        </div>
                      </div>

                      <div>
                        <div className="flex flex-wrap items-center gap-2 sm:gap-3 mb-4">
                          <button
                            type="button"
                            onClick={() => setUseFileUpload(true)}
                            className={`px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
                              useFileUpload
                                ? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/30'
                                : 'bg-slate-100 text-slate-700 hover:bg-slate-200 border-2 border-slate-200'
                            }`}
                          >
                            Upload File
                          </button>
                          <button
                            type="button"
                            onClick={() => setUseFileUpload(false)}
                            className={`px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200 ${
                              !useFileUpload
                                ? 'bg-gradient-to-r from-amber-500 to-amber-600 text-white shadow-lg shadow-amber-500/30'
                                : 'bg-slate-100 text-slate-700 hover:bg-slate-200 border-2 border-slate-200'
                            }`}
                          >
                            Image URL
                          </button>
                        </div>

                        {useFileUpload ? (
                          <div>
                            <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Banner Image *</label>
                            <div className="border-2 border-dashed border-slate-300 rounded-xl p-4 sm:p-6 text-center hover:border-amber-400 transition-all duration-200 bg-gradient-to-br from-slate-50 to-white">
                              <input
                                type="file"
                                accept="image/*"
                                onChange={handleImageChange}
                                className="hidden"
                                id="banner-image-upload"
                              />
                              <label
                                htmlFor="banner-image-upload"
                                className="cursor-pointer flex flex-col items-center"
                              >
                                {imagePreview ? (
                                  <img
                                    src={imagePreview}
                                    alt="Preview"
                                    className="max-w-full max-h-48 sm:max-h-64 rounded-lg mb-4 border-2 border-slate-200"
                                  />
                                ) : (
                                  <>
                                    <Upload className="w-10 h-10 sm:w-12 sm:h-12 text-slate-400 mb-3" />
                                    <span className="text-slate-600 font-medium text-sm sm:text-base">Click to upload image</span>
                                    <span className="text-slate-500 text-xs sm:text-sm mt-1">PNG, JPG up to 5MB</span>
                                  </>
                                )}
                              </label>
                              {uploadingImage && (
                                <div className="mt-4 flex items-center justify-center gap-2 text-amber-600">
                                  <Loader2 className="w-5 h-5 animate-spin" />
                                  <span className="text-sm font-medium">Uploading...</span>
                                </div>
                              )}
                            </div>
                          </div>
                        ) : (
                          <div>
                            <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Image URL *</label>
                            <input
                              type="url"
                              required
                              value={bannerFormData.image_url}
                              onChange={(e) => {
                                setBannerFormData({ ...bannerFormData, image_url: e.target.value });
                                setImagePreview(e.target.value);
                              }}
                              className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                              placeholder="https://example.com/image.jpg"
                            />
                            {imagePreview && (
                              <img
                                src={imagePreview}
                                alt="Preview"
                                className="mt-4 max-w-full max-h-48 sm:max-h-64 rounded-lg border-2 border-slate-200"
                                onError={() => setImagePreview(null)}
                              />
                            )}
                          </div>
                        )}
                      </div>

                      <div className="flex flex-col sm:flex-row items-center gap-3 pt-4 border-t border-slate-200">
                        <button
                          type="button"
                          onClick={() => {
                            setShowBannerModal(false);
                            resetBannerForm();
                          }}
                          className="w-full sm:flex-1 px-6 py-3 border-2 border-slate-300 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition-all duration-200 shadow-sm hover:shadow-md"
                        >
                          Cancel
                        </button>
                        <button
                          type="submit"
                          disabled={uploadingImage}
                          className="w-full sm:flex-1 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                        >
                          {uploadingImage ? (
                            <>
                              <Loader2 className="w-5 h-5 animate-spin" />
                              Uploading...
                            </>
                          ) : (
                            <>
                              <Save className="w-5 h-5" />
                              {editingBanner ? 'Update Banner' : 'Add Banner'}
                            </>
                          )}
                        </button>
                      </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Delete Confirmation Dialog */}
            <ConfirmationDialog
              isOpen={deleteConfirm.show}
              onClose={() => setDeleteConfirm({ show: false, id: null })}
              onConfirm={handleDeleteBanner}
              title="Delete Banner"
              message="Are you sure you want to delete this banner? This action cannot be undone."
              confirmText="Delete"
              cancelText="Cancel"
              variant="danger"
            />
          </div>
        )}

        {/* Contact Tab */}
        {activeTab === 'contact' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-3xl font-extrabold text-gray-900 mb-6">Contact Page Content</h2>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Page Title</label>
                  <input
                    type="text"
                    value={contactData.title || ''}
                    onChange={(e) => setContactData({ ...contactData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={contactData.subtitle || ''}
                    onChange={(e) => setContactData({ ...contactData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                  <textarea
                    value={contactData.description || ''}
                    onChange={(e) => setContactData({ ...contactData, description: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                    <p className="text-sm text-blue-800">
                      <strong>Note:</strong> Contact information (phone, email, address) is now managed centrally in <strong>Settings → Company Info</strong>. 
                      These fields will be displayed across the entire application.
                    </p>
                  </div>
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Google Maps</h3>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Map Embed URL</label>
                    <input
                      type="url"
                      value={contactData.map_url || ''}
                      onChange={(e) => setContactData({ ...contactData, map_url: e.target.value })}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      placeholder="https://www.google.com/maps/embed?pb=..."
                    />
                    <p className="text-xs text-gray-500 mt-2">
                      Paste the Google Maps embed URL here. You can get this by clicking "Share" → "Embed a map" on Google Maps.
                    </p>
                    {contactData.map_url && (
                      <div className="mt-4 border-2 border-gray-200 rounded-xl overflow-hidden">
                        <iframe
                          src={contactData.map_url}
                          width="100%"
                          height="300"
                          style={{ border: 0 }}
                          allowFullScreen
                          loading="lazy"
                          referrerPolicy="no-referrer-when-downgrade"
                          title="Map Preview"
                        />
                      </div>
                    )}
                  </div>
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Help Message</h3>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Additional Information Text</label>
                    <textarea
                      value={contactData.content || ''}
                      onChange={(e) => setContactData({ ...contactData, content: e.target.value })}
                      rows={3}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      placeholder="Our team is here to help you with any questions about your stay, bookings, or special requests. We're committed to exceeding your expectations."
                    />
                    <p className="text-xs text-gray-500 mt-2">
                      This text will appear below the contact information and map on the contact page.
                    </p>
                  </div>
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Icons</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Hero Section Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.hero && contactData.contact_icons.hero.trim() ? contactData.contact_icons.hero : 'Mail'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, hero: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Email Contact Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.email && contactData.contact_icons.email.trim() ? contactData.contact_icons.email : 'Mail'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, email: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Phone Contact Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.phone && contactData.contact_icons.phone.trim() ? contactData.contact_icons.phone : 'Phone'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, phone: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Location Contact Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.location && contactData.contact_icons.location.trim() ? contactData.contact_icons.location : 'MapPin'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, location: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Name Field Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.name_field && contactData.contact_icons.name_field.trim() ? contactData.contact_icons.name_field : 'User'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, name_field: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Email Field Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.email_field && contactData.contact_icons.email_field.trim() ? contactData.contact_icons.email_field : 'Mail'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, email_field: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Phone Field Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.phone_field && contactData.contact_icons.phone_field.trim() ? contactData.contact_icons.phone_field : 'Phone'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, phone_field: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Subject Field Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.subject_field && contactData.contact_icons.subject_field.trim() ? contactData.contact_icons.subject_field : 'MessageSquare'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, subject_field: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Message Field Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.message_field && contactData.contact_icons.message_field.trim() ? contactData.contact_icons.message_field : 'MessageSquare'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, message_field: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Submit Button Icon</label>
                      <IconPicker
                        value={contactData.contact_icons?.submit_button && contactData.contact_icons.submit_button.trim() ? contactData.contact_icons.submit_button : 'Send'}
                        onChange={(icon) => setContactData({
                          ...contactData,
                          contact_icons: { ...contactData.contact_icons, submit_button: icon }
                        })}
                      />
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                    <input
                      type="text"
                      value={contactData.meta_title || ''}
                      onChange={(e) => setContactData({ ...contactData, meta_title: e.target.value })}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                    <textarea
                      value={contactData.meta_description || ''}
                      onChange={(e) => setContactData({ ...contactData, meta_description: e.target.value })}
                      rows={3}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    />
                  </div>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('contact', contactData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl font-semibold hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Contact Content'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* About Tab */}
        {activeTab === 'about' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-3xl font-extrabold text-gray-900 mb-6">About Page Content</h2>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Page Title</label>
                  <input
                    type="text"
                    value={aboutData.title || ''}
                    onChange={(e) => setAboutData({ ...aboutData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={aboutData.subtitle || ''}
                    onChange={(e) => setAboutData({ ...aboutData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Our Story</label>
                  <textarea
                    value={aboutData.story_content || ''}
                    onChange={(e) => setAboutData({ ...aboutData, story_content: e.target.value })}
                    rows={6}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Tell your story..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                  <textarea
                    value={aboutData.description || ''}
                    onChange={(e) => setAboutData({ ...aboutData, description: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                {/* Hero Image */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Hero Image</label>
                  <div className="flex gap-4">
                    <input
                      type="text"
                      value={aboutData.about_hero_image || ''}
                      onChange={(e) => setAboutData({ ...aboutData, about_hero_image: e.target.value })}
                      className="flex-1 px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      placeholder="https://example.com/hero-image.jpg or upload"
                    />
                    <label className="px-4 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition-colors flex items-center gap-2 cursor-pointer">
                      <Upload className="w-5 h-5" />
                      <input
                        type="file"
                        accept="image/*"
                        onChange={async (e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            await handlePageContentImageUpload(file, (imageUrl) => {
                              setAboutData((prevData) => ({ ...prevData, about_hero_image: imageUrl }));
                            });
                          }
                        }}
                        className="hidden"
                      />
                      Upload
                    </label>
                  </div>
                  {aboutData.about_hero_image && (
                    <div className="mt-4">
                      <img src={aboutData.about_hero_image.startsWith('http') ? aboutData.about_hero_image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${aboutData.about_hero_image}`} alt="Hero" className="max-w-full max-h-48 rounded-lg border border-gray-200" />
                    </div>
                  )}
                </div>

                {/* Hero Icon (when no hero image) */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Hero Icon (shown when no hero image)</label>
                  <IconPicker
                    value={aboutData.about_hero_icon && aboutData.about_hero_icon.trim() ? aboutData.about_hero_icon : 'Hotel'}
                    onChange={(icon) => setAboutData({ ...aboutData, about_hero_icon: icon })}
                  />
                </div>

                {/* Mission */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Mission Statement</label>
                  <textarea
                    value={aboutData.mission || ''}
                    onChange={(e) => setAboutData({ ...aboutData, mission: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Our mission is to..."
                  />
                </div>

                {/* Vision */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Vision Statement</label>
                  <textarea
                    value={aboutData.vision || ''}
                    onChange={(e) => setAboutData({ ...aboutData, vision: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Our vision is to..."
                  />
                </div>

                {/* Values Section */}
                <div className="border-t border-gray-200 pt-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-gray-900">Our Values</h3>
                    <button
                      type="button"
                      onClick={() => {
                        const newValue = { icon: 'Heart', title: '', description: '' };
                        setAboutData((prevData) => ({
                          ...prevData,
                          values: [...(Array.isArray(prevData.values) ? prevData.values : []), newValue]
                        }));
                      }}
                      className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2"
                    >
                      <Plus className="w-4 h-4" />
                      Add Value
                    </button>
                  </div>
                  {Array.isArray(aboutData.values) && aboutData.values.length > 0 ? (
                    <div className="space-y-4">
                      {aboutData.values.map((value, index) => (
                        <div key={`value-${index}`} className="p-4 border-2 border-gray-200 rounded-xl space-y-3">
                          <div className="flex justify-between items-center">
                            <h4 className="font-semibold text-gray-900">Value {index + 1}</h4>
                            <button
                              type="button"
                              onClick={() => {
                                setAboutData((prevData) => ({
                                  ...prevData,
                                  values: (prevData.values || []).filter((_, i) => i !== index)
                                }));
                              }}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="w-5 h-5" />
                            </button>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Icon</label>
                            <IconPicker
                              value={value.icon && value.icon.trim() ? value.icon : 'Heart'}
                              onChange={(icon: string) => {
                                setAboutData((prevData) => {
                                  const newValues = [...(prevData.values || [])];
                                  newValues[index] = { ...newValues[index], icon };
                                  return { ...prevData, values: newValues };
                                });
                              }}
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
                            <input
                              type="text"
                              value={value.title || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newValues = [...(prevData.values || [])];
                                  newValues[index] = { ...newValues[index], title: e.target.value };
                                  return { ...prevData, values: newValues };
                                });
                              }}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Value title"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea
                              value={value.description || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newValues = [...(prevData.values || [])];
                                  newValues[index] = { ...newValues[index], description: e.target.value };
                                  return { ...prevData, values: newValues };
                                });
                              }}
                              rows={2}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Value description"
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500 text-sm">No values added yet. Click "Add Value" to get started.</p>
                  )}
                </div>

                {/* Features Section */}
                <div className="border-t border-gray-200 pt-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-gray-900">Features</h3>
                    <button
                      type="button"
                      onClick={() => {
                        const newFeature = { icon: 'Star', title: '', description: '', image: '' };
                        setAboutData((prevData) => ({
                          ...prevData,
                          features: [...(Array.isArray(prevData.features) ? prevData.features : []), newFeature]
                        }));
                      }}
                      className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2"
                    >
                      <Plus className="w-4 h-4" />
                      Add Feature
                    </button>
                  </div>
                  {Array.isArray(aboutData.features) && aboutData.features.length > 0 ? (
                    <div className="space-y-4">
                      {aboutData.features.map((feature, index) => (
                        <div key={`feature-${index}`} className="p-4 border-2 border-gray-200 rounded-xl space-y-3">
                          <div className="flex justify-between items-center">
                            <h4 className="font-semibold text-gray-900">Feature {index + 1}</h4>
                            <button
                              type="button"
                              onClick={() => {
                                setAboutData((prevData) => ({
                                  ...prevData,
                                  features: (prevData.features || []).filter((_, i) => i !== index)
                                }));
                              }}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="w-5 h-5" />
                            </button>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Icon</label>
                            <IconPicker
                              value={feature.icon && feature.icon.trim() ? feature.icon : 'Star'}
                              onChange={(icon: string) => {
                                setAboutData((prevData) => {
                                  const newFeatures = [...(prevData.features || [])];
                                  newFeatures[index] = { ...newFeatures[index], icon };
                                  return { ...prevData, features: newFeatures };
                                });
                              }}
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
                            <input
                              type="text"
                              value={feature.title || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newFeatures = [...(prevData.features || [])];
                                  newFeatures[index] = { ...newFeatures[index], title: e.target.value };
                                  return { ...prevData, features: newFeatures };
                                });
                              }}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Feature title"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea
                              value={feature.description || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newFeatures = [...(prevData.features || [])];
                                  newFeatures[index] = { ...newFeatures[index], description: e.target.value };
                                  return { ...prevData, features: newFeatures };
                                });
                              }}
                              rows={2}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Feature description"
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500 text-sm">No features added yet. Click "Add Feature" to get started.</p>
                  )}
                </div>

                {/* Team Section */}
                <div className="border-t border-gray-200 pt-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-gray-900">Team Members</h3>
                    <button
                      type="button"
                      onClick={() => {
                        const newMember = { name: '', role: '', image: '', bio: '', social_links: {} };
                        setAboutData((prevData) => ({
                          ...prevData,
                          team: [...(Array.isArray(prevData.team) ? prevData.team : []), newMember]
                        }));
                      }}
                      className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2"
                    >
                      <Plus className="w-4 h-4" />
                      Add Team Member
                    </button>
                  </div>
                  {Array.isArray(aboutData.team) && aboutData.team.length > 0 ? (
                    <div className="space-y-4">
                      {aboutData.team.map((member, index) => (
                        <div key={`team-${index}`} className="p-4 border-2 border-gray-200 rounded-xl space-y-3">
                          <div className="flex justify-between items-center">
                            <h4 className="font-semibold text-gray-900">Team Member {index + 1}</h4>
                            <button
                              type="button"
                              onClick={() => {
                                setAboutData((prevData) => ({
                                  ...prevData,
                                  team: (prevData.team || []).filter((_, i) => i !== index)
                                }));
                              }}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="w-5 h-5" />
                            </button>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
                              <input
                                type="text"
                                value={member.name || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newTeam = [...(prevData.team || [])];
                                    newTeam[index] = { ...newTeam[index], name: e.target.value };
                                    return { ...prevData, team: newTeam };
                                  });
                                }}
                                className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="Full name"
                              />
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Role</label>
                              <input
                                type="text"
                                value={member.role || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newTeam = [...(prevData.team || [])];
                                    newTeam[index] = { ...newTeam[index], role: e.target.value };
                                    return { ...prevData, team: newTeam };
                                  });
                                }}
                                className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="Job title"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
                            <div className="flex gap-2">
                              <input
                                type="text"
                                value={member.image || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newTeam = [...(prevData.team || [])];
                                    newTeam[index] = { ...newTeam[index], image: e.target.value };
                                    return { ...prevData, team: newTeam };
                                  });
                                }}
                                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="https://example.com/image.jpg or upload"
                              />
                              <label className="px-5 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-lg font-bold hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-purple-500/50 hover:border-purple-400 min-w-[120px] justify-center">
                                <Upload className="w-5 h-5" />
                                Upload
                                <input
                                  type="file"
                                  accept="image/*"
                                  onChange={async (e) => {
                                    const file = e.target.files?.[0];
                                    if (file) {
                                      await handlePageContentImageUpload(file, (imageUrl) => {
                                        setAboutData((prevData) => {
                                          const newTeam = [...(prevData.team || [])];
                                          newTeam[index] = { ...newTeam[index], image: imageUrl };
                                          return { ...prevData, team: newTeam };
                                        });
                                      });
                                    }
                                  }}
                                  className="hidden"
                                />
                              </label>
                            </div>
                            {member.image && (
                              <div className="mt-2">
                                <img 
                                  src={member.image.startsWith('http') ? member.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${member.image}`} 
                                  alt="Team member preview" 
                                  className="max-w-full max-h-32 rounded-lg border border-gray-200" 
                                />
                              </div>
                            )}
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Bio</label>
                            <textarea
                              value={member.bio || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newTeam = [...(prevData.team || [])];
                                  newTeam[index] = { ...newTeam[index], bio: e.target.value };
                                  return { ...prevData, team: newTeam };
                                });
                              }}
                              rows={2}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Short biography"
                            />
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500 text-sm">No team members added yet. Click "Add Team Member" to get started.</p>
                  )}
                </div>

                {/* Timeline Section */}
                <div className="border-t border-gray-200 pt-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-gray-900">Timeline / History</h3>
                    <button
                      type="button"
                      onClick={() => {
                        const newEvent = { year: '', title: '', description: '', image: '' };
                        setAboutData((prevData) => ({
                          ...prevData,
                          timeline: [...(Array.isArray(prevData.timeline) ? prevData.timeline : []), newEvent]
                        }));
                      }}
                      className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2"
                    >
                      <Plus className="w-4 h-4" />
                      Add Event
                    </button>
                  </div>
                  {Array.isArray(aboutData.timeline) && aboutData.timeline.length > 0 ? (
                    <div className="space-y-4">
                      {aboutData.timeline.map((event, index) => (
                        <div key={`timeline-${index}`} className="p-4 border-2 border-gray-200 rounded-xl space-y-3">
                          <div className="flex justify-between items-center">
                            <h4 className="font-semibold text-gray-900">Event {index + 1}</h4>
                            <button
                              type="button"
                              onClick={() => {
                                setAboutData((prevData) => ({
                                  ...prevData,
                                  timeline: (prevData.timeline || []).filter((_, i) => i !== index)
                                }));
                              }}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="w-5 h-5" />
                            </button>
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Year</label>
                              <input
                                type="text"
                                value={event.year || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newTimeline = [...(prevData.timeline || [])];
                                    newTimeline[index] = { ...newTimeline[index], year: e.target.value };
                                    return { ...prevData, timeline: newTimeline };
                                  });
                                }}
                                className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="2020"
                              />
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
                              <input
                                type="text"
                                value={event.title || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newTimeline = [...(prevData.timeline || [])];
                                    newTimeline[index] = { ...newTimeline[index], title: e.target.value };
                                    return { ...prevData, timeline: newTimeline };
                                  });
                                }}
                                className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="Event title"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea
                              value={event.description || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newTimeline = [...(prevData.timeline || [])];
                                  newTimeline[index] = { ...newTimeline[index], description: e.target.value };
                                  return { ...prevData, timeline: newTimeline };
                                });
                              }}
                              rows={2}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Event description"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
                            <div className="flex gap-2">
                              <input
                                type="text"
                                value={event.image || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newTimeline = [...(prevData.timeline || [])];
                                    newTimeline[index] = { ...newTimeline[index], image: e.target.value };
                                    return { ...prevData, timeline: newTimeline };
                                  });
                                }}
                                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="https://example.com/image.jpg or upload"
                              />
                              <label className="px-5 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-lg font-bold hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-purple-500/50 hover:border-purple-400 min-w-[120px] justify-center">
                                <Upload className="w-5 h-5" />
                                Upload
                                <input
                                  type="file"
                                  accept="image/*"
                                  onChange={async (e) => {
                                    const file = e.target.files?.[0];
                                    if (file) {
                                      await handlePageContentImageUpload(file, (imageUrl) => {
                                        setAboutData((prevData) => {
                                          const newTimeline = [...(prevData.timeline || [])];
                                          newTimeline[index] = { ...newTimeline[index], image: imageUrl };
                                          return { ...prevData, timeline: newTimeline };
                                        });
                                      });
                                    }
                                  }}
                                  className="hidden"
                                />
                              </label>
                            </div>
                            {event.image && (
                              <div className="mt-2">
                                <img 
                                  src={event.image.startsWith('http') ? event.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${event.image}`} 
                                  alt="Timeline event preview" 
                                  className="max-w-full max-h-32 rounded-lg border border-gray-200" 
                                />
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500 text-sm">No timeline events added yet. Click "Add Event" to get started.</p>
                  )}
                </div>

                {/* Achievements Section */}
                <div className="border-t border-gray-200 pt-6">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-xl font-bold text-gray-900">Achievements & Awards</h3>
                    <button
                      type="button"
                      onClick={() => {
                        const newAchievement = { icon: 'Award', title: '', description: '', year: '', image: '' };
                        setAboutData((prevData) => ({
                          ...prevData,
                          achievements: [...(Array.isArray(prevData.achievements) ? prevData.achievements : []), newAchievement]
                        }));
                      }}
                      className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors flex items-center gap-2"
                    >
                      <Plus className="w-4 h-4" />
                      Add Achievement
                    </button>
                  </div>
                  {Array.isArray(aboutData.achievements) && aboutData.achievements.length > 0 ? (
                    <div className="space-y-4">
                      {aboutData.achievements.map((achievement, index) => (
                        <div key={`achievement-${index}`} className="p-4 border-2 border-gray-200 rounded-xl space-y-3">
                          <div className="flex justify-between items-center">
                            <h4 className="font-semibold text-gray-900">Achievement {index + 1}</h4>
                            <button
                              type="button"
                              onClick={() => {
                                setAboutData((prevData) => ({
                                  ...prevData,
                                  achievements: (prevData.achievements || []).filter((_, i) => i !== index)
                                }));
                              }}
                              className="text-red-600 hover:text-red-700"
                            >
                              <Trash2 className="w-5 h-5" />
                            </button>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Icon</label>
                            <IconPicker
                              value={achievement.icon && achievement.icon.trim() ? achievement.icon : 'Award'}
                              onChange={(icon: string) => {
                                setAboutData((prevData) => {
                                  const newAchievements = [...(prevData.achievements || [])];
                                  newAchievements[index] = { ...newAchievements[index], icon };
                                  return { ...prevData, achievements: newAchievements };
                                });
                              }}
                            />
                          </div>
                          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
                              <input
                                type="text"
                                value={achievement.title || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newAchievements = [...(prevData.achievements || [])];
                                    newAchievements[index] = { ...newAchievements[index], title: e.target.value };
                                    return { ...prevData, achievements: newAchievements };
                                  });
                                }}
                                className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="Achievement title"
                              />
                            </div>
                            <div>
                              <label className="block text-sm font-medium text-gray-700 mb-1">Year</label>
                              <input
                                type="text"
                                value={achievement.year || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newAchievements = [...(prevData.achievements || [])];
                                    newAchievements[index] = { ...newAchievements[index], year: e.target.value };
                                    return { ...prevData, achievements: newAchievements };
                                  });
                                }}
                                className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="2020"
                              />
                            </div>
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea
                              value={achievement.description || ''}
                              onChange={(e) => {
                                setAboutData((prevData) => {
                                  const newAchievements = [...(prevData.achievements || [])];
                                  newAchievements[index] = { ...newAchievements[index], description: e.target.value };
                                  return { ...prevData, achievements: newAchievements };
                                });
                              }}
                              rows={2}
                              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
                              placeholder="Achievement description"
                            />
                          </div>
                          <div>
                            <label className="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
                            <div className="flex gap-2">
                              <input
                                type="text"
                                value={achievement.image || ''}
                                onChange={(e) => {
                                  setAboutData((prevData) => {
                                    const newAchievements = [...(prevData.achievements || [])];
                                    newAchievements[index] = { ...newAchievements[index], image: e.target.value };
                                    return { ...prevData, achievements: newAchievements };
                                  });
                                }}
                                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
                                placeholder="https://example.com/image.jpg or upload"
                              />
                              <label className="px-5 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-lg font-bold hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer flex items-center gap-2 text-base shadow-lg hover:shadow-xl border-2 border-purple-500/50 hover:border-purple-400 min-w-[120px] justify-center">
                                <Upload className="w-5 h-5" />
                                Upload
                                <input
                                  type="file"
                                  accept="image/*"
                                  onChange={async (e) => {
                                    const file = e.target.files?.[0];
                                    if (file) {
                                      await handlePageContentImageUpload(file, (imageUrl) => {
                                        setAboutData((prevData) => {
                                          const newAchievements = [...(prevData.achievements || [])];
                                          newAchievements[index] = { ...newAchievements[index], image: imageUrl };
                                          return { ...prevData, achievements: newAchievements };
                                        });
                                      });
                                    }
                                  }}
                                  className="hidden"
                                />
                              </label>
                            </div>
                            {achievement.image && (
                              <div className="mt-2">
                                <img 
                                  src={achievement.image.startsWith('http') ? achievement.image : `${import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000'}${achievement.image}`} 
                                  alt="Achievement preview" 
                                  className="max-w-full max-h-32 rounded-lg border border-gray-200" 
                                />
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-gray-500 text-sm">No achievements added yet. Click "Add Achievement" to get started.</p>
                  )}
                </div>

                {/* Additional Icons */}
                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Additional Icons</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Contact Info - Location Icon</label>
                      <IconPicker
                        value={aboutData.about_contact_icons?.location && aboutData.about_contact_icons.location.trim() ? aboutData.about_contact_icons.location : 'MapPin'}
                        onChange={(icon) => setAboutData({
                          ...aboutData,
                          about_contact_icons: { ...aboutData.about_contact_icons, location: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Contact Info - Phone Icon</label>
                      <IconPicker
                        value={aboutData.about_contact_icons?.phone && aboutData.about_contact_icons.phone.trim() ? aboutData.about_contact_icons.phone : 'Phone'}
                        onChange={(icon) => setAboutData({
                          ...aboutData,
                          about_contact_icons: { ...aboutData.about_contact_icons, phone: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Contact Info - Email Icon</label>
                      <IconPicker
                        value={aboutData.about_contact_icons?.email && aboutData.about_contact_icons.email.trim() ? aboutData.about_contact_icons.email : 'Mail'}
                        onChange={(icon) => setAboutData({
                          ...aboutData,
                          about_contact_icons: { ...aboutData.about_contact_icons, email: icon }
                        })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Learn More Button Icon</label>
                      <IconPicker
                        value={aboutData.about_learn_more_icon && aboutData.about_learn_more_icon.trim() ? aboutData.about_learn_more_icon : 'Hotel'}
                        onChange={(icon) => setAboutData({ ...aboutData, about_learn_more_icon: icon })}
                      />
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                    <input
                      type="text"
                      value={aboutData.meta_title || ''}
                      onChange={(e) => setAboutData({ ...aboutData, meta_title: e.target.value })}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                    <textarea
                      value={aboutData.meta_description || ''}
                      onChange={(e) => setAboutData({ ...aboutData, meta_description: e.target.value })}
                      rows={3}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    />
                  </div>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('about', aboutData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save About Content'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Footer Tab */}
        {activeTab === 'footer' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-3xl font-extrabold text-gray-900 mb-6">Footer Content</h2>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Company Name</label>
                  <input
                    type="text"
                    value={footerData.title || ''}
                    onChange={(e) => setFooterData({ ...footerData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Description</label>
                  <textarea
                    value={footerData.description || ''}
                    onChange={(e) => setFooterData({ ...footerData, description: e.target.value })}
                    rows={4}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                  />
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                    <p className="text-sm text-blue-800">
                      <strong>Note:</strong> Contact information (phone, email, address) is now managed centrally in <strong>Settings → Company Info</strong>. 
                      These fields will be displayed across the entire application, including the footer.
                    </p>
                  </div>
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Social Media Links</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Facebook</label>
                      <input
                        type="url"
                        value={footerData.social_links?.facebook || ''}
                        onChange={(e) => setFooterData({
                          ...footerData,
                          social_links: { ...footerData.social_links, facebook: e.target.value }
                        })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://facebook.com/..."
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Twitter</label>
                      <input
                        type="url"
                        value={footerData.social_links?.twitter || ''}
                        onChange={(e) => setFooterData({
                          ...footerData,
                          social_links: { ...footerData.social_links, twitter: e.target.value }
                        })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://twitter.com/..."
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Instagram</label>
                      <input
                        type="url"
                        value={footerData.social_links?.instagram || ''}
                        onChange={(e) => setFooterData({
                          ...footerData,
                          social_links: { ...footerData.social_links, instagram: e.target.value }
                        })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://instagram.com/..."
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">LinkedIn</label>
                      <input
                        type="url"
                        value={footerData.social_links?.linkedin || ''}
                        onChange={(e) => setFooterData({
                          ...footerData,
                          social_links: { ...footerData.social_links, linkedin: e.target.value }
                        })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://linkedin.com/..."
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">YouTube</label>
                      <input
                        type="url"
                        value={footerData.social_links?.youtube || ''}
                        onChange={(e) => setFooterData({
                          ...footerData,
                          social_links: { ...footerData.social_links, youtube: e.target.value }
                        })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://youtube.com/..."
                      />
                    </div>
                  </div>
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Footer Badges</h3>
                  <p className="text-sm text-gray-600 mb-4">Customize the badges displayed in the footer (e.g., "5-Star Rated", "Award Winning").</p>
                  
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {/* Badge 1 */}
                    <div className="space-y-4 p-6 bg-gray-50 rounded-xl border border-gray-200">
                      <label className="flex items-center gap-2 text-sm font-bold text-gray-900 tracking-wide">
                        <Award className="w-4 h-4 text-gray-600" />
                        Badge 1
                      </label>
                      <input
                        type="text"
                        value={footerData.badges?.[0]?.text || ''}
                        onChange={(e) => {
                          const badges = footerData.badges || [];
                          const updated = [...badges];
                          if (updated[0]) {
                            updated[0] = { ...updated[0], text: e.target.value };
                          } else {
                            updated[0] = { text: e.target.value, icon: 'Award' };
                          }
                          setFooterData({ ...footerData, badges: updated });
                        }}
                        placeholder="5-Star Rated"
                        className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all duration-200 text-sm"
                      />
                      <div>
                        <label className="block text-xs font-semibold text-gray-700 mb-2">Icon</label>
                        <select
                          value={footerData.badges?.[0]?.icon || 'Award'}
                          onChange={(e) => {
                            const badges = footerData.badges || [];
                            const updated = [...badges];
                            if (updated[0]) {
                              updated[0] = { ...updated[0], icon: e.target.value };
                            } else {
                              updated[0] = { text: '', icon: e.target.value };
                            }
                            setFooterData({ ...footerData, badges: updated });
                          }}
                          className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all duration-200 text-sm"
                        >
                          <option value="Award">Award</option>
                          <option value="Star">Star</option>
                          <option value="Trophy">Trophy</option>
                          <option value="Medal">Medal</option>
                          <option value="BadgeCheck">Badge Check</option>
                          <option value="CheckCircle">Check Circle</option>
                          <option value="Shield">Shield</option>
                          <option value="Heart">Heart</option>
                          <option value="Crown">Crown</option>
                          <option value="Gem">Gem</option>
                          <option value="Zap">Zap</option>
                          <option value="Target">Target</option>
                          <option value="TrendingUp">Trending Up</option>
                        </select>
                      </div>
                    </div>

                    {/* Badge 2 */}
                    <div className="space-y-4 p-6 bg-gray-50 rounded-xl border border-gray-200">
                      <label className="flex items-center gap-2 text-sm font-bold text-gray-900 tracking-wide">
                        <Shield className="w-4 h-4 text-gray-600" />
                        Badge 2
                      </label>
                      <input
                        type="text"
                        value={footerData.badges?.[1]?.text || ''}
                        onChange={(e) => {
                          const badges = footerData.badges || [];
                          const updated = [...badges];
                          if (updated[1]) {
                            updated[1] = { ...updated[1], text: e.target.value };
                          } else {
                            updated[1] = { text: e.target.value, icon: 'Shield' };
                          }
                          setFooterData({ ...footerData, badges: updated });
                        }}
                        placeholder="Award Winning"
                        className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all duration-200 text-sm"
                      />
                      <div>
                        <label className="block text-xs font-semibold text-gray-700 mb-2">Icon</label>
                        <select
                          value={footerData.badges?.[1]?.icon || 'Shield'}
                          onChange={(e) => {
                            const badges = footerData.badges || [];
                            const updated = [...badges];
                            if (updated[1]) {
                              updated[1] = { ...updated[1], icon: e.target.value };
                            } else {
                              updated[1] = { text: '', icon: e.target.value };
                            }
                            setFooterData({ ...footerData, badges: updated });
                          }}
                          className="w-full px-4 py-3 bg-white border border-gray-300 rounded-xl shadow-sm focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all duration-200 text-sm"
                        >
                          <option value="Award">Award</option>
                          <option value="Star">Star</option>
                          <option value="Trophy">Trophy</option>
                          <option value="Medal">Medal</option>
                          <option value="BadgeCheck">Badge Check</option>
                          <option value="CheckCircle">Check Circle</option>
                          <option value="Shield">Shield</option>
                          <option value="Heart">Heart</option>
                          <option value="Crown">Crown</option>
                          <option value="Gem">Gem</option>
                          <option value="Zap">Zap</option>
                          <option value="Target">Target</option>
                          <option value="TrendingUp">Trending Up</option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Copyright Text */}
                <div className="bg-gradient-to-br from-amber-50 to-yellow-50 rounded-xl p-6 border-2 border-amber-200">
                  <h3 className="text-lg font-bold text-gray-900 mb-4">Copyright Text</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">
                        Copyright Text <span className="text-amber-600">(Use {`{YEAR}`} for automatic year)</span>
                      </label>
                      <input
                        type="text"
                        value={footerData.copyright_text || ''}
                        onChange={(e) => setFooterData({ ...footerData, copyright_text: e.target.value })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200"
                        placeholder="© {YEAR} Luxury Hotel. All rights reserved."
                      />
                      <p className="mt-2 text-xs text-gray-600">
                        The {`{YEAR}`} placeholder will be automatically replaced with the current year.
                      </p>
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('footer', footerData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Footer Content'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Privacy Tab */}
        {activeTab === 'privacy' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-3xl font-extrabold text-gray-900">Privacy Policy Content</h2>
                <div className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700">Enable Page</span>
                  <button
                    type="button"
                    onClick={() => setPrivacyData({ ...privacyData, is_active: !privacyData.is_active })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
                      (privacyData.is_active ?? true) ? 'bg-purple-600' : 'bg-gray-300'
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        (privacyData.is_active ?? true) ? 'translate-x-6' : 'translate-x-1'
                      }`}
                    />
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={privacyData.title || ''}
                    onChange={(e) => setPrivacyData({ ...privacyData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Privacy Policy"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={privacyData.subtitle || ''}
                    onChange={(e) => setPrivacyData({ ...privacyData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Your privacy is important to us"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content (HTML)</label>
                  <textarea
                    value={privacyData.content || ''}
                    onChange={(e) => setPrivacyData({ ...privacyData, content: e.target.value })}
                    rows={20}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 font-mono text-sm"
                    placeholder="Enter HTML content for privacy policy..."
                  />
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">SEO Settings</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                      <input
                        type="text"
                        value={privacyData.meta_title || ''}
                        onChange={(e) => setPrivacyData({ ...privacyData, meta_title: e.target.value })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                      <textarea
                        value={privacyData.meta_description || ''}
                        onChange={(e) => setPrivacyData({ ...privacyData, meta_description: e.target.value })}
                        rows={3}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('privacy', privacyData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Privacy Policy'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Terms Tab */}
        {activeTab === 'terms' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-3xl font-extrabold text-gray-900 mb-6">Terms & Conditions Content</h2>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={termsData.title || ''}
                    onChange={(e) => setTermsData({ ...termsData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Terms & Conditions"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={termsData.subtitle || ''}
                    onChange={(e) => setTermsData({ ...termsData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Please read these terms carefully"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content (HTML)</label>
                  <textarea
                    value={termsData.content || ''}
                    onChange={(e) => setTermsData({ ...termsData, content: e.target.value })}
                    rows={20}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 font-mono text-sm"
                    placeholder="Enter HTML content for terms & conditions..."
                  />
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">SEO Settings</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                      <input
                        type="text"
                        value={termsData.meta_title || ''}
                        onChange={(e) => setTermsData({ ...termsData, meta_title: e.target.value })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                      <textarea
                        value={termsData.meta_description || ''}
                        onChange={(e) => setTermsData({ ...termsData, meta_description: e.target.value })}
                        rows={3}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('terms', termsData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Terms & Conditions'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Refunds Tab */}
        {activeTab === 'refunds' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-3xl font-extrabold text-gray-900">Refunds Policy Content</h2>
                <div className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700">Enable Page</span>
                  <button
                    type="button"
                    onClick={() => setRefundsData({ ...refundsData, is_active: !refundsData.is_active })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
                      (refundsData.is_active ?? true) ? 'bg-purple-600' : 'bg-gray-300'
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        (refundsData.is_active ?? true) ? 'translate-x-6' : 'translate-x-1'
                      }`}
                    />
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={refundsData.title || ''}
                    onChange={(e) => setRefundsData({ ...refundsData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Refunds Policy"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={refundsData.subtitle || ''}
                    onChange={(e) => setRefundsData({ ...refundsData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Our commitment to fair refunds"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content (HTML)</label>
                  <textarea
                    value={refundsData.content || ''}
                    onChange={(e) => setRefundsData({ ...refundsData, content: e.target.value })}
                    rows={20}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 font-mono text-sm"
                    placeholder="Enter HTML content for refunds policy..."
                  />
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">SEO Settings</h3>
                  <div className="space-y-4">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                      <input
                        type="text"
                        value={refundsData.meta_title || ''}
                        onChange={(e) => setRefundsData({ ...refundsData, meta_title: e.target.value })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                      <textarea
                        value={refundsData.meta_description || ''}
                        onChange={(e) => setRefundsData({ ...refundsData, meta_description: e.target.value })}
                        rows={3}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                  </div>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('refunds', refundsData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Refunds Policy'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Cancellation Tab */}
        {activeTab === 'cancellation' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-3xl font-extrabold text-gray-900">Cancellation Policy Content</h2>
                <div className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700">Enable Page</span>
                  <button
                    type="button"
                    onClick={() => setCancellationData({ ...cancellationData, is_active: !cancellationData.is_active })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
                      (cancellationData.is_active ?? true) ? 'bg-purple-600' : 'bg-gray-300'
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        (cancellationData.is_active ?? true) ? 'translate-x-6' : 'translate-x-1'
                      }`}
                    />
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={cancellationData.title || ''}
                    onChange={(e) => setCancellationData({ ...cancellationData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Cancellation Policy"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={cancellationData.subtitle || ''}
                    onChange={(e) => setCancellationData({ ...cancellationData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Flexible cancellation options for your peace of mind"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content (HTML)</label>
                  <textarea
                    value={cancellationData.content || ''}
                    onChange={(e) => setCancellationData({ ...cancellationData, content: e.target.value })}
                    rows={20}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 font-mono text-sm"
                    placeholder="Enter HTML content for cancellation policy..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                  <input
                    type="text"
                    value={cancellationData.meta_title || ''}
                    onChange={(e) => setCancellationData({ ...cancellationData, meta_title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Cancellation Policy - Luxury Hotel"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                  <textarea
                    value={cancellationData.meta_description || ''}
                    onChange={(e) => setCancellationData({ ...cancellationData, meta_description: e.target.value })}
                    rows={3}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Review our cancellation policy..."
                  />
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-gray-200">
                <div className="flex justify-end">
                  <button
                    onClick={() => handleSave('cancellation', cancellationData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Cancellation Policy'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Accessibility Tab */}
        {activeTab === 'accessibility' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-3xl font-extrabold text-gray-900">Accessibility Content</h2>
                <div className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700">Enable Page</span>
                  <button
                    type="button"
                    onClick={() => setAccessibilityData({ ...accessibilityData, is_active: !accessibilityData.is_active })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
                      (accessibilityData.is_active ?? true) ? 'bg-purple-600' : 'bg-gray-300'
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        (accessibilityData.is_active ?? true) ? 'translate-x-6' : 'translate-x-1'
                      }`}
                    />
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={accessibilityData.title || ''}
                    onChange={(e) => setAccessibilityData({ ...accessibilityData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Accessibility"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={accessibilityData.subtitle || ''}
                    onChange={(e) => setAccessibilityData({ ...accessibilityData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Committed to providing an inclusive experience for all guests"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content (HTML)</label>
                  <textarea
                    value={accessibilityData.content || ''}
                    onChange={(e) => setAccessibilityData({ ...accessibilityData, content: e.target.value })}
                    rows={20}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 font-mono text-sm"
                    placeholder="Enter HTML content for accessibility page..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                  <input
                    type="text"
                    value={accessibilityData.meta_title || ''}
                    onChange={(e) => setAccessibilityData({ ...accessibilityData, meta_title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Accessibility - Luxury Hotel"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                  <textarea
                    value={accessibilityData.meta_description || ''}
                    onChange={(e) => setAccessibilityData({ ...accessibilityData, meta_description: e.target.value })}
                    rows={3}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Discover our commitment to accessibility..."
                  />
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-gray-200">
                <div className="flex justify-end">
                  <button
                    onClick={() => handleSave('accessibility', accessibilityData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save Accessibility Content'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* FAQ Tab */}
        {activeTab === 'faq' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-3xl font-extrabold text-gray-900">FAQ Content</h2>
                <div className="flex items-center gap-3">
                  <span className="text-sm font-medium text-gray-700">Enable Page</span>
                  <button
                    type="button"
                    onClick={() => setFaqData({ ...faqData, is_active: !faqData.is_active })}
                    className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
                      (faqData.is_active ?? true) ? 'bg-purple-600' : 'bg-gray-300'
                    }`}
                  >
                    <span
                      className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                        (faqData.is_active ?? true) ? 'translate-x-6' : 'translate-x-1'
                      }`}
                    />
                  </button>
                </div>
              </div>
              
              <div className="space-y-6">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Title</label>
                  <input
                    type="text"
                    value={faqData.title || ''}
                    onChange={(e) => setFaqData({ ...faqData, title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Frequently Asked Questions"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Subtitle</label>
                  <input
                    type="text"
                    value={faqData.subtitle || ''}
                    onChange={(e) => setFaqData({ ...faqData, subtitle: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Find answers to common questions"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Content (HTML)</label>
                  <textarea
                    value={faqData.content || ''}
                    onChange={(e) => setFaqData({ ...faqData, content: e.target.value })}
                    rows={20}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200 font-mono text-sm"
                    placeholder="Enter HTML content for FAQ page..."
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                  <input
                    type="text"
                    value={faqData.meta_title || ''}
                    onChange={(e) => setFaqData({ ...faqData, meta_title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="FAQ - Luxury Hotel"
                  />
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                  <textarea
                    value={faqData.meta_description || ''}
                    onChange={(e) => setFaqData({ ...faqData, meta_description: e.target.value })}
                    rows={3}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Find answers to common questions..."
                  />
                </div>
              </div>

              <div className="mt-8 pt-6 border-t border-gray-200">
                <div className="flex justify-end">
                  <button
                    onClick={() => handleSave('faq', faqData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-xl font-semibold hover:from-purple-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save FAQ Content'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Services Tab */}
        {activeTab === 'services' && (
          <div className="space-y-8">
            {servicesLoading && <Loading />}

            {/* Header */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <div className="flex justify-between items-center">
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <div className="p-2.5 rounded-xl bg-gradient-to-br from-amber-500/10 to-amber-600/10 border border-amber-200/40">
                      <Sparkles className="w-6 h-6 text-amber-600" />
                    </div>
                    <h2 className="text-2xl font-extrabold text-gray-900">Service Management</h2>
                  </div>
                  <p className="text-gray-600 text-base max-w-2xl leading-relaxed">
                    Manage hotel services and amenities. These services are displayed on the homepage, services page, and available during booking.
                  </p>
                </div>
                <button
                  onClick={() => {
                    resetServiceForm();
                    setShowServiceModal(true);
                  }}
                  className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl"
                >
                  <Plus className="w-5 h-5" />
                  Add Service
                </button>
              </div>
            </div>

            {/* Filters */}
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div className="relative group">
                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5 group-focus-within:text-amber-500 transition-colors" />
                  <input
                    type="text"
                    placeholder="Search services..."
                    value={serviceFilters.search}
                    onChange={(e) => setServiceFilters({ ...serviceFilters, search: e.target.value })}
                    className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-gray-700 placeholder-gray-400 font-medium shadow-sm hover:shadow-md"
                  />
                </div>
                <select
                  value={serviceFilters.status}
                  onChange={(e) => setServiceFilters({ ...serviceFilters, status: e.target.value })}
                  className="w-full px-4 py-3.5 bg-white border-2 border-gray-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-gray-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
                >
                  <option value="">All Statuses</option>
                  <option value="active">Active</option>
                  <option value="inactive">Inactive</option>
                </select>
              </div>
            </div>

            {/* Services Table */}
            <div className="bg-white/90 backdrop-blur-xl rounded-xl sm:rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden">
              <div className="overflow-x-auto">
                <table className="w-full min-w-[640px] sm:min-w-full">
                  <thead>
                    <tr className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900">
                      <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Service Name</th>
                      <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Description</th>
                      <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Price</th>
                      <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Unit</th>
                      <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Status</th>
                      <th className="px-8 py-5 text-right text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-slate-100">
                    {services.map((service) => (
                      <tr 
                        key={service.id} 
                        className="hover:bg-gradient-to-r hover:from-amber-50/30 hover:to-yellow-50/30 transition-all duration-200 group border-b border-slate-100"
                      >
                        <td className="px-8 py-5 whitespace-nowrap">
                          <div className="text-sm font-semibold text-gray-900">{service.name}</div>
                        </td>
                        <td className="px-8 py-5">
                          <div className="text-sm text-gray-700 max-w-xs truncate">{service.description}</div>
                        </td>
                        <td className="px-8 py-5 whitespace-nowrap">
                          <div className="text-sm font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent">{formatCurrency(service.price)}</div>
                        </td>
                        <td className="px-8 py-5 whitespace-nowrap">
                          <div className="text-sm text-gray-600">{service.unit}</div>
                        </td>
                        <td className="px-8 py-5 whitespace-nowrap">
                          <span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${
                            service.status === 'active' 
                              ? 'bg-gradient-to-r from-emerald-50 to-green-50 text-emerald-800 border-emerald-200' 
                              : 'bg-gradient-to-r from-slate-50 to-gray-50 text-slate-700 border-slate-200'
                          }`}>
                            {service.status === 'active' ? 'Active' : 'Inactive'}
                          </span>
                        </td>
                        <td className="px-8 py-5 whitespace-nowrap text-right">
                          <div className="flex items-center justify-end gap-2">
                            <button
                              onClick={() => handleEditService(service)}
                              className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-blue-200 hover:border-blue-300"
                              title="Edit"
                            >
                              <Edit className="w-5 h-5" />
                            </button>
                            <button
                              onClick={() => handleDeleteServiceClick(service.id)}
                              className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300"
                              title="Delete"
                            >
                              <Trash2 className="w-5 h-5" />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <Pagination
                currentPage={serviceCurrentPage}
                totalPages={serviceTotalPages}
                onPageChange={setServiceCurrentPage}
                totalItems={serviceTotalItems}
                itemsPerPage={serviceItemsPerPage}
              />
            </div>

            {/* Service Modal */}
            {showServiceModal && (
              <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-4 animate-fade-in">
                <div className="min-h-full flex items-start justify-center py-8">
                  <div className="bg-white rounded-3xl shadow-2xl w-full max-w-4xl my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200 animate-scale-in">
                    <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-6 py-5 border-b border-slate-700">
                      <div className="flex justify-between items-center">
                        <div>
                          <h2 className="text-2xl font-bold text-amber-100">
                            {editingService ? 'Update Service' : 'Add New Service'}
                          </h2>
                          <p className="text-amber-200/80 text-sm font-light mt-1">
                            {editingService ? 'Modify service information' : 'Create a new service'}
                          </p>
                        </div>
                        <button 
                          onClick={() => {
                            setShowServiceModal(false);
                            resetServiceForm();
                          }}
                          className="w-10 h-10 flex items-center justify-center rounded-xl text-amber-100 hover:text-white hover:bg-slate-700/50 transition-all duration-200 border border-slate-600 hover:border-amber-400"
                        >
                          <X className="w-6 h-6" />
                        </button>
                      </div>
                    </div>
                    
                    <div className="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
                      <form onSubmit={handleServiceSubmit} className="space-y-6">
                        {/* Basic Information Section */}
                        <div className="border-b border-slate-200 pb-6">
                          <h3 className="text-lg font-bold text-slate-900 mb-4">Basic Information</h3>
                          <div className="space-y-5">
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Service Name <span className="text-red-500">*</span>
                              </label>
                              <input
                                type="text"
                                value={serviceFormData.name}
                                onChange={(e) => {
                                  setServiceFormData({ ...serviceFormData, name: e.target.value });
                                  // Auto-generate slug if empty
                                  if (!serviceFormData.slug) {
                                    const autoSlug = e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                                    setServiceFormData(prev => ({ ...prev, slug: autoSlug }));
                                  }
                                }}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                placeholder="e.g., Luxury Spa Treatment"
                                required
                              />
                              <p className="text-xs text-slate-500 mt-1">The name of the service as it will appear to guests</p>
                            </div>
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Short Description
                              </label>
                              <textarea
                                value={serviceFormData.description}
                                onChange={(e) => setServiceFormData({ ...serviceFormData, description: e.target.value })}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                rows={3}
                                placeholder="Brief description that appears on service cards and listings (2-3 sentences)"
                              />
                              <p className="text-xs text-slate-500 mt-1">This appears on service cards and the services listing page</p>
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                              <div>
                                <label className="block text-sm font-semibold text-slate-700 mb-2">
                                  Price <span className="text-red-500">*</span>
                                </label>
                                <input
                                  type="number"
                                  step="0.01"
                                  value={serviceFormData.price}
                                  onChange={(e) => setServiceFormData({ ...serviceFormData, price: parseFloat(e.target.value) || 0 })}
                                  className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                  placeholder="0.00"
                                  required
                                  min="0"
                                />
                                <p className="text-xs text-slate-500 mt-1">Price per unit</p>
                              </div>
                              <div>
                                <label className="block text-sm font-semibold text-slate-700 mb-2">
                                  Unit
                                </label>
                                <select
                                  value={serviceFormData.unit}
                                  onChange={(e) => setServiceFormData({ ...serviceFormData, unit: e.target.value })}
                                  className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
                                >
                                  <option value="time">Per Time</option>
                                  <option value="hour">Per Hour</option>
                                  <option value="day">Per Day</option>
                                  <option value="person">Per Person</option>
                                  <option value="session">Per Session</option>
                                  <option value="item">Per Item</option>
                                </select>
                                <p className="text-xs text-slate-500 mt-1">Pricing unit</p>
                              </div>
                            </div>
                            <div className="grid grid-cols-2 gap-4">
                              <div>
                                <label className="block text-sm font-semibold text-slate-700 mb-2">
                                  Category
                                </label>
                                <select
                                  value={serviceFormData.category}
                                  onChange={(e) => setServiceFormData({ ...serviceFormData, category: e.target.value })}
                                  className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
                                >
                                  <option value="">Select Category</option>
                                  <option value="Dining">Dining</option>
                                  <option value="Wellness">Wellness</option>
                                  <option value="Spa">Spa</option>
                                  <option value="Concierge">Concierge</option>
                                  <option value="Transportation">Transportation</option>
                                  <option value="Business">Business</option>
                                  <option value="Entertainment">Entertainment</option>
                                  <option value="Family">Family</option>
                                  <option value="Pet Services">Pet Services</option>
                                  <option value="Housekeeping">Housekeeping</option>
                                  <option value="Other">Other</option>
                                </select>
                                <p className="text-xs text-slate-500 mt-1">Group services by category</p>
                              </div>
                              <div>
                                <label className="block text-sm font-semibold text-slate-700 mb-2">
                                  Status
                                </label>
                                <select
                                  value={serviceFormData.status}
                                  onChange={(e) => setServiceFormData({ ...serviceFormData, status: e.target.value as 'active' | 'inactive' })}
                                  className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
                                >
                                  <option value="active">Active (Visible to guests)</option>
                                  <option value="inactive">Inactive (Hidden from guests)</option>
                                </select>
                                <p className="text-xs text-slate-500 mt-1">Control service visibility</p>
                              </div>
                            </div>
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                URL Slug
                              </label>
                              <input
                                type="text"
                                value={serviceFormData.slug}
                                onChange={(e) => {
                                  const slug = e.target.value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
                                  setServiceFormData({ ...serviceFormData, slug });
                                }}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm font-mono text-sm"
                                placeholder="auto-generated-from-name"
                              />
                              <p className="text-xs text-slate-500 mt-1">URL-friendly identifier (e.g., luxury-spa-treatment). Auto-generated if left empty.</p>
                            </div>
                          </div>
                        </div>

                        {/* Visual Content Section */}
                        <div className="border-b border-slate-200 pb-6">
                          <h3 className="text-lg font-bold text-slate-900 mb-4">Visual Content</h3>
                          <div className="space-y-5">
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Service Image
                              </label>
                              <div className="flex gap-2">
                                <input
                                  type="text"
                                  value={serviceFormData.image}
                                  onChange={(e) => setServiceFormData({ ...serviceFormData, image: e.target.value })}
                                  className="flex-1 px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                  placeholder="https://images.unsplash.com/photo-..."
                                />
                                <input
                                  type="file"
                                  accept="image/*"
                                  onChange={(e) => {
                                    const file = e.target.files?.[0];
                                    if (file) {
                                      handleServiceImageUpload(file);
                                    }
                                  }}
                                  className="hidden"
                                  id="service-image-upload"
                                />
                                <label
                                  htmlFor="service-image-upload"
                                  className="px-5 py-3.5 bg-gradient-to-r from-amber-600 to-amber-700 text-white rounded-xl font-bold hover:from-amber-700 hover:to-amber-800 transition-all cursor-pointer flex items-center gap-2 shadow-lg hover:shadow-xl border-2 border-amber-500/50 hover:border-amber-400"
                                >
                                  <Upload className="w-5 h-5" />
                                  Upload
                                </label>
                              </div>
                              {serviceImagePreview && (
                                <div className="mt-3">
                                  <img src={serviceImagePreview} alt="Preview" className="w-full max-w-md h-48 object-cover rounded-lg border-2 border-slate-200" />
                                </div>
                              )}
                              <p className="text-xs text-slate-500 mt-1">Main image displayed on service cards and detail page. Recommended: 1200x800px</p>
                            </div>
                          </div>
                        </div>

                        {/* Detail Page Content Section */}
                        <div className="border-b border-slate-200 pb-6">
                          <h3 className="text-lg font-bold text-slate-900 mb-4">Detail Page Content</h3>
                          <div className="space-y-5">
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Full Description (HTML)
                              </label>
                              <textarea
                                value={serviceFormData.content}
                                onChange={(e) => setServiceFormData({ ...serviceFormData, content: e.target.value })}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                rows={8}
                                placeholder="<p>Write a detailed description of the service here. You can use HTML tags like &lt;p&gt;, &lt;h2&gt;, &lt;ul&gt;, &lt;li&gt;, &lt;strong&gt;, etc.</p>&#10;&#10;<h2>What's Included</h2>&#10;<ul>&#10;  <li>Feature 1</li>&#10;  <li>Feature 2</li>&#10;</ul>"
                              />
                              <div className="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                                <p className="text-xs text-blue-800 font-medium mb-1">💡 HTML Tips:</p>
                                <ul className="text-xs text-blue-700 space-y-1 list-disc list-inside">
                                  <li>Use <code className="bg-blue-100 px-1 rounded">&lt;p&gt;</code> for paragraphs</li>
                                  <li>Use <code className="bg-blue-100 px-1 rounded">&lt;h2&gt;</code> or <code className="bg-blue-100 px-1 rounded">&lt;h3&gt;</code> for headings</li>
                                  <li>Use <code className="bg-blue-100 px-1 rounded">&lt;ul&gt;</code> and <code className="bg-blue-100 px-1 rounded">&lt;li&gt;</code> for lists</li>
                                  <li>Use <code className="bg-blue-100 px-1 rounded">&lt;strong&gt;</code> for bold text</li>
                                </ul>
                              </div>
                            </div>

                            {/* Sections Editor */}
                            <div>
                              <div className="flex justify-between items-center mb-3">
                                <div>
                                  <label className="block text-sm font-semibold text-slate-700 mb-1">
                                    Content Sections (Optional)
                                  </label>
                                  <p className="text-xs text-slate-500">Add rich content blocks like images, galleries, quotes, or feature lists</p>
                                </div>
                                <button
                                  type="button"
                                  onClick={() => {
                                    setServiceFormData({
                                      ...serviceFormData,
                                      sections: [...serviceFormData.sections, { type: 'text' as const, title: '', content: '', is_visible: true }]
                                    });
                                  }}
                                  className="text-sm px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium"
                                >
                                  + Add Section
                                </button>
                              </div>
                              <div className="space-y-3 max-h-96 overflow-y-auto p-4 bg-slate-50 rounded-xl border border-slate-200">
                                {serviceFormData.sections.map((section: ServiceSection, sectionIndex: number) => (
                                  <div key={sectionIndex} className="p-4 bg-white border-2 border-slate-300 rounded-lg shadow-sm">
                                    <div className="flex justify-between items-center mb-3">
                                      <select
                                        value={section?.type || 'text'}
                                        onChange={(e) => {
                                          const updatedSections = [...serviceFormData.sections];
                                          updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], type: e.target.value as ServiceSection['type'] };
                                          setServiceFormData({ ...serviceFormData, sections: updatedSections });
                                        }}
                                        className="px-3 py-2 border-2 border-slate-300 rounded-lg text-sm font-medium"
                                      >
                                        <option value="text">📝 Text Block</option>
                                        <option value="hero">🎯 Hero Section</option>
                                        <option value="image">🖼️ Image</option>
                                        <option value="gallery">🖼️ Gallery</option>
                                        <option value="quote">💬 Quote</option>
                                        <option value="features">✨ Features List</option>
                                        <option value="cta">📢 Call to Action</option>
                                        <option value="video">🎥 Video</option>
                                      </select>
                                      <button
                                        type="button"
                                        onClick={() => {
                                          const updatedSections = serviceFormData.sections.filter((_, i) => i !== sectionIndex);
                                          setServiceFormData({ ...serviceFormData, sections: updatedSections });
                                        }}
                                        className="text-red-600 hover:text-red-700 text-sm px-3 py-1.5 font-medium hover:bg-red-50 rounded-lg transition-colors"
                                      >
                                        Remove
                                      </button>
                                    </div>
                                    <input
                                      type="text"
                                      value={section?.title || ''}
                                      onChange={(e) => {
                                        const updatedSections = [...serviceFormData.sections];
                                        updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], title: e.target.value };
                                        setServiceFormData({ ...serviceFormData, sections: updatedSections });
                                      }}
                                      className="w-full px-3 py-2 border-2 border-slate-300 rounded-lg mb-2 text-sm"
                                      placeholder="Section title (optional)"
                                    />
                                    <textarea
                                      value={section?.content || ''}
                                      onChange={(e) => {
                                        const updatedSections = [...serviceFormData.sections];
                                        updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], content: e.target.value };
                                        setServiceFormData({ ...serviceFormData, sections: updatedSections });
                                      }}
                                      rows={3}
                                      className="w-full px-3 py-2 border-2 border-slate-300 rounded-lg text-sm"
                                      placeholder="Section content (HTML supported)"
                                    />
                                    {section?.type === 'image' && (
                                      <input
                                        type="url"
                                        value={section?.image || ''}
                                        onChange={(e) => {
                                          const updatedSections = [...serviceFormData.sections];
                                          updatedSections[sectionIndex] = { ...updatedSections[sectionIndex], image: e.target.value };
                                          setServiceFormData({ ...serviceFormData, sections: updatedSections });
                                        }}
                                        className="w-full px-3 py-2 border-2 border-slate-300 rounded-lg mt-2 text-sm"
                                        placeholder="Image URL"
                                      />
                                    )}
                                  </div>
                                ))}
                                {serviceFormData.sections.length === 0 && (
                                  <div className="text-center py-8">
                                    <p className="text-sm text-slate-500 mb-2">No sections added yet</p>
                                    <p className="text-xs text-slate-400">Click "Add Section" to create rich content blocks for the detail page</p>
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>

                        {/* SEO Section */}
                        <div className="border-b border-slate-200 pb-6">
                          <h3 className="text-lg font-bold text-slate-900 mb-4">SEO Settings (Optional)</h3>
                          <div className="space-y-5">
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Meta Title
                              </label>
                              <input
                                type="text"
                                value={serviceFormData.meta_title}
                                onChange={(e) => setServiceFormData({ ...serviceFormData, meta_title: e.target.value })}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                placeholder={serviceFormData.name ? `${serviceFormData.name} - Luxury Hotel` : "Service Name - Luxury Hotel"}
                              />
                              <p className="text-xs text-slate-500 mt-1">Page title for search engines (50-60 characters recommended)</p>
                            </div>
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Meta Description
                              </label>
                              <textarea
                                value={serviceFormData.meta_description}
                                onChange={(e) => setServiceFormData({ ...serviceFormData, meta_description: e.target.value })}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                rows={3}
                                placeholder={serviceFormData.description || "Brief description for search engines (150-160 characters recommended)"}
                              />
                              <p className="text-xs text-slate-500 mt-1">Description shown in search results</p>
                            </div>
                            <div>
                              <label className="block text-sm font-semibold text-slate-700 mb-2">
                                Meta Keywords
                              </label>
                              <input
                                type="text"
                                value={serviceFormData.meta_keywords}
                                onChange={(e) => setServiceFormData({ ...serviceFormData, meta_keywords: e.target.value })}
                                className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm"
                                placeholder="luxury spa, hotel services, wellness, relaxation"
                              />
                              <p className="text-xs text-slate-500 mt-1">Comma-separated keywords for SEO</p>
                            </div>
                          </div>
                        </div>
                        <div>
                          <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
                            Status
                          </label>
                          <select
                            value={serviceFormData.status}
                            onChange={(e) => setServiceFormData({ ...serviceFormData, status: e.target.value as 'active' | 'inactive' })}
                            className="w-full px-4 py-3 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm cursor-pointer"
                          >
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                          </select>
                        </div>
                        <div className="flex gap-3 pt-4 border-t border-slate-200">
                          <button
                            type="button"
                            onClick={() => {
                              setShowServiceModal(false);
                              resetServiceForm();
                            }}
                            className="flex-1 px-6 py-3 border-2 border-slate-300 rounded-xl text-slate-700 font-semibold hover:bg-slate-50 transition-all duration-200 shadow-sm hover:shadow-md"
                          >
                            Cancel
                          </button>
                          <button
                            type="submit"
                            className="flex-1 px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl"
                          >
                            {editingService ? 'Update' : 'Create'}
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Delete Service Confirmation Dialog */}
            <ConfirmationDialog
              isOpen={deleteServiceConfirm.show}
              onClose={() => setDeleteServiceConfirm({ show: false, id: null })}
              onConfirm={handleDeleteService}
              title="Delete Service"
              message="Are you sure you want to delete this service? This action cannot be undone."
              confirmText="Delete"
              cancelText="Cancel"
              variant="danger"
            />
          </div>
        )}

        {/* SEO Tab */}
        {activeTab === 'seo' && (
          <div className="space-y-8">
            <div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-xl border border-gray-200/50 p-8">
              <h2 className="text-3xl font-extrabold text-gray-900 mb-6">SEO Optimization</h2>
              
              <div className="space-y-6">
                <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                  <p className="text-sm text-blue-800">
                    <strong>Note:</strong> SEO settings here apply globally. Individual pages can also have their own SEO settings.
                  </p>
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Title</label>
                  <input
                    type="text"
                    value={seoData.meta_title || ''}
                    onChange={(e) => setSeoData({ ...seoData, meta_title: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Default meta title for the website"
                  />
                  <p className="text-xs text-gray-500 mt-1">Recommended: 50-60 characters</p>
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Description</label>
                  <textarea
                    value={seoData.meta_description || ''}
                    onChange={(e) => setSeoData({ ...seoData, meta_description: e.target.value })}
                    rows={3}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="Default meta description for the website"
                  />
                  <p className="text-xs text-gray-500 mt-1">Recommended: 150-160 characters</p>
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Meta Keywords</label>
                  <input
                    type="text"
                    value={seoData.meta_keywords || ''}
                    onChange={(e) => setSeoData({ ...seoData, meta_keywords: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="keyword1, keyword2, keyword3"
                  />
                  <p className="text-xs text-gray-500 mt-1">Comma-separated keywords</p>
                </div>

                <div className="border-t border-gray-200 pt-6">
                  <h3 className="text-xl font-bold text-gray-900 mb-4">Open Graph (OG) Tags</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">OG Title</label>
                      <input
                        type="text"
                        value={seoData.og_title || ''}
                        onChange={(e) => setSeoData({ ...seoData, og_title: e.target.value })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-semibold text-gray-700 mb-2">OG Image URL</label>
                      <input
                        type="url"
                        value={seoData.og_image || ''}
                        onChange={(e) => setSeoData({ ...seoData, og_image: e.target.value })}
                        className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                        placeholder="https://example.com/og-image.jpg"
                      />
                    </div>
                  </div>
                  <div className="mt-6">
                    <label className="block text-sm font-semibold text-gray-700 mb-2">OG Description</label>
                    <textarea
                      value={seoData.og_description || ''}
                      onChange={(e) => setSeoData({ ...seoData, og_description: e.target.value })}
                      rows={3}
                      className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">Canonical URL</label>
                  <input
                    type="url"
                    value={seoData.canonical_url || ''}
                    onChange={(e) => setSeoData({ ...seoData, canonical_url: e.target.value })}
                    className="w-full px-4 py-3 bg-white border-2 border-gray-200 rounded-xl focus:border-purple-400 focus:ring-4 focus:ring-purple-100 transition-all duration-200"
                    placeholder="https://example.com"
                  />
                  <p className="text-xs text-gray-500 mt-1">Default canonical URL for the website</p>
                </div>

                <div className="flex justify-end pt-4 border-t border-gray-200">
                  <button
                    onClick={() => handleSave('seo', seoData)}
                    disabled={saving}
                    className="px-8 py-3 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white rounded-xl font-semibold hover:from-indigo-600 hover:to-indigo-700 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                  >
                    <Save className="w-5 h-5" />
                    {saving ? 'Saving...' : 'Save SEO Settings'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default PageContentDashboard;

