/**
 * VMO Templates System v3.0.0 - Pure JavaScript
 * Pre-Generated Template Loading System (No jQuery dependency)
 * Features: Instant loading, preview functionality, animated templates
 */

var VMOTemplates = (function() {
    'use strict';
    
    // Get plugin URL with fallback
    var pluginUrl = '';
    if (typeof vmoAjax !== 'undefined' && vmoAjax.pluginUrl) {
        pluginUrl = vmoAjax.pluginUrl;
        // Clean up URL - remove version parameters
        pluginUrl = pluginUrl.split('?')[0];
        // Ensure it ends with slash
        if (!pluginUrl.endsWith('/')) {
            pluginUrl += '/';
        }
    } else if (typeof vmo_ajax !== 'undefined' && vmo_ajax.plugin_url) {
        pluginUrl = vmo_ajax.plugin_url;
        pluginUrl = pluginUrl.split('?')[0];
        if (!pluginUrl.endsWith('/')) {
            pluginUrl += '/';
        }
    } else {
        // Fallback - try to detect from current script
        var scripts = document.getElementsByTagName('script');
        for (var i = 0; i < scripts.length; i++) {
            if (scripts[i].src && scripts[i].src.includes('vmo-templates.js')) {
                pluginUrl = scripts[i].src.replace('/assets/vmo-templates.js', '/');
                pluginUrl = pluginUrl.split('?')[0];
                break;
            }
        }
    }

    // Template data with your provided images as thumbnails
    var templates = [
        // RESTAURANT TEMPLATES
        {
            id: 'restaurant-savoria',
            name: 'Savoria Restaurant',
            category: 'restaurant',
            description: 'Premium fine dining template with vertical carousel design, 3D animations, parallax effects, and integrated maps',
            preview: pluginUrl + 'assets/images/burger.webp',
            file: 'templates/restaurant-savoria.html',
            features: ['Vertical Carousel', '3D Animations', 'Parallax Effects', 'Integrated Maps', 'Custom Cursor', 'GSAP Animations'],
            colors: ['#2c3e50', '#d4af37', '#f4d03f'],
            premium: true,
            ready: true
        },
        {
            id: 'restaurant-kostlich',
            name: 'Kostlich Restaurant',
            category: 'restaurant',
            description: 'Elegant restaurant template with video backgrounds, animated counters, and reservation system',
            preview: pluginUrl + 'assets/images/burger.webp', // Using your burger image as thumbnail
            file: 'templates/restaurant-kostlich.html',
            features: ['Video Background', 'AOS Animations', 'Counter Effects', 'Reservation Form', 'Mobile Responsive'],
            colors: ['#2c3e50', '#e74c3c', '#f39c12'],
            premium: false,
            ready: true
        },
        {
            id: 'restaurant-cafe',
            name: 'Modern Cafe',
            category: 'restaurant',
            description: 'Cozy cafe template with gallery sliders and menu showcase',
            preview: pluginUrl + 'assets/images/cake.webp', // Using your cake image as thumbnail
            file: 'templates/restaurant-cafe.html',
            features: ['Image Sliders', 'Menu Display', 'Contact Forms', 'Social Media'],
            colors: ['#8b4513', '#deb887', '#f5deb3'],
            premium: false,
            ready: true
        },
        {
            id: 'restaurant-grill',
            name: 'BBQ Grill House',
            category: 'restaurant',
            description: 'Bold grill restaurant with animated elements and booking system',
            preview: pluginUrl + 'assets/images/kebab.webp', // Using your kebab image as thumbnail
            file: 'templates/restaurant-grill.html',
            features: ['Bold Design', 'Booking System', 'Image Gallery', 'Reviews Section'],
            colors: ['#b22222', '#8b0000', '#ff6347'],
            premium: false,
            ready: true
        },
        {
            id: 'restaurant-dessert',
            name: 'Sweet Treats Dessert Bar',
            category: 'restaurant',
            description: 'Delightful dessert shop with colorful animations and order system',
            preview: pluginUrl + 'assets/images/milkshake.webp', // Using your milkshake image as thumbnail
            file: 'templates/restaurant-dessert.html',
            features: ['Colorful Design', 'Order System', 'Sweet Animations', 'Product Showcase'],
            colors: ['#ff69b4', '#ff1493', '#ffc0cb'],
            premium: false,
            ready: true
        },
        
        // BUSINESS TEMPLATES
        {
            id: 'business-webspital',
            name: 'Webspital Telemedicine',
            category: 'business',
            description: 'Complete telemedicine platform template with doctor consultations and HIPAA compliance features',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDdkNGEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMGZmOWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNjKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfqZo8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI2MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+V2Vic3BpdGFsPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/business-webspital.html',
            features: ['HIPAA Compliant', 'Video Consultations', 'Doctor Profiles', 'Appointment Booking', 'Patient Portal'],
            colors: ['#007d4a', '#00ff9a', '#005a36'],
            premium: false,
            ready: true
        },
        {
            id: 'business-corporate',
            name: 'Corporate Professional',
            category: 'business',
            description: 'Professional corporate template with team sections and service showcase',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMyNTYzZWIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2MzY2ZjEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNhKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfj6M8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI2MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+Q29ycG9yYXRlPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/business-corporate.html',
            features: ['Team Sections', 'Service Showcase', 'Contact Forms', 'Testimonials'],
            colors: ['#2563eb', '#6366f1', '#8b5cf6'],
            premium: false,
            ready: true
        },
        {
            id: 'business-consulting',
            name: 'Business Consulting',
            category: 'business',
            description: 'Professional consulting template with case studies and expertise areas',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTQwYWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3YzNhZWQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNiKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfkpw8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI2MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+Q29uc3VsdGluZzwvdGV4dD48L3N2Zz4=',
            file: 'templates/business-consulting.html',
            features: ['Case Studies', 'Expertise Areas', 'Client Portal', 'Analytics'],
            colors: ['#1e40af', '#7c3aed', '#059669'],
            premium: false,
            ready: true
        },
        
        // CREATIVE TEMPLATES
        {
            id: 'creative-portfolio',
            name: 'Creative Portfolio',
            category: 'creative',
            description: 'Stunning portfolio template for designers and artists',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZDUxOWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOTY4MDgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNjKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfkb08L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI2MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UG9ydGZvbGlvPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/creative-portfolio.html',
            features: ['Image Gallery', 'Project Showcase', 'About Section', 'Contact Form'],
            colors: ['#ed519f', '#f96808', '#8b5cf6'],
            premium: false,
            ready: true
        },
        {
            id: 'creative-agency',
            name: 'Digital Agency',
            category: 'creative',
            description: 'Modern agency template with team showcase and project highlights',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYjgyZjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTQwYWYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNkKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfmoE8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI2MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjE0IiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+QWdlbmN5PC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/creative-agency.html',
            features: ['Team Showcase', 'Project Highlights', 'Service Areas', 'Client Reviews'],
            colors: ['#3b82f6', '#1e40af', '#8b5cf6'],
            premium: false,
            ready: true
        }
        ,
        
        // ECOMMERCE TEMPLATES
        {
            id: 'ecommerce-boutique',
            name: 'Modern Boutique',
            category: 'ecommerce',
            description: 'Clean ecommerce boutique with hero promo, product grid, and CTA banners',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImUiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMWY1ZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YWRmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNlKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzAwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+RXNob3AgQm91dGlxdWU8L3RleHQ+PC9zdmc+',
            file: 'templates/ecommerce-boutique.html',
            features: ['Hero Promo', 'Product Grid', 'Promo Banners', 'Newsletter'],
            colors: ['#111827', '#9ca3af', '#e5e7eb'],
            premium: false,
            ready: true
        },
        {
            id: 'ecommerce-product',
            name: 'Product Spotlight',
            category: 'ecommerce',
            description: 'Single product landing with video hero, features, and reviews',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjU3NjYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg1MGEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNmKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzAwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UHJvZHVjdCBMYW5kaW5nPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/ecommerce-product.html',
            features: ['Video Hero', 'Feature Blocks', 'Reviews', 'FAQ'],
            colors: ['#0f766e', '#14b8a6', '#99f6e4'],
            premium: false,
            ready: true
        },
        
        // PERSONAL TEMPLATES
        {
            id: 'personal-portfolio',
            name: 'Personal Portfolio',
            category: 'personal',
            description: 'Sleek portfolio with hero intro, work grid, and contact form',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1ZGJlZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YjlhZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNnKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzAwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+UG9ydGZvbGlvPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/personal-portfolio.html',
            features: ['Hero Intro', 'Work Grid', 'About Me', 'Contact Form'],
            colors: ['#111827', '#4b5563', '#9ca3af'],
            premium: false,
            ready: true
        },
        {
            id: 'personal-blog',
            name: 'Personal Blog',
            category: 'personal',
            description: 'Content-first blog layout with featured posts and newsletter',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImgiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmI5NGEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYzNGEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNoKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzAwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+QmxvZyBUZW1wbGF0ZTwvdGV4dD48L3N2Zz4=',
            file: 'templates/personal-blog.html',
            features: ['Featured Posts', 'Categories', 'Newsletter', 'About Widget'],
            colors: ['#f59e0b', '#f97316', '#fb923c'],
            premium: false,
            ready: true
        },
        
        // HEALTH TEMPLATES
        {
            id: 'health-clinic',
            name: 'Health Clinic',
            category: 'health',
            description: 'Clinic website with hero CTA, services grid, and appointment form',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImkiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0Y2QxZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDk5ZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNpKSIvPjx0ZXh0IHg9IjUwJSIgeT0iNDAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iI2ZmZiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+Q2xpbmljPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/health-clinic.html',
            features: ['Hero CTA', 'Services Grid', 'Testimonials', 'Appointment Form'],
            colors: ['#0ea5e9', '#0369a1', '#e0f2fe'],
            premium: false,
            ready: true
        },
        {
            id: 'health-wellness',
            name: 'Wellness & Spa',
            category: 'health',
            description: 'Calm wellness design with background hero, treatments, and booking',
            preview: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImoiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5MWZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCMpaikiLz48dGV4dCB4PSI1MCUiIHk9IjQwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMwMDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPldlbGxuZXNzPC90ZXh0Pjwvc3ZnPg==',
            file: 'templates/health-wellness.html',
            features: ['Background Hero', 'Treatments', 'Gallery', 'Booking CTA'],
            colors: ['#10b981', '#064e3b', '#d1fae5'],
            premium: false,
            ready: true
        }
    ];

    // Helper functions
    function createElement(tag, className, innerHTML) {
        var element = document.createElement(tag);
        if (className) element.className = className;
        if (innerHTML) element.innerHTML = innerHTML;
        return element;
    }

    function getElement(selector) {
        return document.querySelector(selector);
    }

    function getAllElements(selector) {
        return document.querySelectorAll(selector);
    }

    function addEvent(element, event, handler) {
        if (element.addEventListener) {
            element.addEventListener(event, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + event, handler);
        }
    }

    // Private methods
    function createTemplateCard(template) {
        var featuresHtml = template.features.map(function(feature) {
            return '<span class="vmo-template-feature">' + feature + '</span>';
        }).join('');

        var statusBadge = template.ready ? 
            '<div class="vmo-template-status ready">✅ Ready</div>' : 
            '<div class="vmo-template-status coming">🚧 Coming Soon</div>';

        return `
            <div class="vmo-template-card ${template.ready ? 'ready' : 'coming-soon'}" data-template-id="${template.id}">
                <div class="vmo-template-image">
                    <img src="${template.preview}" alt="${template.name}" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y4ZjlmYSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5YTNhZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg=='">
                    ${statusBadge}
                    ${template.ready ? `
                        <div class="vmo-template-overlay">
                            <button class="vmo-template-preview-btn" onclick="VMOTemplates.previewTemplate('${template.id}')">
                                👁️ Preview Template
                            </button>
                        </div>
                    ` : ''}
                </div>
                <div class="vmo-template-content">
                    <h3 class="vmo-template-title">${template.name}</h3>
                    <p class="vmo-template-description">${template.description}</p>
                    <div class="vmo-template-features">
                        ${featuresHtml}
                    </div>
                    <div class="vmo-template-actions">
                        ${template.ready ? `
                            <button class="vmo-template-btn vmo-template-btn-primary" onclick="VMOTemplates.useTemplate('${template.id}')">
                                🚀 Use Template
                            </button>
                            <button class="vmo-template-btn vmo-template-btn-secondary" onclick="VMOTemplates.previewTemplate('${template.id}')">
                                👁️ Preview
                            </button>
                        ` : `
                            <button class="vmo-template-btn vmo-template-btn-disabled" disabled>
                                ⏳ Coming Soon
                            </button>
                        `}
                    </div>
                </div>
            </div>
        `;
    }

    function createModal() {
        if (getElement('#vmo-template-modal')) return;

        var modalHtml = `
            <div class="vmo-template-modal" id="vmo-template-modal">
                <div class="vmo-template-modal-content">
                    <div class="vmo-template-modal-header">
                        <h3 id="vmo-modal-title">Template Preview</h3>
                        <button class="vmo-template-close" onclick="VMOTemplates.closeModal()">&times;</button>
                    </div>
                    <div class="vmo-template-modal-body">
                        <iframe id="vmo-template-preview" style="width: 100%; height: 70vh; border: none; border-radius: 8px;"></iframe>
                        <div class="vmo-template-modal-actions">
                            <button class="vmo-template-btn vmo-template-btn-secondary" onclick="VMOTemplates.closeModal()">
                                ✕ Close
                            </button>
                            <button class="vmo-template-btn vmo-template-btn-primary" id="vmo-use-template-btn">
                                🚀 Use This Template
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        document.body.insertAdjacentHTML('beforeend', modalHtml);

        // Close modal when clicking outside
        var modal = getElement('#vmo-template-modal');
        addEvent(modal, 'click', function(e) {
            if (e.target === modal) {
                VMOTemplates.closeModal();
            }
        });
    }

    function fadeIn(element) {
        element.style.opacity = '0';
        element.style.display = 'flex';
        var opacity = 0;
        var timer = setInterval(function() {
            opacity += 0.1;
            element.style.opacity = opacity;
            if (opacity >= 1) {
                clearInterval(timer);
                element.style.opacity = '1';
            }
        }, 30);
    }

    function fadeOut(element) {
        var opacity = 1;
        var timer = setInterval(function() {
            opacity -= 0.1;
            element.style.opacity = opacity;
            if (opacity <= 0) {
                clearInterval(timer);
                element.style.display = 'none';
                element.style.opacity = '0';
            }
        }, 30);
    }

    // Public API
    return {
        // Get all templates
        getTemplates: function() {
            return templates;
        },
        // Back-compat alias
        getAllTemplates: function() {
            return templates;
        },

        // Get specific template
        getTemplate: function(id) {
            return templates.find(function(template) {
                return template.id === id;
            });
        },

        // Get templates by category
        getTemplatesByCategory: function(category) {
            return templates.filter(function(template) {
                return template.category === category;
            });
        },

        // Open template selector
        openSelector: function(containerId) {
            containerId = containerId || 'vmo-templates-container';
            var container = getElement('#' + containerId);
            
            if (!container) {
                console.error('Template container not found:', containerId);
                return;
            }

            var html = '<div class="vmo-templates-grid">';
            templates.forEach(function(template) {
                html += createTemplateCard(template);
            });
            html += '</div>';

            container.innerHTML = html;
            this.addGridAnimations();
        },

        // Preview template in modal
        previewTemplate: function(templateId) {
            var template = this.getTemplate(templateId);
            if (!template || !template.ready) {
                alert('Template not available for preview');
                return;
            }

            createModal();
            var modalTitle = getElement('#vmo-modal-title');
            var templatePreview = getElement('#vmo-template-preview');
            var useTemplateBtn = getElement('#vmo-use-template-btn');
            var modal = getElement('#vmo-template-modal');
            
            modalTitle.textContent = template.name + ' - Preview';
            templatePreview.src = template.file;
            useTemplateBtn.setAttribute('onclick', 'VMOTemplates.useTemplate("' + templateId + '")');
            
            fadeIn(modal);
        },

        // Use template (integrate with VMO system)
        useTemplate: function(templateId) {
            var template = this.getTemplate(templateId);
            if (!template || !template.ready) {
                alert('Template not available');
                return;
            }

            // In real implementation, this would load the template into the builder
            if (window.parent && window.parent.VMOBuilder) {
                // Load template into parent VMO Builder
                window.parent.VMOBuilder.loadTemplate(template);
            } else {
                // Fallback for testing
                console.log('Loading template:', template);
                alert('Template "' + template.name + '" selected! In the actual plugin, this would load into the builder.');
            }
            
            this.closeModal();
        },

        // Close modal
        closeModal: function() {
            var modal = getElement('#vmo-template-modal');
            if (modal) {
                fadeOut(modal);
            }
        },

        // Add grid animations
        addGridAnimations: function() {
            var cards = getAllElements('.vmo-template-card');
            cards.forEach(function(card, index) {
                card.style.animationDelay = (index * 0.1) + 's';
                card.style.animationName = 'slideInUp';
                card.style.animationDuration = '0.6s';
                card.style.animationFillMode = 'both';
            });
        },

        // Initialize the system
        init: function() {
            console.log('🎨 VMO Templates System v3.0.0 initialized (Pure JS)');
            console.log('📊 Available templates:', templates.length);
            console.log('✅ Ready templates:', templates.filter(function(t) { return t.ready; }).length);
            console.log('🍽️ Restaurant templates:', templates.filter(function(t) { return t.category === 'restaurant'; }).length);
            console.log('🏢 Business templates:', templates.filter(function(t) { return t.category === 'business'; }).length);
            console.log('🎨 Creative templates:', templates.filter(function(t) { return t.category === 'creative'; }).length);
            console.log('🛍️ Ecommerce templates:', templates.filter(function(t) { return t.category === 'ecommerce'; }).length);
            console.log('👤 Personal templates:', templates.filter(function(t) { return t.category === 'personal'; }).length);
            console.log('⚕️ Health templates:', templates.filter(function(t) { return t.category === 'health'; }).length);
            console.log('🔗 Plugin URL detected:', pluginUrl || 'Not found');
            
            // Add CSS animations
            if (!getElement('#vmo-template-animations')) {
                var style = createElement('style');
                style.id = 'vmo-template-animations';
                style.innerHTML = `
                    @keyframes slideInUp {
                        from {
                            transform: translateY(30px);
                            opacity: 0;
                        }
                        to {
                            transform: translateY(0);
                            opacity: 1;
                        }
                    }
                    
                    .vmo-template-card.coming-soon {
                        opacity: 0.7;
                    }
                    
                    .vmo-template-status {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        padding: 4px 8px;
                        border-radius: 12px;
                        font-size: 0.7rem;
                        font-weight: 600;
                        z-index: 2;
                    }
                    
                    .vmo-template-status.ready {
                        background: rgba(40, 167, 69, 0.9);
                        color: white;
                    }
                    
                    .vmo-template-status.coming {
                        background: rgba(255, 193, 7, 0.9);
                        color: #333;
                    }
                `;
                document.head.appendChild(style);
            }
        }
    };

})();

// Auto-initialize when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
        VMOTemplates.init();
    });
} else {
    VMOTemplates.init();
}

// Make available globally
window.VMOTemplates = VMOTemplates;
