{% extends 'base.html' %}

{% block title %}{{ _('Welcome to CrashXAF') }}{% endblock %}

{% block extra_css %}
<style>
    .landing-page {
        min-height: calc(100vh - 70px);
    }

    .hero {
        position: relative;
        min-height: 82vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: clamp(2rem, 5vw, 4rem) var(--spacing-xl);
        overflow: hidden;
        isolation: isolate;
    }

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(700px 320px at 50% 0%, rgba(255, 107, 53, 0.2) 0%, transparent 70%),
            radial-gradient(500px 280px at 85% 75%, rgba(255, 140, 66, 0.12) 0%, transparent 70%);
        z-index: -2;
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 20% 15% auto 15%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
        z-index: -1;
    }

    .hero-content {
        max-width: 900px;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius-full);
        background: rgba(0, 255, 136, 0.1);
        border: 1px solid rgba(0, 255, 136, 0.55);
        color: var(--success);
        font-size: 0.84rem;
        font-weight: 700;
        margin-bottom: var(--spacing-lg);
    }

    .hero-title {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 6vw, 4.4rem);
        line-height: 1.08;
        margin-bottom: var(--spacing-lg);
        background: linear-gradient(120deg, #ffffff 0%, #ff9f5f 52%, #ff6b35 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 2.4vw, 1.2rem);
        color: var(--text-secondary);
        max-width: 700px;
        margin: 0 auto var(--spacing-xl);
    }

    .hero-actions {
        display: flex;
        justify-content: center;
        gap: var(--spacing-md);
        flex-wrap: wrap;
        margin-bottom: var(--spacing-2xl);
    }

    .hero-actions .btn {
        min-width: 220px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(130px, 1fr));
        gap: var(--spacing-md);
        max-width: 760px;
        margin: 0 auto;
    }

    .hero-stat {
        background: rgba(21, 27, 66, 0.7);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--spacing-md);
    }

    .hero-stat-value {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 2.5vw, 2rem);
        color: var(--accent-primary);
    }

    .hero-stat-label {
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
    }

    .floating-rocket {
        position: absolute;
        font-size: 3.2rem;
        color: rgba(255, 170, 90, 0.36);
        text-shadow: 0 0 22px rgba(255, 107, 53, 0.28);
        animation: float 6s ease-in-out infinite;
        pointer-events: none;
    }

    .floating-rocket.r1 {
        top: 11%;
        left: 8%;
        animation-delay: 0s;
        transform: rotate(-35deg);
    }

    .floating-rocket.r2 {
        top: 18%;
        right: 12%;
        animation-delay: 1.5s;
        transform: rotate(-25deg);
    }

    .floating-rocket.r3 {
        bottom: 27%;
        left: 4%;
        animation-delay: 3s;
        transform: rotate(-35deg);
    }

    @keyframes float {
        0%,
        100% {
            transform: translateY(0) rotate(-35deg);
        }

        50% {
            transform: translateY(-16px) rotate(-35deg);
        }
    }

    .features,
    .payments {
        padding: clamp(2rem, 5vw, 4rem) var(--spacing-xl);
        background: var(--bg-secondary);
    }

    .features-header,
    .payments h2,
    .how-to-play h2,
    .cta-section {
        text-align: center;
    }

    .features-header h2,
    .how-to-play h2,
    .payments h2,
    .cta-section h2 {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
    }

    .features-header p {
        max-width: 700px;
        margin: 0 auto;
    }

    .features-grid {
        max-width: 1200px;
        margin: var(--spacing-xl) auto 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-lg);
    }

    .feature-card {
        background: linear-gradient(160deg, rgba(15, 21, 53, 0.95), rgba(15, 21, 53, 0.75));
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        text-align: center;
        transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    }

    .feature-card:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 107, 53, 0.75);
        box-shadow: 0 12px 35px rgba(255, 107, 53, 0.15);
    }

    .feature-icon {
        width: 62px;
        height: 62px;
        margin: 0 auto var(--spacing-md);
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: var(--accent-gradient);
    }

    .feature-icon i {
        color: #fff;
        font-size: 1.35rem;
    }

    .feature-card p {
        margin-bottom: 0;
        color: var(--text-muted);
    }

    .how-to-play {
        padding: clamp(2rem, 5vw, 4rem) var(--spacing-xl);
    }

    .steps {
        max-width: 1000px;
        margin: var(--spacing-xl) auto 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--spacing-lg);
    }

    .step {
        position: relative;
        padding: var(--spacing-lg);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        text-align: center;
    }

    .step-number {
        position: absolute;
        top: -14px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 0.85rem;
        font-weight: 800;
        background: var(--accent-gradient);
        color: #fff;
    }

    .step p {
        margin: 0;
        color: var(--text-muted);
    }

    .payment-methods {
        margin-top: var(--spacing-xl);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .payment-method {
        min-width: 260px;
        padding: var(--spacing-lg) var(--spacing-xl);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
    }

    .payment-icon {
        font-size: 1.8rem;
        color: var(--accent-secondary);
    }

    .payment-method span {
        font-weight: 700;
    }

    .cta-section {
        padding: clamp(2.2rem, 5vw, 4rem) var(--spacing-xl);
        background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(255, 140, 66, 0.06) 100%);
    }

    .cta-section p {
        margin: 0 auto var(--spacing-lg);
        max-width: 620px;
    }

    @media (max-width: 768px) {
        .hero-stats {
            grid-template-columns: 1fr;
        }

        .floating-rocket {
            display: none;
        }

        .hero-actions .btn {
            min-width: 100%;
        }

        .payment-method {
            min-width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="landing-page">
    <section class="hero">
        <i class="floating-rocket fas fa-rocket r1" aria-hidden="true"></i>
        <i class="floating-rocket fas fa-rocket r2" aria-hidden="true"></i>
        <i class="floating-rocket fas fa-rocket r3" aria-hidden="true"></i>

        <div class="hero-content">
            <span class="hero-badge">
                <i class="fas fa-bolt"></i>
                {{ _('New! Play with XAF') }}
            </span>

            <h1 class="hero-title">{{ _('Fly High, Cash Out Before the Crash!') }}</h1>

            <p class="hero-subtitle">
                {{ _('The most exciting multiplier game in Cameroon. Watch the rocket fly and cash out at the right moment to multiply your XAF!') }}
            </p>

            <div class="hero-actions">
                <a href="{{ url_for('auth.register') }}" class="btn btn-primary btn-lg">
                    <i class="fas fa-rocket"></i>
                    {{ _('Start Playing') }}
                </a>
                <a href="{{ url_for('main.provably_fair') }}" class="btn btn-outline btn-lg">
                    <i class="fas fa-shield-alt"></i>
                    {{ _('Learn How It Works') }}
                </a>
                <button type="button" class="btn btn-secondary btn-lg" id="installBtn" style="display: none;">
                    <i class="fas fa-download"></i>
                    {{ _('Install App') }}
                </button>
            </div>

            <div class="hero-stats">
                <div class="hero-stat">
                    <div class="hero-stat-value">10,000+</div>
                    <div class="hero-stat-label">{{ _('Players') }}</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat-value">50M+</div>
                    <div class="hero-stat-label">{{ _('XAF Won') }}</div>
                </div>
                <div class="hero-stat">
                    <div class="hero-stat-value">1000x</div>
                    <div class="hero-stat-label">{{ _('Biggest Win') }}</div>
                </div>
            </div>
        </div>
    </section>

    <section class="features">
        <div class="features-header">
            <h2>{{ _('Why CrashXAF?') }}</h2>
            <p>{{ _('The fairest and most exciting crash game in Central Africa') }}</p>
        </div>

        <div class="features-grid">
            <article class="feature-card">
                <div class="feature-icon"><i class="fas fa-bolt"></i></div>
                <h3>{{ _('Instant Gameplay') }}</h3>
                <p>{{ _('New rounds every few seconds. Bet, watch, cash out!') }}</p>
            </article>

            <article class="feature-card">
                <div class="feature-icon"><i class="fas fa-shield-alt"></i></div>
                <h3>{{ _('Provably Fair') }}</h3>
                <p>{{ _('Blockchain-verified results. Every game can be verified.') }}</p>
            </article>

            <article class="feature-card">
                <div class="feature-icon"><i class="fas fa-money-bill-wave"></i></div>
                <h3>{{ _('MTN & Orange Money') }}</h3>
                <p>{{ _('Deposit and withdraw using your mobile money.') }}</p>
            </article>

            <article class="feature-card">
                <div class="feature-icon"><i class="fas fa-gift"></i></div>
                <h3>{{ _('Welcome Bonus') }}</h3>
                <p>{{ _('Get 10,000 XAF free when you register!') }}</p>
            </article>

            <article class="feature-card">
                <div class="feature-icon"><i class="fas fa-mobile-screen-button"></i></div>
                <h3>{{ _('Install on Phone') }}</h3>
                <p>{{ _('Add to home screen for app-like experience.') }}</p>
            </article>

            <article class="feature-card">
                <div class="feature-icon"><i class="fas fa-flag"></i></div>
                <h3>{{ _('Made for Cameroon') }}</h3>
                <p>{{ _('Play in French or English with XAF currency.') }}</p>
            </article>
        </div>
    </section>

    <section class="how-to-play">
        <h2>{{ _('How to Play') }}</h2>

        <div class="steps">
            <div class="step">
                <span class="step-number">1</span>
                <h4>{{ _('Place Your Bet') }}</h4>
                <p>{{ _('Enter your bet amount in XAF before the round starts.') }}</p>
            </div>

            <div class="step">
                <span class="step-number">2</span>
                <h4>{{ _('Watch the Rocket') }}</h4>
                <p>{{ _('The multiplier increases as the rocket flies higher.') }}</p>
            </div>

            <div class="step">
                <span class="step-number">3</span>
                <h4>{{ _('Cash Out!') }}</h4>
                <p>{{ _('Click cash out before it crashes to win your bet × multiplier!') }}</p>
            </div>
        </div>
    </section>

    <section class="payments">
        <h2>{{ _('Easy Payments') }}</h2>

        <div class="payment-methods">
            <div class="payment-method">
                <i class="payment-icon fas fa-sim-card" aria-hidden="true"></i>
                <span>MTN Mobile Money</span>
            </div>
            <div class="payment-method">
                <i class="payment-icon fas fa-mobile-alt" aria-hidden="true"></i>
                <span>Orange Money</span>
            </div>
        </div>
    </section>

    <section class="cta-section">
        <h2>{{ _('Ready to Fly?') }}</h2>
        <p>{{ _('Join thousands of players and start winning today!') }}</p>
        <a href="{{ url_for('auth.register') }}" class="btn btn-primary btn-lg">
            <i class="fas fa-rocket"></i>
            {{ _('Create Free Account') }}
        </a>
    </section>
</div>
{% endblock %}