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

{% block content %}
<section class="hero-section py-5 overflow-hidden" style="background: linear-gradient(135deg, var(--primary-navy) 0%, #1a4a5e 100%); color: white; position: relative;">
    <div class="container py-5">
        <div class="row align-items-center gy-5">
            <div class="col-lg-6">
                <h1 class="display-3 mb-4 animate__animated animate__fadeInUp">Turn Friendships into <span style="color: var(--accent-teal);">Rewards</span></h1>
                <p class="lead mb-5 opacity-75">Share the love and get rewarded for every friend you refer. It's simple, fast, and completely free to join.</p>
                <div class="d-flex gap-3">
                    <a href="{% url 'signup' %}" class="btn btn-primary btn-lg px-4 py-3">Start Earning Now</a>
                    <a href="#how-it-works" class="btn btn-outline-light btn-lg px-4 py-3">Learn More</a>
                </div>
            </div>
            <div class="col-lg-6 position-relative">
                <div class="glass-card p-4 p-md-5 rounded-4 animate__animated animate__fadeInRight" style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 25px 50px rgba(0,0,0,0.3);">
                    <div class="d-flex align-items-center mb-4">
                        <div class="rounded-circle bg-success bg-opacity-25 p-3 me-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-plus text-success" viewBox="0 0 16 16">
                                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                                <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
                            </svg>
                        </div>
                        <h4 class="mb-0">Referral Success!</h4>
                    </div>
                    <p class="mb-4">"I just invited 5 friends and earned 500 points toward my next purchase. It was so easy!"</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-secondary me-2" style="width: 32px; height: 32px;"></div>
                            <span class="small opacity-75">Alex Johnson</span>
                        </div>
                        <span class="badge rounded-pill bg-success px-3 py-2">+500 pts</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Decorative Shapes -->
    <div class="position-absolute bottom-0 end-0 p-5 opacity-25 d-none d-lg-block">
        <svg width="400" height="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <path fill="#20C997" d="M44.7,-76.4C58.8,-69.2,71.8,-59.1,79.6,-45.8C87.4,-32.5,90,-16.3,88.5,-0.9C86.9,14.6,81.2,29.1,72.1,41.4C63.1,53.7,50.7,63.7,37.1,70.6C23.5,77.5,8.7,81.3,-5.7,81.2C-20.1,81.1,-34.1,77.1,-46.8,69.5C-59.5,61.9,-70.9,50.7,-77.7,37.5C-84.5,24.3,-86.7,9.1,-84.4,-5.2C-82.2,-19.5,-75.4,-32.8,-66,-44.4C-56.6,-56,-44.6,-65.8,-31.4,-73.4C-18.2,-81.1,-3.7,-86.5,10.5,-84.7C24.7,-82.9,30.6,-83.7,44.7,-76.4Z" transform="translate(100 100)" />
        </svg>
    </div>
</section>

<section id="how-it-works" class="py-5">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="display-5 mb-3">How it Works</h2>
            <p class="text-muted mx-auto" style="max-width: 600px;">Get started in minutes and begin your journey toward amazing rewards.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 p-4 shadow-sm text-center">
                    <div class="rounded-circle bg-primary bg-opacity-10 text-primary mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <span class="h2 mb-0">1</span>
                    </div>
                    <h3>Create Account</h3>
                    <p class="text-muted">Sign up in seconds. You'll instantly get a unique referral code to share with your network.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 p-4 shadow-sm text-center">
                    <div class="rounded-circle bg-primary bg-opacity-10 text-primary mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <span class="h2 mb-0">2</span>
                    </div>
                    <h3>Share Code</h3>
                    <p class="text-muted">Send your code to friends or share it on social media. Use our marketing collateral to stand out.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 p-4 shadow-sm text-center">
                    <div class="rounded-circle bg-primary bg-opacity-10 text-primary mx-auto mb-4 d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <span class="h2 mb-0">3</span>
                    </div>
                    <h3>Get Rewards</h3>
                    <p class="text-muted">Watch your points grow every time someone signs up using your code. Redeem points for exclusive perks.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container py-5 text-center">
        <div class="card bg-primary text-white border-0 rounded-4 p-5" style="background: linear-gradient(135deg, var(--accent-teal) 0%, #17a67f 100%) !important;">
            <h2 class="display-5 mb-4">Ready to start earning?</h2>
            <p class="lead mb-5 opacity-75">Join thousands of customers who are already getting rewarded for their loyalty.</p>
            <a href="{% url 'signup' %}" class="btn btn-light btn-lg px-5 py-3 text-primary fw-bold">Sign Up for Free</a>
        </div>
    </div>
</section>
{% endblock %}