import React, { useState, useEffect } from 'react';
import { useParams, Link, useNavigate } from 'react-router-dom';
import { ArrowLeft, Share2, Tag, Star } from 'lucide-react';
import * as LucideIcons from 'lucide-react';
import pageContentService, { PageContent } from '../services/pageContentService';
import serviceService from '../../hotel_services/services/serviceService';
import Loading from '../../../shared/components/Loading';
import { createSanitizedHtml } from '../../../shared/utils/htmlSanitizer';
import { useFormatCurrency } from '../../payments/hooks/useFormatCurrency';
import { useTheme } from '../../../shared/contexts/ThemeContext';
import { getThemeBackgroundClasses, getThemeTextClasses, getThemeCardClasses } from '../../../shared/utils/themeUtils';

interface ServiceSection {
  type: 'hero' | 'text' | 'image' | 'gallery' | 'quote' | 'features' | 'cta' | 'video';
  title?: string;
  content?: string;
  image?: string;
  images?: string[];
  quote?: string;
  author?: string;
  features?: Array<{ title: string; description: string; icon?: string }>;
  cta_text?: string;
  cta_link?: string;
  video_url?: string;
  alignment?: 'left' | 'center' | 'right';
  background_color?: string;
  text_color?: string;
  is_visible?: boolean;
}

interface ServiceDetail {
  id: string | number;
  title: string;
  slug: string;
  description?: string;
  content?: string;
  image?: string;
  icon?: string;
  price?: number;
  unit?: string;
  category?: string;
  type: 'luxury' | 'hotel';
  sections?: ServiceSection[];
  meta_title?: string;
  meta_description?: string;
  meta_keywords?: string;
}

const ServiceDetailPage: React.FC = () => {
  const { slug } = useParams<{ slug: string }>();
  const navigate = useNavigate();
  const { theme } = useTheme();
  const { formatCurrency } = useFormatCurrency();
  const [service, setService] = useState<ServiceDetail | null>(null);
  const [loading, setLoading] = useState(true);
  const [relatedServices, setRelatedServices] = useState<ServiceDetail[]>([]);
  const [pageContent, setPageContent] = useState<PageContent | null>(null);
  
  const bgClasses = getThemeBackgroundClasses(theme.theme_layout_mode);
  const textClasses = getThemeTextClasses(theme.theme_layout_mode);
  const cardClasses = getThemeCardClasses(theme.theme_layout_mode);

  useEffect(() => {
    if (slug) {
      fetchService();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [slug]);

  const fetchService = async () => {
    try {
      setLoading(true);
      
      // First, try to fetch from hotel services by slug (primary source)
      try {
        const serviceResponse = await serviceService.getServiceBySlug(slug!);
        if (serviceResponse.success && serviceResponse.data?.service) {
          const service = serviceResponse.data.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;
            }
          }
          
          const serviceDetail: ServiceDetail = {
            id: service.id,
            title: service.name,
            slug: service.slug || slug!,
            description: service.description,
            content: service.content,
            image: service.image,
            category: service.category,
            type: 'hotel',
            price: service.price,
            unit: service.unit,
            sections: sections,
            meta_title: service.meta_title,
            meta_description: service.meta_description,
            meta_keywords: service.meta_keywords,
          };
          
          setService(serviceDetail);
          
          // Set meta tags
          if (serviceDetail.meta_title) {
            document.title = serviceDetail.meta_title;
          }
          if (serviceDetail.meta_description) {
            let metaDescription = document.querySelector('meta[name="description"]');
            if (!metaDescription) {
              metaDescription = document.createElement('meta');
              metaDescription.setAttribute('name', 'description');
              document.head.appendChild(metaDescription);
            }
            metaDescription.setAttribute('content', serviceDetail.meta_description);
          }
          
          // Fetch related services
          await fetchRelatedServices(serviceDetail);
          
          setLoading(false);
          return;
        }
      } catch (error) {
        // If hotel service not found, fall back to luxury services
        console.log('Hotel service not found, trying luxury services...');
      }
      
      // Fallback: Fetch page content for luxury services
      const contentResponse = await pageContentService.getHomeContent();
      if (contentResponse.status === 'success' && contentResponse.data?.page_content) {
        const content = contentResponse.data.page_content;
        
        // Handle luxury_services
        if (typeof content.luxury_services === 'string') {
          try {
            content.luxury_services = JSON.parse(content.luxury_services);
          } catch {
            content.luxury_services = [];
          }
        } else if (!Array.isArray(content.luxury_services)) {
          content.luxury_services = content.luxury_services || [];
        }
        
        setPageContent(content);
        
        // Find service by slug
        const luxuryService = content.luxury_services?.find((s: { slug?: string }) => s.slug === slug);
        if (luxuryService) {
          const serviceDetail: ServiceDetail = {
            id: `luxury-${luxuryService.slug}`,
            title: luxuryService.title || 'Service',
            slug: luxuryService.slug || slug || '',
            description: luxuryService.description,
            content: luxuryService.content,
            image: luxuryService.image,
            icon: luxuryService.icon,
            category: luxuryService.category,
            type: 'luxury',
            sections: luxuryService.sections || [],
            meta_title: luxuryService.meta_title,
            meta_description: luxuryService.meta_description,
            meta_keywords: luxuryService.meta_keywords,
          };
          
          setService(serviceDetail);
          
          // Set meta tags
          if (serviceDetail.meta_title) {
            document.title = serviceDetail.meta_title;
          }
          if (serviceDetail.meta_description) {
            let metaDescription = document.querySelector('meta[name="description"]');
            if (!metaDescription) {
              metaDescription = document.createElement('meta');
              metaDescription.setAttribute('name', 'description');
              document.head.appendChild(metaDescription);
            }
            metaDescription.setAttribute('content', serviceDetail.meta_description);
          }
          
          // Fetch related services
          await fetchRelatedServices(serviceDetail);
          setLoading(false);
          return;
        }
      }
      
      // Service not found
      navigate('/services');
    } catch (error: unknown) {
      console.error('Error fetching service:', error);
      navigate('/services');
    } finally {
      setLoading(false);
    }
  };

  const fetchRelatedServices = async (currentService: ServiceDetail) => {
    try {
      const services: ServiceDetail[] = [];
      
      // Fetch hotel services first
      const servicesResponse = await serviceService.getServices({
        status: 'active',
        limit: 100,
      });
      
      if (servicesResponse.success && servicesResponse.data?.services) {
        servicesResponse.data.services.forEach((service: { slug?: string; category?: string; id?: number | string }) => {
          // Skip current service
          if (currentService.type === 'hotel' && service.id === currentService.id) {
            return;
          }
          
          // Filter by category if available
          if (currentService.category && service.category !== currentService.category) {
            return;
          }
          
          const serviceSlug = service.slug || service.name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
          services.push({
            id: service.id,
            title: service.name,
            slug: serviceSlug,
            description: service.description,
            image: service.image,
            category: service.category,
            type: 'hotel',
            price: service.price,
          });
        });
      }
      
      // Add luxury services as fallback
      if (pageContent?.luxury_services && Array.isArray(pageContent.luxury_services)) {
        pageContent.luxury_services.forEach((s: { slug?: string; category?: string }, index: number) => {
          if (s.slug && s.slug !== currentService.slug) {
            if (!currentService.category || s.category === currentService.category) {
              // Check if already in services (by slug)
              const serviceSlug = s.slug || s.title?.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
              const exists = services.some(serv => serv.slug === serviceSlug);
              if (!exists) {
                services.push({
                  id: `luxury-${index}`,
                  title: s.title || 'Service',
                  slug: s.slug,
                  description: s.description,
                  image: s.image,
                  icon: s.icon,
                  category: s.category,
                  type: 'luxury',
                });
              }
            }
          }
        });
      }
      
      setRelatedServices(services.slice(0, 3));
    } catch (error) {
      console.error('Error fetching related services:', error);
    }
  };

  const handleShare = async () => {
    if (navigator.share && service) {
      try {
        await navigator.share({
          title: service.title,
          text: service.description,
          url: window.location.href,
        });
      } catch (error) {
        // User cancelled or error occurred
      }
    } else {
      // Fallback: copy to clipboard
      navigator.clipboard.writeText(window.location.href);
      alert('Link copied to clipboard!');
    }
  };

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

  if (!service) {
    return (
      <div className={`min-h-screen ${bgClasses} flex items-center justify-center`}>
        <div className="text-center">
          <h1 className={`text-2xl font-bold mb-4 ${textClasses.primary}`}>Service not found</h1>
          <Link to="/services" className="text-[var(--luxury-gold)] hover:underline">
            Back to Services
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className={`min-h-screen ${bgClasses} w-full`} style={{ width: '100vw', position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', marginTop: '-1.5rem', marginBottom: '-1.5rem' }}>
      {/* Hero Section with Featured Image - Enhanced Luxury */}
      {service.image && (
        <div className="relative w-full h-[60vh] min-h-[500px] max-h-[800px] overflow-hidden">
          <div className="absolute inset-0">
            <img
              src={service.image}
              alt={service.title}
              className="w-full h-full object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-black/30"></div>
            <div className="absolute inset-0 bg-gradient-to-r from-black/40 via-transparent to-black/40"></div>
          </div>
          
          {/* Luxury Overlay Pattern */}
          <div className="absolute inset-0 opacity-10">
            <div className="absolute top-0 left-0 w-96 h-96 bg-[var(--luxury-gold)] rounded-full blur-3xl"></div>
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-[var(--luxury-gold-dark)] rounded-full blur-3xl"></div>
          </div>

          {/* Hero Content Overlay */}
          <div className="absolute inset-0 flex items-end">
            <div className="w-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-12 2xl:px-16 3xl:px-20 pb-12 lg:pb-16">
              <div className="max-w-5xl mx-auto">
                {service.category && (
                  <div className="flex flex-wrap gap-3 mb-6">
                    <span className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-br from-[var(--luxury-gold)]/20 to-[var(--luxury-gold-dark)]/10 backdrop-blur-md rounded-xl text-[var(--luxury-gold)] text-sm font-semibold border border-[var(--luxury-gold)]/40 shadow-xl">
                      <Tag className="w-4 h-4" />
                      {service.category}
                    </span>
                    {service.type === 'luxury' && (
                      <span className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-br from-[var(--luxury-gold)]/30 to-[var(--luxury-gold-dark)]/20 backdrop-blur-md rounded-xl text-[#0f0f0f] text-sm font-bold border border-[var(--luxury-gold)]/50 shadow-xl">
                        <Star className="w-4 h-4 fill-[#0f0f0f]" />
                        Premium
                      </span>
                    )}
                  </div>
                )}
                <h1 className={`text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-serif font-bold ${textClasses.primary} mb-6 leading-tight drop-shadow-2xl`}>
                  {service.title}
                </h1>
                {service.description && (
                  <p className={`text-xl sm:text-2xl lg:text-3xl ${textClasses.secondary} font-light leading-relaxed max-w-4xl mb-8 drop-shadow-lg`}>
                    {service.description}
                  </p>
                )}
                {service.price !== undefined && (
                  <div className="flex items-baseline gap-3 mb-8">
                    <span className="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold bg-gradient-to-r from-[var(--luxury-gold)] via-[var(--luxury-gold-light)] to-[var(--luxury-gold)] bg-clip-text text-transparent drop-shadow-lg">
                      {formatCurrency(service.price)}
                    </span>
                    {service.unit && (
                      <span className={`text-xl sm:text-2xl ${textClasses.secondary} font-light`}>
                        / {service.unit}
                      </span>
                    )}
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Decorative Bottom Border */}
          <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--luxury-gold)]/50 to-transparent"></div>
        </div>
      )}

      {/* Main Content - Enhanced Luxury Layout */}
      <div className="w-full py-12 sm:py-16 lg:py-24">
        <div className="w-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 lg:px-8 xl:px-12 2xl:px-16 3xl:px-20">
          <div className="max-w-5xl mx-auto">
            {/* Back Button - Only show if no hero image */}
            {!service.image && (
              <Link
                to="/services"
                className={`inline-flex items-center gap-3 px-6 py-3 ${cardClasses} border-2 border-[var(--luxury-gold)]/20 rounded-xl ${textClasses.secondary} hover:text-[var(--luxury-gold)] hover:border-[var(--luxury-gold)]/50 transition-all duration-300 mb-12 group`}
              >
                <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
                <span className="font-medium">Back to Services</span>
              </Link>
            )}

            {/* Service Header - Only if no hero image */}
            {!service.image && (
              <div className="mb-12">
                {service.category && (
                  <div className="flex flex-wrap gap-3 mb-6">
                    <Link
                      to={`/services?category=${encodeURIComponent(service.category)}`}
                      className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-br from-[var(--luxury-gold)]/15 to-[var(--luxury-gold)]/5 text-[var(--luxury-gold)] rounded-xl text-sm font-semibold border border-[var(--luxury-gold)]/30 hover:border-[var(--luxury-gold)]/50 transition-all"
                    >
                      <Tag className="w-4 h-4" />
                      {service.category}
                    </Link>
                    {service.type === 'luxury' && (
                      <span className="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-br from-[var(--luxury-gold)]/20 to-[var(--luxury-gold-dark)]/10 text-[var(--luxury-gold)] rounded-xl text-sm font-bold border border-[var(--luxury-gold)]/40">
                        <Star className="w-4 h-4" />
                        Premium
                      </span>
                    )}
                  </div>
                )}

                <div className="flex items-start gap-6 mb-6">
                  {service.icon && (LucideIcons as Record<string, React.ComponentType<{ className?: string }>>)[service.icon] && (
                    <div className="relative flex-shrink-0">
                      <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 rounded-full blur-3xl"></div>
                      {React.createElement((LucideIcons as Record<string, React.ComponentType<{ className?: string }>>)[service.icon], { 
                        className: 'w-20 h-20 sm:w-24 sm:h-24 text-[var(--luxury-gold)] relative z-10 drop-shadow-2xl' 
                      })}
                    </div>
                  )}
                  <div className="flex-1">
                    <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif font-bold text-white mb-6 leading-tight">
                      {service.title}
                    </h1>
                    {service.price !== undefined && (
                      <div className="flex items-baseline gap-3 mb-6">
                        <span className="text-4xl sm:text-5xl font-serif font-bold bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-light)] bg-clip-text text-transparent">
                          {formatCurrency(service.price)}
                        </span>
                        {service.unit && (
                          <span className={`text-xl ${textClasses.muted} font-light`}>
                            / {service.unit}
                          </span>
                        )}
                      </div>
                    )}
                  </div>
                </div>

                {service.description && (
                  <p className="text-2xl text-gray-300 mb-8 font-light leading-relaxed max-w-4xl">
                    {service.description}
                  </p>
                )}

                <div className="flex flex-wrap items-center gap-6 pt-8 border-t border-[var(--luxury-gold)]/20">
                  <button
                    onClick={handleShare}
                    className="flex items-center gap-3 px-6 py-3 bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] border-2 border-[var(--luxury-gold)]/20 rounded-xl text-[var(--luxury-gold)] hover:border-[var(--luxury-gold)]/50 hover:bg-[var(--luxury-gold)]/5 transition-all duration-300 group"
                  >
                    <Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
                    <span className="font-medium">Share</span>
                  </button>
                </div>
              </div>
            )}

            {/* Share Button for Hero Image Layout */}
            {service.image && (
              <div className="flex justify-end mb-12">
                <button
                  onClick={handleShare}
                  className="flex items-center gap-3 px-6 py-3 bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] border-2 border-[var(--luxury-gold)]/20 rounded-xl text-[var(--luxury-gold)] hover:border-[var(--luxury-gold)]/50 hover:bg-[var(--luxury-gold)]/5 transition-all duration-300 group"
                >
                  <Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
                  <span className="font-medium">Share</span>
                </button>
              </div>
            )}

            {/* Service Content - Enhanced Luxury Styling */}
            {service.content && (
              <article className="prose prose-invert prose-xl max-w-none mb-16
                prose-headings:text-white prose-headings:font-serif prose-headings:font-bold
                prose-h2:text-4xl prose-h2:mt-16 prose-h2:mb-8 prose-h2:border-b-2 prose-h2:border-[var(--luxury-gold)]/30 prose-h2:pb-4 prose-h2:pt-2
                prose-h3:text-3xl prose-h3:mt-12 prose-h3:mb-6 prose-h3:text-[var(--luxury-gold)]
                prose-h4:text-2xl prose-h4:mt-10 prose-h4:mb-5
                prose-p:text-gray-300 prose-p:font-light prose-p:leading-relaxed prose-p:mb-8 prose-p:text-lg
                prose-ul:text-gray-300 prose-ul:font-light prose-ul:my-8 prose-ul:text-lg
                prose-ol:text-gray-300 prose-ol:font-light prose-ol:my-8 prose-ol:text-lg
                prose-li:text-gray-300 prose-li:mb-4 prose-li:leading-relaxed
                prose-strong:text-[var(--luxury-gold)] prose-strong:font-semibold
                prose-a:text-[var(--luxury-gold)] prose-a:no-underline hover:prose-a:underline prose-a:font-medium
                prose-img:rounded-2xl prose-img:shadow-2xl prose-img:border-2 prose-img:border-[var(--luxury-gold)]/20 prose-img:my-12
                prose-blockquote:border-l-4 prose-blockquote:border-[var(--luxury-gold)] prose-blockquote:pl-6 prose-blockquote:italic prose-blockquote:text-gray-300
                [&_*]:text-gray-300 [&_h1]:text-white [&_h2]:text-white [&_h3]:text-[var(--luxury-gold)] [&_h4]:text-white
                [&_strong]:text-[var(--luxury-gold)] [&_b]:text-[var(--luxury-gold)] [&_a]:text-[var(--luxury-gold)]
                [&_ul]:space-y-3 [&_ol]:space-y-3"
              >
                <div
                  className="bg-gradient-to-br from-[#1a1a1a]/50 to-[#0f0f0f]/50 rounded-3xl border-2 border-[var(--luxury-gold)]/10 p-8 md:p-12 lg:p-16 backdrop-blur-sm"
                  dangerouslySetInnerHTML={createSanitizedHtml(
                    service.content || '<p>No content available.</p>'
                  )}
                />
              </article>
            )}

            {/* Luxury Sections - Enhanced */}
            {service.sections && service.sections.length > 0 && (
              <div className="space-y-20 mb-16">
                {service.sections
                  .filter((section) => section.is_visible !== false)
                  .map((section, index) => (
                    <div key={index}>
                      {/* Hero Section - Enhanced */}
                      {section.type === 'hero' && (
                        <div className="relative rounded-3xl overflow-hidden border-2 border-[var(--luxury-gold)]/30 shadow-2xl group">
                          {section.image && (
                            <div className="absolute inset-0">
                              <img src={section.image} alt={section.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" />
                              <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/70 to-black/40"></div>
                              <div className="absolute inset-0 bg-gradient-to-r from-black/40 via-transparent to-black/40"></div>
                            </div>
                          )}
                          <div className="absolute inset-0 opacity-10">
                            <div className="absolute top-0 left-0 w-96 h-96 bg-[var(--luxury-gold)] rounded-full blur-3xl"></div>
                            <div className="absolute bottom-0 right-0 w-96 h-96 bg-[var(--luxury-gold-dark)] rounded-full blur-3xl"></div>
                          </div>
                          <div className="relative px-8 py-20 md:px-16 md:py-32 text-center">
                            {section.title && (
                              <h2 className={`text-5xl md:text-6xl lg:text-7xl font-serif font-bold ${textClasses.primary} mb-8 leading-tight drop-shadow-2xl`}>
                                {section.title}
                              </h2>
                            )}
                            {section.content && (
                              <p className={`text-2xl md:text-3xl ${textClasses.secondary} font-light leading-relaxed max-w-4xl mx-auto drop-shadow-lg`}>
                                {section.content}
                              </p>
                            )}
                          </div>
                          <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-[var(--luxury-gold)]/50 to-transparent"></div>
                        </div>
                      )}

                      {/* Text Section */}
                      {section.type === 'text' && (
                        <div className={`${cardClasses} rounded-3xl border-2 border-[var(--luxury-gold)]/20 p-8 md:p-12 shadow-xl ${
                          section.alignment === 'center' ? 'text-center' : section.alignment === 'right' ? 'text-right' : 'text-left'
                        }`}>
                          {section.title && (
                            <h3 className={`text-3xl md:text-4xl font-serif font-bold ${textClasses.primary} mb-6`}>
                              {section.title}
                            </h3>
                          )}
                          {section.content && (
                            <div
                              className={`${textClasses.secondary} font-light leading-relaxed text-lg`}
                              dangerouslySetInnerHTML={createSanitizedHtml(section.content)}
                            />
                          )}
                        </div>
                      )}

                      {/* Image Section */}
                      {section.type === 'image' && section.image && (
                        <div className="rounded-3xl overflow-hidden border-2 border-[var(--luxury-gold)]/20 shadow-2xl">
                          <img src={section.image} alt={section.title || 'Service image'} className="w-full h-auto" />
                          {section.title && (
                            <div className={`${cardClasses} px-6 py-4 border-t border-[var(--luxury-gold)]/20`}>
                              <p className={`${textClasses.muted} text-sm font-light italic text-center`}>{section.title}</p>
                            </div>
                          )}
                        </div>
                      )}

                      {/* Gallery Section */}
                      {section.type === 'gallery' && section.images && section.images.length > 0 && (
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                          {section.images.map((img, imgIndex) => (
                            <div key={imgIndex} className="rounded-2xl overflow-hidden border-2 border-[var(--luxury-gold)]/20 shadow-xl group hover:border-[var(--luxury-gold)]/50 transition-all">
                              <img src={img} alt={`Gallery image ${imgIndex + 1}`} className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500" />
                            </div>
                          ))}
                        </div>
                      )}

                      {/* Quote Section */}
                      {section.type === 'quote' && (
                        <div className="relative bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] rounded-3xl border-2 border-[var(--luxury-gold)]/30 p-8 md:p-12 shadow-2xl">
                          <div className="absolute top-6 left-6 text-6xl text-[var(--luxury-gold)]/20 font-serif">"</div>
                          {section.quote && (
                            <blockquote className="text-2xl md:text-3xl font-serif font-light text-white italic mb-6 relative z-10 pl-8">
                              {section.quote}
                            </blockquote>
                          )}
                          {section.author && (
                            <cite className="text-[var(--luxury-gold)] text-lg font-medium not-italic block text-right">
                              — {section.author}
                            </cite>
                          )}
                        </div>
                      )}

                      {/* Features Section - Enhanced */}
                      {section.type === 'features' && section.features && (
                        <div>
                          {section.title && (
                            <h3 className="text-4xl md:text-5xl font-serif font-bold text-white mb-12 text-center border-b-2 border-[var(--luxury-gold)]/30 pb-6">
                              {section.title}
                            </h3>
                          )}
                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                            {section.features.map((feature, featIndex) => {
                              const IconComponent = feature.icon && (LucideIcons as Record<string, React.ComponentType<{ className?: string }>>)[feature.icon] 
                                ? (LucideIcons as Record<string, React.ComponentType<{ className?: string }>>)[feature.icon] 
                                : null;
                              return (
                                <div key={featIndex} className="group relative bg-gradient-to-br from-[#1a1a1a] via-[#0f0f0f] to-[#0a0a0a] rounded-3xl border-2 border-[var(--luxury-gold)]/20 p-8 shadow-2xl hover:border-[var(--luxury-gold)]/60 hover:shadow-[var(--luxury-gold)]/20 transition-all duration-500 hover:-translate-y-2">
                                  <div className="absolute inset-0 bg-gradient-to-br from-[var(--luxury-gold)]/0 to-[var(--luxury-gold)]/0 group-hover:from-[var(--luxury-gold)]/5 group-hover:to-transparent rounded-3xl transition-all duration-500"></div>
                                  <div className="relative z-10">
                                    {IconComponent && (
                                      <div className="mb-6 relative">
                                        <div className="absolute inset-0 bg-[var(--luxury-gold)]/20 rounded-full blur-2xl group-hover:blur-3xl transition-all"></div>
                                        {React.createElement(IconComponent, { 
                                          className: 'w-12 h-12 text-[var(--luxury-gold)] relative z-10 group-hover:scale-110 transition-transform duration-300' 
                                        })}
                                      </div>
                                    )}
                                    <h4 className="text-2xl font-bold text-white mb-4 group-hover:text-[var(--luxury-gold)] transition-colors">{feature.title}</h4>
                                    <p className="text-gray-300 font-light leading-relaxed text-base">{feature.description}</p>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        </div>
                      )}

                      {/* CTA Section */}
                      {section.type === 'cta' && (
                        <div className="relative bg-gradient-to-br from-[var(--luxury-gold)]/10 via-[var(--luxury-gold-dark)]/5 to-[var(--luxury-gold)]/10 rounded-3xl border-2 border-[var(--luxury-gold)]/30 p-8 md:p-12 text-center shadow-2xl">
                          {section.title && (
                            <h3 className="text-3xl md:text-4xl font-serif font-bold text-white mb-4">
                              {section.title}
                            </h3>
                          )}
                          {section.content && (
                            <p className="text-xl text-gray-300 font-light mb-8 max-w-2xl mx-auto">
                              {section.content}
                            </p>
                          )}
                          {section.cta_text && section.cta_link && (
                            <a
                              href={section.cta_link}
                              className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-[var(--luxury-gold)] to-[var(--luxury-gold-dark)] text-[#0f0f0f] font-semibold rounded-xl hover:from-[var(--luxury-gold-light)] hover:to-[var(--luxury-gold)] transition-all shadow-lg hover:shadow-xl hover:scale-105"
                            >
                              {section.cta_text}
                            </a>
                          )}
                        </div>
                      )}

                      {/* Video Section */}
                      {section.type === 'video' && section.video_url && (
                        <div className="rounded-3xl overflow-hidden border-2 border-[var(--luxury-gold)]/20 shadow-2xl bg-black">
                          <div className="aspect-video">
                            <iframe
                              src={section.video_url.replace('watch?v=', 'embed/').replace('vimeo.com/', 'player.vimeo.com/video/')}
                              className="w-full h-full"
                              allowFullScreen
                              title="Service video"
                            />
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
              </div>
            )}

            {/* Related Services */}
            {relatedServices.length > 0 && (
              <div className="mt-16 pt-12 border-t border-[var(--luxury-gold)]/20">
                <h2 className={`text-2xl sm:text-3xl font-bold ${textClasses.primary} mb-8`}>Related Services</h2>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {relatedServices.map((relatedService) => (
                    <Link
                      key={relatedService.id}
                      to={`/services/${relatedService.slug}`}
                      className="group bg-gradient-to-br from-[#1a1a1a] to-[#0f0f0f] rounded-xl border border-[var(--luxury-gold)]/20 overflow-hidden hover:border-[var(--luxury-gold)]/50 transition-all duration-300"
                    >
                      {relatedService.image && (
                        <div className="relative h-40 overflow-hidden">
                          <img
                            src={relatedService.image}
                            alt={relatedService.title}
                            className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                          />
                        </div>
                      )}
                      <div className="p-4">
                        <h3 className={`text-lg font-bold ${textClasses.primary} mb-2 group-hover:text-[var(--luxury-gold)] transition-colors line-clamp-2`}>
                          {relatedService.title}
                        </h3>
                        {relatedService.description && (
                          <p className={`${textClasses.muted} text-sm line-clamp-2 font-light`}>
                            {relatedService.description}
                          </p>
                        )}
                      </div>
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ServiceDetailPage;

