{% extends "layout/base.html" %}

{% block title %}FFGA - Federation Rules{% endblock %}

{% block content %}
<div class="container mx-auto px-6 py-16">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-4xl font-bold text-gray-800 mb-8">Federation Rules</h1>

        <div class="bg-white rounded-lg shadow p-8 mb-8">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold text-gray-800">Federation Authorization Document</h3>
                <a href="{{ url_for('static', filename='documents/FAME_Consortium_Member_Federation_form.pdf') }}" 
                   class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-300">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Download Template
                </a>
            </div>
            <p class="text-gray-600 mb-4">
                This document template must be completed, signed, and uploaded during the federation application process. It serves as legal authorization certifying that you represent your organization and are authorized to apply for FAME federation membership.
            </p>
            <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-blue-800">
                            Remember to sign the document with official company authorization and affix any required stamps or seals according to your local regulations.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Federation Process Diagram - Modern Hexagon Version -->
        <div class="w-full max-w-5xl mx-auto mb-16 overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-xl p-8 mb-4">
                <h2 class="text-3xl font-bold text-center text-white mb-2">Federation Journey</h2>
                <p class="text-center text-blue-100 mb-10">A seamless four-step process to join our trusted network</p>
                
                <!-- Hexagon Container -->
                <div class="flex justify-center perspective-1000">
                    <div id="hexagon-container" class="flex flex-wrap justify-center max-w-4xl">
                        <!-- Hexagon 1: Registration -->
                        <div id="hex-1" class="hexagon bg-white m-4 transform hover:scale-105 transition-all duration-300 cursor-pointer" onclick="showHexDetails(1)">
                            <div class="hex-inner flex flex-col items-center justify-center p-4 text-center">
                                <div class="text-blue-600 mb-3">
                                    <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Registration</h3>
                                <div class="number-badge">1</div>
                            </div>
                        </div>
                        
                        <!-- Hexagon 2: Evaluation -->
                        <div id="hex-2" class="hexagon bg-white m-4 transform hover:scale-105 transition-all duration-300 cursor-pointer" onclick="showHexDetails(2)">
                            <div class="hex-inner flex flex-col items-center justify-center p-4 text-center">
                                <div class="text-blue-600 mb-3">
                                    <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
                                    </svg>
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Evaluation</h3>
                                <div class="number-badge">2</div>
                            </div>
                        </div>
                        
                        <!-- Hexagon 3: Approval -->
                        <div id="hex-3" class="hexagon bg-white m-4 transform hover:scale-105 transition-all duration-300 cursor-pointer" onclick="showHexDetails(3)">
                            <div class="hex-inner flex flex-col items-center justify-center p-4 text-center">
                                <div class="text-blue-600 mb-3">
                                    <svg class="w-10 h-10 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Approval</h3>
                                <div class="number-badge">3</div>
                            </div>
                        </div>
                        
                        <!-- Hexagon 4: Participation -->
                        <div id="hex-4" class="hexagon bg-white m-4 transform hover:scale-105 transition-all duration-300 cursor-pointer" onclick="showHexDetails(4)">
                            <div class="hex-inner flex flex-col items-center justify-center p-4 text-center">
                                <div class="text-blue-600 mb-3">
                                    <svg class="w-10 h-10 mx-auto" 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" />
                                    </svg>
                                </div>
                                <h3 class="text-xl font-bold text-gray-800">Participation</h3>
                                <div class="number-badge">4</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Details Panel -->
                <div id="details-panel" class="mt-8 bg-white rounded-lg shadow-lg p-6 opacity-0 transform -translate-y-10 transition-all duration-500">
                    <div id="detail-content-1" class="detail-content hidden">
                        <h3 class="text-2xl font-bold text-blue-700 mb-4">1. Registration</h3>
                        <p class="text-gray-700 mb-4">Complete the form with your organization's details and provide the necessary DID credentials to begin your journey into the FAME federation.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">1</span>
                                    <h4 class="font-semibold text-blue-800">Submit Legal Information</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Provide complete and accurate information about your organization's legal structure and identity.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">2</span>
                                    <h4 class="font-semibold text-blue-800">DID Credentials</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Establish your organization's digital identity through secure decentralized identifiers.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">3</span>
                                    <h4 class="font-semibold text-blue-800">Authorization Documents</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Upload required documentation to verify your authority to represent your organization.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">4</span>
                                    <h4 class="font-semibold text-blue-800">Accept Terms</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Review and accept the FAME federation's terms, conditions, and governance framework.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div id="detail-content-2" class="detail-content hidden">
                        <h3 class="text-2xl font-bold text-blue-700 mb-4">2. Evaluation</h3>
                        <p class="text-gray-700 mb-4">Your application undergoes a thorough review by existing federation members through a transparent democratic voting process.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">1</span>
                                    <h4 class="font-semibold text-blue-800">Member Review</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Existing federation members carefully review your application details and documentation.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">2</span>
                                    <h4 class="font-semibold text-blue-800">Voting Process</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">A democratic voting procedure ensures fair and transparent decision-making on new memberships.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">3</span>
                                    <h4 class="font-semibold text-blue-800">Evaluation Criteria</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Applications are evaluated based on established criteria known to all federation members.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">4</span>
                                    <h4 class="font-semibold text-blue-800">Status Updates</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Receive real-time updates on the progress and status of your application throughout the voting period.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div id="detail-content-3" class="detail-content hidden">
                        <h3 class="text-2xl font-bold text-blue-700 mb-4">3. Approval</h3>
                        <p class="text-gray-700 mb-4">Upon successful approval, you'll receive official credentials and gain access to the FAME marketplace as a federated member.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">1</span>
                                    <h4 class="font-semibold text-blue-800">FVC Credentials</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Receive official Federated Verifiable Credentials that establish your organization's membership status.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">2</span>
                                    <h4 class="font-semibold text-blue-800">Marketplace Access</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Gain full access to the FAME marketplace platform and its extensive features and capabilities.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">3</span>
                                    <h4 class="font-semibold text-blue-800">Governance Participation</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">As a member, participate in governance decisions that shape the future of the federation.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">4</span>
                                    <h4 class="font-semibold text-blue-800">Asset Trading</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Begin publishing and trading data assets with other members in a secure, regulated environment.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div id="detail-content-4" class="detail-content hidden">
                        <h3 class="text-2xl font-bold text-blue-700 mb-4">4. Participation</h3>
                        <p class="text-gray-700 mb-4">Actively engage in the federation ecosystem by contributing assets, participating in governance, and collaborating with other members.</p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">1</span>
                                    <h4 class="font-semibold text-blue-800">Voting Rights</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Review and vote on new member applications, helping to grow and strengthen the federation.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">2</span>
                                    <h4 class="font-semibold text-blue-800">Marketplace Growth</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Contribute to the marketplace's growth by adding valuable data assets and services.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">3</span>
                                    <h4 class="font-semibold text-blue-800">Collaboration</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Collaborate with other federation members on joint initiatives and data-sharing projects.</p>
                            </div>
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-blue-600 text-white rounded-full mr-3">4</span>
                                    <h4 class="font-semibold text-blue-800">Governance Input</h4>
                                </div>
                                <p class="text-sm text-gray-600 ml-11">Shape the future of the federation by contributing to governance discussions and policy formation.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Call to action -->
                <div class="text-center mt-10">
                    <a href="/federation" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-md hover:bg-blue-50 transition duration-300 shadow-md font-bold">
                        Start Your Federation Journey Today
                    </a>
                </div>
            </div>
        </div>
        
        
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    /* Hexagon Shape */
    .hexagon {
        position: relative;
        width: 150px;
        height: 170px;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        transition: all 0.3s ease;
    }
    
    .hex-inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .hexagon.active {
        background: linear-gradient(135deg, #3B82F6, #4338CA);
        transform: scale(1.1);
    }
    
    .hexagon.active .hex-inner {
        color: white;
    }
    
    .hexagon.active .text-blue-600 {
        color: white;
    }
    
    .hexagon.active h3 {
        color: white;
    }
    
    .hexagon.active .number-badge {
        background-color: white;
        color: #3B82F6;
    }
    
    .number-badge {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 24px;
        background-color: #3B82F6;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
    }
    
    /* Animation classes */
    .perspective-1000 {
        perspective: 1000px;
    }
    
    @keyframes float {
        0% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
        100% {
            transform: translateY(0px);
        }
    }
    
    #hexagon-container .hexagon:nth-child(1) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 0s;
    }
    
    #hexagon-container .hexagon:nth-child(2) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 1s;
    }
    
    #hexagon-container .hexagon:nth-child(3) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 2s;
    }
    
    #hexagon-container .hexagon:nth-child(4) {
        animation: float 6s ease-in-out infinite;
        animation-delay: 3s;
    }
</style>

<script>
    function showHexDetails(stepNumber) {
        // Remove active class from all hexagons
        document.querySelectorAll('.hexagon').forEach(function(hex) {
            hex.classList.remove('active');
        });
        
        // Add active class to the selected hexagon
        document.getElementById('hex-' + stepNumber).classList.add('active');
        
        // Hide all detail sections
        document.querySelectorAll('.detail-content').forEach(function(content) {
            content.classList.add('hidden');
        });
        
        // Show the selected detail section
        const detailContent = document.getElementById('detail-content-' + stepNumber);
        if (detailContent) {
            detailContent.classList.remove('hidden');
        }
        
        // Show the details panel with animation
        const detailsPanel = document.getElementById('details-panel');
        detailsPanel.classList.remove('opacity-0', '-translate-y-10');
        detailsPanel.classList.add('opacity-100', 'translate-y-0');
    }
    
    // Show the first step on page load
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            showHexDetails(1);
        }, 500); // Short delay to allow full page load
    });
</script>
{% endblock %}