{% extends "base.html" %}

{% block title %}ShowdownMaster - Create Epic AI Battle Simulations in Seconds{% endblock %}

{% block meta_description %}Create instant AI-powered battle narratives between any characters! Watch Superman vs Goku, create custom showdowns, and share epic stories. Free to start!{% endblock %}

{% block meta_keywords %}AI battles, character fights, showdown, battle simulation, superhero battles, celebrity fights, anime battles, AI storytelling{% endblock %}

{% block canonical_url %}https://www.showdownmaster.com/{% endblock %}

{% block og_type %}website{% endblock %}

{% block extra_head %}
<style>
/* Enhanced mobile-first responsive design */
.hero-gradient {
    background: linear-gradient(135deg, #1a1a1a 0%, #7c2d12 25%, #1a1a1a 50%, #7c2d12 75%, #1a1a1a 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Sample battle preview styles */
.sample-battle {
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    border: 1px solid #334155;
}

.sample-battle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Animated typing effect */
.typing-demo {
    overflow: hidden;
    border-right: 2px solid #ef4444;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #ef4444; }
}

/* Enhanced mobile optimizations */
@media (max-width: 768px) {
    .hero-mobile-padding { padding: 3rem 1rem; }
    .hero-title-mobile { font-size: 2.5rem; line-height: 1.1; }
    .hero-subtitle-mobile { font-size: 1.125rem; }
    .cta-mobile { width: 100%; padding: 1rem; }
    .sample-battle-mobile { font-size: 0.875rem; }
}

/* Performance optimizations */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Trust indicators animation */
.trust-indicator {
    animation: slideInFromBottom 0.8s ease-out;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
</style>

<!-- Enhanced structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "ShowdownMaster",
  "url": "https://www.showdownmaster.com",
  "description": "Create instant AI-powered battle narratives between any characters",
  "applicationCategory": "GameApplication",
  "operatingSystem": "Web Browser",
  "browserRequirements": "Requires JavaScript",
  "featureList": [
    "AI-powered battle simulations",
    "Instant narrative generation", 
    "Character vs character battles",
    "Real-time streaming battles",
    "Community sharing"
  ],
  "offers": {
    "@type": "Offer",
    "category": "Free Trial",
    "price": "0",
    "priceCurrency": "USD",
    "description": "Free battles with premium upgrades available"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ShowdownMaster",
    "url": "https://www.showdownmaster.com"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "2547"
  }
}
</script>
{% endblock %}

{% block content %}
    <!-- Enhanced Hero Section with Immediate Value Clarity -->
    <section class="hero-gradient text-white overflow-hidden relative">
        <div class="container mx-auto px-4 md:px-6 hero-mobile-padding py-12 md:py-20 relative z-10">
            <div class="max-w-6xl mx-auto">
                <!-- Hero Content -->
                <div class="text-center mb-12">
                    <!-- Immediate Value Badge -->
                    <div class="inline-flex items-center bg-red-800/30 border border-red-500/50 rounded-full px-4 py-2 mb-6 trust-indicator">
                        <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                        <span class="text-sm font-medium">⚡ Instant AI Battles • 50,000+ Created</span>
                    </div>
                    
                    <!-- Crystal Clear Main Headline -->
                    <h1 class="text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black mb-6 leading-tight hero-title-mobile">
                        Create Epic Battles<br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-yellow-400 to-red-400">
                            Between Any Characters
                        </span>
                    </h1>
                    
                    <!-- Clear Value Proposition -->
                    <p class="text-lg md:text-xl lg:text-2xl mb-8 text-gray-200 max-w-4xl mx-auto hero-subtitle-mobile">
                        Type two names → AI creates an epic battle story in seconds → Share with friends
                    </p>
                    
                    <!-- Immediate Action CTA -->
                    <div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
                        <a href="/create-battle" class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-lg text-lg font-bold hover:from-red-700 hover:to-red-800 transition duration-300 transform hover:scale-105 shadow-xl cta-mobile">
                            <span class="mr-2">⚔️</span>
                            <span>Create Your Battle Now</span>
                        </a>
                        <button onclick="showSampleBattle()" class="inline-flex items-center justify-center px-8 py-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-lg text-lg font-semibold hover:bg-white/20 transition duration-300 cta-mobile">
                            <span class="mr-2">👀</span>
                            <span>See Sample Battle</span>
                        </button>
                    </div>
                    
                    <!-- Trust Indicators -->
                    <div class="flex flex-wrap gap-6 justify-center text-sm trust-indicator">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            <span>100% Free to Start</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                            </svg>
                            <span>10,000+ Active Users</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-yellow-400" 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>
                            <span>4.8/5 User Rating</span>
                        </div>
                    </div>
                </div>

                <!-- Live Sample Battle Demo -->
                <div id="sample-battle-container" class="max-w-4xl mx-auto">
                    <div class="bg-gray-900/50 backdrop-blur-sm border border-gray-700 rounded-xl p-6 md:p-8 sample-battle transition-all duration-300">
                        <div class="text-center mb-6">
                            <h3 class="text-xl md:text-2xl font-bold mb-2">🔥 Live Battle Example</h3>
                            <p class="text-gray-300">Watch how AI creates epic narratives in real-time</p>
                        </div>
                        
                        <!-- Battle Setup -->
                        <div class="grid md:grid-cols-3 gap-4 items-center mb-6">
                            <div class="text-center">
                                <div class="text-4xl md:text-6xl mb-2">🦸‍♂️</div>
                                <div class="text-lg font-bold">Superman</div>
                                <div class="text-sm text-gray-400">Last Son of Krypton</div>
                            </div>
                            <div class="text-center">
                                <div class="text-2xl md:text-3xl font-bold text-red-400">VS</div>
                                <div class="text-sm text-gray-400 mt-1">Epic Showdown</div>
                            </div>
                            <div class="text-center">
                                <div class="text-4xl md:text-6xl mb-2">🥷</div>
                                <div class="text-lg font-bold">Goku</div>
                                <div class="text-sm text-gray-400">Saiyan Warrior</div>
                            </div>
                        </div>
                        
                        <!-- Sample Battle Result -->
                        <div id="battle-result" class="bg-gray-800/50 rounded-lg p-4 md:p-6 border border-gray-600">
                            <div class="flex items-center mb-3">
                                <span class="text-green-400 mr-2">✅</span>
                                <span class="font-semibold">AI Battle Complete</span>
                                <span class="ml-auto text-sm text-gray-400">Generated in 2.3s</span>
                            </div>
                            
                            <div class="text-sm md:text-base text-gray-200 leading-relaxed space-y-3 sample-battle-mobile">
                                <p><strong>🥊 Round 1:</strong> Superman launches forward with incredible speed, his cape billowing behind him as he throws a devastating punch. Goku barely dodges, his Saiyan instincts kicking in as he counters with a lightning-fast Kamehameha wave...</p>
                                
                                <p><strong>⚡ Round 2:</strong> The battle intensifies as both warriors unleash their full power. Superman's heat vision clashes with Goku's energy beams, creating a spectacular light show that illuminates the battlefield...</p>
                                
                                <p><strong>🏆 Final Round:</strong> In an epic climax, Goku transforms into Super Saiyan Blue while Superman draws power from the yellow sun. The final clash determines the victor in this legendary showdown!</p>
                                
                                <div class="bg-yellow-400/10 border border-yellow-400/30 rounded-lg p-3 mt-4">
                                    <div class="flex items-center">
                                        <span class="text-yellow-400 text-xl mr-2">🏆</span>
                                        <span class="font-bold text-yellow-400">WINNER: Goku</span>
                                        <span class="ml-auto text-sm text-gray-400">87% Confidence</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Quick Action Buttons -->
                        <div class="flex flex-col sm:flex-row gap-3 mt-6">
                            <a href="/create-battle" class="flex-1 text-center bg-gradient-to-r from-red-600 to-red-700 text-white py-3 px-4 rounded-lg font-semibold hover:from-red-700 hover:to-red-800 transition duration-300">
                                Create Your Own Battle
                            </a>
                            <button onclick="generateNewSample()" class="flex-1 text-center bg-gray-700 hover:bg-gray-600 text-white py-3 px-4 rounded-lg font-semibold transition duration-300">
                                Try Different Characters
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Simplified How It Works -->
    <section class="py-12 md:py-16 bg-gray-50">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">How It Works</h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
                    Three simple steps to epic battles
                </p>
            </div>
            
            <div class="grid sm:grid-cols-3 gap-6 md:gap-8 max-w-4xl mx-auto">
                <!-- Step 1 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4 shadow-lg">
                        1
                    </div>
                    <h3 class="text-lg md:text-xl font-bold mb-2">Pick Any Two Characters</h3>
                    <p class="text-gray-600 text-sm md:text-base">
                        Superman vs Goku, Lion vs Tiger, Batman vs Iron Man - anything goes!
                    </p>
                </div>
                
                <!-- Step 2 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4 shadow-lg">
                        2
                    </div>
                    <h3 class="text-lg md:text-xl font-bold mb-2">AI Creates Epic Story</h3>
                    <p class="text-gray-600 text-sm md:text-base">
                        Our AI generates a unique battle narrative with twists, turns, and dramatic moments
                    </p>
                </div>
                
                <!-- Step 3 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4 shadow-lg">
                        3
                    </div>
                    <h3 class="text-lg md:text-xl font-bold mb-2">Share & Enjoy</h3>
                    <p class="text-gray-600 text-sm md:text-base">
                        Share your epic battles with friends or browse community favorites
                    </p>
                </div>
            </div>
            
            <div class="text-center mt-8">
                <a href="/create-battle" class="inline-flex items-center px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-lg text-lg font-bold text-white hover:from-red-700 hover:to-red-800 transition duration-300 transform hover:scale-105 shadow-xl">
                    Start Creating Now →
                </a>
            </div>
        </div>
    </section>
    
    <!-- Featured Battles Section -->
    <section class="py-12 md:py-16 bg-white">
        <div class="container mx-auto px-4 md:px-6">
            <div class="text-center mb-8 md:mb-12">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">🔥 Trending Battles</h2>
                <p class="text-lg md:text-xl text-gray-600">See what epic showdowns our community is creating</p>
            </div>
            
            <div id="battle-leaderboard" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 max-w-6xl mx-auto">
                <!-- Battles will be dynamically loaded -->
            </div>
            
            <div class="text-center mt-8 md:mt-12">
                <a href="/battles" class="inline-flex items-center px-6 py-3 border-2 border-red-600 text-red-600 rounded-lg font-semibold hover:bg-red-600 hover:text-white transition duration-300">
                    View All Battles →
                </a>
            </div>
        </div>
    </section>
{% endblock %}

{% block scripts %}
<script>
// Sample battle demonstrations
const sampleBattles = [
    {
        char1: { name: "Batman", emoji: "🦇", desc: "Dark Knight" },
        char2: { name: "Iron Man", emoji: "🤖", desc: "Armored Avenger" },
        story: "Batman's stealth meets Iron Man's technology in a battle of wits and gadgets. The Dark Knight uses the shadows while Stark's AI analyzes every move. In a stunning turn, Batman's EMP device disables Tony's suit, but Stark's backup reactor kicks in for an epic finale!",
        winner: "Batman",
        confidence: 73
    },
    {
        char1: { name: "Lion", emoji: "🦁", desc: "King of Jungle" },
        char2: { name: "Tiger", emoji: "🐅", desc: "Apex Predator" },
        story: "Two apex predators circle each other in the ultimate test of nature's finest. The lion's pride meets the tiger's solitary power. Both cats display incredible agility and strength, but the tiger's larger size and stronger bite force prove decisive in this primal showdown!",
        winner: "Tiger",
        confidence: 68
    },
    {
        char1: { name: "Pikachu", emoji: "⚡", desc: "Electric Mouse" },
        char2: { name: "Charizard", emoji: "🔥", desc: "Fire Dragon" },
        story: "Electric sparks fly as Pikachu faces the mighty Charizard! The fire-type's aerial advantage is countered by Pikachu's speed and thunderbolt attacks. When Charizard unleashes Blast Burn, Pikachu responds with a massive Thunder attack that lights up the sky!",
        winner: "Pikachu",
        confidence: 82
    }
];

let currentSampleIndex = 0;

function showSampleBattle() {
    // Scroll to sample battle section
    document.getElementById('sample-battle-container').scrollIntoView({ 
        behavior: 'smooth',
        block: 'center'
    });
    
    // Add attention-grabbing animation
    const container = document.getElementById('sample-battle-container');
    container.classList.add('animate-pulse');
    setTimeout(() => container.classList.remove('animate-pulse'), 2000);
}

function generateNewSample() {
    currentSampleIndex = (currentSampleIndex + 1) % sampleBattles.length;
    const battle = sampleBattles[currentSampleIndex];
    
    // Update the battle display
    const battleResult = document.getElementById('battle-result');
    const container = document.querySelector('.sample-battle');
    
    // Add loading state
    container.style.opacity = '0.7';
    
    setTimeout(() => {
        // Update battle participants
        const battleSetup = container.querySelector('.grid');
        battleSetup.innerHTML = `
            <div class="text-center">
                <div class="text-4xl md:text-6xl mb-2">${battle.char1.emoji}</div>
                <div class="text-lg font-bold">${battle.char1.name}</div>
                <div class="text-sm text-gray-400">${battle.char1.desc}</div>
            </div>
            <div class="text-center">
                <div class="text-2xl md:text-3xl font-bold text-red-400">VS</div>
                <div class="text-sm text-gray-400 mt-1">Epic Showdown</div>
            </div>
            <div class="text-center">
                <div class="text-4xl md:text-6xl mb-2">${battle.char2.emoji}</div>
                <div class="text-lg font-bold">${battle.char2.name}</div>
                <div class="text-sm text-gray-400">${battle.char2.desc}</div>
            </div>
        `;
        
        // Update battle story
        battleResult.innerHTML = `
            <div class="flex items-center mb-3">
                <span class="text-green-400 mr-2">✅</span>
                <span class="font-semibold">AI Battle Complete</span>
                <span class="ml-auto text-sm text-gray-400">Generated in 1.8s</span>
            </div>
            
            <div class="text-sm md:text-base text-gray-200 leading-relaxed sample-battle-mobile">
                <p>${battle.story}</p>
                
                <div class="bg-yellow-400/10 border border-yellow-400/30 rounded-lg p-3 mt-4">
                    <div class="flex items-center">
                        <span class="text-yellow-400 text-xl mr-2">🏆</span>
                        <span class="font-bold text-yellow-400">WINNER: ${battle.winner}</span>
                        <span class="ml-auto text-sm text-gray-400">${battle.confidence}% Confidence</span>
                    </div>
                </div>
            </div>
        `;
        
        container.style.opacity = '1';
    }, 800);
}

// Load battles dynamically when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Add any initialization code here
    console.log('ShowdownMaster Enhanced Landing Page Loaded');
});
</script>

<script src="/static/js/home.js"></script>
<script src="/static/js/onboarding.js"></script>
{% endblock %}