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

{% block title %}Welcome to RaktaPulse{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-red: #E63946;
        --dark-red: #D62828;
        --white: #FFFFFF;
        --light-red: #FFF1F2;
    }

    .welcome-body {
        background-color: var(--white);
        overflow-x: hidden;
        margin-left: -48px; /* Offset the parent padding */
        margin-right: -48px;
        margin-top: -48px;
        margin-bottom: -48px;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    /* Hide Sidebar and Top Bar on Welcome Page */
    #sidebar { display: none !important; }
    #content { margin-left: 0 !important; width: 100% !important; background: white !important; }
    .top-bar { display: none !important; }
    #sosButton { display: none !important; }
    .p-4.p-md-5 { padding: 0 !important; }

    .hero-section {
        min-height: 90vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 60px 0;
        background: linear-gradient(180deg, var(--light-red) 0%, var(--white) 100%);
    }

    .hero-content {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease forwards;
    }

    .hero-image {
        opacity: 0;
        transform: scale(0.8);
        animation: zoomIn 1.2s ease forwards 0.3s;
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes zoomIn {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .floating-icon {
        animation: float 3s ease-in-out infinite;
        color: var(--primary-red);
        filter: drop-shadow(0 10px 15px rgba(230, 57, 70, 0.2));
    }

    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
    }

    .btn-hero {
        padding: 16px 44px;
        font-size: 1.1rem;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-transform: none;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .btn-hero-primary {
        background-color: var(--primary-red);
        border: none;
        color: white;
        box-shadow: 0 4px 6px -1px rgba(230, 57, 70, 0.2);
    }

    .btn-hero-primary:hover {
        background-color: var(--dark-red);
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(230, 57, 70, 0.3);
        color: white;
    }

    .feature-card {
        border: 1px solid #F1F1F1;
        border-radius: 12px;
        transition: all 0.4s ease;
        background: white;
        padding: 40px;
        height: 100%;
    }

    .feature-card:hover {
        border-color: var(--primary-red);
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    }

    .feature-icon {
        font-size: 3rem;
        margin-bottom: 24px;
        color: var(--primary-red);
        display: inline-block;
    }

    .pulse-animation {
        animation: pulse-red 2s infinite;
    }

    @keyframes pulse-red {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

    .stats-section {
        background: var(--white);
        border-top: 1px solid #F1F1F1;
        border-bottom: 1px solid #F1F1F1;
        padding: 80px 0;
    }

    .stat-number {
        font-size: 3.5rem;
        font-weight: 800;
        color: var(--primary-red);
        margin-bottom: 8px;
    }

    .stat-label {
        color: #6B7280;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .nav-link {
        color: #374151 !important;
        transition: color 0.3s;
    }

    .nav-link:hover {
        color: var(--primary-red) !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="welcome-body">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white py-4 border-bottom sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <i class="bi bi-droplet-fill text-danger fs-3 me-2"></i>
                <span class="fs-4 fw-bold text-dark">Rakta<span class="text-danger">Pulse</span></span>
            </a>
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#welcomeNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="welcomeNav">
                <ul class="navbar-nav ms-auto align-items-center gap-4">
                    <li class="nav-item"><a class="nav-link fw-semibold" href="{% url 'login' %}">Sign In</a></li>
                    <li class="nav-item"><a class="btn btn-hero-primary px-4 py-2" href="{% url 'register' %}" style="border-radius: 6px;">Create Account</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 hero-content">
                    <div class="badge bg-danger bg-opacity-10 text-danger px-3 py-2 mb-4 fw-semibold rounded-pill">
                        Next-Gen Blood Management
                    </div>
                    <h1 class="display-3 fw-bold mb-4" style="color: #111827; line-height: 1.1;">Streamlining <span class="text-danger">Life-Saving</span> Connections.</h1>
                    <p class="lead mb-5 text-muted" style="max-width: 90%;">A high-efficiency platform for real-time blood donor matching, hospital coordination, and emergency response management.</p>
                    <div class="d-flex gap-3 flex-wrap">
                        <a href="{% url 'register' %}" class="btn btn-hero btn-hero-primary">Get Started</a>
                        <a href="{% url 'login' %}" class="btn btn-hero btn-outline-dark">System Login</a>
                    </div>
                </div>
                <div class="col-lg-6 text-center hero-image mt-5 mt-lg-0">
                    <div class="position-relative">
                        <i class="bi bi-droplet-fill floating-icon" style="font-size: 18rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5" style="background: white;">
        <div class="container py-5">
            <div class="row mb-5 justify-content-center">
                <div class="col-lg-6 text-center">
                    <h2 class="fw-bold mb-3" style="color: #111827;">Engineered for Impact</h2>
                    <p class="text-muted">Our core modules provide the tools needed for rapid response and efficient data management.</p>
                </div>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="feature-card">
                        <i class="bi bi-cpu feature-icon"></i>
                        <h4 class="fw-bold mb-3">Smart Matching</h4>
                        <p class="text-muted mb-0">AI-driven geolocation algorithm to find the most compatible donors in the shortest time.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <i class="bi bi-database-check feature-icon"></i>
                        <h4 class="fw-bold mb-3">Live Inventory</h4>
                        <p class="text-muted mb-0">Real-time tracking of blood stock levels across all partner hospitals and blood banks.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="feature-card">
                        <i class="bi bi-shield-lock feature-icon"></i>
                        <h4 class="fw-bold mb-3">Secure Channels</h4>
                        <p class="text-muted mb-0">End-to-end encrypted communication for donor privacy and secure medical data handling.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-4 mb-5 mb-md-0">
                    <div class="stat-number">10.4k</div>
                    <div class="stat-label">Verified Donors</div>
                </div>
                <div class="col-md-4 mb-5 mb-md-0">
                    <div class="stat-number">85%</div>
                    <div class="stat-label">Response Rate</div>
                </div>
                <div class="col-md-4">
                    <div class="stat-number">120+</div>
                    <div class="stat-label">Tech Partners</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-5">
        <div class="container py-5">
            <div class="border border-danger border-2 p-5 rounded-4 text-center">
                <h2 class="display-5 fw-bold mb-4" style="color: #111827;">Ready to Integrate?</h2>
                <p class="lead mb-5 text-muted">Join the network of tech-driven healthcare providers saving lives every day.</p>
                <a href="{% url 'register' %}" class="btn btn-hero btn-hero-primary pulse-animation">Create Your Account</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-white py-5 border-top">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start text-muted">
                    <span class="fw-bold text-danger">RaktaPulse</span> &copy; 2026. <span class="ms-2">v2.1.0-stable</span>
                </div>
                <div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
                    <div class="d-flex justify-content-center justify-content-md-end gap-4">
                        <a href="#" class="text-muted"><i class="bi bi-github"></i></a>
                        <a href="#" class="text-muted"><i class="bi bi-twitter-x"></i></a>
                        <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
{% endblock %}