{% extends "base.html" %}

{% block title %}Portals - CineFlow Productions{% 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);
        }
    }

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

    .portal-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
        border-color: rgba(212, 175, 55, 0.5);
    }

    .portal-card:hover .portal-icon {
        transform: scale(1.1);
    }

    .portal-icon {
        transition: transform 0.3s ease;
    }

    .hero-gradient {
        background: linear-gradient(135deg, #0F0F0F 0%, #1A1A1A 50%, #0F0F0F 100%);
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero-gradient pt-32 pb-16 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="font-display text-4xl md:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in">
            <span class="bg-gradient-to-r from-cine-gold via-yellow-400 to-cine-gold bg-clip-text text-transparent">
                Portals
            </span>
        </h1>
        <p class="text-xl text-gray-300 max-w-2xl mx-auto animate-slide-up">
            Access CineFlow's portals and tools. Choose your destination below.
        </p>
    </div>
</section>

<!-- Portals Grid -->
<section class="py-16 bg-cine-dark">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- Vendor Portal -->
            <a href="/vendor" class="portal-card rounded-2xl p-8 block no-underline group">
                <div class="portal-icon w-16 h-16 bg-gradient-to-br from-cine-gold to-yellow-600 rounded-xl flex items-center justify-center mb-6">
                    <svg class="w-8 h-8 text-cine-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-cine-gold transition-colors">
                    Vendor Portal
                </h3>
                <p class="text-gray-400 mb-4">
                    Access your vendor dashboard, manage invoices, view payments, and communicate with our team.
                </p>
                <span class="inline-flex items-center text-cine-gold font-semibold">
                    Access Portal
                    <svg class="w-5 h-5 ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </span>
            </a>

            <!-- Admin Portal -->
            <a href="/admin" class="portal-card rounded-2xl p-8 block no-underline group">
                <div class="portal-icon w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-700 rounded-xl 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-cine-gold transition-colors">
                    Admin Portal
                </h3>
                <p class="text-gray-400 mb-4">
                    Manage vendors, review onboarding requests, and administer the CineFlow platform.
                </p>
                <span class="inline-flex items-center text-cine-gold font-semibold">
                    Access Portal
                    <svg class="w-5 h-5 ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </span>
            </a>

            <!-- CTF Portal -->
            <a href="/ctf" class="portal-card rounded-2xl p-8 block no-underline group">
                <div class="portal-icon w-16 h-16 bg-gradient-to-br from-ctf-green to-emerald-600 rounded-xl 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="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-white mb-3 group-hover:text-cine-gold transition-colors">
                    CTF Portal
                </h3>
                <p class="text-gray-400 mb-4">
                    Practice AI security challenges, earn badges, and learn about prompt injection vulnerabilities.
                </p>
                <span class="inline-flex items-center text-cine-gold font-semibold">
                    Access Portal
                    <svg class="w-5 h-5 ml-2 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </span>
            </a>

        </div>
    </div>
</section>

<!-- Additional Info Section -->
<section class="py-16 bg-gradient-to-b from-cine-dark to-cine-gray">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-display text-3xl font-bold text-white mb-6">
            Need Help Getting Started?
        </h2>
        <p class="text-gray-400 mb-8">
            If you're a new vendor looking to partner with CineFlow Productions, start with the Vendor Portal to begin your onboarding journey.
            For security researchers and developers, check out our CTF Portal to learn about AI security.
        </p>
        <a href="/demo/cineflow/contact" class="inline-flex items-center border-2 border-cine-gold text-cine-gold px-8 py-3 rounded-full font-semibold hover:bg-cine-gold hover:text-cine-dark transition-all duration-300">
            Contact Us
            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
        </a>
    </div>
</section>
{% endblock %}