{% extends 'base/layout.html' %}
{% load static %}

{% block title %}Sell on TCGKof - Become a Seller{% endblock %}

{% block content %}
<div style="padding: 4rem 1rem; max-width: 1200px; margin: 0 auto; text-align: center;">
    
    <!-- Hero Section -->
    <div style="margin-bottom: 5rem;">
        <h1 style="font-size: 3.5rem; font-weight: 800; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; letter-spacing: -0.025em;">
            Unlock the Value of Your Collection
        </h1>
        <p style="font-size: 1.25rem; color: var(--text-muted, #94a3b8); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.6;">
            Join the fastest-growing TCG marketplace. Turn your extra cards into cash with powerful tools designed for sellers of all sizes.
        </p>
        <div style="display: flex; gap: 1rem; justify-content: center;">
            <a href="{% url 'users:register' %}" class="btn" style="padding: 1rem 2.5rem; font-size: 1.1rem;">Start Selling Today</a>
            <a href="#benefits" class="btn btn-outline" style="padding: 1rem 2.5rem; font-size: 1.1rem;">Learn More</a>
        </div>
    </div>

    <!-- Stats Section -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 5rem; padding: 2rem; background: rgba(255, 255, 255, 0.03); border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.1);">
        <div>
            <div style="font-size: 2.5rem; font-weight: 700; color: #f59e0b;">$2M+</div>
            <div style="color: var(--text-muted, #94a3b8); margin-top: 0.5rem;">Paid to Sellers</div>
        </div>
        <div>
            <div style="font-size: 2.5rem; font-weight: 700; color: #f59e0b;">50k+</div>
            <div style="color: var(--text-muted, #94a3b8); margin-top: 0.5rem;">Active Buyers</div>
        </div>
        <div>
            <div style="font-size: 2.5rem; font-weight: 700; color: #f59e0b;">24h</div>
            <div style="color: var(--text-muted, #94a3b8); margin-top: 0.5rem;">Average Payout Time</div>
        </div>
    </div>

    <!-- Benefits Section -->
    <div id="benefits" style="margin-bottom: 5rem; text-align: left;">
        <h2 style="font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 3rem;">Why Sell on TCGKof?</h2>
        
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
            <!-- Benefit 1 -->
            <div style="padding: 2rem; background: var(--bg-card, #1e293b); border-radius: 1rem; border: 1px solid var(--border-color, #334155); transition: transform 0.2s;">
                <div style="width: 50px; height: 50px; background: rgba(245, 158, 11, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #f59e0b;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                </div>
                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;">Low Selling Fees</h3>
                <p style="color: var(--text-muted, #94a3b8); line-height: 1.6;">Keep more of your profit with our straightforward 5% commission rate, one of the lowest in the industry.</p>
            </div>

            <!-- Benefit 2 -->
            <div style="padding: 2rem; background: var(--bg-card, #1e293b); border-radius: 1rem; border: 1px solid var(--border-color, #334155); transition: transform 0.2s;">
                <div style="width: 50px; height: 50px; background: rgba(245, 158, 11, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #f59e0b;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                </div>
                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;">Massive Audience</h3>
                <p style="color: var(--text-muted, #94a3b8); line-height: 1.6;">Instantly connect with thousands of collectors actively looking for the cards you have in your binder.</p>
            </div>

            <!-- Benefit 3 -->
            <div style="padding: 2rem; background: var(--bg-card, #1e293b); border-radius: 1rem; border: 1px solid var(--border-color, #334155); transition: transform 0.2s;">
                <div style="width: 50px; height: 50px; background: rgba(245, 158, 11, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #f59e0b;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                </div>
                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem;">Secure Protection</h3>
                <p style="color: var(--text-muted, #94a3b8); line-height: 1.6;">Our Seller Protection Guarantee ensures you're covered against fraud, chargebacks, and shipping issues.</p>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div style="padding: 4rem; background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(30, 41, 59, 0) 100%); border-radius: 2rem; border: 1px solid rgba(245, 158, 11, 0.2);">
        <h2 style="font-size: 2rem; font-weight: 700; margin-bottom: 1rem;">Ready to Get Started?</h2>
        <p style="color: var(--text-muted, #94a3b8); margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto;">
            Create your account in less than 2 minutes and list your first card today. It's completely free to join.
        </p>
        <a href="{% url 'users:register' %}" class="btn" style="padding: 1rem 3rem; font-size: 1.1rem; box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.39);">Create Seller Account</a>
    </div>

</div>
{% endblock %}