{% extends "base.html" %}

{% block body_class %}overflow-x-hidden{% endblock %}

{% block extra_css %}
<style>
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes glow {
        from {
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
        }
        to {
            box-shadow: 0 0 40px rgba(212, 175, 55, 0.6);
        }
    }

    .hero-bg {
        background: linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 50%, #0F0F0F 100%);
        position: relative;
    }

    .hero-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23D4AF37" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.3;
    }

    .project-card {
        background: linear-gradient(145deg, #1A1A1A, #0F0F0F);
        border: 1px solid rgba(212, 175, 55, 0.2);
        transition: all 0.3s ease;
    }

    .project-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
        border-color: rgba(212, 175, 55, 0.5);
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-bg pt-20 pb-32 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center">
            <h1 class="font-display text-5xl md:text-7xl lg:text-8xl font-bold mb-8 animate-fade-in">
                <span class="bg-gradient-to-r from-white via-cine-gold to-white bg-clip-text text-transparent">
                    Bringing Stories to Life,
                </span>
                <br>
                <span class="bg-gradient-to-r from-cine-gold via-yellow-400 to-cine-gold bg-clip-text text-transparent">
                    Frame by Frame
                </span>
            </h1>

            <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto animate-slide-up">
                Crafting Tomorrow's Visual Masterpieces, Today
            </p>

            <div class="flex flex-col sm:flex-row gap-6 justify-center items-center animate-slide-up">
                <a href="/demo/cineflow/partners" class="bg-cine-gold text-cine-dark px-8 py-4 rounded-full font-bold text-lg hover:bg-yellow-400 transition-all duration-300 transform hover:scale-105 animate-glow">
                    Partner With Us
                </a>
                <a href="/demo/cineflow/work" class="border-2 border-cine-gold text-cine-gold px-8 py-4 rounded-full font-bold text-lg hover:bg-cine-gold hover:text-cine-dark transition-all duration-300 transform hover:scale-105">
                    Explore Our Portfolio
                </a>
            </div>
        </div>
    </div>

    <!-- Floating Elements -->
    <div class="absolute top-1/4 left-10 w-2 h-2 bg-cine-gold rounded-full animate-pulse"></div>
    <div class="absolute top-1/3 right-20 w-3 h-3 bg-yellow-400 rounded-full animate-pulse delay-1000"></div>
    <div class="absolute bottom-1/4 left-1/4 w-1 h-1 bg-cine-gold rounded-full animate-pulse delay-500"></div>
</section>

<!-- Featured Projects Section -->
<section class="py-24 bg-gradient-to-b from-cine-dark to-cine-gray">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="font-display text-4xl md:text-5xl font-bold mb-6">
                <span class="bg-gradient-to-r from-cine-gold to-yellow-400 bg-clip-text text-transparent">
                    Featured Projects
                </span>
            </h2>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                Discover some of our recent work that has captivated audiences worldwide
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Project 1 -->
            <div class="project-card rounded-2xl overflow-hidden group">
                <div class="aspect-video bg-gradient-to-br from-cine-gold/20 to-yellow-600/20 flex items-center justify-center relative">
                    <div class="absolute inset-0 bg-black/50 group-hover:bg-black/30 transition-all duration-300"></div>
                    <div class="relative z-10 text-center">
                        <div class="w-16 h-16 bg-cine-gold rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z"/>
                            </svg>
                        </div>
                        <h3 class="font-display text-2xl font-bold text-white mb-2">Midnight Chronicles</h3>
                        <p class="text-gray-300">Award-winning Feature Film</p>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-300 mb-4">A gripping noir thriller that redefined the genre, earning critical acclaim at Cannes Film Festival.</p>
                    <div class="flex items-center justify-between">
                        <span class="text-cine-gold font-semibold">Feature Film</span>
                        <a href="/demo/cineflow/work" class="text-cine-gold hover:text-yellow-400 transition-colors duration-300">
                            Learn More →
                        </a>
                    </div>
                </div>
            </div>

            <!-- Project 2 -->
            <div class="project-card rounded-2xl overflow-hidden group">
                <div class="aspect-video bg-gradient-to-br from-blue-500/20 to-purple-600/20 flex items-center justify-center relative">
                    <div class="absolute inset-0 bg-black/50 group-hover:bg-black/30 transition-all duration-300"></div>
                    <div class="relative z-10 text-center">
                        <div class="w-16 h-16 bg-cine-gold rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5l-1 2v1h8v-1l-1-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H3V5h18v10z"/>
                            </svg>
                        </div>
                        <h3 class="font-display text-2xl font-bold text-white mb-2">Tech Titans</h3>
                        <p class="text-gray-300">Emmy-nominated Series</p>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-300 mb-4">A groundbreaking tech drama series that explores the human side of Silicon Valley innovation.</p>
                    <div class="flex items-center justify-between">
                        <span class="text-cine-gold font-semibold">Television</span>
                        <a href="/demo/cineflow/work" class="text-cine-gold hover:text-yellow-400 transition-colors duration-300">
                            Learn More →
                        </a>
                    </div>
                </div>
            </div>

            <!-- Project 3 -->
            <div class="project-card rounded-2xl overflow-hidden group">
                <div class="aspect-video bg-gradient-to-br from-green-500/20 to-teal-600/20 flex items-center justify-center relative">
                    <div class="absolute inset-0 bg-black/50 group-hover:bg-black/30 transition-all duration-300"></div>
                    <div class="relative z-10 text-center">
                        <div class="w-16 h-16 bg-cine-gold rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                            </svg>
                        </div>
                        <h3 class="font-display text-2xl font-bold text-white mb-2">Luxury Redefined</h3>
                        <p class="text-gray-300">Global Brand Campaign</p>
                    </div>
                </div>
                <div class="p-6">
                    <p class="text-gray-300 mb-4">A visually stunning commercial campaign that elevated luxury brand storytelling to new heights.</p>
                    <div class="flex items-center justify-between">
                        <span class="text-cine-gold font-semibold">Commercial</span>
                        <a href="/demo/cineflow/work" class="text-cine-gold hover:text-yellow-400 transition-colors duration-300">
                            Learn More →
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Expertise Section -->
<section class="py-24 bg-cine-dark">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="font-display text-4xl md:text-5xl font-bold mb-6">
                <span class="bg-gradient-to-r from-cine-gold to-yellow-400 bg-clip-text text-transparent">
                    Our Expertise
                </span>
            </h2>
            <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                From concept to screen, CineFlow Productions offers comprehensive services across all media formats
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Film -->
            <div class="text-center group">
                <div class="w-20 h-20 bg-gradient-to-br from-cine-gold to-yellow-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
                    </svg>
                </div>
                <h3 class="font-display text-2xl font-bold text-white mb-4">Film</h3>
                <p class="text-gray-300">Award-winning feature films and documentaries that push creative boundaries and captivate global audiences.</p>
            </div>

            <!-- Television -->
            <div class="text-center group">
                <div class="w-20 h-20 bg-gradient-to-br from-cine-gold to-yellow-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5l-1 2v1h8v-1l-1-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H3V5h18v10z"/>
                    </svg>
                </div>
                <h3 class="font-display text-2xl font-bold text-white mb-4">Television</h3>
                <p class="text-gray-300">Engaging series and specials for broadcast and streaming platforms that define modern entertainment.</p>
            </div>

            <!-- Commercials & Digital -->
            <div class="text-center group">
                <div class="w-20 h-20 bg-gradient-to-br from-cine-gold to-yellow-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                </div>
                <h3 class="font-display text-2xl font-bold text-white mb-4">Commercials & Digital</h3>
                <p class="text-gray-300">High-impact advertising and innovative digital content that drives brand engagement and results.</p>
            </div>

            <!-- Post-Production -->
            <div class="text-center group">
                <div class="w-20 h-20 bg-gradient-to-br from-cine-gold to-yellow-600 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10 text-cine-dark" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
                    </svg>
                </div>
                <h3 class="font-display text-2xl font-bold text-white mb-4">Post-Production</h3>
                <p class="text-gray-300">State-of-the-art editing, VFX, and sound design that brings creative visions to stunning reality.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-24 bg-gradient-to-r from-cine-gold to-yellow-500 relative overflow-hidden">
    <div class="absolute inset-0 bg-black/20"></div>
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <h2 class="font-display text-4xl md:text-5xl font-bold text-cine-dark mb-6">
            Ready to Create Something Extraordinary?
        </h2>
        <p class="text-xl text-cine-dark/80 mb-8 max-w-2xl mx-auto">
            Let's collaborate to bring your vision to life with the power of cinematic storytelling
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="/demo/cineflow/contact" class="bg-cine-dark text-cine-gold px-8 py-4 rounded-full font-bold text-lg hover:bg-cine-gray transition-all duration-300 transform hover:scale-105">
                Start Your Project
            </a>
            <a href="/demo/cineflow/work" class="border-2 border-cine-dark text-cine-dark px-8 py-4 rounded-full font-bold text-lg hover:bg-cine-dark hover:text-cine-gold transition-all duration-300 transform hover:scale-105">
                View Our Work
            </a>
        </div>
    </div>
</section>
{% endblock %}