{% extends "base.html" %}

{% block title %}Connect with Warwick Students | Warwick Connect{% endblock %}

{% block extra_css %}
<style>
    .hero-section {
        background: linear-gradient(135deg, #003366 0%, #004d99 100%);
        color: white;
        padding: 6rem 0;
        border-radius: 24px;
        margin-top: 1rem;
        position: relative;
        overflow: hidden;
    }

    .hero-section::after {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 300px;
        height: 300px;
        background: rgba(255, 107, 107, 0.1);
        border-radius: 50%;
        z-index: 1;
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        opacity: 0.9;
        margin-bottom: 2.5rem;
        max-width: 600px;
    }

    .badge-warwick {
        background-color: rgba(255, 255, 255, 0.15);
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        display: inline-block;
    }

    .feature-card {
        padding: 2.5rem;
        background: white;
        border-radius: 20px;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.03);
        box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        background: var(--bg-light);
        color: var(--warwick-navy);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<section class="hero-section text-center text-lg-start">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <span class="badge-warwick">Exclusive for @warwick.ac.uk students</span>
                <h1 class="hero-title">Discover your next connection at Warwick.</h1>
                <p class="hero-subtitle">The only dating and networking platform dedicated exclusively to University of Warwick students. Find friends, study buddies, or something more.</p>
                <div class="d-flex flex-column flex-sm-row gap-3">
                    <a href="{% url 'register' %}" class="btn btn-accent btn-lg px-5">Get Started</a>
                    <a href="{% url 'login' %}" class="btn btn-outline-light btn-lg px-5">Log In</a>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <!-- Simple abstract visual using shapes -->
                <div class="position-relative" style="height: 400px;">
                    <div style="position: absolute; width: 200px; height: 200px; background: var(--accent-coral); border-radius: 50%; top: 50px; left: 50px; opacity: 0.8;"></div>
                    <div style="position: absolute; width: 150px; height: 150px; border: 3px solid white; border-radius: 16px; top: 150px; left: 150px; transform: rotate(15deg);"></div>
                    <div style="position: absolute; width: 80px; height: 80px; background: white; border-radius: 8px; top: 100px; left: 250px; opacity: 0.2;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 mt-5">
    <div class="row g-4">
        <div class="col-md-4">
            <div class="feature-card">
                <div class="feature-icon">🎓</div>
                <h3 class="h5 fw-bold">Verified Students Only</h3>
                <p class="text-muted mb-0">Every user is verified with a Warwick email address, ensuring a safe and authentic community.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="feature-card">
                <div class="feature-icon">📍</div>
                <h3 class="h5 fw-bold">Nearby Connections</h3>
                <p class="text-muted mb-0">Whether you're in Leamington, Canley, or On-Campus, find students exactly where you are.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="feature-card">
                <div class="feature-icon">✨</div>
                <h3 class="h5 fw-bold">Meaningful Matches</h3>
                <p class="text-muted mb-0">Search by course, year, and what you're looking for to find the perfect match.</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}