<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - AI Marketing Revolution</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='/favicon.ico') }}">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- HTMX CDN -->
    <script src="https://unpkg.com/htmx.org@2.0.6"></script>
    
    <!-- Alpine.js CDN -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Custom Tailwind Config -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'ai-blue': '#3B82F6',
                        'ai-purple': '#8B5CF6',
                        'ai-gradient': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    {% include 'partials/header.html' %}

    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-ai-blue to-ai-purple text-white py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h1 class="text-5xl font-bold mb-6" 
                        x-data="{ text: 'AI-Powered Marketing' }"
                        x-text="text">
                    </h1>
                    <p class="text-xl mb-8 text-blue-100">
                        Oppkey's starter kit for FastAPI - showcasing modern web technologies. 
                        Revolutionizing Silicon Valley marketing with AI augmentation.
                    </p>
                    
                    <!-- HTMX Interactive Button -->
                    <button hx-get="/ai-stats" 
                            hx-target="#stats-container"
                            hx-swap="innerHTML"
                            class="bg-white text-ai-blue px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
                        <span hx-indicator="#loading-spinner">Get AI Stats</span>
                        <div id="loading-spinner" class="htmx-indicator">
                            <svg class="animate-spin h-5 w-5 inline ml-2" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </div>
                    </button>
                </div>
                
                <div class="relative">
                    <img src="{{ url_for('static', path='/images/glass-front.jpg') }}" 
                         alt="Modern AI Technology" 
                         class="rounded-lg shadow-2xl">
                    <div class="absolute -bottom-4 -right-4 bg-white p-4 rounded-lg shadow-lg">
                        <div class="text-ai-blue font-bold text-2xl">87%</div>
                        <div class="text-gray-600 text-sm">Time Saved</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Container (HTMX Target) -->
    <div id="stats-container" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Initial content will be replaced by HTMX -->
    </div>

    <!-- Features Section -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-4xl font-bold text-center mb-16 text-gray-900">
                AI Augmentation in Action
            </h2>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-ai-blue rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">Content Generation</h3>
                        <p class="text-gray-600 mb-4">
                            AI-powered content creation that maintains brand voice while generating 
                            engaging copy 10x faster than traditional methods.
                        </p>
                        <div class="flex items-center text-ai-blue font-semibold">
                            <span>Learn More</span>
                            <svg class="w-4 h-4 ml-2 transition-transform" 
                                 :class="hovered ? 'translate-x-1' : ''"
                                 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"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Feature 2 -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-green-50 to-blue-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-green-500 rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">Analytics & Insights</h3>
                        <p class="text-gray-600 mb-4">
                            Real-time campaign performance analysis with predictive insights 
                            that help optimize marketing strategies proactively.
                        </p>
                        <div class="flex items-center text-green-600 font-semibold">
                            <span>Learn More</span>
                            <svg class="w-4 h-4 ml-2 transition-transform" 
                                 :class="hovered ? 'translate-x-1' : ''"
                                 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"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Feature 3 -->
                <div class="group" x-data="{ hovered: false }" 
                     @mouseenter="hovered = true" 
                     @mouseleave="hovered = false">
                    <div class="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl transition-all duration-300"
                         :class="hovered ? 'shadow-xl scale-105' : 'shadow-lg'">
                        <div class="w-16 h-16 bg-purple-500 rounded-lg flex items-center justify-center mb-6">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold mb-4 text-gray-900">Audience Targeting</h3>
                        <p class="text-gray-600 mb-4">
                            AI-driven audience segmentation and personalization that 
                            increases engagement rates by up to 300%.
                        </p>
                        <div class="flex items-center text-purple-600 font-semibold">
                            <span>Learn More</span>
                            <svg class="w-4 h-4 ml-2 transition-transform" 
                                 :class="hovered ? 'translate-x-1' : ''"
                                 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"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Interactive Demo Section -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-4xl font-bold text-center mb-16 text-gray-900">
                Interactive Design Demo
            </h2>
            
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <div x-data="{ 
                        selectedImage: '{{ url_for('static', path='/images/airport.jpg') }}',
                        images: [
                            { src: '{{ url_for('static', path='/images/airport.jpg') }}', alt: 'Airport', title: 'Global Reach' },
                            { src: '{{ url_for('static', path='/images/leaves.jpg') }}', alt: 'Leaves', title: 'Growth & Innovation' },
                            { src: '{{ url_for('static', path='/images/leaf.jpg') }}', alt: 'Leaf', title: 'Sustainable Growth' },
                            { src: '{{ url_for('static', path='/images/facade.jpg') }}', alt: 'Facade', title: 'Modern Architecture' }
                        ]
                    }">
                        <div class="mb-6">
                            <img :src="selectedImage" 
                                 alt="AI Marketing Demo" 
                                 class="w-full h-80 object-cover rounded-lg shadow-xl">
                        </div>
                        
                        <div class="grid grid-cols-4 gap-4">
                            <template x-for="(image, index) in images" :key="index">
                                <button @click="selectedImage = image.src"
                                        class="relative overflow-hidden rounded-lg transition-all duration-300 hover:scale-105"
                                        :class="selectedImage === image.src ? 'ring-2 ring-ai-blue' : ''">
                                    <img :src="image.src" 
                                         :alt="image.alt" 
                                         class="w-full h-16 object-cover">
                                    <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-20 transition-all duration-300"></div>
                                </button>
                            </template>
                        </div>
                        
                        <div class="mt-4 text-center">
                            <h3 x-text="images.find(img => img.src === selectedImage)?.title" 
                                class="text-xl font-semibold text-gray-900"></h3>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold mb-6 text-gray-900">
                        AI-Powered Marketing Tools
                    </h3>
                    
                    <!-- HTMX Form Demo -->
                    <div x-data="{ formData: { name: '', email: '', company: '' } }">
                        <form hx-post="/marketing-demo" 
                              hx-target="#demo-response"
                              hx-swap="innerHTML"
                              class="space-y-4">
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Name</label>
                                <input type="text" 
                                       x-model="formData.name"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent"
                                       placeholder="Your name">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
                                <input type="email" 
                                       x-model="formData.email"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent"
                                       placeholder="your@email.com">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Company</label>
                                <input type="text" 
                                       x-model="formData.company"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent"
                                       placeholder="Your company">
                            </div>
                            
                            <button type="submit" 
                                    class="w-full bg-ai-blue text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                                Get AI Marketing Demo
                            </button>
                        </form>
                        
                        <div id="demo-response" class="mt-6"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    {% include 'partials/footer.html' %}

</body>
</html> 