{{--
    Frontend Renderer for Page Builder V2 Pages
    This file renders pages created with the React + Craft.js builder
--}}

<!-- RENDER-V2 LOADED -->
@php
    \Log::info('==================== GLOBAL SECTIONS RENDER-V2 START ====================');
    // Get the builder data - For Global Sections, use $section->builder_data (not builder_v2_data)
    $builderData = $section->builder_data ?? [];

    // Extract components from Craft.js format
    $rootNode = $builderData['ROOT'] ?? null;

    // Debug: Log ROOT structure
    if ($rootNode) {
        \Log::info('ROOT Node', ['type' => $rootNode['type']['resolvedName'] ?? 'unknown', 'childNodes' => $rootNode['nodes'] ?? []]);
    }

    // Get website and its settings
    $currentWebsite = $section->website ?? null;
    $currentWebsiteId = $section->website_id ?? null;
    $currencySymbol = $currentWebsite ? $currentWebsite->getCurrencySymbol() : 'RM';
    $websiteSubdomain = $currentWebsite ? $currentWebsite->subdomain : null;

    /**
     * Recursively render a Craft.js node and its children
     */
    if (!function_exists('renderNode')) {
    function renderNode($nodeId, $nodes, $websiteId = null, $currencySymbol = 'RM', $websiteSubdomain = null) {
        if (!isset($nodes[$nodeId])) {
            return '';
        }

        $node = $nodes[$nodeId];
        $type = $node['type']['resolvedName'] ?? 'div';
        \Log::info('renderNode called', ['nodeId' => $nodeId, 'type' => $type]);
        $props = $node['props'] ?? [];
        $childNodes = $node['nodes'] ?? [];

        // Debug log
        if ($type === 'Posts') {
            \Log::info('POSTS NODE FOUND!', ['nodeId' => $nodeId, 'type' => $type, 'props' => $props]);
        }

        // Render based on component type
        switch ($type) {
            case 'Container':
                return renderContainer($props, $childNodes, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);

            case 'Heading':
                return renderHeading($props);

            case 'Paragraph':
                return renderParagraph($props);

            case 'Button':
                return renderButton($props);

            case 'Image':
                return renderImage($props);

            case 'Row':
                return renderRow($props, $childNodes, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);

            case 'Column':
                return renderColumn($props, $childNodes, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);

            case 'Card':
                return renderCard($props);

            case 'Hero':
                return renderHero($props);

            case 'IconBox':
                return renderIconBox($props);

            case 'Slider':
                return renderSlider($props);

            case 'Accordion':
                return renderAccordion($props);

            case 'Tabs':
                return renderTabs($props);

            case 'Gallery':
                return renderGallery($props);

            case 'Video':
                return renderVideo($props);

            case 'Form':
                return renderForm($props);

            case 'Testimonials':
                return renderTestimonials($props);

            case 'PricingTable':
                return renderPricingTable($props);

            case 'TeamMembers':
                return renderTeamMembers($props);

            case 'Stats':
                return renderStats($props);

            case 'Timeline':
                return renderTimeline($props);

            case 'Map':
                return renderMap($props);

            case 'CTABanner':
                return renderCTABanner($props);

            case 'Divider':
                return renderDivider($props);

            case 'Spacer':
                return renderSpacer($props);

            case 'Menu':
                return renderMenu($props, $websiteId);

            case 'ProductGrid':
                return renderProductGrid($props, $websiteId, $currencySymbol, $websiteSubdomain);

            case 'FeaturedProduct':
                return renderFeaturedProduct($props, $websiteId, $currencySymbol);

            case 'AddToCart':
                return renderAddToCart($props, $websiteId, $currencySymbol);

            case 'BookingForm':
                return renderBookingForm($props, $websiteId, $currencySymbol);

            case 'ResourcesList':
                return renderResourcesList($props, $websiteId, $currencySymbol);

            case 'PaymentForm':
                return renderPaymentForm($props);

            case 'Posts':
                \Log::info('Posts case matched!', ['props' => $props, 'websiteId' => $websiteId, 'subdomain' => $websiteSubdomain]);
                $result = renderPosts($props, $websiteId, $websiteSubdomain);
                \Log::info('renderPosts returned', ['length' => strlen($result), 'preview' => substr($result, 0, 100)]);
                return $result;

            default:
                // Unknown component type - render children in a div
                $html = '<div>';
                foreach ($childNodes as $childId) {
                    $html .= renderNode($childId, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);
                }
                $html .= '</div>';
                return $html;
        }
    }

    /**
     * Helper function to extract margin and padding styles from props
     */
    function getSpacingStyles($props) {
        $styles = [];

        if (isset($props['margin'])) {
            $styles[] = 'margin: ' . htmlspecialchars($props['margin']);
        }

        if (isset($props['padding'])) {
            $styles[] = 'padding: ' . htmlspecialchars($props['padding']);
        }

        return $styles;
    }
    }

    /**
     * Render Container component
     */
    if (!function_exists('renderContainer')) {
    function renderContainer($props, $childNodes, $nodes, $websiteId = null, $currencySymbol = 'RM', $websiteSubdomain = null) {
        $width = $props['width'] ?? 'fluid';
        $customWidth = $props['customWidth'] ?? '1140px';
        $padding = $props['padding'] ?? '20px';
        $margin = $props['margin'] ?? '0px';
        $backgroundColor = $props['backgroundColor'] ?? 'transparent';

        $containerClass = $width === 'fluid' ? 'container-fluid' : 'container';

        // Build inline styles
        $styles = [];
        $styles[] = 'padding: ' . htmlspecialchars($padding);

        // Add margin
        if ($width === 'fixed') {
            // For fixed width, handle margin specially to preserve centering
            $margins = explode(' ', trim($margin));
            if (count($margins) === 1) {
                $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
            } else if (count($margins) === 2) {
                $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
            } else if (count($margins) === 4) {
                $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto ' . htmlspecialchars($margins[2]) . ' auto';
            } else {
                $styles[] = 'margin-left: auto';
                $styles[] = 'margin-right: auto';
            }
            $styles[] = 'max-width: ' . htmlspecialchars($customWidth);
        } else {
            // Fluid width, use margin as-is
            $styles[] = 'margin: ' . htmlspecialchars($margin);
        }

        // Only add background color if not transparent
        if ($backgroundColor && $backgroundColor !== 'transparent') {
            $styles[] = 'background-color: ' . htmlspecialchars($backgroundColor);
        }

        $styleAttr = implode('; ', $styles);

        $html = sprintf('<div class="%s" style="%s">', htmlspecialchars($containerClass), $styleAttr);

        foreach ($childNodes as $childId) {
            $html .= renderNode($childId, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);
        }

        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Heading component
     */
    if (!function_exists('renderHeading')) {
    function renderHeading($props) {
        $text = $props['text'] ?? 'Heading';
        $level = $props['level'] ?? 'h2';
        $color = $props['color'] ?? '#000000';
        $align = $props['align'] ?? 'left';

        $styles = getSpacingStyles($props);
        $styles[] = sprintf('color: %s', $color);
        $styles[] = sprintf('text-align: %s', $align);
        $style = implode('; ', $styles);

        return sprintf(
            '<%s style="%s">%s</%s>',
            $level,
            $style,
            htmlspecialchars($text),
            $level
        );
    }
    }

    /**
     * Render Paragraph component
     */
    if (!function_exists('renderParagraph')) {
    function renderParagraph($props) {
        $text = $props['text'] ?? '';
        $color = $props['color'] ?? '#666666';
        $align = $props['align'] ?? 'left';

        $styles = getSpacingStyles($props);
        $styles[] = sprintf('color: %s', $color);
        $styles[] = sprintf('text-align: %s', $align);
        $style = implode('; ', $styles);

        return sprintf(
            '<p style="%s">%s</p>',
            $style,
            nl2br(htmlspecialchars($text))
        );
    }
    }

    /**
     * Render Button component
     */
    if (!function_exists('renderButton')) {
    function renderButton($props) {
        $text = $props['text'] ?? 'Click Me';
        $url = $props['url'] ?? '#';
        $variant = $props['variant'] ?? 'primary';
        $size = $props['size'] ?? 'md';

        $spacingStyles = getSpacingStyles($props);
        $wrapperStyle = !empty($spacingStyles) ? sprintf(' style="%s"', implode('; ', $spacingStyles)) : '';

        return sprintf(
            '<div%s><a href="%s" class="btn btn-%s btn-%s">%s</a></div>',
            $wrapperStyle,
            htmlspecialchars($url),
            $variant,
            $size,
            htmlspecialchars($text)
        );
    }
    }

    /**
     * Render Image component
     */
    if (!function_exists('renderImage')) {
    function renderImage($props) {
        $src = $props['src'] ?? 'https://via.placeholder.com/800x400';
        $alt = $props['alt'] ?? 'Image';
        $width = $props['width'] ?? '100%';
        $rounded = $props['rounded'] ?? false;

        $styles = getSpacingStyles($props);
        $styles[] = sprintf('width: %s', $width);
        if ($rounded) {
            $styles[] = 'border-radius: 8px';
        }
        $style = implode('; ', $styles);

        return sprintf(
            '<img src="%s" alt="%s" style="%s" class="%s">',
            htmlspecialchars($src),
            htmlspecialchars($alt),
            $style,
            $rounded ? 'rounded' : ''
        );
    }
    }

    /**
     * Render Row component
     */
    if (!function_exists('renderRow')) {
    function renderRow($props, $childNodes, $nodes, $websiteId = null, $currencySymbol = 'RM', $websiteSubdomain = null) {
        $gap = $props['gap'] ?? '20px';

        $styles = getSpacingStyles($props);
        $styles[] = sprintf('gap: %s', $gap);
        $styles[] = sprintf('margin-left: -%spx', intval($gap) / 2);
        $styles[] = sprintf('margin-right: -%spx', intval($gap) / 2);
        $style = implode('; ', $styles);

        $html = sprintf('<div class="row" style="%s">', $style);

        foreach ($childNodes as $childId) {
            $html .= renderNode($childId, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);
        }

        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Column component
     */
    if (!function_exists('renderColumn')) {
    function renderColumn($props, $childNodes, $nodes, $websiteId = null, $currencySymbol = 'RM', $websiteSubdomain = null) {
        $width = $props['width'] ?? 'auto';
        $padding = $props['padding'] ?? '15px';
        $backgroundColor = $props['backgroundColor'] ?? 'transparent';

        // Convert width to Bootstrap column class
        $columnClass = 'col';
        if ($width === '100%') $columnClass = 'col-12';
        elseif ($width === '50%') $columnClass = 'col-md-6';
        elseif ($width === '33.33%') $columnClass = 'col-md-4';
        elseif ($width === '25%') $columnClass = 'col-md-3';
        elseif ($width === '66.66%') $columnClass = 'col-md-8';
        elseif ($width === '75%') $columnClass = 'col-md-9';

        $style = sprintf(
            'padding: %s; background-color: %s; min-height: 50px;',
            $padding,
            $backgroundColor
        );

        $html = sprintf('<div class="%s" style="%s">', $columnClass, $style);

        foreach ($childNodes as $childId) {
            $html .= renderNode($childId, $nodes, $websiteId, $currencySymbol, $websiteSubdomain);
        }

        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Card component
     */
    if (!function_exists('renderCard')) {
    function renderCard($props) {
        $image = $props['image'] ?? 'https://via.placeholder.com/400x250/667eea/ffffff?text=Card+Image';
        $title = $props['title'] ?? 'Card Title';
        $description = $props['description'] ?? 'Card description goes here.';
        $buttonText = $props['buttonText'] ?? 'Learn More';
        $buttonUrl = $props['buttonUrl'] ?? '#';
        $imagePosition = $props['imagePosition'] ?? 'top';
        $alignment = $props['alignment'] ?? 'left';
        $showButton = $props['showButton'] ?? true;
        $padding = $props['padding'] ?? '20px';
        $margin = $props['margin'] ?? '0px 0px 20px 0px';

        $cardClass = ($imagePosition === 'left' || $imagePosition === 'right')
            ? 'card d-flex flex-row'
            : 'card';

        $html = sprintf('<div class="%s" style="padding: %s; margin: %s; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">',
            $cardClass,
            htmlspecialchars($padding),
            htmlspecialchars($margin)
        );

        // Image
        if ($imagePosition === 'top' || $imagePosition === 'left') {
            $imgClass = $imagePosition === 'top' ? 'card-img-top' : 'img-fluid rounded';
            $imgStyle = $imagePosition === 'left' ? 'max-width: 200px; margin-right: 20px;' : '';
            $html .= sprintf('<img src="%s" alt="%s" class="%s" style="%s">',
                htmlspecialchars($image),
                htmlspecialchars($title),
                $imgClass,
                $imgStyle
            );
        }

        // Card body
        $html .= sprintf('<div class="card-body" style="text-align: %s;">', $alignment);
        $html .= sprintf('<h5 class="card-title">%s</h5>', htmlspecialchars($title));
        $html .= sprintf('<p class="card-text">%s</p>', htmlspecialchars($description));

        if ($showButton) {
            $html .= sprintf('<a href="%s" class="btn btn-primary">%s</a>',
                htmlspecialchars($buttonUrl),
                htmlspecialchars($buttonText)
            );
        }

        $html .= '</div>';

        // Right/Bottom image
        if ($imagePosition === 'right') {
            $html .= sprintf('<img src="%s" alt="%s" class="img-fluid rounded" style="max-width: 200px; margin-left: 20px;">',
                htmlspecialchars($image),
                htmlspecialchars($title)
            );
        } elseif ($imagePosition === 'bottom') {
            $html .= sprintf('<img src="%s" alt="%s" class="card-img-bottom">',
                htmlspecialchars($image),
                htmlspecialchars($title)
            );
        }

        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Hero component
     */
    if (!function_exists('renderHero')) {
    function renderHero($props) {
        $title = $props['title'] ?? 'Welcome to Our Website';
        $subtitle = $props['subtitle'] ?? 'Build your perfect website';
        $backgroundType = $props['backgroundType'] ?? 'gradient';
        $backgroundColor = $props['backgroundColor'] ?? '#667eea';
        $backgroundImage = $props['backgroundImage'] ?? '';
        $gradientStart = $props['gradientStart'] ?? '#667eea';
        $gradientEnd = $props['gradientEnd'] ?? '#764ba2';
        $overlay = $props['overlay'] ?? true;
        $overlayOpacity = $props['overlayOpacity'] ?? 0.5;
        $minHeight = $props['minHeight'] ?? '500px';
        $padding = $props['padding'] ?? '60px 20px';
        $margin = $props['margin'] ?? '0px';
        $textColor = $props['textColor'] ?? '#ffffff';
        $alignment = $props['alignment'] ?? 'center';
        $showButton = $props['showButton'] ?? true;
        $buttonText = $props['buttonText'] ?? 'Get Started';
        $buttonUrl = $props['buttonUrl'] ?? '#';
        $buttonVariant = $props['buttonVariant'] ?? 'light';

        // Background style
        $backgroundStyle = '';
        if ($backgroundType === 'image') {
            $backgroundStyle = sprintf('background-image: url(%s); background-size: cover; background-position: center;',
                htmlspecialchars($backgroundImage));
        } elseif ($backgroundType === 'gradient') {
            $backgroundStyle = sprintf('background: linear-gradient(135deg, %s 0%%, %s 100%%);',
                $gradientStart, $gradientEnd);
        } else {
            $backgroundStyle = sprintf('background-color: %s;', $backgroundColor);
        }

        $html = sprintf(
            '<div class="hero-section" style="%s min-height: %s; display: flex; align-items: center; justify-content: center; text-align: %s; padding: %s; margin: %s; position: relative;">',
            $backgroundStyle,
            $minHeight,
            $alignment,
            htmlspecialchars($padding),
            htmlspecialchars($margin)
        );

        // Overlay
        if ($overlay && $backgroundType === 'image') {
            $html .= sprintf('<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, %s);"></div>',
                $overlayOpacity);
        }

        // Content
        $html .= '<div class="container" style="position: relative; z-index: 1;">';

        $textShadow = $backgroundType === 'image' ? 'text-shadow: 2px 2px 4px rgba(0,0,0,0.3);' : '';
        $html .= sprintf('<h1 style="color: %s; font-size: 3rem; font-weight: bold; margin-bottom: 20px; %s">%s</h1>',
            $textColor, $textShadow, htmlspecialchars($title));

        $html .= sprintf('<p style="color: %s; font-size: 1.25rem; margin-bottom: 30px; %s">%s</p>',
            $textColor, $textShadow, htmlspecialchars($subtitle));

        if ($showButton) {
            $html .= sprintf('<a href="%s" class="btn btn-%s btn-lg" style="padding: 12px 40px; font-size: 1.1rem;">%s</a>',
                htmlspecialchars($buttonUrl),
                $buttonVariant,
                htmlspecialchars($buttonText)
            );
        }

        $html .= '</div></div>';

        return $html;
    }
    }

    /**
     * Render Icon Box component
     */
    if (!function_exists('renderIconBox')) {
    function renderIconBox($props) {
        $icon = $props['icon'] ?? 'bi-star-fill';
        $title = $props['title'] ?? 'Feature Title';
        $description = $props['description'] ?? 'Feature description goes here.';
        $iconColor = $props['iconColor'] ?? '#667eea';
        $iconSize = $props['iconSize'] ?? '48px';
        $iconStyle = $props['iconStyle'] ?? 'default';
        $alignment = $props['alignment'] ?? 'center';
        $titleColor = $props['titleColor'] ?? '#333333';
        $descriptionColor = $props['descriptionColor'] ?? '#666666';

        // Icon container style
        $iconContainerStyle = 'display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;';

        if ($iconStyle === 'circle') {
            $iconContainerStyle .= sprintf(' width: calc(%s + 30px); height: calc(%s + 30px); border-radius: 50%%; background-color: %s20; border: 2px solid %s;',
                $iconSize, $iconSize, $iconColor, $iconColor);
        } elseif ($iconStyle === 'square') {
            $iconContainerStyle .= sprintf(' width: calc(%s + 30px); height: calc(%s + 30px); border-radius: 8px; background-color: %s20; border: 2px solid %s;',
                $iconSize, $iconSize, $iconColor, $iconColor);
        } elseif ($iconStyle === 'filled-circle') {
            $iconContainerStyle .= sprintf(' width: calc(%s + 30px); height: calc(%s + 30px); border-radius: 50%%; background-color: %s;',
                $iconSize, $iconSize, $iconColor);
        } elseif ($iconStyle === 'filled-square') {
            $iconContainerStyle .= sprintf(' width: calc(%s + 30px); height: calc(%s + 30px); border-radius: 8px; background-color: %s;',
                $iconSize, $iconSize, $iconColor);
        }

        $iconColorFinal = (str_contains($iconStyle, 'filled')) ? '#ffffff' : $iconColor;

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = sprintf('text-align: %s', $alignment);
        $styleAttr = implode('; ', $spacingStyles);
        $html = sprintf('<div class="icon-box" style="%s">', $styleAttr);

        $html .= sprintf('<div style="%s">', $iconContainerStyle);
        $html .= sprintf('<i class="bi %s" style="font-size: %s; color: %s;"></i>', $icon, $iconSize, $iconColorFinal);
        $html .= '</div>';

        $html .= sprintf('<h4 style="color: %s; margin-bottom: 10px; font-size: 1.25rem; font-weight: 600;">%s</h4>',
            $titleColor, htmlspecialchars($title));

        $html .= sprintf('<p style="color: %s; margin-bottom: 0; font-size: 0.95rem; line-height: 1.6;">%s</p>',
            $descriptionColor, htmlspecialchars($description));

        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Slider component using Bootstrap 5 Carousel
     */
    if (!function_exists('renderSlider')) {
    function renderSlider($props) {
        $slides = $props['slides'] ?? [];
        $autoplay = $props['autoplay'] ?? true;
        $interval = $props['interval'] ?? 5000;
        $showArrows = $props['showArrows'] ?? true;
        $showDots = $props['showDots'] ?? true;
        $showCaptions = $props['showCaptions'] ?? true;
        $height = $props['height'] ?? '500px';
        $overlayOpacity = $props['overlayOpacity'] ?? 0.3;

        // Generate unique ID for this carousel
        $carouselId = 'carousel-' . uniqid();

        $spacingStyles = getSpacingStyles($props);
        $styleAttr = !empty($spacingStyles) ? sprintf(' style="%s"', implode('; ', $spacingStyles)) : '';

        $html = sprintf(
            '<div id="%s" class="carousel slide" data-bs-ride="%s" data-bs-interval="%s"%s>',
            $carouselId,
            $autoplay ? 'carousel' : 'false',
            $interval,
            $styleAttr
        );

        // Carousel indicators (dots)
        if ($showDots && count($slides) > 1) {
            $html .= '<div class="carousel-indicators">';
            foreach ($slides as $index => $slide) {
                $html .= sprintf(
                    '<button type="button" data-bs-target="#%s" data-bs-slide-to="%s" %s aria-label="Slide %s"></button>',
                    $carouselId,
                    $index,
                    $index === 0 ? 'class="active" aria-current="true"' : '',
                    $index + 1
                );
            }
            $html .= '</div>';
        }

        // Carousel inner (slides)
        $html .= '<div class="carousel-inner">';
        foreach ($slides as $index => $slide) {
            $image = $slide['image'] ?? '';
            $title = $slide['title'] ?? '';
            $description = $slide['description'] ?? '';

            $html .= sprintf(
                '<div class="carousel-item %s" style="height: %s;">',
                $index === 0 ? 'active' : '',
                $height
            );

            // Background image
            $html .= sprintf(
                '<div style="position: absolute; top: 0; left: 0; width: 100%%; height: 100%%; background-image: url(%s); background-size: cover; background-position: center;"></div>',
                htmlspecialchars($image)
            );

            // Overlay
            $html .= sprintf(
                '<div style="position: absolute; top: 0; left: 0; width: 100%%; height: 100%%; background-color: rgba(0, 0, 0, %s);"></div>',
                $overlayOpacity
            );

            // Caption
            if ($showCaptions) {
                $html .= '<div class="carousel-caption d-flex align-items-center justify-content-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; bottom: auto;">';
                $html .= '<div class="text-center" style="max-width: 800px;">';
                $html .= sprintf(
                    '<h2 style="font-size: 2.5rem; font-weight: bold; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">%s</h2>',
                    htmlspecialchars($title)
                );
                $html .= sprintf(
                    '<p style="font-size: 1.2rem; margin-bottom: 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">%s</p>',
                    htmlspecialchars($description)
                );
                $html .= '</div>';
                $html .= '</div>';
            }

            $html .= '</div>';
        }
        $html .= '</div>';

        // Carousel controls (arrows)
        if ($showArrows && count($slides) > 1) {
            $html .= sprintf(
                '<button class="carousel-control-prev" type="button" data-bs-target="#%s" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>',
                $carouselId
            );
            $html .= sprintf(
                '<button class="carousel-control-next" type="button" data-bs-target="#%s" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>',
                $carouselId
            );
        }

        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Accordion Component
     */
    if (!function_exists('renderAccordion')) {
    function renderAccordion($props) {
        $items = $props['items'] ?? [];
        $allowMultipleOpen = $props['allowMultipleOpen'] ?? false;
        $defaultOpenIndex = $props['defaultOpenIndex'] ?? 0;
        $borderColor = $props['borderColor'] ?? '#dee2e6';
        $headerBg = $props['headerBg'] ?? '#f8f9fa';
        $headerTextColor = $props['headerTextColor'] ?? '#212529';
        $contentBg = $props['contentBg'] ?? '#ffffff';
        $contentTextColor = $props['contentTextColor'] ?? '#212529';

        $accordionId = 'accordion-' . uniqid();

        $spacingStyles = getSpacingStyles($props);
        $styleAttr = !empty($spacingStyles) ? sprintf(' style="%s"', implode('; ', $spacingStyles)) : '';
        $html = sprintf('<div class="accordion" id="%s"%s>', $accordionId, $styleAttr);

        foreach ($items as $index => $item) {
            $itemId = $accordionId . '-item-' . $index;
            $isOpen = $index == $defaultOpenIndex;

            $html .= '<div class="accordion-item" style="border: 1px solid ' . $borderColor . '; border-top: ' . ($index === 0 ? '1px' : '0') . ' solid ' . $borderColor . ';">';

            // Header
            $html .= sprintf(
                '<h2 class="accordion-header">
                    <button class="accordion-button%s" type="button" data-bs-toggle="collapse" data-bs-target="#%s" style="background-color: %s; color: %s; font-weight: 600;">
                        %s
                    </button>
                </h2>',
                $isOpen ? '' : ' collapsed',
                $itemId,
                $headerBg,
                $headerTextColor,
                htmlspecialchars($item['title'] ?? '')
            );

            // Content
            $html .= sprintf(
                '<div id="%s" class="accordion-collapse collapse%s" data-bs-parent="%s">
                    <div class="accordion-body" style="background-color: %s; color: %s;">
                        %s
                    </div>
                </div>',
                $itemId,
                $isOpen ? ' show' : '',
                $allowMultipleOpen ? '' : '#' . $accordionId,
                $contentBg,
                $contentTextColor,
                nl2br(htmlspecialchars($item['content'] ?? ''))
            );

            $html .= '</div>';
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render Tabs Component
     */
    if (!function_exists('renderTabs')) {
    function renderTabs($props) {
        $tabs = $props['tabs'] ?? [];
        $defaultActiveTab = $props['defaultActiveTab'] ?? 0;
        $tabPosition = $props['tabPosition'] ?? 'top';
        $activeColor = $props['activeColor'] ?? '#667eea';
        $inactiveColor = $props['inactiveColor'] ?? '#6c757d';
        $borderColor = $props['borderColor'] ?? '#dee2e6';
        $contentBg = $props['contentBg'] ?? '#ffffff';
        $contentPadding = $props['contentPadding'] ?? '20px';

        $tabsId = 'tabs-' . uniqid();
        $isHorizontal = $tabPosition === 'top';

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'display: ' . ($isHorizontal ? 'block' : 'flex');
        $spacingStyles[] = 'gap: ' . ($isHorizontal ? '0' : '20px');
        $html = '<div class="tabs-component" style="' . implode('; ', $spacingStyles) . ';">';

        // Tab nav
        $html .= '<ul class="nav nav-tabs" role="tablist" style="border-bottom: ' . ($isHorizontal ? '2px solid ' . $borderColor : 'none') . '; border-right: ' . (!$isHorizontal ? '2px solid ' . $borderColor : 'none') . '; flex-direction: ' . ($isHorizontal ? 'row' : 'column') . ';">';
        foreach ($tabs as $index => $tab) {
            $isActive = $index == $defaultActiveTab;
            $html .= sprintf(
                '<li class="nav-item">
                    <button class="nav-link%s" data-bs-toggle="tab" data-bs-target="#%s-tab-%d" type="button" style="color: %s;">
                        %s
                    </button>
                </li>',
                $isActive ? ' active' : '',
                $tabsId,
                $index,
                $isActive ? $activeColor : $inactiveColor,
                htmlspecialchars($tab['title'] ?? '')
            );
        }
        $html .= '</ul>';

        // Tab content
        $html .= '<div class="tab-content" style="background-color: ' . $contentBg . '; padding: ' . $contentPadding . '; border: 1px solid ' . $borderColor . '; border-radius: ' . ($isHorizontal ? '0 8px 8px 8px' : '0 8px 8px 0') . '; flex: 1;">';
        foreach ($tabs as $index => $tab) {
            $isActive = $index == $defaultActiveTab;
            $html .= sprintf(
                '<div class="tab-pane fade%s" id="%s-tab-%d">%s</div>',
                $isActive ? ' show active' : '',
                $tabsId,
                $index,
                nl2br(htmlspecialchars($tab['content'] ?? ''))
            );
        }
        $html .= '</div>';

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render Gallery Component
     */
    if (!function_exists('renderGallery')) {
    function renderGallery($props) {
        $images = $props['images'] ?? [];
        $columns = $props['columns'] ?? 3;
        $gap = $props['gap'] ?? '15px';
        $borderRadius = $props['borderRadius'] ?? '8px';
        $showCaptions = $props['showCaptions'] ?? true;

        $galleryId = 'gallery-' . uniqid();

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'display: grid';
        $spacingStyles[] = 'grid-template-columns: repeat(' . $columns . ', 1fr)';
        $spacingStyles[] = 'gap: ' . $gap;
        $html = '<div class="gallery-component" style="' . implode('; ', $spacingStyles) . ';">';

        foreach ($images as $index => $image) {
            $html .= '<div class="gallery-item" style="position: relative; overflow: hidden; border-radius: ' . $borderRadius . '; aspect-ratio: 1/1; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#' . $galleryId . '-' . $index . '">';
            $html .= sprintf(
                '<img src="%s" alt="%s" style="width: 100%%; height: 100%%; object-fit: cover;">',
                htmlspecialchars($image['url'] ?? ''),
                htmlspecialchars($image['caption'] ?? '')
            );
            if ($showCaptions && !empty($image['caption'])) {
                $html .= sprintf(
                    '<div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: white; font-size: 14px; text-align: center;">%s</div>',
                    htmlspecialchars($image['caption'])
                );
            }
            $html .= '</div>';

            // Modal for lightbox
            $html .= sprintf(
                '<div class="modal fade" id="%s-%d" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content bg-dark">
                            <div class="modal-body p-0">
                                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"></button>
                                <img src="%s" class="img-fluid" alt="%s">
                                %s
                            </div>
                        </div>
                    </div>
                </div>',
                $galleryId,
                $index,
                htmlspecialchars($image['url'] ?? ''),
                htmlspecialchars($image['caption'] ?? ''),
                !empty($image['caption']) ? '<p class="text-white text-center p-3">' . htmlspecialchars($image['caption']) . '</p>' : ''
            );
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render Video Component
     */
    if (!function_exists('renderVideo')) {
    function renderVideo($props) {
        $videoUrl = $props['videoUrl'] ?? '';
        $aspectRatio = $props['aspectRatio'] ?? '16:9';
        $autoplay = $props['autoplay'] ?? false;
        $controls = $props['controls'] ?? true;
        $muted = $props['muted'] ?? false;
        $loop = $props['loop'] ?? false;
        $borderRadius = $props['borderRadius'] ?? '8px';

        // Calculate padding for aspect ratio
        $ratioMap = [
            '16:9' => '56.25%',
            '4:3' => '75%',
            '1:1' => '100%',
            '21:9' => '42.86%'
        ];
        $paddingTop = $ratioMap[$aspectRatio] ?? '56.25%';

        $embedUrl = '';

        // YouTube
        if (preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i', $videoUrl, $matches)) {
            $videoId = $matches[1];
            $params = http_build_query([
                'autoplay' => $autoplay ? '1' : '0',
                'controls' => $controls ? '1' : '0',
                'mute' => $muted ? '1' : '0',
                'loop' => $loop ? '1' : '0',
                'playlist' => $loop ? $videoId : ''
            ]);
            $embedUrl = "https://www.youtube.com/embed/{$videoId}?{$params}";
        }
        // Vimeo
        elseif (preg_match('/vimeo\.com\/(?:video\/)?(\d+)/i', $videoUrl, $matches)) {
            $videoId = $matches[1];
            $params = http_build_query([
                'autoplay' => $autoplay ? '1' : '0',
                'controls' => $controls ? '1' : '0',
                'muted' => $muted ? '1' : '0',
                'loop' => $loop ? '1' : '0'
            ]);
            $embedUrl = "https://player.vimeo.com/video/{$videoId}?{$params}";
        }

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'position: relative';
        $spacingStyles[] = 'width: 100%';
        $spacingStyles[] = 'padding-top: ' . $paddingTop;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;
        $spacingStyles[] = 'overflow: hidden';
        $spacingStyles[] = 'background-color: #000';
        $html = '<div class="video-component" style="' . implode('; ', $spacingStyles) . ';">';

        if ($embedUrl) {
            $html .= sprintf(
                '<iframe src="%s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%%; height: 100%%;"></iframe>',
                $embedUrl
            );
        } else {
            $html .= '<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; color: #6c757d;"><p>Invalid video URL</p></div>';
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render Form Component
     */
    if (!function_exists('renderForm')) {
    function renderForm($props) {
        $formTitle = $props['formTitle'] ?? 'Contact Us';
        $formDescription = $props['formDescription'] ?? '';
        $fields = $props['fields'] ?? [];
        $submitButtonText = $props['submitButtonText'] ?? 'Send Message';
        $submitButtonColor = $props['submitButtonColor'] ?? '#667eea';
        $backgroundColor = $props['backgroundColor'] ?? '#f8f9fa';
        $padding = $props['padding'] ?? '30px';
        $borderRadius = $props['borderRadius'] ?? '8px';

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'background-color: ' . $backgroundColor;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;
        // Note: padding from props overrides the $padding variable if set
        if (!isset($props['padding'])) {
            $spacingStyles[] = 'padding: ' . $padding;
        }
        $html = '<div class="form-component" style="' . implode('; ', $spacingStyles) . ';">';

        if ($formTitle) {
            $html .= '<h3 style="margin-bottom: 10px; font-size: 24px; font-weight: 600;">' . htmlspecialchars($formTitle) . '</h3>';
        }

        if ($formDescription) {
            $html .= '<p style="margin-bottom: 25px; color: #6c757d;">' . htmlspecialchars($formDescription) . '</p>';
        }

        $html .= '<form>';

        foreach ($fields as $field) {
            $type = $field['type'] ?? 'text';
            $label = $field['label'] ?? '';
            $placeholder = $field['placeholder'] ?? '';
            $required = $field['required'] ?? false;
            $rows = $field['rows'] ?? 4;

            $html .= '<div class="mb-3">';
            $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px;">';
            $html .= htmlspecialchars($label);
            if ($required) {
                $html .= '<span style="color: #dc3545; margin-left: 4px;">*</span>';
            }
            $html .= '</label>';

            if ($type === 'textarea') {
                $html .= sprintf(
                    '<textarea class="form-control" placeholder="%s" %s rows="%d" style="padding: 10px 15px; border-radius: 6px;"></textarea>',
                    htmlspecialchars($placeholder),
                    $required ? 'required' : '',
                    $rows
                );
            } elseif ($type === 'select') {
                $options = $field['options'] ?? [];
                $html .= sprintf('<select class="form-select" %s style="padding: 10px 15px; border-radius: 6px;">', $required ? 'required' : '');
                $html .= '<option value="">' . htmlspecialchars($placeholder ?: 'Select...') . '</option>';
                foreach ($options as $option) {
                    $html .= '<option value="' . htmlspecialchars($option) . '">' . htmlspecialchars($option) . '</option>';
                }
                $html .= '</select>';
            } else {
                $html .= sprintf(
                    '<input type="%s" class="form-control" placeholder="%s" %s style="padding: 10px 15px; border-radius: 6px;">',
                    htmlspecialchars($type),
                    htmlspecialchars($placeholder),
                    $required ? 'required' : ''
                );
            }

            $html .= '</div>';
        }

        $html .= sprintf(
            '<button type="submit" class="btn" style="background-color: %s; border: none; color: white; padding: 12px 30px; font-size: 16px; font-weight: 600; border-radius: 6px; margin-top: 10px;">%s</button>',
            $submitButtonColor,
            htmlspecialchars($submitButtonText)
        );

        $html .= '</form>';
        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Testimonials Component
     */
    if (!function_exists('renderTestimonials')) {
    function renderTestimonials($props) {
        $testimonials = $props['testimonials'] ?? [];
        $layout = $props['layout'] ?? 'card';
        $backgroundColor = $props['backgroundColor'] ?? '#f8f9fa';
        $textColor = $props['textColor'] ?? '#212529';
        $accentColor = $props['accentColor'] ?? '#667eea';

        if (empty($testimonials)) {
            return '';
        }

        $carouselId = 'testimonials-' . uniqid();

        $spacingStyles = getSpacingStyles($props);
        $html = '<div class="testimonials-component" style="' . implode('; ', $spacingStyles) . ';">';
        $html .= '<div id="' . $carouselId . '" class="carousel slide" data-bs-ride="carousel" style="max-width: 800px; margin: 0 auto;">';

        // Carousel inner
        $html .= '<div class="carousel-inner">';
        foreach ($testimonials as $index => $testimonial) {
            $isActive = $index === 0;

            $html .= '<div class="carousel-item' . ($isActive ? ' active' : '') . '">';

            if ($layout === 'card') {
                $html .= '<div style="background-color: ' . $backgroundColor . '; padding: 40px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; min-height: 300px;">';
                $html .= '<img src="' . htmlspecialchars($testimonial['image'] ?? '') . '" alt="' . htmlspecialchars($testimonial['name'] ?? '') . '" style="width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px; object-fit: cover; border: 3px solid ' . $accentColor . ';">';

                // Stars
                $rating = $testimonial['rating'] ?? 5;
                $html .= '<div style="margin-bottom: 15px;">';
                for ($i = 0; $i < 5; $i++) {
                    $html .= '<i class="bi bi-star' . ($i < $rating ? '-fill' : '') . '" style="color: #ffc107; font-size: 18px;"></i>';
                }
                $html .= '</div>';

                $html .= '<p style="font-size: 18px; line-height: 1.6; color: ' . $textColor . '; margin-bottom: 20px; font-style: italic;">"' . htmlspecialchars($testimonial['text'] ?? '') . '"</p>';
                $html .= '<h4 style="font-size: 20px; font-weight: 600; color: ' . $textColor . '; margin-bottom: 5px;">' . htmlspecialchars($testimonial['name'] ?? '') . '</h4>';
                $html .= '<p style="font-size: 14px; color: #6c757d; margin: 0;">' . htmlspecialchars($testimonial['role'] ?? '') . '</p>';
                $html .= '</div>';
            } else {
                $html .= '<div style="background-color: ' . $backgroundColor . '; padding: 40px; border-radius: 12px; border-left: 5px solid ' . $accentColor . '; min-height: 250px;">';
                $html .= '<i class="bi bi-quote" style="font-size: 48px; color: ' . $accentColor . '; opacity: 0.3; margin-bottom: 20px;"></i>';

                // Stars
                $rating = $testimonial['rating'] ?? 5;
                $html .= '<div style="margin-bottom: 15px;">';
                for ($i = 0; $i < 5; $i++) {
                    $html .= '<i class="bi bi-star' . ($i < $rating ? '-fill' : '') . '" style="color: #ffc107; font-size: 18px;"></i>';
                }
                $html .= '</div>';

                $html .= '<p style="font-size: 18px; line-height: 1.6; color: ' . $textColor . '; margin-bottom: 25px; font-style: italic;">"' . htmlspecialchars($testimonial['text'] ?? '') . '"</p>';
                $html .= '<div style="display: flex; align-items: center; gap: 15px;">';
                $html .= '<img src="' . htmlspecialchars($testimonial['image'] ?? '') . '" alt="' . htmlspecialchars($testimonial['name'] ?? '') . '" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid ' . $accentColor . ';">';
                $html .= '<div>';
                $html .= '<h4 style="font-size: 18px; font-weight: 600; color: ' . $textColor . '; margin-bottom: 2px;">' . htmlspecialchars($testimonial['name'] ?? '') . '</h4>';
                $html .= '<p style="font-size: 14px; color: #6c757d; margin: 0;">' . htmlspecialchars($testimonial['role'] ?? '') . '</p>';
                $html .= '</div></div>';
                $html .= '</div>';
            }

            $html .= '</div>';
        }
        $html .= '</div>';

        // Carousel controls
        if (count($testimonials) > 1) {
            $html .= '<button class="carousel-control-prev" type="button" data-bs-target="#' . $carouselId . '" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>';
            $html .= '<button class="carousel-control-next" type="button" data-bs-target="#' . $carouselId . '" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>';
        }

        $html .= '</div></div>';

        return $html;
    }
    }

    /**
     * Render Pricing Table Component
     */
    if (!function_exists('renderPricingTable')) {
    function renderPricingTable($props) {
        $plans = $props['plans'] ?? [];
        $accentColor = $props['accentColor'] ?? '#667eea';
        $cardBg = $props['cardBg'] ?? '#ffffff';
        $highlightedBg = $props['highlightedBg'] ?? '#667eea';
        $highlightedTextColor = $props['highlightedTextColor'] ?? '#ffffff';

        if (empty($plans)) {
            return '';
        }

        $columns = min(count($plans), 3);

        $spacingStyles = getSpacingStyles($props);
        $html = '<div class="pricing-table-component" style="' . implode('; ', $spacingStyles) . ';">';
        $html .= '<div style="display: grid; grid-template-columns: repeat(' . $columns . ', 1fr); gap: 30px; max-width: 1200px; margin: 0 auto;">';

        foreach ($plans as $plan) {
            $isHighlighted = $plan['highlighted'] ?? false;
            $bgColor = $isHighlighted ? $highlightedBg : $cardBg;
            $textColor = $isHighlighted ? $highlightedTextColor : '#212529';

            $html .= '<div class="pricing-card" style="background-color: ' . $bgColor . '; color: ' . $textColor . '; padding: 40px 30px; border-radius: 12px; box-shadow: ' . ($isHighlighted ? '0 10px 30px rgba(0,0,0,0.2)' : '0 4px 6px rgba(0,0,0,0.1)') . '; position: relative; border: ' . ($isHighlighted ? '2px solid ' . $accentColor : 'none') . ';">';

            if ($isHighlighted) {
                $html .= '<div style="position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: ' . $accentColor . '; color: white; padding: 5px 20px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase;">Popular</div>';
            }

            $html .= '<h3 style="font-size: 24px; font-weight: 600; margin-bottom: 10px; text-align: center;">' . htmlspecialchars($plan['name'] ?? '') . '</h3>';
            $html .= '<p style="font-size: 14px; opacity: 0.8; margin-bottom: 20px; text-align: center;">' . htmlspecialchars($plan['description'] ?? '') . '</p>';

            $html .= '<div style="text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid ' . ($isHighlighted ? 'rgba(255,255,255,0.2)' : '#dee2e6') . ';">';
            $html .= '<span style="font-size: 20px; opacity: 0.8;">$</span>';
            $html .= '<span style="font-size: 48px; font-weight: 700;">' . htmlspecialchars($plan['price'] ?? '0') . '</span>';
            $html .= '<span style="font-size: 16px; opacity: 0.8;">/' . htmlspecialchars($plan['period'] ?? 'month') . '</span>';
            $html .= '</div>';

            $html .= '<ul style="list-style: none; padding: 0; margin: 0 0 30px 0;">';
            foreach ($plan['features'] ?? [] as $feature) {
                $html .= '<li style="padding: 10px 0; display: flex; align-items: center; font-size: 15px;">';
                $html .= '<i class="bi bi-check-circle-fill" style="color: ' . ($isHighlighted ? $highlightedTextColor : $accentColor) . '; margin-right: 10px; font-size: 18px;"></i>';
                $html .= '<span>' . htmlspecialchars($feature) . '</span>';
                $html .= '</li>';
            }
            $html .= '</ul>';

            $buttonBg = $isHighlighted ? 'white' : $accentColor;
            $buttonColor = $isHighlighted ? $accentColor : 'white';

            $html .= '<button style="background-color: ' . $buttonBg . '; color: ' . $buttonColor . '; border: none; padding: 14px 28px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; width: 100%;">' . htmlspecialchars($plan['buttonText'] ?? 'Get Started') . '</button>';

            $html .= '</div>';
        }

        $html .= '</div></div>';

        return $html;
    }
    }

    /**
     * Render Team Members Component
     */
    if (!function_exists('renderTeamMembers')) {
    function renderTeamMembers($props) {
        $members = $props['members'] ?? [];
        $columns = $props['columns'] ?? 4;
        $cardStyle = $props['cardStyle'] ?? 'modern';
        $showBio = $props['showBio'] ?? true;
        $showSocial = $props['showSocial'] ?? true;
        $accentColor = $props['accentColor'] ?? '#667eea';
        $cardBg = $props['cardBg'] ?? '#ffffff';

        if (empty($members)) {
            return '';
        }

        $spacingStyles = getSpacingStyles($props);
        $html = '<div class="team-members-component" style="' . implode('; ', $spacingStyles) . ';">';
        $html .= '<div style="display: grid; grid-template-columns: repeat(' . min($columns, 4) . ', 1fr); gap: 30px; max-width: 1400px; margin: 0 auto;">';

        foreach ($members as $member) {
            $textAlign = $cardStyle === 'modern' ? 'center' : 'left';

            $html .= '<div class="team-member-card" style="background-color: ' . $cardBg . '; border-radius: ' . ($cardStyle === 'minimal' ? '0' : '12px') . '; overflow: hidden; box-shadow: ' . ($cardStyle === 'minimal' ? 'none' : '0 4px 6px rgba(0,0,0,0.1)') . '; text-align: ' . $textAlign . '; border: ' . ($cardStyle === 'minimal' ? '1px solid #dee2e6' : 'none') . ';">';

            // Image
            $paddingTop = $cardStyle === 'modern' ? '100%' : '120%';
            $html .= '<div style="position: relative; width: 100%; padding-top: ' . $paddingTop . '; overflow: hidden; background-color: #f8f9fa;">';
            $html .= '<img src="' . htmlspecialchars($member['image'] ?? '') . '" alt="' . htmlspecialchars($member['name'] ?? '') . '" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">';
            $html .= '</div>';

            // Content
            $html .= '<div style="padding: ' . ($cardStyle === 'minimal' ? '20px' : '25px') . ';">';
            $html .= '<h4 style="font-size: 20px; font-weight: 600; margin-bottom: 5px; color: #212529;">' . htmlspecialchars($member['name'] ?? '') . '</h4>';
            $html .= '<p style="font-size: 14px; color: ' . $accentColor . '; font-weight: 500; margin-bottom: ' . ($showBio ? '12px' : '15px') . '; text-transform: uppercase; letter-spacing: 0.5px;">' . htmlspecialchars($member['role'] ?? '') . '</p>';

            if ($showBio && !empty($member['bio'])) {
                $html .= '<p style="font-size: 14px; color: #6c757d; line-height: 1.6; margin-bottom: 15px;">' . htmlspecialchars($member['bio']) . '</p>';
            }

            if ($showSocial && !empty($member['social'])) {
                $html .= '<div style="display: flex; gap: 12px; justify-content: ' . ($cardStyle === 'modern' ? 'center' : 'flex-start') . '; margin-top: 15px;">';
                foreach ($member['social'] as $platform => $url) {
                    if ($url) {
                        $iconMap = [
                            'linkedin' => 'bi-linkedin',
                            'twitter' => 'bi-twitter',
                            'facebook' => 'bi-facebook',
                            'github' => 'bi-github',
                            'email' => 'bi-envelope-fill',
                            'dribbble' => 'bi-dribbble',
                            'behance' => 'bi-behance',
                            'instagram' => 'bi-instagram'
                        ];
                        $icon = $iconMap[$platform] ?? 'bi-link-45deg';
                        $html .= '<a href="' . htmlspecialchars($url) . '" target="_blank" style="width: 36px; height: 36px; border-radius: 50%; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 16px; text-decoration: none;"><i class="bi ' . $icon . '"></i></a>';
                    }
                }
                $html .= '</div>';
            }

            $html .= '</div>';
            $html .= '</div>';
        }

        $html .= '</div></div>';

        return $html;
    }
    }

    /**
     * Render Stats Component
     */
    if (!function_exists('renderStats')) {
    function renderStats($props) {
        $stats = $props['stats'] ?? [];
        $layout = $props['layout'] ?? 'horizontal';
        $backgroundColor = $props['backgroundColor'] ?? 'transparent';
        $cardStyle = $props['cardStyle'] ?? 'modern';
        $textAlign = $props['textAlign'] ?? 'center';

        if (empty($stats)) {
            return '';
        }

        $columns = $layout === 'grid' ? min(count($stats), 4) : ($layout === 'horizontal' ? count($stats) : 1);

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'background-color: ' . $backgroundColor;
        $html = '<div class="stats-component" style="' . implode('; ', $spacingStyles) . ';">';
        $html .= '<div style="display: grid; grid-template-columns: repeat(' . $columns . ', 1fr); gap: 30px; max-width: 1200px; margin: 0 auto;">';

        foreach ($stats as $stat) {
            $padding = $cardStyle === 'modern' ? '30px 20px' : '20px';
            $bgColor = $cardStyle === 'modern' ? 'rgba(255, 255, 255, 0.9)' : 'transparent';
            $borderRadius = $cardStyle === 'modern' ? '12px' : '0';
            $border = $cardStyle === 'bordered' ? '2px solid #e0e0e0' : 'none';
            $boxShadow = $cardStyle === 'modern' ? '0 4px 6px rgba(0,0,0,0.1)' : 'none';

            $html .= '<div class="stat-item" style="text-align: ' . $textAlign . '; padding: ' . $padding . '; background-color: ' . $bgColor . '; border-radius: ' . $borderRadius . '; border: ' . $border . '; box-shadow: ' . $boxShadow . ';">';

            if (!empty($stat['icon'])) {
                $html .= '<div style="font-size: 48px; color: ' . $stat['color'] . '; margin-bottom: 15px;"><i class="bi ' . $stat['icon'] . '"></i></div>';
            }

            $html .= '<div style="font-size: 48px; font-weight: 700; color: ' . $stat['color'] . '; margin-bottom: 5px; line-height: 1;">' . htmlspecialchars($stat['number']) . '</div>';
            $html .= '<div style="font-size: 16px; color: #6c757d; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">' . htmlspecialchars($stat['label']) . '</div>';
            $html .= '</div>';
        }

        $html .= '</div></div>';
        return $html;
    }
    }

    /**
     * Render Timeline Component
     */
    if (!function_exists('renderTimeline')) {
    function renderTimeline($props) {
        $events = $props['events'] ?? [];
        $orientation = $props['orientation'] ?? 'vertical';
        $accentColor = $props['accentColor'] ?? '#667eea';
        $lineColor = $props['lineColor'] ?? '#dee2e6';
        $iconBg = $props['iconBg'] ?? '#ffffff';
        $showIcons = $props['showIcons'] ?? true;

        if (empty($events)) {
            return '';
        }

        $spacingStyles = getSpacingStyles($props);
        $html = '<div class="timeline-component" style="' . implode('; ', $spacingStyles) . ';">';

        if ($orientation === 'vertical') {
            $html .= '<div style="max-width: 800px; margin: 0 auto; position: relative;">';
            $html .= '<div style="position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background-color: ' . $lineColor . ';"></div>';

            foreach ($events as $index => $event) {
                $html .= '<div style="position: relative; padding-left: 80px; padding-bottom: 40px;">';

                // Icon
                $html .= '<div style="position: absolute; left: 0; top: 0; width: 60px; height: 60px; border-radius: 50%; background-color: ' . $iconBg . '; border: 3px solid ' . $accentColor . '; display: flex; align-items: center; justify-content: center; font-size: 24px; color: ' . $accentColor . '; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">';
                if ($showIcons && !empty($event['icon'])) {
                    $html .= '<i class="bi ' . $event['icon'] . '"></i>';
                }
                $html .= '</div>';

                // Content
                $html .= '<div style="background-color: #ffffff; padding: 20px 25px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid ' . $accentColor . ';">';
                $html .= '<div style="font-size: 14px; font-weight: 600; color: ' . $accentColor . '; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">' . htmlspecialchars($event['date']) . '</div>';
                $html .= '<h4 style="font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #212529;">' . htmlspecialchars($event['title']) . '</h4>';
                $html .= '<p style="font-size: 15px; color: #6c757d; line-height: 1.6; margin: 0;">' . htmlspecialchars($event['description']) . '</p>';
                $html .= '</div>';

                $html .= '</div>';
            }

            $html .= '</div>';
        } else {
            // Horizontal
            $html .= '<div style="position: relative; padding-top: 60px; padding-bottom: 20px;">';
            $html .= '<div style="position: absolute; top: 30px; left: 0; right: 0; height: 2px; background-color: ' . $lineColor . ';"></div>';
            $html .= '<div style="display: grid; grid-template-columns: repeat(' . count($events) . ', 1fr); gap: 20px;">';

            foreach ($events as $event) {
                $html .= '<div style="text-align: center; position: relative;">';

                // Icon
                $html .= '<div style="width: 60px; height: 60px; border-radius: 50%; background-color: ' . $iconBg . '; border: 3px solid ' . $accentColor . '; display: flex; align-items: center; justify-content: center; font-size: 24px; color: ' . $accentColor . '; margin: 0 auto 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; z-index: 1;">';
                if ($showIcons && !empty($event['icon'])) {
                    $html .= '<i class="bi ' . $event['icon'] . '"></i>';
                }
                $html .= '</div>';

                $html .= '<div style="font-size: 14px; font-weight: 600; color: ' . $accentColor . '; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;">' . htmlspecialchars($event['date']) . '</div>';
                $html .= '<h4 style="font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #212529;">' . htmlspecialchars($event['title']) . '</h4>';
                $html .= '<p style="font-size: 14px; color: #6c757d; line-height: 1.6; margin: 0;">' . htmlspecialchars($event['description']) . '</p>';

                $html .= '</div>';
            }

            $html .= '</div></div>';
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render Map Component
     */
    if (!function_exists('renderMap')) {
    function renderMap($props) {
        $location = $props['location'] ?? 'New York, NY, USA';
        $mapUrl = $props['mapUrl'] ?? '';
        $height = $props['height'] ?? '450px';
        $zoom = $props['zoom'] ?? '14';
        $borderRadius = $props['borderRadius'] ?? '8px';
        $showDirections = $props['showDirections'] ?? true;

        $embedUrl = $mapUrl ?: 'https://www.google.com/maps?q=' . urlencode($location) . '&output=embed&z=' . $zoom;

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'position: relative';
        $spacingStyles[] = 'width: 100%';
        $spacingStyles[] = 'height: ' . $height;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;
        $spacingStyles[] = 'overflow: hidden';
        $spacingStyles[] = 'box-shadow: 0 2px 8px rgba(0,0,0,0.1)';
        $html = '<div class="map-component" style="' . implode('; ', $spacingStyles) . ';">';
        $html .= '<iframe src="' . htmlspecialchars($embedUrl) . '" width="100%" height="100%" style="border: 0;" allowfullscreen loading="lazy"></iframe>';

        if ($showDirections && $location) {
            $directionsUrl = 'https://www.google.com/maps/dir/?api=1&destination=' . urlencode($location);
            $html .= '<a href="' . htmlspecialchars($directionsUrl) . '" target="_blank" rel="noopener noreferrer" style="position: absolute; bottom: 15px; right: 15px; background-color: #667eea; color: white; padding: 10px 20px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 8px;"><i class="bi bi-signpost-2"></i> Get Directions</a>';
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render CTA Banner Component
     */
    if (!function_exists('renderCTABanner')) {
    function renderCTABanner($props) {
        $heading = $props['heading'] ?? 'Ready to Get Started?';
        $subheading = $props['subheading'] ?? '';
        $buttonText = $props['buttonText'] ?? 'Get Started Now';
        $buttonLink = $props['buttonLink'] ?? '#';
        $secondaryButtonText = $props['secondaryButtonText'] ?? '';
        $secondaryButtonLink = $props['secondaryButtonLink'] ?? '#';
        $layout = $props['layout'] ?? 'center';
        $backgroundColor = $props['backgroundColor'] ?? '#667eea';
        $backgroundImage = $props['backgroundImage'] ?? '';
        $textColor = $props['textColor'] ?? '#ffffff';
        $buttonStyle = $props['buttonStyle'] ?? 'solid';
        $buttonColor = $props['buttonColor'] ?? '#ffffff';
        $buttonTextColor = $props['buttonTextColor'] ?? '#667eea';
        $padding = $props['padding'] ?? '60px 20px';
        $borderRadius = $props['borderRadius'] ?? '12px';
        $overlayOpacity = $props['overlayOpacity'] ?? 0.8;

        $hasBackgroundImage = !empty($backgroundImage);

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'position: relative';
        $spacingStyles[] = 'border-radius: ' . $borderRadius;
        $spacingStyles[] = 'overflow: hidden';
        if ($hasBackgroundImage) {
            $spacingStyles[] = 'background-image: url(' . $backgroundImage . ')';
            $spacingStyles[] = 'background-size: cover';
            $spacingStyles[] = 'background-position: center';
        } else {
            $spacingStyles[] = 'background-color: ' . $backgroundColor;
        }
        $html = '<div class="cta-banner-component" style="' . implode('; ', $spacingStyles) . ';">';

        if ($hasBackgroundImage) {
            $html .= '<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, ' . $overlayOpacity . ');"></div>';
        }

        $textAlign = $layout === 'center' ? 'center' : 'left';
        $display = $layout === 'split' ? 'flex' : 'block';
        $maxWidth = $layout === 'center' ? '800px' : '100%';

        $html .= '<div style="position: relative; z-index: 1; padding: ' . $padding . '; text-align: ' . $textAlign . '; display: ' . $display . '; align-items: center; justify-content: space-between; gap: 30px; max-width: ' . $maxWidth . '; margin: ' . ($layout === 'center' ? '0 auto' : '0') . ';">';

        $html .= '<div style="flex: 1;">';
        $html .= '<h2 style="font-size: 36px; font-weight: 700; color: ' . $textColor . '; margin-bottom: 15px; line-height: 1.2;">' . htmlspecialchars($heading) . '</h2>';
        if ($subheading) {
            $html .= '<p style="font-size: 18px; color: ' . $textColor . '; opacity: 0.9; margin-bottom: ' . ($layout === 'split' ? '0' : '30px') . '; line-height: 1.6;">' . htmlspecialchars($subheading) . '</p>';
        }
        $html .= '</div>';

        $html .= '<div style="display: flex; gap: 15px; justify-content: ' . ($layout === 'center' ? 'center' : 'flex-start') . '; flex-wrap: wrap; margin-top: ' . ($layout === 'split' ? '0' : '0') . ';">';

        $btnBg = $buttonStyle === 'solid' ? $buttonColor : 'transparent';
        $btnColor = $buttonStyle === 'solid' ? $buttonTextColor : $buttonColor;
        $html .= '<a href="' . htmlspecialchars($buttonLink) . '" style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 16px; font-weight: 600; border-radius: 8px; text-decoration: none; background-color: ' . $btnBg . '; color: ' . $btnColor . '; border: 2px solid ' . $buttonColor . ';">' . htmlspecialchars($buttonText) . ' <i class="bi bi-arrow-right"></i></a>';

        if ($secondaryButtonText) {
            $html .= '<a href="' . htmlspecialchars($secondaryButtonLink) . '" style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 16px; font-weight: 600; border-radius: 8px; text-decoration: none; background-color: transparent; color: ' . $textColor . '; border: 2px solid ' . $textColor . ';">' . htmlspecialchars($secondaryButtonText) . '</a>';
        }

        $html .= '</div>';
        $html .= '</div>';
        $html .= '</div>';

        return $html;
    }
    }

    /**
     * Render Divider Component
     */
    if (!function_exists('renderDivider')) {
    function renderDivider($props) {
        $style = $props['style'] ?? 'solid';
        $width = $props['width'] ?? '100%';
        $thickness = $props['thickness'] ?? '2px';
        $color = $props['color'] ?? '#dee2e6';
        $gradientStart = $props['gradientStart'] ?? '#667eea';
        $gradientEnd = $props['gradientEnd'] ?? '#f093fb';
        $marginTop = $props['marginTop'] ?? '30px';
        $marginBottom = $props['marginBottom'] ?? '30px';
        $alignment = $props['alignment'] ?? 'center';
        $maxWidth = $props['maxWidth'] ?? '100%';
        $showIcon = $props['showIcon'] ?? false;
        $icon = $props['icon'] ?? 'bi-circle-fill';
        $iconColor = $props['iconColor'] ?? '#667eea';

        $justifyContent = $alignment === 'left' ? 'flex-start' : ($alignment === 'right' ? 'flex-end' : 'center');

        $html = '<div class="divider-component" style="display: flex; align-items: center; justify-content: ' . $justifyContent . '; margin-top: ' . $marginTop . '; margin-bottom: ' . $marginBottom . ';">';

        if (!$showIcon) {
            if ($style === 'gradient') {
                $html .= '<div style="height: ' . $thickness . '; width: ' . $width . '; max-width: ' . $maxWidth . '; background: linear-gradient(to right, ' . $gradientStart . ', ' . $gradientEnd . ');"></div>';
            } else {
                $borderStyle = $style === 'solid' ? 'none' : $thickness . ' ' . $style . ' ' . $color;
                $bgColor = $style === 'solid' ? $color : 'transparent';
                $html .= '<div style="height: ' . $thickness . '; width: ' . $width . '; max-width: ' . $maxWidth . '; background-color: ' . $bgColor . '; border-top: ' . $borderStyle . ';"></div>';
            }
        } else {
            $html .= '<div style="display: flex; align-items: center; width: ' . $width . '; max-width: ' . $maxWidth . '; gap: 15px;">';

            if ($style === 'gradient') {
                $html .= '<div style="flex: 1; height: ' . $thickness . '; background: linear-gradient(to right, ' . $gradientStart . ', ' . $gradientEnd . ');"></div>';
            } else {
                $borderStyle = $style === 'solid' ? 'none' : $thickness . ' ' . $style . ' ' . $color;
                $bgColor = $style === 'solid' ? $color : 'transparent';
                $html .= '<div style="flex: 1; height: ' . $thickness . '; background-color: ' . $bgColor . '; border-top: ' . $borderStyle . ';"></div>';
            }

            $html .= '<div style="font-size: 12px; color: ' . $iconColor . '; flex-shrink: 0;"><i class="bi ' . $icon . '"></i></div>';

            if ($style === 'gradient') {
                $html .= '<div style="flex: 1; height: ' . $thickness . '; background: linear-gradient(to right, ' . $gradientStart . ', ' . $gradientEnd . ');"></div>';
            } else {
                $html .= '<div style="flex: 1; height: ' . $thickness . '; background-color: ' . $bgColor . '; border-top: ' . $borderStyle . ';"></div>';
            }

            $html .= '</div>';
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render Spacer Component
     */
    if (!function_exists('renderSpacer')) {
    function renderSpacer($props) {
        $height = $props['height'] ?? '50px';
        $backgroundColor = $props['backgroundColor'] ?? 'transparent';

        return '<div class="spacer-component" style="height: ' . $height . '; background-color: ' . $backgroundColor . '; min-height: 20px;"></div>';
    }

    /**
     * Render Menu Component
     */
    function renderMenu($props, $websiteId = null) {
        // Get menu from website
        $menu = null;
        if ($websiteId && isset($props['menuId']) && $props['menuId']) {
            $menu = \App\Models\Menu::where('id', $props['menuId'])
                ->where('website_id', $websiteId)
                ->with('items')
                ->first();
        }

        // If no menu found, show message in builder preview
        if (!$menu || !$menu->items->count()) {
            return '<div class="alert alert-info">No menu items found. Please create a menu in Menu Management.</div>';
        }

        // Extract props
        $layout = $props['layout'] ?? 'horizontal';
        $alignment = $props['alignment'] ?? 'left';
        $pointer = $props['pointer'] ?? 'underline';
        $animation = $props['animation'] ?? 'fade';
        $textColor = $props['textColor'] ?? '#000000';
        $hoverColor = $props['hoverColor'] ?? '#667eea';
        $activeColor = $props['activeColor'] ?? '#667eea';
        $backgroundColor = $props['backgroundColor'] ?? 'transparent';
        $submenuBgColor = $props['submenuBgColor'] ?? '#ffffff';
        $padding = $props['padding'] ?? '10px 15px';
        $gap = $props['gap'] ?? '20px';
        $fontSize = $props['fontSize'] ?? '16px';
        $fontWeight = $props['fontWeight'] ?? '500';
        $mobileBreakpoint = $props['mobileBreakpoint'] ?? 768;
        $submenuIndicator = $props['submenuIndicator'] ?? true;

        // Generate unique ID for this menu instance
        $menuId = 'menu-' . uniqid();

        // Build menu HTML
        $html = '<nav class="menu-component menu-' . $layout . ' menu-align-' . $alignment . '" id="' . $menuId . '">';

        // Mobile toggle button
        $html .= '<button class="menu-mobile-toggle" style="display: none; background: none; border: 1px solid ' . $textColor . '; color: ' . $textColor . '; padding: 8px 12px; cursor: pointer; border-radius: 4px;">';
        $html .= '<i class="bi bi-list" style="font-size: 24px;"></i>';
        $html .= '</button>';

        // Menu list
        $html .= '<ul class="menu-list" style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: ' . ($layout === 'vertical' ? 'column' : 'row') . '; gap: ' . $gap . '; align-items: ' . ($layout === 'vertical' ? 'flex-start' : 'center') . '; justify-content: ' . $alignment . '; background-color: ' . $backgroundColor . ';">';

        // Get current page to highlight active menu item
        $currentUrl = request()->path();

        foreach ($menu->items->where('parent_id', null)->sortBy('sort_order') as $item) {
            $isActive = false;
            $itemUrl = '#';

            if ($item->type === 'page' && $item->page) {
                $itemUrl = '/' . $item->page->slug;
                $isActive = $currentUrl === $item->page->slug;
            } elseif ($item->type === 'url') {
                $itemUrl = $item->url;
            }

            $hasSubmenu = $menu->items->where('parent_id', $item->id)->count() > 0;

            $html .= '<li class="menu-item' . ($hasSubmenu ? ' has-submenu' : '') . '" style="position: relative;">';
            $html .= '<a href="' . $itemUrl . '" class="menu-link' . ($isActive ? ' active' : '') . '" style="color: ' . ($isActive ? $activeColor : $textColor) . '; padding: ' . $padding . '; text-decoration: none; display: block; font-size: ' . $fontSize . '; font-weight: ' . $fontWeight . '; transition: all 0.3s ease; position: relative;">';
            $html .= htmlspecialchars($item->title);

            if ($hasSubmenu && $submenuIndicator) {
                $html .= ' <i class="bi bi-chevron-down" style="font-size: 12px; margin-left: 4px;"></i>';
            }

            $html .= '</a>';

            // Render submenu if exists
            if ($hasSubmenu) {
                $html .= '<ul class="submenu" style="list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0; background-color: ' . $submenuBgColor . '; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 4px; min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000;">';

                foreach ($menu->items->where('parent_id', $item->id)->sortBy('sort_order') as $subitem) {
                    $subitemUrl = '#';
                    if ($subitem->type === 'page' && $subitem->page) {
                        $subitemUrl = '/' . $subitem->page->slug;
                    } elseif ($subitem->type === 'url') {
                        $subitemUrl = $subitem->url;
                    }

                    $html .= '<li class="submenu-item">';
                    $html .= '<a href="' . $subitemUrl . '" class="submenu-link" style="color: ' . $textColor . '; padding: ' . $padding . '; text-decoration: none; display: block; font-size: ' . $fontSize . '; transition: all 0.3s ease;">';
                    $html .= htmlspecialchars($subitem->title);
                    $html .= '</a>';
                    $html .= '</li>';
                }

                $html .= '</ul>';
            }

            $html .= '</li>';
        }

        $html .= '</ul>';
        $html .= '</nav>';

        // Add CSS for hover effects and pointer styles
        $html .= '<style>';
        $html .= '#' . $menuId . ' .menu-link:hover { color: ' . $hoverColor . ' !important; }';

        // Pointer styles
        if ($pointer === 'underline') {
            $html .= '#' . $menuId . ' .menu-link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: ' . $hoverColor . '; transition: width 0.3s ease; }';
            $html .= '#' . $menuId . ' .menu-link:hover::after, #' . $menuId . ' .menu-link.active::after { width: 100%; }';
        } elseif ($pointer === 'overline') {
            $html .= '#' . $menuId . ' .menu-link::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: ' . $hoverColor . '; transition: width 0.3s ease; }';
            $html .= '#' . $menuId . ' .menu-link:hover::before, #' . $menuId . ' .menu-link.active::before { width: 100%; }';
        } elseif ($pointer === 'double-line') {
            $html .= '#' . $menuId . ' .menu-link::before, #' . $menuId . ' .menu-link::after { content: ""; position: absolute; left: 0; width: 0; height: 2px; background-color: ' . $hoverColor . '; transition: width 0.3s ease; }';
            $html .= '#' . $menuId . ' .menu-link::before { top: 0; }';
            $html .= '#' . $menuId . ' .menu-link::after { bottom: 0; }';
            $html .= '#' . $menuId . ' .menu-link:hover::before, #' . $menuId . ' .menu-link:hover::after, #' . $menuId . ' .menu-link.active::before, #' . $menuId . ' .menu-link.active::after { width: 100%; }';
        } elseif ($pointer === 'framed') {
            $html .= '#' . $menuId . ' .menu-link:hover, #' . $menuId . ' .menu-link.active { border: 2px solid ' . $hoverColor . '; }';
        } elseif ($pointer === 'background') {
            $html .= '#' . $menuId . ' .menu-link:hover, #' . $menuId . ' .menu-link.active { background-color: ' . $hoverColor . '; color: white !important; }';
        }

        // Submenu hover
        $html .= '#' . $menuId . ' .menu-item.has-submenu:hover > .submenu { opacity: 1 !important; visibility: visible !important; }';
        $html .= '#' . $menuId . ' .submenu-link:hover { color: ' . $hoverColor . ' !important; background-color: rgba(0,0,0,0.05); }';

        // Mobile responsive
        $html .= '@media (max-width: ' . $mobileBreakpoint . 'px) {';
        $html .= '  #' . $menuId . ' .menu-mobile-toggle { display: block !important; }';
        $html .= '  #' . $menuId . ' .menu-list { display: none; flex-direction: column; width: 100%; }';
        $html .= '  #' . $menuId . ' .menu-list.active { display: flex !important; }';
        $html .= '  #' . $menuId . ' .submenu { position: static; opacity: 1; visibility: visible; box-shadow: none; margin-left: 20px; }';
        $html .= '}';
        $html .= '</style>';

        // Add JavaScript for mobile toggle
        $html .= '<script>';
        $html .= 'document.addEventListener("DOMContentLoaded", function() {';
        $html .= '  const toggle = document.querySelector("#' . $menuId . ' .menu-mobile-toggle");';
        $html .= '  const menu = document.querySelector("#' . $menuId . ' .menu-list");';
        $html .= '  if (toggle && menu) {';
        $html .= '    toggle.addEventListener("click", function() {';
        $html .= '      menu.classList.toggle("active");';
        $html .= '    });';
        $html .= '  }';
        $html .= '});';
        $html .= '</script>';

        return $html;
    }
    }

    /**
     * Render Product Grid component - E-commerce Module
     */
    if (!function_exists('renderProductGrid')) {
    function renderProductGrid($props, $websiteId = null, $currencySymbol = 'RM', $websiteSubdomain = null) {
        // Check if Product model exists
        if (!class_exists('\App\Models\Product')) {
            return '<div class="alert alert-warning">E-commerce module not available</div>';
        }

        $displayType = $props['displayType'] ?? 'by_category';
        $columns = $props['columns'] ?? 3;
        $showPrice = $props['showPrice'] ?? true;
        $showDescription = $props['showDescription'] ?? true;
        $showAddToCart = $props['showAddToCart'] ?? true;
        $categoryFilter = $props['categoryFilter'] ?? 'all';
        $limit = $props['limit'] ?? 12;
        $sortBy = $props['sortBy'] ?? 'newest';
        $cardStyle = $props['cardStyle'] ?? 'modern';

        $spacingStyles = getSpacingStyles($props);

        // Fetch products from database
        $query = \App\Models\Product::where('is_active', true);

        // IMPORTANT: Filter by website_id for multi-tenancy
        if ($websiteId) {
            $query->where('website_id', $websiteId);
        }

        // Configure based on display type
        switch ($displayType) {
            case 'featured':
                $query->where('featured', true);
                break;
            case 'best_sellers':
                // Order by popularity if available
                $query->orderBy('created_at', 'desc');
                break;
            case 'latest':
                $query->orderBy('created_at', 'desc');
                break;
            case 'by_category':
            default:
                // Filter by category using relationship
                if ($categoryFilter !== 'all') {
                    $query->whereHas('categories', function($q) use ($categoryFilter) {
                        $q->where('slug', $categoryFilter);
                    });
                }
                break;
        }

        // Apply sorting (only if not best_sellers or latest which have their own)
        if ($displayType !== 'best_sellers' && $displayType !== 'latest') {
            switch ($sortBy) {
                case 'newest':
                    $query->orderBy('created_at', 'desc');
                    break;
                case 'oldest':
                    $query->orderBy('created_at', 'asc');
                    break;
                case 'price_low':
                    $query->orderBy('price', 'asc');
                    break;
                case 'price_high':
                    $query->orderBy('price', 'desc');
                    break;
                case 'name':
                    $query->orderBy('name', 'asc');
                    break;
            }
        }

        $products = $query->limit($limit)->get();

        if ($products->isEmpty()) {
            $html = '<div style="' . implode('; ', $spacingStyles) . '">';
            $html .= '<div style="text-align: center; padding: 60px 20px; background-color: #f8f9fa; border-radius: 8px; border: 2px dashed #dee2e6;">';
            $html .= '<i class="bi bi-box-seam" style="font-size: 48px; color: #adb5bd; margin-bottom: 16px; display: block;"></i>';
            $html .= '<h4 style="color: #6c757d; margin-bottom: 8px;">No Products Found</h4>';
            $html .= '<p style="color: #adb5bd; margin: 0;">Add products in your e-commerce dashboard to display them here.</p>';
            $html .= '</div></div>';
            return $html;
        }

        $html = '<div class="product-grid-component" style="' . implode('; ', $spacingStyles) . '">';
        $html .= '<div style="display: grid; grid-template-columns: repeat(' . min($columns, 4) . ', 1fr); gap: 30px; max-width: 1400px; margin: 0 auto;">';

        foreach ($products as $product) {
            $cardBg = $cardStyle === 'modern' ? '#fff' : 'transparent';
            $borderRadius = $cardStyle === 'modern' ? '12px' : '0';
            $boxShadow = $cardStyle === 'modern' ? '0 2px 8px rgba(0,0,0,0.1)' : 'none';
            $border = $cardStyle === 'bordered' ? '1px solid #dee2e6' : 'none';

            // Product URL - use subdomain if available
            if ($websiteSubdomain) {
                $mainDomain = config('app.domain', 'neosolvix.test');
                $productUrl = 'http://' . $websiteSubdomain . '.' . $mainDomain . '/product/' . $product->slug;
            } else {
                $productUrl = '/product/' . $product->slug;
            }

            $html .= '<a href="' . $productUrl . '" style="text-decoration: none; color: inherit; display: block;">';
            $html .= '<div class="product-card" style="background-color: ' . $cardBg . '; border-radius: ' . $borderRadius . '; box-shadow: ' . $boxShadow . '; border: ' . $border . '; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease;" onmouseover="this.style.transform=\'translateY(-4px)\'; this.style.boxShadow=\'0 4px 12px rgba(0,0,0,0.15)\';" onmouseout="this.style.transform=\'translateY(0)\'; this.style.boxShadow=\'' . $boxShadow . '\';">';

            // Product Image - use main_image accessor which gets first image from images array
            $imageUrl = $product->main_image ?? 'https://via.placeholder.com/400x400/667eea/ffffff?text=Product';
            // If it's already a full path, use it as-is
            if ($product->main_image && !str_starts_with($product->main_image, 'http') && !str_starts_with($product->main_image, '/')) {
                $imageUrl = '/storage/' . $product->main_image;
            }
            $html .= '<div style="width: 100%; padding-top: 100%; position: relative; background-color: #f8f9fa; overflow: hidden;">';
            $html .= '<img src="' . htmlspecialchars($imageUrl) . '" alt="' . htmlspecialchars($product->name) . '" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">';

            if ($product->stock_quantity == 0) {
                $html .= '<div style="position: absolute; top: 10px; right: 10px; background-color: #dc3545; color: #fff; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;">Out of Stock</div>';
            }

            $html .= '</div>';

            // Product Info
            $html .= '<div style="padding: 20px;">';
            $html .= '<h5 style="font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #212529;">' . htmlspecialchars($product->name) . '</h5>';

            if ($showDescription && $product->description) {
                $html .= '<p style="font-size: 14px; color: #6c757d; margin-bottom: 12px; line-height: 1.5;">' . htmlspecialchars(substr($product->description, 0, 100)) . '</p>';
            }

            if ($showPrice) {
                $html .= '<div style="margin-bottom: 15px;">';
                if ($product->sale_price) {
                    $html .= '<span style="font-size: 20px; font-weight: 700; color: #dc3545; margin-right: 10px;">' . htmlspecialchars($currencySymbol) . number_format($product->sale_price, 2) . '</span>';
                    $html .= '<span style="font-size: 16px; color: #adb5bd; text-decoration: line-through;">' . htmlspecialchars($currencySymbol) . number_format($product->price, 2) . '</span>';
                } else {
                    $html .= '<span style="font-size: 20px; font-weight: 700; color: #212529;">' . htmlspecialchars($currencySymbol) . number_format($product->price, 2) . '</span>';
                }
                $html .= '</div>';
            }

            if ($showAddToCart) {
                $disabled = $product->stock_quantity == 0 ? 'disabled' : '';
                $buttonText = $product->stock_quantity == 0 ? 'Out of Stock' : 'View Details';
                $html .= '<button class="btn btn-primary w-100" ' . $disabled . ' style="padding: 10px; font-size: 14px; font-weight: 600;">' . $buttonText . '</button>';
            }

            $html .= '</div></div></a>';
        }

        $html .= '</div></div>';
        return $html;
    }
    }

    /**
     * Render Booking Form component - Booking Module
     */
    if (!function_exists('renderBookingForm')) {
    function renderBookingForm($props, $websiteId = null, $currencySymbol = 'RM') {
        $formTitle = $props['formTitle'] ?? 'Book an Appointment';
        $formDescription = $props['formDescription'] ?? 'Select a service and choose your preferred date and time.';
        $showServiceSelection = $props['showServiceSelection'] ?? true;
        $showDatePicker = $props['showDatePicker'] ?? true;
        $showTimePicker = $props['showTimePicker'] ?? true;
        $submitButtonText = $props['submitButtonText'] ?? 'Book Now';
        $submitButtonColor = $props['submitButtonColor'] ?? '#667eea';
        $backgroundColor = $props['backgroundColor'] ?? '#f8f9fa';
        $borderRadius = $props['borderRadius'] ?? '8px';

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'background-color: ' . $backgroundColor;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;

        // Time slots
        $timeSlots = [];
        for ($hour = 9; $hour <= 17; $hour++) {
            $timeSlots[] = str_pad($hour, 2, '0', STR_PAD_LEFT) . ':00';
            if ($hour < 17) {
                $timeSlots[] = str_pad($hour, 2, '0', STR_PAD_LEFT) . ':30';
            }
        }

        $html = '<div class="booking-form-component" style="' . implode('; ', $spacingStyles) . '">';

        if ($formTitle) {
            $html .= '<h3 style="margin-bottom: 10px; font-size: 24px; font-weight: 600;">' . htmlspecialchars($formTitle) . '</h3>';
        }

        if ($formDescription) {
            $html .= '<p style="margin-bottom: 25px; color: #6c757d;">' . htmlspecialchars($formDescription) . '</p>';
        }

        $html .= '<form action="/booking/submit" method="POST">';
        $html .= csrf_field();

        // Service Selection
        if ($showServiceSelection) {
            $html .= '<div class="mb-3">';
            $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Select Service <span style="color: #dc3545;">*</span></label>';
            $html .= '<select class="form-select" name="service" required style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
            $html .= '<option value="">Choose a service...</option>';

            // Fetch services if available (services are BookingResource with resource_type = 'service')
            if (class_exists('\App\Models\BookingResource')) {
                $query = \App\Models\BookingResource::where('is_active', true)
                    ->where('resource_type', 'service')
                    ->orderBy('name');

                // IMPORTANT: Filter by website_id for multi-tenancy
                if ($websiteId) {
                    $query->where('website_id', $websiteId);
                }

                $services = $query->get();
                foreach ($services as $service) {
                    $html .= '<option value="' . $service->id . '">' . htmlspecialchars($service->name);
                    if ($service->base_price) {
                        $html .= ' - ' . htmlspecialchars($currencySymbol) . ' ' . number_format($service->base_price, 2);
                    }
                    $html .= '</option>';
                }
            } else {
                $html .= '<option value="1">Consultation - 30 min - ' . htmlspecialchars($currencySymbol) . '50</option>';
                $html .= '<option value="2">Standard Service - 1 hour - ' . htmlspecialchars($currencySymbol) . '100</option>';
                $html .= '<option value="3">Premium Service - 2 hours - ' . htmlspecialchars($currencySymbol) . '200</option>';
            }

            $html .= '</select></div>';
        }

        // Date Picker
        if ($showDatePicker) {
            $minDate = date('Y-m-d');
            $html .= '<div class="mb-3">';
            $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Preferred Date <span style="color: #dc3545;">*</span></label>';
            $html .= '<input type="date" class="form-control" name="date" required min="' . $minDate . '" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
            $html .= '</div>';
        }

        // Time Picker
        if ($showTimePicker) {
            $html .= '<div class="mb-3">';
            $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Preferred Time <span style="color: #dc3545;">*</span></label>';
            $html .= '<select class="form-select" name="time" required style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
            $html .= '<option value="">Select a time...</option>';
            foreach ($timeSlots as $slot) {
                $html .= '<option value="' . $slot . '">' . $slot . '</option>';
            }
            $html .= '</select></div>';
        }

        $html .= '<hr style="margin: 25px 0;">';

        // Customer Information
        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Your Name <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="text" class="form-control" name="name" required placeholder="John Doe" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
        $html .= '</div>';

        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Email <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="email" class="form-control" name="email" required placeholder="john@example.com" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
        $html .= '</div>';

        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Phone</label>';
        $html .= '<input type="tel" class="form-control" name="phone" placeholder="+1 (555) 000-0000" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
        $html .= '</div>';

        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Additional Notes</label>';
        $html .= '<textarea class="form-control" name="notes" rows="3" placeholder="Any special requests or requirements..." style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;"></textarea>';
        $html .= '</div>';

        $html .= '<button type="submit" class="btn btn-primary w-100" style="background-color: ' . $submitButtonColor . '; border: none; padding: 12px 30px; font-size: 16px; font-weight: 600; border-radius: 6px;">';
        $html .= '<i class="bi bi-calendar-check" style="margin-right: 8px;"></i>' . htmlspecialchars($submitButtonText);
        $html .= '</button>';

        $html .= '</form></div>';
        return $html;
    }
    }

    /**
     * Render Payment Form component - Payment Forms Module
     */
    if (!function_exists('renderPaymentForm')) {
    function renderPaymentForm($props) {
        $formTitle = $props['formTitle'] ?? 'Make a Payment';
        $formDescription = $props['formDescription'] ?? 'Enter the amount and complete your payment securely.';
        $showAmountField = $props['showAmountField'] ?? true;
        $fixedAmount = $props['fixedAmount'] ?? null;
        $amountLabel = $props['amountLabel'] ?? 'Amount';
        $currency = $props['currency'] ?? 'USD';
        $currencySymbol = $props['currencySymbol'] ?? '$';
        $showPurposeField = $props['showPurposeField'] ?? true;
        $purposeLabel = $props['purposeLabel'] ?? 'Payment For';
        $submitButtonText = $props['submitButtonText'] ?? 'Pay Now';
        $submitButtonColor = $props['submitButtonColor'] ?? '#667eea';
        $backgroundColor = $props['backgroundColor'] ?? '#f8f9fa';
        $borderRadius = $props['borderRadius'] ?? '8px';

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'background-color: ' . $backgroundColor;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;

        $html = '<div class="payment-form-component" style="' . implode('; ', $spacingStyles) . '">';

        if ($formTitle) {
            $html .= '<h3 style="margin-bottom: 10px; font-size: 24px; font-weight: 600;">' . htmlspecialchars($formTitle) . '</h3>';
        }

        if ($formDescription) {
            $html .= '<p style="margin-bottom: 25px; color: #6c757d;">' . htmlspecialchars($formDescription) . '</p>';
        }

        $html .= '<form action="/payment/submit" method="POST">';
        $html .= csrf_field();

        // Amount Field
        if ($fixedAmount) {
            $html .= '<div class="alert alert-info" style="margin-bottom: 20px;">';
            $html .= '<strong>Payment Amount:</strong> ' . $currencySymbol . number_format($fixedAmount, 2) . ' ' . $currency;
            $html .= '</div>';
            $html .= '<input type="hidden" name="amount" value="' . $fixedAmount . '">';
        } elseif ($showAmountField) {
            $html .= '<div class="mb-3">';
            $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">' . htmlspecialchars($amountLabel) . ' <span style="color: #dc3545;">*</span></label>';
            $html .= '<div style="position: relative;">';
            $html .= '<span style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 600; color: #495057;">' . $currencySymbol . '</span>';
            $html .= '<input type="number" class="form-control" name="amount" required min="1" step="0.01" placeholder="0.00" style="padding-left: 35px; padding: 10px 15px 10px 35px; border-radius: 6px; border: 1px solid #ced4da; font-size: 18px; font-weight: 600;">';
            $html .= '</div>';
            $html .= '<small class="text-muted">' . $currency . '</small>';
            $html .= '</div>';
        }

        // Purpose Field
        if ($showPurposeField) {
            $html .= '<div class="mb-3">';
            $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">' . htmlspecialchars($purposeLabel) . '</label>';
            $html .= '<input type="text" class="form-control" name="purpose" placeholder="e.g., Invoice #12345, Donation, Service Fee" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
            $html .= '</div>';
        }

        $html .= '<hr style="margin: 25px 0;">';

        // Billing Information
        $html .= '<h5 style="font-size: 16px; font-weight: 600; margin-bottom: 15px;">Billing Information</h5>';

        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Full Name <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="text" class="form-control" name="name" required placeholder="John Doe" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
        $html .= '</div>';

        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Email <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="email" class="form-control" name="email" required placeholder="john@example.com" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px;">';
        $html .= '</div>';

        $html .= '<hr style="margin: 25px 0;">';

        // Payment Details
        $html .= '<h5 style="font-size: 16px; font-weight: 600; margin-bottom: 15px;"><i class="bi bi-credit-card" style="margin-right: 8px;"></i>Payment Details</h5>';

        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Card Number <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="text" class="form-control" name="card_number" required placeholder="1234 5678 9012 3456" maxlength="19" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px; font-family: monospace;">';
        $html .= '</div>';

        $html .= '<div class="row">';
        $html .= '<div class="col-md-6">';
        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">Expiry Date <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="text" class="form-control" name="expiry" required placeholder="MM/YY" maxlength="5" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px; font-family: monospace;">';
        $html .= '</div></div>';

        $html .= '<div class="col-md-6">';
        $html .= '<div class="mb-3">';
        $html .= '<label class="form-label" style="font-weight: 500; margin-bottom: 8px; display: block;">CVV <span style="color: #dc3545;">*</span></label>';
        $html .= '<input type="text" class="form-control" name="cvv" required placeholder="123" maxlength="4" style="padding: 10px 15px; border-radius: 6px; border: 1px solid #ced4da; font-size: 15px; font-family: monospace;">';
        $html .= '</div></div>';
        $html .= '</div>';

        $html .= '<div class="alert alert-info" style="font-size: 13px; margin-bottom: 20px;"><i class="bi bi-shield-lock-fill" style="margin-right: 8px;"></i>Your payment information is secure and encrypted</div>';

        $html .= '<button type="submit" class="btn btn-primary w-100" style="background-color: ' . $submitButtonColor . '; border: none; padding: 12px 30px; font-size: 16px; font-weight: 600; border-radius: 6px;">';
        $html .= '<i class="bi bi-lock-fill" style="margin-right: 8px;"></i>' . htmlspecialchars($submitButtonText);
        $html .= '</button>';

        $html .= '</form></div>';
        return $html;
    }
    }

    /**
     * Render Posts Component
     */
    if (!function_exists('renderPosts')) {
    function renderPosts($props, $websiteId = null, $websiteSubdomain = null) {
        // Debug log
        \Log::info('renderPosts called', ['websiteId' => $websiteId, 'subdomain' => $websiteSubdomain, 'props' => $props]);

        // Check if Post model exists
        if (!class_exists('\App\Models\Post')) {
            \Log::warning('Post model does not exist');
            return '<div class="alert alert-warning" style="margin: 20px 0;">Posts component requires Posts module</div>';
        }

        // Get props
        $filterType = $props['filterType'] ?? 'latest';
        $categoryFilter = $props['categoryFilter'] ?? null;
        $tagFilter = $props['tagFilter'] ?? null;
        $displayType = $props['displayType'] ?? 'grid';
        $postsPerRow = $props['postsPerRow'] ?? 3;
        $limit = $props['limit'] ?? 6;
        $excerptLength = $props['excerptLength'] ?? 120;
        $showFeaturedImage = $props['showFeaturedImage'] ?? true;
        $showExcerpt = $props['showExcerpt'] ?? true;
        $showAuthor = $props['showAuthor'] ?? true;
        $showDate = $props['showDate'] ?? true;
        $showCategory = $props['showCategory'] ?? true;
        $showReadMore = $props['showReadMore'] ?? true;

        // Get spacing styles
        $spacingStyles = getSpacingStyles($props);

        // Build query
        $query = \App\Models\Post::where('website_id', $websiteId)
            ->published()
            ->with(['author', 'category', 'tags']);

        // Apply filters
        switch ($filterType) {
            case 'featured':
                $query->featured();
                break;
            case 'category':
                if ($categoryFilter) {
                    $query->where('post_category_id', $categoryFilter);
                }
                break;
            case 'tag':
                if ($tagFilter) {
                    $query->whereHas('tags', function($q) use ($tagFilter) {
                        $q->where('post_tags.id', $tagFilter);
                    });
                }
                break;
            case 'latest':
            default:
                // Latest is default, no additional filter needed
                break;
        }

        // Order and limit
        $posts = $query->latest()->limit($limit)->get();

        // Debug log
        \Log::info('Posts query result', ['count' => $posts->count(), 'posts' => $posts->pluck('title')->toArray()]);

        // Start HTML
        $html = '<div class="posts-component" style="' . implode('; ', $spacingStyles) . '">';

        if ($posts->isEmpty()) {
            $html .= '<div class="alert alert-info">No posts found.</div>';
        } else {
            // Container class based on layout
            $containerClass = $displayType === 'grid' ? 'row g-4' : 'posts-list';
            $html .= '<div class="' . $containerClass . '">';

            foreach ($posts as $post) {
                // Column class for grid layout
                if ($displayType === 'grid') {
                    $colSize = 12 / $postsPerRow;
                    $html .= '<div class="col-lg-' . $colSize . ' col-md-6">';
                }

                // Card wrapper
                $cardClass = $displayType === 'grid' ? 'card h-100' : 'card mb-4';
                $html .= '<div class="' . $cardClass . '" style="transition: all 0.3s ease;">';

                // Row for list layout
                if ($displayType === 'list') {
                    $html .= '<div class="row g-0">';
                }

                // Featured Image
                if ($showFeaturedImage && $post->featured_image) {
                    $imageColClass = $displayType === 'list' ? 'col-md-4' : '';
                    if ($imageColClass) {
                        $html .= '<div class="' . $imageColClass . '">';
                    }

                    // Get the correct image URL (add /storage/ prefix if not already a full URL)
                    $imageUrl = $post->featured_image;
                    if (!str_starts_with($imageUrl, 'http') && !str_starts_with($imageUrl, '/storage/')) {
                        $imageUrl = '/storage/' . $imageUrl;
                    }

                    $imageHeight = $displayType === 'grid' ? '220px' : '100%';
                    $html .= '<img src="' . htmlspecialchars($imageUrl) . '" ';
                    $html .= 'class="' . ($displayType === 'grid' ? 'card-img-top' : 'img-fluid h-100') . '" ';
                    $html .= 'alt="' . htmlspecialchars($post->title) . '" ';
                    $html .= 'style="height: ' . $imageHeight . '; object-fit: cover;">';

                    if ($imageColClass) {
                        $html .= '</div>';
                    }
                }

                // Post Content
                $contentColClass = ($displayType === 'list' && $showFeaturedImage && $post->featured_image) ? 'col-md-8' : '';
                if ($contentColClass) {
                    $html .= '<div class="' . $contentColClass . '">';
                }

                $html .= '<div class="card-body">';

                // Category Badge
                if ($showCategory && $post->category) {
                    $html .= '<span class="badge bg-primary mb-2">' . htmlspecialchars($post->category->name) . '</span>';
                }

                // Post Title
                $html .= '<h5 class="card-title">' . htmlspecialchars($post->title) . '</h5>';

                // Post Meta
                $html .= '<div class="d-flex flex-wrap gap-2 small text-muted mb-2">';
                if ($showAuthor && $post->author) {
                    $html .= '<span><i class="bi bi-person"></i> ' . htmlspecialchars($post->author->name) . '</span>';
                }
                if ($showDate) {
                    $html .= '<span><i class="bi bi-calendar"></i> ' . $post->published_date . '</span>';
                }
                $html .= '<span><i class="bi bi-eye"></i> ' . $post->views_count . ' views</span>';
                $html .= '<span><i class="bi bi-clock"></i> ' . $post->reading_time . ' min</span>';
                $html .= '</div>';

                // Excerpt
                if ($showExcerpt) {
                    $excerpt = $post->excerpt ?: strip_tags($post->content);
                    $excerpt = substr($excerpt, 0, $excerptLength);
                    if (strlen($post->excerpt ?: strip_tags($post->content)) > $excerptLength) {
                        $excerpt .= '...';
                    }
                    $html .= '<p class="card-text text-muted small mb-3">' . htmlspecialchars($excerpt) . '</p>';
                }

                // Read More Button
                if ($showReadMore) {
                    // Generate correct post URL with subdomain
                    $postUrl = $websiteSubdomain ? '/' . $websiteSubdomain . '/post/' . $post->slug : '/posts/' . $post->slug;
                    $html .= '<a href="' . $postUrl . '" class="btn btn-sm btn-outline-primary">';
                    $html .= 'Read More <i class="bi bi-arrow-right"></i>';
                    $html .= '</a>';
                }

                $html .= '</div>'; // End card-body

                if ($contentColClass) {
                    $html .= '</div>'; // End content column
                }

                if ($displayType === 'list') {
                    $html .= '</div>'; // End row g-0
                }

                $html .= '</div>'; // End card

                if ($displayType === 'grid') {
                    $html .= '</div>'; // End column
                }
            }

            $html .= '</div>'; // End container
        }

        $html .= '</div>'; // End posts-component

        // Add hover styles
        $html .= '<style>
            .posts-component .card:hover {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                transform: translateY(-2px);
            }
        </style>';

        return $html;
    }
    }

    /**
     * Render FeaturedProduct Component
     */
    if (!function_exists('renderFeaturedProduct')) {
    function renderFeaturedProduct($props, $websiteId = null, $currencySymbol = 'RM') {
        // Check if Product model exists
        if (!class_exists('\App\Models\Product')) {
            return '<div class="alert alert-warning" style="margin: 20px 0;">Featured Product component requires E-commerce module</div>';
        }

        $productId = $props['productId'] ?? null;
        $layout = $props['layout'] ?? 'image-left';
        $showBadge = $props['showBadge'] ?? true;
        $badgeText = $props['badgeText'] ?? 'Featured';
        $badgeColor = $props['badgeColor'] ?? '#ff6b6b';
        $showDescription = $props['showDescription'] ?? true;
        $showPrice = $props['showPrice'] ?? true;
        $showSalePrice = $props['showSalePrice'] ?? true;
        $buttonText = $props['buttonText'] ?? 'View Product';
        $buttonColor = $props['buttonColor'] ?? '#667eea';
        $backgroundColor = $props['backgroundColor'] ?? '#ffffff';
        $borderRadius = $props['borderRadius'] ?? '12px';

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'background-color: ' . $backgroundColor;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;

        // Fetch product
        $product = null;
        if ($productId) {
            $query = \App\Models\Product::where('id', $productId);
            // IMPORTANT: Filter by website_id for multi-tenancy
            if ($websiteId) {
                $query->where('website_id', $websiteId);
            }
            $product = $query->first();
        }

        // Use demo product if not found
        if (!$product) {
            $product = (object)[
                'name' => 'Premium Wireless Headphones',
                'description' => 'Experience crystal-clear audio with our premium wireless headphones. Featuring active noise cancellation, 30-hour battery life, and comfortable over-ear design perfect for all-day listening.',
                'price' => 299.99,
                'sale_price' => 249.99,
                'main_image' => 'https://via.placeholder.com/800x600/667eea/ffffff?text=Featured+Product',
                'stock_quantity' => 10
            ];
        }

        $displayPrice = ($showSalePrice && isset($product->sale_price) && $product->sale_price) ? $product->sale_price : $product->price;
        $hasDiscount = $showSalePrice && isset($product->sale_price) && $product->sale_price && $product->sale_price < $product->price;
        $isOutOfStock = ($product->stock_quantity ?? 0) <= 0;

        $html = '<div class="featured-product-component" style="' . implode('; ', $spacingStyles) . '">';

        // Layout wrapper
        $flexDirection = $layout === 'image-left' ? 'row' : ($layout === 'image-right' ? 'row-reverse' : 'column');

        if ($layout === 'image-top') {
            $html .= '<div style="display: flex; flex-direction: column;">';
        } else {
            $html .= '<div style="display: flex; flex-direction: ' . $flexDirection . '; align-items: stretch; gap: 0;">';
        }

        // Image section
        $html .= '<div style="flex: 1;">';
        $html .= '<div style="position: relative; width: 100%; height: ' . ($layout === 'image-top' ? '400px' : '100%') . '; min-height: ' . ($layout !== 'image-top' ? '300px' : 'auto') . ';">';

        if ($showBadge && $badgeText) {
            $html .= '<div style="position: absolute; top: 20px; left: 20px; background-color: ' . $badgeColor . '; color: #ffffff; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: bold; z-index: 1; text-transform: uppercase; letter-spacing: 0.5px;">';
            $html .= htmlspecialchars($badgeText);
            $html .= '</div>';
        }

        $imageUrl = $product->main_image ?? '';
        if ($imageUrl && !str_starts_with($imageUrl, 'http') && !str_starts_with($imageUrl, '/')) {
            $imageUrl = '/storage/' . $imageUrl;
        }
        $html .= '<img src="' . htmlspecialchars($imageUrl) . '" alt="' . htmlspecialchars($product->name) . '" style="width: 100%; height: 100%; object-fit: cover; border-radius: ' . ($layout === 'image-top' ? '8px 8px 0 0' : '8px') . ';">';
        $html .= '</div></div>';

        // Content section
        $html .= '<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; padding: ' . ($layout === 'image-top' ? '30px 0 0 0' : '30px') . ';">';

        $html .= '<h2 style="font-size: 32px; font-weight: bold; margin-bottom: 16px; color: #212529; line-height: 1.2;">';
        $html .= htmlspecialchars($product->name);
        $html .= '</h2>';

        if ($showDescription && $product->description) {
            $html .= '<p style="font-size: 16px; color: #6c757d; margin-bottom: 24px; line-height: 1.6;">';
            $html .= htmlspecialchars($product->description);
            $html .= '</p>';
        }

        if ($showPrice) {
            $html .= '<div style="margin-bottom: 24px;">';
            $html .= '<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">';
            $html .= '<span style="font-size: 36px; font-weight: bold; color: ' . ($hasDiscount ? '#28a745' : '#212529') . ';">';
            $html .= htmlspecialchars($currencySymbol) . number_format($displayPrice, 2);
            $html .= '</span>';

            if ($hasDiscount) {
                $html .= '<span style="font-size: 24px; color: #6c757d; text-decoration: line-through;">';
                $html .= htmlspecialchars($currencySymbol) . number_format($product->price, 2);
                $html .= '</span>';
                $html .= '<span style="background-color: #28a745; color: #ffffff; padding: 4px 12px; border-radius: 4px; font-size: 14px; font-weight: bold;">';
                $html .= 'Save ' . htmlspecialchars($currencySymbol) . number_format($product->price - $product->sale_price, 2);
                $html .= '</span>';
            }

            $html .= '</div></div>';
        }

        if ($isOutOfStock) {
            $html .= '<div style="background-color: #dc3545; color: #ffffff; padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: bold; margin-bottom: 16px; display: inline-block;">';
            $html .= 'Out of Stock';
            $html .= '</div>';
        }

        $html .= '<button class="btn" style="background-color: ' . $buttonColor . '; color: #ffffff; border: none; padding: 14px 32px; font-size: 18px; font-weight: bold; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; width: fit-content;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
        $html .= htmlspecialchars($buttonText);
        $html .= '</button>';

        $html .= '</div>'; // Close content section
        $html .= '</div>'; // Close layout wrapper
        $html .= '</div>'; // Close component

        return $html;
    }
    }

    /**
     * Render AddToCart Component
     */
    if (!function_exists('renderAddToCart')) {
    function renderAddToCart($props, $websiteId = null, $currencySymbol = 'RM') {
        // Check if Product model exists
        if (!class_exists('\App\Models\Product')) {
            return '<div class="alert alert-warning" style="margin: 20px 0;">Add to Cart component requires E-commerce module</div>';
        }

        $productId = $props['productId'] ?? null;
        $showProductInfo = $props['showProductInfo'] ?? true;
        $showQuantitySelector = $props['showQuantitySelector'] ?? true;
        $buttonText = $props['buttonText'] ?? 'Add to Cart';
        $buttonColor = $props['buttonColor'] ?? '#667eea';
        $buttonSize = $props['buttonSize'] ?? 'medium';
        $layout = $props['layout'] ?? 'vertical';
        $backgroundColor = $props['backgroundColor'] ?? '#f8f9fa';
        $borderRadius = $props['borderRadius'] ?? '8px';

        $spacingStyles = getSpacingStyles($props);
        $spacingStyles[] = 'background-color: ' . $backgroundColor;
        $spacingStyles[] = 'border-radius: ' . $borderRadius;

        $buttonSizes = [
            'small' => 'padding: 8px 16px; font-size: 14px;',
            'medium' => 'padding: 12px 24px; font-size: 16px;',
            'large' => 'padding: 16px 32px; font-size: 18px;'
        ];

        // Fetch product
        $product = null;
        if ($productId) {
            $query = \App\Models\Product::where('id', $productId);
            // IMPORTANT: Filter by website_id for multi-tenancy
            if ($websiteId) {
                $query->where('website_id', $websiteId);
            }
            $product = $query->first();
        }

        // Use demo product if not found
        if (!$product) {
            $product = (object)[
                'name' => 'Sample Product',
                'price' => 49.99,
                'sale_price' => null,
                'main_image' => 'https://via.placeholder.com/120x120/667eea/ffffff?text=Product',
                'stock_quantity' => 10
            ];
        }

        $displayPrice = $product->sale_price ?? $product->price;
        $isOutOfStock = ($product->stock_quantity ?? 0) <= 0;

        $html = '<div class="add-to-cart-component" style="' . implode('; ', $spacingStyles) . '">';

        if ($layout === 'vertical') {
            // Product Info
            if ($showProductInfo) {
                $imageUrl = $product->main_image ?? '';
                if ($imageUrl && !str_starts_with($imageUrl, 'http') && !str_starts_with($imageUrl, '/')) {
                    $imageUrl = '/storage/' . $imageUrl;
                }
                $html .= '<div style="margin-bottom: 20px; display: flex; gap: 16px; align-items: center;">';
                $html .= '<img src="' . htmlspecialchars($imageUrl) . '" alt="' . htmlspecialchars($product->name) . '" style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #dee2e6;">';
                $html .= '<div style="flex: 1;">';
                $html .= '<h4 style="font-size: 18px; font-weight: bold; margin-bottom: 4px; color: #212529;">' . htmlspecialchars($product->name) . '</h4>';
                $html .= '<div style="font-size: 20px; font-weight: bold; color: #667eea;">' . htmlspecialchars($currencySymbol) . number_format($displayPrice, 2) . '</div>';
                $html .= '</div></div>';
            }

            // Quantity Selector
            if ($showQuantitySelector) {
                $html .= '<div style="margin-bottom: 16px;">';
                $html .= '<label style="font-size: 14px; font-weight: 600; margin-bottom: 8px; display: block; color: #495057;">Quantity</label>';
                $html .= '<div style="display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; width: fit-content;">';
                $html .= '<button type="button" onclick="this.nextElementSibling.stepDown()" style="border: none; background-color: #fff; padding: 12px 16px; cursor: pointer; font-size: 18px; color: #495057;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<i class="bi bi-dash"></i></button>';
                $html .= '<input type="number" value="1" min="1" style="width: 70px; border: none; border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; text-align: center; font-size: 18px; padding: 12px 8px; font-weight: 600;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<button type="button" onclick="this.previousElementSibling.stepUp()" style="border: none; background-color: #fff; padding: 12px 16px; cursor: pointer; font-size: 18px; color: #495057;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<i class="bi bi-plus"></i></button>';
                $html .= '</div></div>';
            }

            // Add to Cart Button
            $html .= '<button type="button" class="btn" style="background-color: ' . ($isOutOfStock ? '#6c757d' : $buttonColor) . '; color: #ffffff; border: none; ' . $buttonSizes[$buttonSize] . ' border-radius: 6px; cursor: ' . ($isOutOfStock ? 'not-allowed' : 'pointer') . '; transition: all 0.2s ease; font-weight: 600; width: 100%;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
            $html .= '<i class="bi bi-cart-plus me-2"></i>' . ($isOutOfStock ? 'Out of Stock' : htmlspecialchars($buttonText));
            $html .= '</button>';
        } elseif ($layout === 'horizontal') {
            // Product Info
            if ($showProductInfo) {
                $imageUrl = $product->main_image ?? '';
                if ($imageUrl && !str_starts_with($imageUrl, 'http') && !str_starts_with($imageUrl, '/')) {
                    $imageUrl = '/storage/' . $imageUrl;
                }
                $html .= '<div style="margin-bottom: 20px; display: flex; gap: 16px; align-items: center;">';
                $html .= '<img src="' . htmlspecialchars($imageUrl) . '" alt="' . htmlspecialchars($product->name) . '" style="width: 100px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid #dee2e6;">';
                $html .= '<div style="flex: 1;">';
                $html .= '<h4 style="font-size: 20px; font-weight: bold; margin-bottom: 8px; color: #212529;">' . htmlspecialchars($product->name) . '</h4>';
                $html .= '<div style="font-size: 24px; font-weight: bold; color: #667eea;">' . htmlspecialchars($currencySymbol) . number_format($displayPrice, 2) . '</div>';
                $html .= '</div></div>';
            }

            $html .= '<div style="display: flex; gap: 16px; align-items: end; flex-wrap: wrap;">';

            if ($showQuantitySelector) {
                $html .= '<div style="flex: 0 0 auto;">';
                $html .= '<label style="font-size: 14px; font-weight: 600; margin-bottom: 8px; display: block; color: #495057;">Quantity</label>';
                $html .= '<div style="display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden;">';
                $html .= '<button type="button" onclick="this.nextElementSibling.stepDown()" style="border: none; background-color: #fff; padding: 10px 14px; cursor: pointer; font-size: 16px; color: #495057;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<i class="bi bi-dash"></i></button>';
                $html .= '<input type="number" value="1" min="1" style="width: 60px; border: none; border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; text-align: center; font-size: 16px; padding: 10px 6px;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<button type="button" onclick="this.previousElementSibling.stepUp()" style="border: none; background-color: #fff; padding: 10px 14px; cursor: pointer; font-size: 16px; color: #495057;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<i class="bi bi-plus"></i></button>';
                $html .= '</div></div>';
            }

            $html .= '<div style="flex: 1;">';
            $html .= '<button type="button" class="btn" style="background-color: ' . ($isOutOfStock ? '#6c757d' : $buttonColor) . '; color: #ffffff; border: none; ' . $buttonSizes[$buttonSize] . ' border-radius: 6px; cursor: ' . ($isOutOfStock ? 'not-allowed' : 'pointer') . '; transition: all 0.2s ease; font-weight: 600; width: 100%;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
            $html .= '<i class="bi bi-cart-plus me-2"></i>' . ($isOutOfStock ? 'Out of Stock' : htmlspecialchars($buttonText));
            $html .= '</button></div>';

            $html .= '</div>';
        } else { // compact
            $html .= '<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">';

            if ($showQuantitySelector) {
                $html .= '<div style="display: flex; align-items: center; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden;">';
                $html .= '<button type="button" onclick="this.nextElementSibling.stepDown()" style="border: none; background-color: #fff; padding: 8px 12px; cursor: pointer; font-size: 16px; color: #495057;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<i class="bi bi-dash"></i></button>';
                $html .= '<input type="number" value="1" min="1" style="width: 50px; border: none; border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6; text-align: center; font-size: 16px; padding: 8px 4px;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<button type="button" onclick="this.previousElementSibling.stepUp()" style="border: none; background-color: #fff; padding: 8px 12px; cursor: pointer; font-size: 16px; color: #495057;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
                $html .= '<i class="bi bi-plus"></i></button>';
                $html .= '</div>';
            }

            $html .= '<button type="button" class="btn" style="background-color: ' . ($isOutOfStock ? '#6c757d' : $buttonColor) . '; color: #ffffff; border: none; ' . $buttonSizes[$buttonSize] . ' border-radius: 6px; cursor: ' . ($isOutOfStock ? 'not-allowed' : 'pointer') . '; transition: all 0.2s ease; font-weight: 600; flex: 1; min-width: 140px;" ' . ($isOutOfStock ? 'disabled' : '') . '>';
            $html .= '<i class="bi bi-cart-plus me-2"></i>' . ($isOutOfStock ? 'Out of Stock' : htmlspecialchars($buttonText));
            $html .= '</button>';

            $html .= '</div>';
        }

        $html .= '</div>';
        return $html;
    }
    }

    /**
     * Render ResourcesList Component
     */
    if (!function_exists('renderResourcesList')) {
    function renderResourcesList($props, $websiteId = null, $currencySymbol = 'RM') {
        // Check if BookingResource model exists
        if (!class_exists('\App\Models\BookingResource')) {
            return '<div class="alert alert-warning" style="margin: 20px 0;">Resources List component requires Booking module</div>';
        }

        $displayMode = $props['displayMode'] ?? 'all';
        $selectedResources = $props['selectedResources'] ?? [];
        $resourceTypes = $props['resourceTypes'] ?? [];
        $columns = $props['columns'] ?? 3;
        $showPrice = $props['showPrice'] ?? true;
        $showCapacity = $props['showCapacity'] ?? true;
        $showDescription = $props['showDescription'] ?? true;
        $showType = $props['showType'] ?? true;
        $showBookButton = $props['showBookButton'] ?? true;
        $bookButtonText = $props['bookButtonText'] ?? 'Book Now';
        $bookButtonColor = $props['bookButtonColor'] ?? '#667eea';
        $cardStyle = $props['cardStyle'] ?? 'modern';
        $limit = $props['limit'] ?? 12;
        $sortBy = $props['sortBy'] ?? 'name';

        $spacingStyles = getSpacingStyles($props);

        // Fetch resources based on display mode
        $query = \App\Models\BookingResource::query();

        // IMPORTANT: Filter by website_id for multi-tenancy
        if ($websiteId) {
            $query->where('website_id', $websiteId);
        }

        if ($displayMode === 'selected' && !empty($selectedResources)) {
            $query->whereIn('id', $selectedResources);
        }

        if (!empty($resourceTypes)) {
            $query->whereIn('resource_type', $resourceTypes);
        }

        // Apply sorting
        switch ($sortBy) {
            case 'name':
                $query->orderBy('name', 'asc');
                break;
            case 'price_low':
                $query->orderBy('base_price', 'asc');
                break;
            case 'price_high':
                $query->orderBy('base_price', 'desc');
                break;
            case 'newest':
                $query->orderBy('created_at', 'desc');
                break;
        }

        $resources = $query->limit($limit)->get();

        if ($resources->isEmpty()) {
            return '<div class="text-center py-5" style="' . implode('; ', $spacingStyles) . '">
                <i class="bi bi-bookmark-x" style="font-size: 4rem; color: #dee2e6;"></i>
                <h4 class="mt-3 text-muted">No Resources Available</h4>
                <p class="text-muted">' . ($displayMode === 'selected' && empty($selectedResources) ? 'Please select resources to display' : 'No resources found matching your criteria') . '</p>
            </div>';
        }

        $html = '<div class="resources-list-component" style="' . implode('; ', $spacingStyles) . '">';
        $html .= '<div class="row g-4">';

        foreach ($resources as $resource) {
            $colClass = 'col-md-' . (12 / $columns);

            $cardStyleCSS = match($cardStyle) {
                'minimal' => 'border-radius: 8px; overflow: hidden; background-color: #f8f9fa; border: none;',
                'bordered' => 'border-radius: 8px; overflow: hidden; background-color: #fff; border: 2px solid #e9ecef;',
                default => 'border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; background-color: #fff; border: none;'
            };

            $html .= '<div class="' . $colClass . '">';
            $html .= '<div class="resource-card" style="' . $cardStyleCSS . '">';

            // Image
            $html .= '<div style="position: relative; width: 100%; height: 220px; background-color: #f0f0f0;">';

            if ($resource->main_image) {
                $html .= '<img src="/storage/' . $resource->main_image . '" alt="' . htmlspecialchars($resource->name) . '" style="width: 100%; height: 100%; object-fit: cover;">';
            } else {
                $iconClass = match($resource->resource_type) {
                    'property' => 'bi-house',
                    'court' => 'bi-dribbble',
                    'gym' => 'bi-heart-pulse',
                    'room' => 'bi-door-open',
                    'equipment' => 'bi-tools',
                    'service' => 'bi-gear',
                    'vehicle' => 'bi-car-front',
                    'facility' => 'bi-building',
                    'appointment' => 'bi-calendar-check',
                    'class' => 'bi-mortarboard',
                    default => 'bi-bookmark'
                };

                $html .= '<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #667eea; color: #ffffff;">';
                $html .= '<i class="bi ' . $iconClass . '" style="font-size: 4rem;"></i>';
                $html .= '</div>';
            }

            // Status Badge
            if (!$resource->is_active) {
                $html .= '<div style="position: absolute; top: 12px; right: 12px; background-color: #dc3545; color: #ffffff; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;">Unavailable</div>';
            }

            // Type Badge
            if ($showType) {
                $typeDisplay = match($resource->resource_type) {
                    'property' => 'Property',
                    'court' => 'Sports Court',
                    'gym' => 'Gym/Fitness',
                    'room' => 'Room/Space',
                    'equipment' => 'Equipment',
                    'service' => 'Service',
                    'vehicle' => 'Vehicle',
                    'facility' => 'Facility',
                    'appointment' => 'Appointment',
                    'class' => 'Class/Course',
                    default => ucfirst($resource->resource_type)
                };

                $iconClass = match($resource->resource_type) {
                    'property' => 'bi-house',
                    'court' => 'bi-dribbble',
                    'gym' => 'bi-heart-pulse',
                    'room' => 'bi-door-open',
                    'equipment' => 'bi-tools',
                    'service' => 'bi-gear',
                    'vehicle' => 'bi-car-front',
                    'facility' => 'bi-building',
                    'appointment' => 'bi-calendar-check',
                    'class' => 'bi-mortarboard',
                    default => 'bi-bookmark'
                };

                $html .= '<div style="position: absolute; top: 12px; left: 12px; background-color: rgba(0,0,0,0.6); color: #ffffff; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; backdrop-filter: blur(4px);">';
                $html .= '<i class="bi ' . $iconClass . ' me-1"></i>' . $typeDisplay;
                $html .= '</div>';
            }

            $html .= '</div>'; // Close image

            // Details
            $html .= '<div style="padding: 20px;">';

            $html .= '<h4 style="font-size: 20px; font-weight: bold; margin-bottom: 8px; color: #212529; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">';
            $html .= htmlspecialchars($resource->name);
            $html .= '</h4>';

            if ($resource->resource_category) {
                $html .= '<div style="font-size: 13px; color: #6c757d; margin-bottom: 12px; font-weight: 500;">';
                $html .= htmlspecialchars($resource->resource_category);
                $html .= '</div>';
            }

            if ($showDescription && $resource->short_description) {
                $html .= '<p style="font-size: 14px; color: #6c757d; margin-bottom: 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">';
                $html .= htmlspecialchars($resource->short_description);
                $html .= '</p>';
            }

            // Price and meta
            $html .= '<div style="margin-bottom: 16px;">';

            if ($showPrice && $resource->base_price) {
                $priceType = $resource->price_type ? str_replace('per_', '', $resource->price_type) : '';
                $html .= '<div style="font-size: 24px; font-weight: bold; color: #667eea; margin-bottom: 4px;">';
                $html .= htmlspecialchars($currencySymbol) . ' ' . number_format($resource->base_price, 2);
                if ($priceType) {
                    $html .= '<span style="font-size: 14px; font-weight: normal; color: #6c757d; margin-left: 6px;">per ' . $priceType . '</span>';
                }
                $html .= '</div>';
            }

            $html .= '<div style="display: flex; gap: 16px; font-size: 13px; color: #6c757d; flex-wrap: wrap;">';

            if ($showCapacity && $resource->capacity) {
                $html .= '<div><i class="bi bi-people me-1"></i>Up to ' . $resource->capacity . ' ' . ($resource->capacity === 1 ? 'person' : 'people') . '</div>';
            }

            if ($resource->min_booking_duration) {
                $html .= '<div><i class="bi bi-clock me-1"></i>Min ' . $resource->min_booking_duration . ' min</div>';
            }

            $html .= '</div></div>';

            // Amenities
            if ($resource->amenities && is_array($resource->amenities)) {
                $html .= '<div style="margin-bottom: 16px; display: flex; gap: 6px; flex-wrap: wrap;">';
                foreach (array_slice($resource->amenities, 0, 3) as $amenity) {
                    $html .= '<span style="background-color: #e9ecef; color: #495057; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 500;">';
                    $html .= htmlspecialchars($amenity);
                    $html .= '</span>';
                }
                if (count($resource->amenities) > 3) {
                    $html .= '<span style="background-color: #e9ecef; color: #495057; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 500;">+' . (count($resource->amenities) - 3) . ' more</span>';
                }
                $html .= '</div>';
            }

            // Book Button
            if ($showBookButton && $resource->is_active) {
                $html .= '<button class="btn w-100" style="background-color: ' . $bookButtonColor . '; color: #ffffff; border: none; padding: 10px 20px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer;">';
                $html .= htmlspecialchars($bookButtonText);
                $html .= '</button>';
            }

            $html .= '</div>'; // Close details
            $html .= '</div>'; // Close card
            $html .= '</div>'; // Close column
        }

        $html .= '</div></div>'; // Close row and component

        return $html;
    }
    } // End if (!function_exists('renderNode'))
@endphp

@if($rootNode && isset($builderData))
    {{-- Render the page content from Craft.js data --}}
    @php
        // Check if ROOT is a Container component
        $rootType = $rootNode['type']['resolvedName'] ?? null;
        $rootProps = $rootNode['props'] ?? [];
        $rootChildren = $rootNode['nodes'] ?? [];
    @endphp

    @if($rootType === 'Container')
        {{-- Render ROOT Container with its props --}}
        @php
            $width = $rootProps['width'] ?? 'fluid';
            $customWidth = $rootProps['customWidth'] ?? '1140px';
            $padding = $rootProps['padding'] ?? '20px';
            $margin = $rootProps['margin'] ?? '0px';
            $backgroundColor = $rootProps['backgroundColor'] ?? 'transparent';

            $containerClass = $width === 'fluid' ? 'container-fluid' : 'container';

            // Build inline styles
            $styles = [];
            $styles[] = 'padding: ' . htmlspecialchars($padding);

            // Add margin
            if ($width === 'fixed') {
                // For fixed width, handle margin specially to preserve centering
                $margins = explode(' ', trim($margin));
                if (count($margins) === 1) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
                } else if (count($margins) === 2) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto';
                } else if (count($margins) === 4) {
                    $styles[] = 'margin: ' . htmlspecialchars($margins[0]) . ' auto ' . htmlspecialchars($margins[2]) . ' auto';
                } else {
                    $styles[] = 'margin-left: auto';
                    $styles[] = 'margin-right: auto';
                }
                $styles[] = 'max-width: ' . htmlspecialchars($customWidth);
            } else {
                // Fluid width, use margin as-is
                $styles[] = 'margin: ' . htmlspecialchars($margin);
            }

            // Only add background color if not transparent
            if ($backgroundColor && $backgroundColor !== 'transparent') {
                $styles[] = 'background-color: ' . htmlspecialchars($backgroundColor);
            }

            $styleAttr = implode('; ', $styles);
        @endphp

        <div class="{{ $containerClass }}" style="{{ $styleAttr }}">
            @foreach($rootChildren as $nodeId)
                @php
                    \Log::info('Rendering child', ['nodeId' => $nodeId, 'type' => $builderData[$nodeId]['type']['resolvedName'] ?? 'unknown']);
                    \Log::info('About to call renderNode function...', ['function_exists' => function_exists('renderNode')]);
                    $output = renderNode($nodeId, $builderData, $currentWebsiteId, $currencySymbol, $websiteSubdomain);
                    \Log::info('renderNode returned', ['output_length' => strlen($output), 'output_preview' => substr($output, 0, 100)]);
                @endphp
                {!! $output !!}
            @endforeach
        </div>
    @else
        {{-- ROOT is not a Container, render children directly --}}
        @foreach($rootChildren as $nodeId)
            {!! renderNode($nodeId, $builderData, $currentWebsiteId, $currencySymbol, $websiteSubdomain) !!}
        @endforeach
    @endif
@else
    {{-- Fallback if no builder data --}}
    <div class="container py-5">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i>
            This page is empty. Please edit it using the Page Builder V2 to add content.
        </div>
    </div>
@endif