<x-site-layout title="Become a Contributor" meta-description="Join our community of contributors and share your knowledge">
    <!-- Hero Section -->
    <div class="relative bg-gradient-to-br from-theme-primary to-theme-secondary py-20">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="inline-block px-4 py-1 bg-white bg-opacity-20 rounded-full text-white text-sm font-medium mb-4">
                Join Our Community
            </span>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">
                Become a Contributor
            </h1>
            <p class="text-xl text-white text-opacity-90 max-w-5xl mx-auto mb-8">
                Share your knowledge, engage in meaningful discussions, and connect with like-minded individuals in our community.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('register.role.contributor') }}" class="inline-flex items-center justify-center px-8 py-4 bg-white text-theme-primary font-semibold rounded-lg hover:bg-opacity-90 transition-all shadow-lg">
                    <i class="fas fa-user-plus mr-2"></i>
                    Create Your Account
                </a>
                <a href="#benefits" class="inline-flex items-center justify-center px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-lg hover:bg-white hover:bg-opacity-10 transition-all">
                    Learn More
                </a>
            </div>
        </div>
    </div>

    <!-- Breadcrumb -->
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('public.discussions.index') }}" class="hover:text-green-600 transition">Discussions</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Become a Contributor</span>
            </nav>
        </div>
    </div>

    <!-- Benefits Section -->
    <section id="benefits" class="py-16 bg-theme-body">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-theme-heading mb-4">Why Become a Contributor?</h2>
                <p class="text-lg text-theme-body max-w-5xl mx-auto">
                    As a contributor, you'll have access to powerful features that help you share and grow your knowledge.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Benefit 1 -->
                <div class="theme-card rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 bg-theme-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-comments text-2xl text-theme-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Start Discussions</h3>
                    <p class="text-theme-body">
                        Create engaging discussions on topics that matter to you. Share your insights and spark meaningful conversations.
                    </p>
                </div>

                <!-- Benefit 2 -->
                <div class="theme-card rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 bg-theme-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-reply text-2xl text-theme-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Share Your Expertise</h3>
                    <p class="text-theme-body">
                        Reply to discussions, answer questions, and help others in the community learn and grow.
                    </p>
                </div>

                <!-- Benefit 3 -->
                <div class="theme-card rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 bg-theme-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-users text-2xl text-theme-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Build Connections</h3>
                    <p class="text-theme-body">
                        Connect with other contributors who share your interests and expand your professional network.
                    </p>
                </div>

                <!-- Benefit 4 -->
                <div class="theme-card rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 bg-theme-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-chart-line text-2xl text-theme-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Track Your Impact</h3>
                    <p class="text-theme-body">
                        Monitor your contributions with detailed analytics. See how many people view and engage with your content.
                    </p>
                </div>

                <!-- Benefit 5 -->
                <div class="theme-card rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 bg-theme-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-bolt text-2xl text-theme-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Instant Access</h3>
                    <p class="text-theme-body">
                        No approval needed! Your contributor account is activated immediately upon registration.
                    </p>
                </div>

                <!-- Benefit 6 -->
                <div class="theme-card rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow">
                    <div class="w-12 h-12 bg-theme-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                        <i class="fas fa-tags text-2xl text-theme-primary"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Organize by Topics</h3>
                    <p class="text-theme-body">
                        Browse and contribute to discussions organized by topics, making it easy to find your areas of interest.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="py-16 bg-theme-card">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-theme-heading mb-4">How It Works</h2>
                <p class="text-lg text-theme-body max-w-5xl mx-auto">
                    Getting started as a contributor is simple and straightforward.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Step 1 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-theme-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                        1
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Create Account</h3>
                    <p class="text-theme-body">
                        Sign up with your name, email, and password. It takes less than a minute!
                    </p>
                </div>

                <!-- Step 2 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-theme-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                        2
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Get Access</h3>
                    <p class="text-theme-body">
                        Your account is instantly activated with the Contributor role. No waiting for approval!
                    </p>
                </div>

                <!-- Step 3 -->
                <div class="text-center">
                    <div class="w-16 h-16 bg-theme-primary text-white rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4">
                        3
                    </div>
                    <h3 class="text-xl font-semibold text-theme-heading mb-2">Start Contributing</h3>
                    <p class="text-theme-body">
                        Create discussions, reply to posts, and engage with the community right away!
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-16 bg-theme-body">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="theme-card rounded-lg shadow-xl p-8 md:p-12 text-center">
                <h2 class="text-3xl font-bold text-theme-heading mb-4">Ready to Get Started?</h2>
                <p class="text-lg text-theme-body mb-8">
                    Join our growing community of contributors today and start sharing your knowledge with the world.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('register.role.contributor') }}" class="inline-flex items-center justify-center px-8 py-4 theme-btn-primary font-semibold rounded-lg transition-all hover:opacity-90">
                        <i class="fas fa-user-plus mr-2"></i>
                        Create Free Account
                    </a>
                    <a href="{{ route('public.discussions.index') }}" class="inline-flex items-center justify-center px-8 py-4 theme-btn-secondary font-semibold rounded-lg transition-all hover:opacity-90">
                        <i class="fas fa-eye mr-2"></i>
                        Browse Discussions
                    </a>
                </div>
                <p class="mt-6 text-sm text-theme-body">
                    Already have an account? 
                    <a href="{{ route('public.contributor.login') }}" class="text-theme-link font-semibold hover:underline">
                        Sign in here
                    </a>
                </p>
            </div>
        </div>
    </section>
</x-site-layout>
