<script setup>
import { Head, Link } from '@inertiajs/vue3';
import { computed, onMounted, onUnmounted, ref } from 'vue';

const props = defineProps({
    settings: Object,
    features: Array,
    testimonials: Array,
    stats: Array,
    socialLinks: Array,
    plans: Array,
    latestPosts: Array,
    legalPages: Array,
});

// Testimonial carousel state
const currentTestimonial = ref(0);
let testimonialInterval = null;

// Animated counters state
const counters = ref({});
const statsVisible = ref(false);

// Fitness color palette
const colors = computed(() => ({
    primary: props.settings?.colors?.primary || '#39FF14',
    secondary: props.settings?.colors?.secondary || '#FF6B35',
    accent: props.settings?.colors?.accent || '#00D4FF',
    dark: '#0A0A0A',
    darkGray: '#1A1A1A',
    metallic: '#2D2D2D',
}));

// Logo URL
const logoUrl = computed(() => props.settings?.general?.logo || null);

// Social icons SVG paths
const socialIcons = {
    facebook: '<path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/>',
    twitter: '<path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/>',
    instagram: '<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>',
    youtube: '<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>',
    linkedin: '<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>',
    tiktok: '<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>',
};

// Navigation links
const navLinks = [
    { href: '#features', label: 'Características' },
    { href: '#plans', label: 'Planes' },
    { href: '#testimonials', label: 'Testimonios' },
    { href: '#blog', label: 'Blog' },
];

// Counter animation
const animateCounter = (index, target) => {
    const targetNum = parseInt(target.replace(/\D/g, ''));
    const suffix = target.replace(/[\d]/g, '');
    let current = 0;
    const increment = Math.ceil(targetNum / 50);
    const timer = setInterval(() => {
        current += increment;
        if (current >= targetNum) {
            current = targetNum;
            clearInterval(timer);
        }
        counters.value[index] = current + suffix;
    }, 30);
};

// Testimonial navigation
const nextTestimonial = () => {
    if (props.testimonials?.length) {
        currentTestimonial.value = (currentTestimonial.value + 1) % props.testimonials.length;
    }
};

const prevTestimonial = () => {
    if (props.testimonials?.length) {
        currentTestimonial.value = (currentTestimonial.value - 1 + props.testimonials.length) % props.testimonials.length;
    }
};

// Intersection Observer for animations
const observeAnimations = () => {
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in');
                    if (entry.target.id === 'stats-section' && !statsVisible.value) {
                        statsVisible.value = true;
                        props.stats?.forEach((stat, index) => {
                            animateCounter(index, stat.value);
                        });
                    }
                }
            });
        },
        { threshold: 0.1 }
    );

    document.querySelectorAll('.animate-on-scroll').forEach((el) => {
        observer.observe(el);
    });
};

onMounted(() => {
    observeAnimations();
    
    // Auto-rotate testimonials
    if (props.testimonials?.length > 1) {
        testimonialInterval = setInterval(nextTestimonial, 5000);
    }
    
    // Initialize counters
    props.stats?.forEach((_, index) => {
        counters.value[index] = '0';
    });
});

onUnmounted(() => {
    if (testimonialInterval) {
        clearInterval(testimonialInterval);
    }
});

// Format price
const formatPrice = (price) => {
    return new Intl.NumberFormat('es-DO', {
        style: 'currency',
        currency: 'DOP',
        minimumFractionDigits: 0,
    }).format(price);
};

// Format date
const formatDate = (date) => {
    return new Date(date).toLocaleDateString('es-DO', {
        day: 'numeric',
        month: 'short',
        year: 'numeric',
    });
};
</script>

<template>
    <Head :title="settings?.general?.site_name || 'Preview'" />
    
    <!-- Preview Banner -->
    <div class="fixed top-0 left-0 right-0 z-[100] bg-yellow-500 text-black py-2 px-4 text-center font-semibold shadow-lg">
        <div class="flex items-center justify-center gap-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
            </svg>
            <span>MODO VISTA PREVIA - Los cambios no están publicados</span>
            <Link :href="route('admin.landing.index')" class="ml-4 px-3 py-1 bg-black text-yellow-500 rounded text-sm hover:bg-gray-800 transition">
                ← Volver al Editor
            </Link>
        </div>
    </div>
    
    <div class="min-h-screen" :style="{ backgroundColor: colors.dark }">
        <!-- Animated Background -->
        <div class="fixed inset-0 overflow-hidden pointer-events-none">
            <div class="absolute -top-40 -right-40 w-80 h-80 rounded-full opacity-20 blur-3xl animate-pulse"
                 :style="{ backgroundColor: colors.primary }"></div>
            <div class="absolute top-1/2 -left-40 w-96 h-96 rounded-full opacity-10 blur-3xl animate-pulse"
                 style="animation-delay: 1s;"
                 :style="{ backgroundColor: colors.secondary }"></div>
            <div class="absolute -bottom-40 right-1/3 w-72 h-72 rounded-full opacity-15 blur-3xl animate-pulse"
                 style="animation-delay: 2s;"
                 :style="{ backgroundColor: colors.accent }"></div>
            <!-- Grid Pattern -->
            <div class="absolute inset-0 opacity-5"
                 style="background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 50px 50px;"></div>
        </div>

        <!-- Header - pushed down for preview banner -->
        <header class="fixed top-10 left-0 right-0 z-50 transition-all duration-300" id="main-header">
            <nav class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="backdrop-blur-xl rounded-2xl border px-6 py-4"
                     :style="{ backgroundColor: colors.darkGray + 'CC', borderColor: colors.metallic }">
                    <div class="flex items-center justify-between">
                        <!-- Logo -->
                        <div class="flex items-center gap-3">
                            <template v-if="logoUrl">
                                <img :src="logoUrl" :alt="settings?.general?.site_name" class="h-10 w-auto" />
                            </template>
                            <template v-else>
                                <div class="w-10 h-10 rounded-xl flex items-center justify-center"
                                     :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                        <path d="M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"/>
                                    </svg>
                                </div>
                            </template>
                            <span class="text-xl font-bold text-white">{{ settings?.general?.site_name || 'CoachPro' }}</span>
                        </div>

                        <!-- Desktop Navigation -->
                        <div class="hidden md:flex items-center gap-8">
                            <a v-for="link in navLinks" 
                               :key="link.href" 
                               :href="link.href"
                               class="text-gray-300 hover:text-white transition-colors font-medium">
                                {{ link.label }}
                            </a>
                        </div>

                        <!-- CTA Buttons -->
                        <div class="hidden md:flex items-center gap-4">
                            <span class="px-6 py-2.5 rounded-xl font-semibold transition-all cursor-default"
                                  :style="{ backgroundColor: colors.primary, color: colors.dark }">
                                Comenzar Ahora
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <!-- Hero Section -->
        <section class="relative pt-44 pb-20 px-4 sm:px-6 lg:px-8">
            <div class="mx-auto max-w-7xl">
                <div class="text-center animate-on-scroll">
                    <!-- Badge -->
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium mb-8"
                         :style="{ backgroundColor: colors.metallic, color: colors.primary }">
                        <span class="w-2 h-2 rounded-full animate-pulse" :style="{ backgroundColor: colors.primary }"></span>
                        {{ settings?.hero?.badge || '🔥 Plataforma #1 para Coaches' }}
                    </div>
                    
                    <!-- Headline -->
                    <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white leading-tight mb-6">
                        <span v-html="settings?.hero?.title || 'Transforma Tu <br/>Negocio de Coaching'"></span>
                        <span class="block bg-clip-text text-transparent"
                              :style="{ backgroundImage: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                            {{ settings?.hero?.highlight || 'Al Siguiente Nivel' }}
                        </span>
                    </h1>
                    
                    <!-- Subtitle -->
                    <p class="text-lg sm:text-xl text-gray-400 max-w-3xl mx-auto mb-10 leading-relaxed">
                        {{ settings?.hero?.subtitle || 'La plataforma todo-en-uno para coaches de fitness. Gestiona clientes, crea rutinas personalizadas, planes nutricionales y haz crecer tu negocio.' }}
                    </p>
                    
                    <!-- CTA Buttons -->
                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
                        <span class="group px-8 py-4 rounded-xl font-bold text-lg transition-all transform hover:scale-105 flex items-center gap-2 cursor-default"
                              :style="{ backgroundColor: colors.primary, color: colors.dark }">
                            Empezar Gratis
                            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                        </span>
                        <span class="px-8 py-4 rounded-xl font-bold text-lg border-2 text-white transition-all flex items-center gap-2 cursor-default"
                              :style="{ borderColor: colors.metallic }">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                            Ver Demo
                        </span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Stats Section -->
        <section id="stats-section" class="py-16 px-4 sm:px-6 lg:px-8 animate-on-scroll" v-if="stats?.length">
            <div class="mx-auto max-w-7xl">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div v-for="(stat, index) in stats" :key="stat.id"
                         class="text-center p-6 rounded-2xl border backdrop-blur-sm"
                         :style="{ backgroundColor: colors.darkGray + '80', borderColor: colors.metallic }">
                        <div class="text-3xl sm:text-4xl font-black mb-2"
                             :style="{ color: colors.primary }">
                            {{ counters[index] || stat.value }}
                        </div>
                        <div class="text-gray-400 font-medium">{{ stat.label }}</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section id="features" class="py-20 px-4 sm:px-6 lg:px-8" v-if="features?.length">
            <div class="mx-auto max-w-7xl">
                <div class="text-center mb-16 animate-on-scroll">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white mb-4">
                        {{ settings?.features_section?.title || 'Todo lo que Necesitas' }}
                    </h2>
                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                        {{ settings?.features_section?.subtitle || 'Herramientas profesionales diseñadas para coaches que quieren destacar.' }}
                    </p>
                </div>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <div v-for="feature in features" :key="feature.id"
                         class="group p-8 rounded-2xl border transition-all duration-300 hover:scale-[1.02] animate-on-scroll"
                         :style="{ backgroundColor: colors.darkGray, borderColor: colors.metallic }">
                        <div class="w-14 h-14 rounded-xl flex items-center justify-center mb-6 transition-colors"
                             :style="{ backgroundColor: colors.primary + '20' }">
                            <span class="text-2xl" :style="{ color: colors.primary }">{{ feature.icon }}</span>
                        </div>
                        <h3 class="text-xl font-bold text-white mb-3">{{ feature.title }}</h3>
                        <p class="text-gray-400 leading-relaxed">{{ feature.description }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Plans Section -->
        <section id="plans" class="py-20 px-4 sm:px-6 lg:px-8" v-if="plans?.length">
            <div class="mx-auto max-w-7xl">
                <div class="text-center mb-16 animate-on-scroll">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white mb-4">
                        {{ settings?.plans_section?.title || 'Planes que se Adaptan a Ti' }}
                    </h2>
                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                        {{ settings?.plans_section?.subtitle || 'Elige el plan perfecto para hacer crecer tu negocio de coaching.' }}
                    </p>
                </div>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
                    <div v-for="plan in plans" :key="plan.id"
                         class="relative p-8 rounded-2xl border transition-all duration-300 animate-on-scroll"
                         :class="plan.is_featured ? 'scale-105' : ''"
                         :style="{ 
                             backgroundColor: plan.is_featured ? colors.darkGray : colors.darkGray + '80',
                             borderColor: plan.is_featured ? colors.primary : colors.metallic 
                         }">
                        <!-- Featured Badge -->
                        <div v-if="plan.is_featured" 
                             class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-sm font-bold"
                             :style="{ backgroundColor: colors.primary, color: colors.dark }">
                            Más Popular
                        </div>
                        
                        <h3 class="text-2xl font-bold text-white mb-2">{{ plan.name }}</h3>
                        <p class="text-gray-400 mb-6">{{ plan.description }}</p>
                        
                        <div class="mb-6">
                            <span class="text-4xl font-black" :style="{ color: colors.primary }">
                                {{ formatPrice(plan.price) }}
                            </span>
                            <span class="text-gray-400">/{{ plan.duration_days }} días</span>
                        </div>
                        
                        <ul class="space-y-3 mb-8">
                            <li v-for="(feature, idx) in plan.features" :key="idx" 
                                class="flex items-center gap-3 text-gray-300">
                                <svg class="w-5 h-5 flex-shrink-0" :style="{ color: colors.primary }" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                </svg>
                                {{ feature }}
                            </li>
                        </ul>
                        
                        <span class="block w-full py-3 rounded-xl font-bold text-center transition-all cursor-default"
                              :style="{ 
                                  backgroundColor: plan.is_featured ? colors.primary : 'transparent',
                                  color: plan.is_featured ? colors.dark : colors.primary,
                                  border: plan.is_featured ? 'none' : `2px solid ${colors.primary}`
                              }">
                            Seleccionar Plan
                        </span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Testimonials Section -->
        <section id="testimonials" class="py-20 px-4 sm:px-6 lg:px-8" v-if="testimonials?.length">
            <div class="mx-auto max-w-7xl">
                <div class="text-center mb-16 animate-on-scroll">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white mb-4">
                        {{ settings?.testimonials_section?.title || 'Lo que Dicen Nuestros Coaches' }}
                    </h2>
                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                        {{ settings?.testimonials_section?.subtitle || 'Historias reales de coaches que han transformado su negocio.' }}
                    </p>
                </div>
                
                <div class="relative max-w-4xl mx-auto">
                    <div class="overflow-hidden">
                        <div class="transition-transform duration-500"
                             :style="{ transform: `translateX(-${currentTestimonial * 100}%)` }">
                            <div class="flex">
                                <div v-for="testimonial in testimonials" :key="testimonial.id"
                                     class="w-full flex-shrink-0 px-4">
                                    <div class="p-8 rounded-2xl border text-center"
                                         :style="{ backgroundColor: colors.darkGray, borderColor: colors.metallic }">
                                        <div class="flex justify-center mb-4">
                                            <div v-for="i in 5" :key="i" class="w-6 h-6">
                                                <svg :style="{ color: i <= testimonial.rating ? colors.primary : colors.metallic }" 
                                                     fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                                </svg>
                                            </div>
                                        </div>
                                        <p class="text-gray-300 text-lg mb-6 italic">"{{ testimonial.content }}"</p>
                                        <div class="flex items-center justify-center gap-4">
                                            <img v-if="testimonial.avatar" :src="testimonial.avatar" 
                                                 class="w-12 h-12 rounded-full object-cover" :alt="testimonial.name" />
                                            <div v-else class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold"
                                                 :style="{ backgroundColor: colors.primary }">
                                                {{ testimonial.name?.charAt(0) }}
                                            </div>
                                            <div class="text-left">
                                                <div class="text-white font-semibold">{{ testimonial.name }}</div>
                                                <div class="text-gray-400 text-sm">{{ testimonial.role }}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Navigation Arrows -->
                    <button @click="prevTestimonial" 
                            class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full flex items-center justify-center transition-colors"
                            :style="{ backgroundColor: colors.metallic, color: 'white' }">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <button @click="nextTestimonial"
                            class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full flex items-center justify-center transition-colors"
                            :style="{ backgroundColor: colors.metallic, color: 'white' }">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                    
                    <!-- Dots -->
                    <div class="flex justify-center gap-2 mt-8">
                        <button v-for="(_, idx) in testimonials" :key="idx"
                                @click="currentTestimonial = idx"
                                class="w-3 h-3 rounded-full transition-colors"
                                :style="{ backgroundColor: idx === currentTestimonial ? colors.primary : colors.metallic }">
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Blog Section -->
        <section id="blog" class="py-20 px-4 sm:px-6 lg:px-8" v-if="latestPosts?.length">
            <div class="mx-auto max-w-7xl">
                <div class="text-center mb-16 animate-on-scroll">
                    <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white mb-4">
                        {{ settings?.blog_section?.title || 'Últimos Artículos' }}
                    </h2>
                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                        {{ settings?.blog_section?.subtitle || 'Consejos y estrategias para coaches de fitness.' }}
                    </p>
                </div>
                
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <article v-for="post in latestPosts" :key="post.id"
                             class="group rounded-2xl border overflow-hidden transition-all duration-300 hover:scale-[1.02] animate-on-scroll"
                             :style="{ backgroundColor: colors.darkGray, borderColor: colors.metallic }">
                        <div class="aspect-video overflow-hidden">
                            <img v-if="post.featured_image" :src="post.featured_image" :alt="post.title"
                                 class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110" />
                            <div v-else class="w-full h-full flex items-center justify-center"
                                 :style="{ backgroundColor: colors.metallic }">
                                <svg class="w-12 h-12 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="text-sm text-gray-400 mb-2">{{ formatDate(post.published_at) }}</div>
                            <h3 class="text-xl font-bold text-white mb-2 group-hover:text-opacity-80 transition-colors">
                                {{ post.title }}
                            </h3>
                            <p class="text-gray-400 line-clamp-2">{{ post.excerpt }}</p>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- CTA Section -->
        <section class="py-20 px-4 sm:px-6 lg:px-8 animate-on-scroll">
            <div class="mx-auto max-w-4xl text-center p-12 rounded-3xl border"
                 :style="{ 
                     background: `linear-gradient(135deg, ${colors.darkGray} 0%, ${colors.dark} 100%)`,
                     borderColor: colors.primary + '40'
                 }">
                <h2 class="text-3xl sm:text-4xl font-black text-white mb-4">
                    {{ settings?.cta_section?.title || '¿Listo para Empezar?' }}
                </h2>
                <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
                    {{ settings?.cta_section?.subtitle || 'Únete a miles de coaches que ya están transformando su negocio con nuestra plataforma.' }}
                </p>
                <span class="inline-flex items-center gap-2 px-8 py-4 rounded-xl font-bold text-lg transition-all cursor-default"
                      :style="{ backgroundColor: colors.primary, color: colors.dark }">
                    {{ settings?.cta_section?.button_text || 'Crear Cuenta Gratis' }}
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                </span>
            </div>
        </section>

        <!-- Footer -->
        <footer class="py-12 px-4 sm:px-6 lg:px-8 border-t" :style="{ borderColor: colors.metallic }">
            <div class="mx-auto max-w-7xl">
                <div class="flex flex-col md:flex-row items-center justify-between gap-6">
                    <!-- Logo -->
                    <div class="flex items-center gap-3">
                        <template v-if="logoUrl">
                            <img :src="logoUrl" :alt="settings?.general?.site_name" class="h-8 w-auto" />
                        </template>
                        <template v-else>
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center"
                                 :style="{ background: `linear-gradient(135deg, ${colors.primary}, ${colors.secondary})` }">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"/>
                                </svg>
                            </div>
                        </template>
                        <span class="text-lg font-bold text-white">{{ settings?.general?.site_name || 'CoachPro' }}</span>
                    </div>
                    
                    <!-- Social Links -->
                    <div class="flex items-center gap-4" v-if="socialLinks?.length">
                        <a v-for="social in socialLinks" :key="social.id"
                           :href="social.url" target="_blank" rel="noopener"
                           class="w-10 h-10 rounded-full flex items-center justify-center transition-colors"
                           :style="{ backgroundColor: colors.metallic }">
                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"
                                 v-html="socialIcons[social.platform] || ''"></svg>
                        </a>
                    </div>
                    
                    <!-- Copyright & Admin Link -->
                    <div class="text-center md:text-right">
                        <p class="text-gray-400 text-sm">
                            © {{ new Date().getFullYear() }} {{ settings?.general?.site_name || 'CoachPro' }}. Todos los derechos reservados.
                        </p>
                        <p class="text-gray-500 text-xs mt-1">/admin/pages</p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<style scoped>
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
