<?php

namespace WooNooW\Frontend;

/**
 * Page SSR (Server-Side Rendering)
 * Renders page sections as static HTML for search engine crawlers
 */
class PageSSR
{
    /**
     * Render page structure to HTML
     * 
     * @param array $structure Page structure with sections
     * @param array|null $post_data Post data for dynamic placeholders
     * @return string Rendered HTML
     */
    public static function render($structure, $post_data = null)
    {
        if (empty($structure) || empty($structure['sections'])) {
            return '';
        }

        $html = '';

        foreach ($structure['sections'] as $section) {
            $html .= self::render_section($section, $post_data);
        }

        return $html;
    }

    /**
     * Render a single section to HTML
     * 
     * @param array $section Section data
     * @param array|null $post_data Post data for placeholders
     * @return string Section HTML
     */
    public static function render_section($section, $post_data = null)
    {
        $type = $section['type'] ?? 'content';
        $props = $section['props'] ?? [];
        $layout = $section['layoutVariant'] ?? 'default';
        $color_scheme = $section['colorScheme'] ?? 'default';

        // Resolve all props (replace dynamic placeholders with actual values)
        $resolved_props = self::resolve_props($props, $post_data);

        // Generate section ID for anchor links
        $section_id = $section['id'] ?? 'section-' . uniqid();

        $element_styles = $section['elementStyles'] ?? [];
        $styles = $section['styles'] ?? []; // Section wrapper styles (bg, overlay)

        // Render based on section type
        $method = 'render_' . str_replace('-', '_', $type);
        if (method_exists(__CLASS__, $method)) {
            return self::$method($resolved_props, $layout, $color_scheme, $section_id, $element_styles, $styles);
        }

        // Fallback: generic section wrapper
        return self::render_generic($resolved_props, $type, $section_id);
    }

    /**
     * Resolve props - replace dynamic placeholders with actual values
     *
     * @param array $props Section props
     * @param array|null $post_data Post data
     * @param array $options Resolution options
     * @return array Resolved props with actual values
     */
    public static function resolve_props($props, $post_data = null, $options = [])
    {
        $resolved = [];
        $options = wp_parse_args($options, [
            'validate_types' => true,
            'use_fallbacks' => true,
        ]);

        foreach ($props as $key => $prop) {
            if (!is_array($prop)) {
                $resolved[$key] = $prop;
                continue;
            }

            $type = $prop['type'] ?? 'static';

            if ($type === 'static') {
                $resolved[$key] = $prop['value'] ?? '';
            } elseif ($type === 'dynamic' && $post_data) {
                $source = $prop['source'] ?? '';
                $resolved[$key] = PlaceholderRenderer::get_value($source, $post_data, [
                    'validate_type' => $options['validate_types'],
                    'use_fallback' => $options['use_fallbacks'],
                ]);
            } elseif ($options['use_fallbacks']) {
                $resolved[$key] = $prop['value'] ?? PlaceholderRenderer::get_fallback($key);
            } else {
                $resolved[$key] = $prop['value'] ?? '';
            }
        }

        return $resolved;
    }
    
    // ========================================
    // Section Renderers
    // ========================================

    /**
     * Helper to generate style attribute string
     */
    private static function generate_style_attr($styles)
    {
        if (empty($styles)) return '';

        $css = [];
        if (!empty($styles['color'])) $css[] = "color: {$styles['color']}";
        if (!empty($styles['backgroundColor'])) $css[] = "background-color: {$styles['backgroundColor']}";
        if (!empty($styles['fontSize'])) $css[] = "font-size: {$styles['fontSize']}"; // Note: assumes value has unit or is handled by class, but inline style works for specific values
        // Add more mapping if needed, or rely on frontend to send valid CSS values

        return empty($css) ? '' : 'style="' . implode(';', $css) . '"';
    }

    /**
     * Render Hero section
     */
    public static function render_hero($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $title = esc_html($props['title'] ?? '');
        $subtitle = esc_html($props['subtitle'] ?? '');
        $image = esc_url($props['image'] ?? '');
        $cta_text = esc_html($props['cta_text'] ?? '');
        $cta_url = esc_url($props['cta_url'] ?? '');

        // Section Styles (Background & Spacing)
        $bg_type = $section_styles['backgroundType'] ?? 'solid';
        $bg_color = $section_styles['backgroundColor'] ?? '';
        $bg_image = $section_styles['backgroundImage'] ?? '';
        $overlay_opacity = $section_styles['backgroundOverlay'] ?? 0;
        $pt = $section_styles['paddingTop'] ?? '';
        $pb = $section_styles['paddingBottom'] ?? '';
        $height_preset = $section_styles['heightPreset'] ?? '';

        $section_css = "";
        if ($bg_type === 'gradient') {
            $from = $section_styles['gradientFrom'] ?? '#9333ea';
            $to = $section_styles['gradientTo'] ?? '#3b82f6';
            $angle = $section_styles['gradientAngle'] ?? 135;
            $section_css .= "background: linear-gradient({$angle}deg, {$from}, {$to});";
        } elseif ($bg_type === 'image' && $bg_image) {
            $section_css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        } else {
            if ($bg_color) $section_css .= "background-color: {$bg_color};";
            // Legacy: image without explicit type
            if ($bg_image && !$bg_type) $section_css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        }
        if ($pt) $section_css .= "padding-top: {$pt};";
        if ($pb) $section_css .= "padding-bottom: {$pb};";
        if ($height_preset === 'screen') $section_css .= "min-height: 100vh; display: flex; align-items: center;";

        $section_attr = $section_css ? "style=\"{$section_css}\"" : "";

        $html = "<section id=\"{$id}\" class=\"wn-section wn-hero wn-hero--{$layout} wn-scheme--{$color_scheme}\" {$section_attr}>";

        // Overlay
        if ($overlay_opacity > 0) {
            $opacity = $overlay_opacity / 100;
            $html .= "<div class=\"wn-hero__overlay\" style=\"background-color: rgba(0,0,0,{$opacity}); position: absolute; inset: 0;\"></div>";
        }

        // Element Styles
        $title_style = self::generate_style_attr($element_styles['title'] ?? []);
        $subtitle_style = self::generate_style_attr($element_styles['subtitle'] ?? []);
        $cta_style = self::generate_style_attr($element_styles['cta_text'] ?? []); // Button

        // Content Wrapper
        $content_width = $section_styles['contentWidth'] ?? 'contained';
        $wrapper_class = $content_width === 'full' ? 'w-full' : 'container max-w-7xl mx-auto px-4';

        $html .= "<div class=\"wn-hero__content-wrapper {$wrapper_class}\" style=\"position: relative; z-index: 10;\">";

        // Image (if not background) - Inside Content Wrapper for Proper Alignment
        if ($image && !$bg_image && $layout !== 'default') {
            $html .= "<img src=\"{$image}\" alt=\"{$title}\" class=\"wn-hero__image\" />";
        }

        $html .= '<div class="wn-hero__content">';
        if ($title) {
            $html .= "<h1 class=\"wn-hero__title\" {$title_style}>{$title}</h1>";
        }
        if ($subtitle) {
            $html .= "<p class=\"wn-hero__subtitle\" {$subtitle_style}>{$subtitle}</p>";
        }
        if ($cta_text && $cta_url) {
            $html .= "<a href=\"{$cta_url}\" class=\"wn-hero__cta\" {$cta_style}>{$cta_text}</a>";
        }
        $html .= '</div>';
        $html .= '</div>';
        $html .= '</section>';

        return $html;
    }


    /**
     * Universal Row Renderer (Shared logic for Content & ImageText)
     */
    private static function render_universal_row($props, $layout, $color_scheme, $element_styles, $options = [])
    {
        $title = esc_html($props['title']['value'] ?? ($props['title'] ?? ''));
        $text = $props['text']['value'] ?? ($props['text'] ?? ($props['content']['value'] ?? ($props['content'] ?? ''))); // Handle both props/values
        $image = esc_url($props['image']['value'] ?? ($props['image'] ?? ''));

        // Options
        $has_image = !empty($image);
        $image_pos = $layout ?: 'left';

        // Element Styles
        $title_style = self::generate_style_attr($element_styles['title'] ?? []);
        $text_style = self::generate_style_attr($element_styles['text'] ?? ($element_styles['content'] ?? []));

        $contentWidth = $options['contentWidth'] ?? 'contained';

        // Wrapper Classes
        $wrapper_class = $contentWidth === 'full' ? "wn-w-full" : "wn-max-w-7xl wn-mx-auto wn-px-4";
        $grid_class = "wn-mx-auto";

        if ($has_image && in_array($image_pos, ['left', 'right', 'image-left', 'image-right'])) {
            $grid_class .= " wn-grid wn-grid-cols-1 wn-lg-grid-cols-2 wn-gap-12 wn-items-center";
        } else {
            $grid_class .= " wn-max-w-4xl";
        }

        $html = "<div class=\"{$wrapper_class}\">";
        $html .= "<div class=\"{$grid_class}\">";

        // Image Output
        $image_html = "";
        if ($current_pos_right = ($image_pos === 'right' || $image_pos === 'image-right')) {
            $order_class = 'wn-lg-order-last';
        } else {
            $order_class = 'wn-lg-order-first';
        }

        if ($has_image) {
            $image_html = "<div class=\"wn-relative wn-w-full wn-aspect-[4/3] wn-rounded-2xl wn-overflow-hidden wn-shadow-lg {$order_class}\">";
            $image_html .= "<img src=\"{$image}\" alt=\"{$title}\" class=\"wn-absolute wn-inset-0 wn-w-full wn-h-full wn-object-cover\" />";
            $image_html .= "</div>";
        }

        // Content Output
        $content_html = "<div class=\"wn-flex wn-flex-col\">";
        if ($title) {
            $content_html .= "<h2 class=\"wn-text-3xl wn-font-bold wn-mb-6\" {$title_style}>{$title}</h2>";
        }
        if ($text) {
            // Apply prose classes similar to React
            $content_html .= "<div class=\"wn-prose wn-prose-lg wn-max-w-none\" {$text_style}>{$text}</div>";
        }
        $content_html .= "</div>";

        // Render based on order (Grid handles order via CSS classes for left/right, but fallback for DOM order)
        if ($has_image) {
            // For grid layout, we output both. CSS order handles visual.
            $html .= $image_html . $content_html;
        } else {
            $html .= $content_html;
        }

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

        return $html;
    }

    /**
     * Render Content section (for post body, rich text)
     */
    public static function render_content($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $content = $props['content'] ?? '';
        // Apply WordPress content filters (shortcodes, autop, etc.)
        $content = apply_filters('the_content', $content);
        // Normalize prop structure for universal renderer if needed
        if (is_string($props['content'])) {
            $props['content'] = ['value' => $content];
        } else {
            $props['content']['value'] = $content;
        }

        // Section Styles (Background & Spacing)
        $bg_type = $section_styles['backgroundType'] ?? 'solid';
        $bg_color = $section_styles['backgroundColor'] ?? '';
        $gradient_from = $section_styles['gradientFrom'] ?? '#9333ea';
        $gradient_to = $section_styles['gradientTo'] ?? '#3b82f6';
        $gradient_angle = $section_styles['gradientAngle'] ?? 135;
        $bg_image = $section_styles['backgroundImage'] ?? '';
        $overlay_opacity = $section_styles['backgroundOverlay'] ?? 0;
        $pt = $section_styles['paddingTop'] ?? '';
        $pb = $section_styles['paddingBottom'] ?? '';
        $content_width = $section_styles['contentWidth'] ?? 'contained';
        $height_preset = $section_styles['heightPreset'] ?? 'default';

        $css = "";
        if ($bg_type === 'gradient') {
            $css .= "background: linear-gradient({$gradient_angle}deg, {$gradient_from}, {$gradient_to});";
        } elseif ($bg_image) {
            $css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        } elseif ($bg_color) {
            $css .= "background-color: {$bg_color};";
        }

        // Height Logic
        $preset_padding = '';
        if ($height_preset === 'screen') {
            $css .= "min-height: 100vh; display: flex; align-items: center;";
            $preset_padding = '5rem';
        } elseif ($height_preset === 'small') {
            $preset_padding = '2rem';
        } elseif ($height_preset === 'large') {
            $preset_padding = '8rem';
        } elseif ($height_preset === 'medium') {
            $preset_padding = '4rem';
        } else {
            $preset_padding = '4rem 1rem';
        }

        if ($pt) {
            $css .= "padding-top: {$pt};";
        } elseif ($preset_padding) {
            $css .= "padding-top: {$preset_padding};";
        }

        if ($pb) {
            $css .= "padding-bottom: {$pb};";
        } elseif ($preset_padding) {
            $css .= "padding-bottom: {$preset_padding};";
        }

        $style_attr = $css ? "style=\"{$css}\"" : "";

        // Overlay
        $overlay_html = '';
        if ($overlay_opacity > 0) {
            $opacity = $overlay_opacity / 100;
            $overlay_html = "<div class=\"wn-content__overlay\" style=\"background-color: rgba(0,0,0,{$opacity}); position: absolute; inset: 0;\"></div>";
        }

        $inner_html = self::render_universal_row($props, 'left', $color_scheme, $element_styles, ['contentWidth' => $content_width]);

        return "<section id=\"{$id}\" class=\"wn-section wn-content wn-scheme--{$color_scheme}\" {$style_attr}>{$overlay_html}<div style=\"position: relative; z-index: 10;\">{$inner_html}</div></section>";
    }

    /**
     * Render Image + Text section
     */
    public static function render_image_text($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $bg_type = $section_styles['backgroundType'] ?? 'solid';
        $bg_color = $section_styles['backgroundColor'] ?? '';
        $gradient_from = $section_styles['gradientFrom'] ?? '#9333ea';
        $gradient_to = $section_styles['gradientTo'] ?? '#3b82f6';
        $gradient_angle = $section_styles['gradientAngle'] ?? 135;
        $bg_image = $section_styles['backgroundImage'] ?? '';
        $overlay_opacity = $section_styles['backgroundOverlay'] ?? 0;
        $pt = $section_styles['paddingTop'] ?? '';
        $pb = $section_styles['paddingBottom'] ?? '';
        $content_width = $section_styles['contentWidth'] ?? 'contained';
        $height_preset = $section_styles['heightPreset'] ?? 'default';

        $css = "";
        if ($bg_type === 'gradient') {
            $css .= "background: linear-gradient({$gradient_angle}deg, {$gradient_from}, {$gradient_to});";
        } elseif ($bg_image) {
            $css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        } elseif ($bg_color) {
            $css .= "background-color: {$bg_color};";
        }

        // Height Logic
        $preset_padding = '';
        if ($height_preset === 'screen') {
            $css .= "min-height: 100vh; display: flex; align-items: center;";
            $preset_padding = '5rem';
        } elseif ($height_preset === 'small') {
            $preset_padding = '2rem';
        } elseif ($height_preset === 'large') {
            $preset_padding = '8rem';
        } elseif ($height_preset === 'medium') {
            $preset_padding = '4rem';
        } else {
            $preset_padding = '4rem 1rem';
        }

        if ($pt) {
            $css .= "padding-top: {$pt};";
        } elseif ($preset_padding) {
            $css .= "padding-top: {$preset_padding};";
        }

        if ($pb) {
            $css .= "padding-bottom: {$pb};";
        } elseif ($preset_padding) {
            $css .= "padding-bottom: {$preset_padding};";
        }
        $style_attr = $css ? "style=\"{$css}\"" : "";

        // Overlay
        $overlay_html = '';
        if ($overlay_opacity > 0) {
            $opacity = $overlay_opacity / 100;
            $overlay_html = "<div class=\"wn-image-text__overlay\" style=\"background-color: rgba(0,0,0,{$opacity}); position: absolute; inset: 0;\"></div>";
        }

        $inner_html = self::render_universal_row($props, $layout, $color_scheme, $element_styles, ['contentWidth' => $content_width]);

        return "<section id=\"{$id}\" class=\"wn-section wn-image-text wn-scheme--{$color_scheme}\" {$style_attr}>{$overlay_html}<div style=\"position: relative; z-index: 10;\">{$inner_html}</div></section>";
    }

    /**
     * Render Feature Grid section
     */
    public static function render_feature_grid($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $heading = esc_html($props['heading'] ?? '');
        $items = $props['items'] ?? ($props['features'] ?? []);
        if (!is_array($items)) {
            $items = [];
        }

        // Section Styles (Background & Spacing)
        $bg_type = $section_styles['backgroundType'] ?? 'solid';
        $bg_color = $section_styles['backgroundColor'] ?? '';
        $gradient_from = $section_styles['gradientFrom'] ?? '#9333ea';
        $gradient_to = $section_styles['gradientTo'] ?? '#3b82f6';
        $gradient_angle = $section_styles['gradientAngle'] ?? 135;
        $bg_image = $section_styles['backgroundImage'] ?? '';
        $overlay_opacity = $section_styles['backgroundOverlay'] ?? 0;
        $pt = $section_styles['paddingTop'] ?? '';
        $pb = $section_styles['paddingBottom'] ?? '';
        $content_width = $section_styles['contentWidth'] ?? 'contained';
        $height_preset = $section_styles['heightPreset'] ?? 'default';

        $section_css = '';
        if ($bg_type === 'gradient') {
            $section_css .= "background: linear-gradient({$gradient_angle}deg, {$gradient_from}, {$gradient_to});";
        } elseif ($bg_image) {
            $section_css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        } elseif ($bg_color) {
            $section_css .= "background-color: {$bg_color};";
        }

        // Height presets
        $height_classes = '';
        switch ($height_preset) {
            case 'small':
                $height_classes = 'py-8 md:py-12';
                break;
            case 'medium':
                $height_classes = 'py-16 md:py-24';
                break;
            case 'large':
                $height_classes = 'py-24 md:py-36';
                break;
            case 'fullscreen':
                $section_css .= "min-height: 100vh; display: flex; align-items: center;";
                break;
            default:
                $height_classes = 'py-12 md:py-20';
        }

        // Padding overrides
        if ($pt) $section_css .= "padding-top: {$pt};";
        if ($pb) $section_css .= "padding-bottom: {$pb};";

        $section_attr = $section_css ? "style=\"{$section_css}\"" : "";
        $wrapper_class = $content_width === 'full' ? 'w-full' : 'container max-w-7xl mx-auto px-4';

        $html = "<section id=\"{$id}\" class=\"wn-section wn-feature-grid wn-feature-grid--{$layout} wn-scheme--{$color_scheme} {$height_classes}\" {$section_attr}>";

        // Overlay
        if ($overlay_opacity > 0) {
            $opacity = $overlay_opacity / 100;
            $html .= "<div class=\"wn-feature-grid__overlay\" style=\"background-color: rgba(0,0,0,{$opacity}); position: absolute; inset: 0;\"></div>";
        }

        $html .= '<div class="wn-feature-grid__inner ' . esc_attr($wrapper_class) . '" style="position: relative; z-index: 10;">';

        if ($heading) {
            $heading_style = self::generate_style_attr($element_styles['heading'] ?? []);
            $html .= "<h2 class=\"wn-feature-grid__heading text-center mb-10\" {$heading_style}>{$heading}</h2>";
        }

        // Feature Item Styles (Card)
        $item_style_attr = self::generate_style_attr($element_styles['feature_item'] ?? []);
        $item_bg = $element_styles['feature_item']['backgroundColor'] ?? '';

        // Grid columns
        $grid_cols = 'grid-cols-1 md:grid-cols-3';
        if ($layout === 'grid-2') {
            $grid_cols = 'grid-cols-1 md:grid-cols-2';
        } elseif ($layout === 'grid-4') {
            $grid_cols = 'grid-cols-2 lg:grid-cols-4';
        }

        $html .= '<div class="wn-feature-grid__items grid gap-6 ' . esc_attr($grid_cols) . '">';
        foreach ($items as $item) {
            $item_title = esc_html($item['title'] ?? '');
            $item_desc = esc_html($item['description'] ?? '');
            $item_icon = esc_html($item['icon'] ?? '');

            // Background color for card
            $card_style = '';
            if ($item_bg) {
                $card_style = "background-color: {$item_bg};";
            }

            $html .= "<div class=\"wn-feature-grid__item p-6 rounded-xl shadow-lg\" " . ($card_style ? "style=\"{$card_style}\"" : "") . ">";

            // Render Icon SVG
            if ($item_icon) {
                $icon_svg = self::get_icon_svg($item_icon);
                if ($icon_svg) {
                    $html .= "<div class=\"wn-feature-grid__icon mb-4 inline-block p-3 rounded-full bg-primary/10 text-primary\">{$icon_svg}</div>";
                }
            }

            if ($item_title) {
                $f_title_style = self::generate_style_attr($element_styles['feature_title'] ?? []);
                $html .= "<h3 class=\"wn-feature-grid__item-title text-xl font-semibold mb-3\" {$f_title_style}>{$item_title}</h3>";
            }
            if ($item_desc) {
                $f_desc_style = self::generate_style_attr($element_styles['feature_description'] ?? []);
                $html .= "<p class=\"wn-feature-grid__item-desc text-gray-600\" {$f_desc_style}>{$item_desc}</p>";
            }
            $html .= '</div>';
        }
        $html .= '</div></div></section>';

        return $html;
    }

    /**
     * Render CTA Banner section
     */
    public static function render_cta_banner($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $title = esc_html($props['title'] ?? '');
        $text = esc_html($props['text'] ?? '');
        $button_text = esc_html($props['button_text'] ?? '');
        $button_url = esc_url($props['button_url'] ?? '');

        // Section Styles (Background & Spacing)
        $bg_type = $section_styles['backgroundType'] ?? 'solid';
        $bg_color = $section_styles['backgroundColor'] ?? '';
        $gradient_from = $section_styles['gradientFrom'] ?? '#9333ea';
        $gradient_to = $section_styles['gradientTo'] ?? '#3b82f6';
        $gradient_angle = $section_styles['gradientAngle'] ?? 135;
        $bg_image = $section_styles['backgroundImage'] ?? '';
        $pt = $section_styles['paddingTop'] ?? '';
        $pb = $section_styles['paddingBottom'] ?? '';
        $content_width = $section_styles['contentWidth'] ?? 'contained';

        $section_css = '';
        if ($bg_type === 'gradient') {
            $section_css .= "background: linear-gradient({$gradient_angle}deg, {$gradient_from}, {$gradient_to});";
        } elseif ($bg_image) {
            $section_css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        } elseif ($bg_color) {
            $section_css .= "background-color: {$bg_color};";
        }
        if ($pt) $section_css .= "padding-top: {$pt};";
        if ($pb) $section_css .= "padding-bottom: {$pb};";

        $section_attr = $section_css ? "style=\"{$section_css}\"" : "";
        $wrapper_class = $content_width === 'full' ? 'w-full' : 'container max-w-5xl mx-auto px-4';

        $html = "<section id=\"{$id}\" class=\"wn-section wn-cta-banner wn-cta-banner--{$layout} wn-scheme--{$color_scheme}\" {$section_attr}>";
        $html .= '<div class="wn-cta-banner__content ' . esc_attr($wrapper_class) . '">';

        if ($title) {
            $title_style = self::generate_style_attr($element_styles['title'] ?? []);
            $html .= "<h2 class=\"wn-cta-banner__title\" {$title_style}>{$title}</h2>";
        }
        if ($text) {
            $text_style = self::generate_style_attr($element_styles['text'] ?? []);
            $html .= "<p class=\"wn-cta-banner__text\" {$text_style}>{$text}</p>";
        }
        if ($button_text && $button_url) {
            $btn_style = self::generate_style_attr($element_styles['button_text'] ?? []);
            $html .= "<a href=\"{$button_url}\" class=\"wn-cta-banner__button\" {$btn_style}>{$button_text}</a>";
        }

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

        return $html;
    }

    /**
     * Render Contact Form section
     */
    public static function render_contact_form($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $title = esc_html($props['title'] ?? '');
        $webhook_url = esc_url($props['webhook_url'] ?? '');
        $redirect_url = esc_url($props['redirect_url'] ?? '');
        $fields = is_array($props['fields'] ?? null) ? $props['fields'] : ['name', 'email', 'message'];

        // Section Styles (Background & Spacing)
        $bg_type = $section_styles['backgroundType'] ?? 'solid';
        $bg_color = $section_styles['backgroundColor'] ?? '';
        $gradient_from = $section_styles['gradientFrom'] ?? '#9333ea';
        $gradient_to = $section_styles['gradientTo'] ?? '#3b82f6';
        $gradient_angle = $section_styles['gradientAngle'] ?? 135;
        $bg_image = $section_styles['backgroundImage'] ?? '';
        $pt = $section_styles['paddingTop'] ?? '';
        $pb = $section_styles['paddingBottom'] ?? '';
        $content_width = $section_styles['contentWidth'] ?? 'contained';

        $section_css = '';
        if ($bg_type === 'gradient') {
            $section_css .= "background: linear-gradient({$gradient_angle}deg, {$gradient_from}, {$gradient_to});";
        } elseif ($bg_image) {
            $section_css .= "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
        } elseif ($bg_color) {
            $section_css .= "background-color: {$bg_color};";
        }
        if ($pt) $section_css .= "padding-top: {$pt};";
        if ($pb) $section_css .= "padding-bottom: {$pb};";

        $section_attr = $section_css ? "style=\"{$section_css}\"" : "";
        $wrapper_class = $content_width === 'full' ? 'w-full' : 'container max-w-2xl mx-auto px-4';

        // Extract styles
        $btn_bg = $element_styles['button']['backgroundColor'] ?? '';
        $btn_color = $element_styles['button']['color'] ?? '';
        $field_bg = $element_styles['fields']['backgroundColor'] ?? '';
        $field_color = $element_styles['fields']['color'] ?? '';

        $btn_style = "";
        if ($btn_bg) $btn_style .= "background-color: {$btn_bg};";
        if ($btn_color) $btn_style .= "color: {$btn_color};";
        $btn_attr = $btn_style ? "style=\"{$btn_style}\"" : "";

        $field_style = "";
        if ($field_bg) $field_style .= "background-color: {$field_bg};";
        if ($field_color) $field_style .= "color: {$field_color};";
        $field_attr = $field_style ? "style=\"{$field_style}\"" : "";

        $html = "<section id=\"{$id}\" class=\"wn-section wn-contact-form wn-scheme--{$color_scheme}\" {$section_attr}>";

        if ($title) {
            $title_style = self::generate_style_attr($element_styles['title'] ?? []);
            $html .= "<h2 class=\"wn-contact-form__title\" {$title_style}>{$title}</h2>";
        }

        // Form is rendered but won't work for bots (they just see the structure)
        $html .= '<form class="wn-contact-form__form ' . esc_attr($wrapper_class) . '" method="post">';

        foreach ($fields as $field) {
            $field_label = ucfirst(str_replace('_', ' ', $field));
            $html .= '<div class="wn-contact-form__field">';
            $html .= "<label>{$field_label}</label>";
            if ($field === 'message') {
                $html .= "<textarea name=\"{$field}\" placeholder=\"{$field_label}\" {$field_attr}></textarea>";
            } else {
                $html .= "<input type=\"text\" name=\"{$field}\" placeholder=\"{$field_label}\" {$field_attr} />";
            }
            $html .= '</div>';
        }

        $html .= "<button type=\"submit\" {$btn_attr}>Submit</button>";
        $html .= '</form>';
        $html .= '</section>';

        return $html;
    }

    /**
     * Render Bento Category Grid section
     */
    public static function render_bento_category_grid($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $title = esc_html($props['title'] ?? '');
        $items = $props['items'] ?? [];
        if (!is_array($items) || empty($items)) {
            $items = [
                ['label' => 'New Arrivals', 'size' => 'large'],
                ['label' => 'Best Sellers', 'size' => 'medium'],
                ['label' => 'On Sale', 'size' => 'small'],
                ['label' => 'Accessories', 'size' => 'small'],
                ['label' => 'Collections', 'size' => 'tall'],
            ];
        }

        $html = "<section id=\"{$id}\" class=\"wn-section wn-bento-grid wn-scheme--{$color_scheme}\">";
        $html .= '<div class="wn-bento-grid__inner">';

        if ($title) {
            $title_style = self::generate_style_attr($element_styles['title'] ?? []);
            $html .= "<h2 class=\"wn-bento-grid__title\" {$title_style}>{$title}</h2>";
        }

        $html .= '<div class="wn-bento-grid__items">';
        foreach ($items as $item) {
            if (!is_array($item)) {
                continue;
            }

            $label = esc_html($item['label'] ?? '');
            $url = esc_url($item['url'] ?? '');
            $image = esc_url($item['image'] ?? '');
            $size = sanitize_html_class($item['size'] ?? 'small');
            $content = '';

            if ($image) {
                $content .= "<img class=\"wn-bento-grid__image\" src=\"{$image}\" alt=\"{$label}\" loading=\"lazy\" />";
            }
            if ($label) {
                $content .= "<span class=\"wn-bento-grid__label\">{$label}</span>";
            }

            $html .= "<div class=\"wn-bento-grid__item wn-bento-grid__item--{$size}\">";
            $html .= $url ? "<a href=\"{$url}\" class=\"wn-bento-grid__link\">{$content}</a>" : $content;
            $html .= '</div>';
        }
        $html .= '</div></div></section>';

        return $html;
    }

    /**
     * Render Product Carousel section
     */
    public static function render_product_carousel($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $title = esc_html($props['title'] ?? 'Trending Now');
        $subtitle = esc_html($props['subtitle'] ?? '');
        $cta_text = esc_html($props['cta_text'] ?? '');
        $cta_url = esc_url($props['cta_url'] ?? '');
        $products = $props['products'] ?? [];
        if (!is_array($products)) {
            $products = [];
        }

        $html = "<section id=\"{$id}\" class=\"wn-section wn-product-carousel wn-scheme--{$color_scheme}\">";
        $html .= '<div class="wn-product-carousel__inner">';
        $html .= '<div class="wn-product-carousel__header">';

        if ($title) {
            $title_style = self::generate_style_attr($element_styles['title'] ?? []);
            $html .= "<h2 class=\"wn-product-carousel__title\" {$title_style}>{$title}</h2>";
        }
        if ($subtitle) {
            $subtitle_style = self::generate_style_attr($element_styles['subtitle'] ?? []);
            $html .= "<p class=\"wn-product-carousel__subtitle\" {$subtitle_style}>{$subtitle}</p>";
        }
        if ($cta_text && $cta_url) {
            $html .= "<a href=\"{$cta_url}\" class=\"wn-product-carousel__cta\">{$cta_text}</a>";
        }

        $html .= '</div>';

        if (!empty($products)) {
            $html .= '<div class="wn-product-carousel__items">';
            foreach ($products as $product) {
                if (!is_array($product)) {
                    continue;
                }
                $name = esc_html($product['name'] ?? $product['title'] ?? '');
                $url = esc_url($product['url'] ?? $product['permalink'] ?? '#');
                $image = esc_url($product['image'] ?? $product['featured_image'] ?? '');
                $price = wp_kses_post($product['price_html'] ?? $product['price'] ?? '');

                $html .= "<a href=\"{$url}\" class=\"wn-product-carousel__item\">";
                if ($image) {
                    $html .= "<img class=\"wn-product-carousel__image\" src=\"{$image}\" alt=\"{$name}\" loading=\"lazy\" />";
                }
                if ($name) {
                    $html .= "<h3 class=\"wn-product-carousel__product-title\">{$name}</h3>";
                }
                if ($price) {
                    $html .= "<div class=\"wn-product-carousel__price\">{$price}</div>";
                }
                $html .= '</a>';
            }
            $html .= '</div>';
        }

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

        return $html;
    }

    /**
     * Render Shoppable Image section
     */
    public static function render_shoppable_image($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $title = esc_html($props['title'] ?? '');
        $subtitle = esc_html($props['subtitle'] ?? '');
        $image = esc_url($props['image'] ?? '');
        $alt = esc_attr($props['alt'] ?? 'Shoppable image');
        $hotspots = $props['hotspots'] ?? [];
        if (!is_array($hotspots)) {
            $hotspots = [];
        }

        $html = "<section id=\"{$id}\" class=\"wn-section wn-shoppable-image wn-scheme--{$color_scheme}\">";
        $html .= '<div class="wn-shoppable-image__inner">';

        if ($title || $subtitle) {
            $html .= '<div class="wn-shoppable-image__header">';
            if ($title) {
                $title_style = self::generate_style_attr($element_styles['title'] ?? []);
                $html .= "<h2 class=\"wn-shoppable-image__title\" {$title_style}>{$title}</h2>";
            }
            if ($subtitle) {
                $subtitle_style = self::generate_style_attr($element_styles['subtitle'] ?? []);
                $html .= "<p class=\"wn-shoppable-image__subtitle\" {$subtitle_style}>{$subtitle}</p>";
            }
            $html .= '</div>';
        }

        $html .= '<div class="wn-shoppable-image__media">';
        if ($image) {
            $html .= "<img class=\"wn-shoppable-image__image\" src=\"{$image}\" alt=\"{$alt}\" loading=\"lazy\" />";
        }

        if (!empty($hotspots)) {
            $html .= '<ul class="wn-shoppable-image__hotspots">';
            foreach ($hotspots as $hotspot) {
                if (!is_array($hotspot)) {
                    continue;
                }
                $name = esc_html($hotspot['product_name'] ?? 'Product');
                $slug = esc_attr($hotspot['product_slug'] ?? '');
                $url = $slug ? esc_url(home_url('/product/' . $slug . '/')) : '';
                $price = esc_html($hotspot['product_price'] ?? '');
                $x = isset($hotspot['x']) ? esc_attr($hotspot['x']) : '50';
                $y = isset($hotspot['y']) ? esc_attr($hotspot['y']) : '50';

                $html .= "<li class=\"wn-shoppable-image__hotspot\" style=\"left:{$x}%;top:{$y}%\">";
                $html .= $url ? "<a href=\"{$url}\">{$name}</a>" : $name;
                if ($price) {
                    $html .= "<span class=\"wn-shoppable-image__price\">{$price}</span>";
                }
                $html .= '</li>';
            }
            $html .= '</ul>';
        }

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

        return $html;
    }

    /**
     * Render Marquee Banner section
     */
    public static function render_marquee_banner($props, $layout, $color_scheme, $id, $element_styles = [], $section_styles = [])
    {
        $text = (string) ($props['text'] ?? '');
        $separator = (string) ($props['separator'] ?? '*');
        $items = array_filter(array_map('trim', explode($separator, $text)));

        if (empty($items) && $text) {
            $items = [$text];
        }

        $html = "<section id=\"{$id}\" class=\"wn-section wn-marquee wn-scheme--{$color_scheme}\">";
        $html .= '<div class="wn-marquee__track">';
        foreach ($items as $item) {
            $label = esc_html($item);
            if ($label) {
                $html .= "<span class=\"wn-marquee__item\">{$label}</span>";
            }
        }
        $html .= '</div></section>';

        return $html;
    }

    /**
     * Helper to get SVG for known icons
     */
    private static function get_icon_svg($name)
    {
        $icons = [
            'Star' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
            'Zap' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
            'Shield' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
            'Heart' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
            'Award' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/></svg>',
            'Clock' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
            'Truck' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>',
            'User' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
            'Settings' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
        ];

        return $icons[$name] ?? $icons['Star'];
    }

    /**
     * Generic section fallback
     */
    public static function render_generic($props, $type, $id)
    {
        $content = '';
        foreach ($props as $key => $value) {
            if (is_string($value)) {
                $content .= "<div class=\"wn-{$type}__{$key}\">" . wp_kses_post($value) . "</div>";
            }
        }

        return "<section id=\"{$id}\" class=\"wn-section wn-{$type}\">{$content}</section>";
    }
}
