{% extends 'events/base.html' %}
{% load markdown_extras %}
{% load static %}

{% block title %}Welcome - Lusaka Internet Meetup{% endblock %}

{% block extra_css %}
<style>
    .carousel-item {
        height: 70vh;
        min-height: 500px;
        background: no-repeat center center scroll;
        background-size: cover;
    }
    
    .carousel-caption {
        bottom: 50%;
        transform: translateY(50%);
        background: rgba(0, 0, 0, 0.5);
        padding: 2rem;
        border-radius: 10px;
    }

    .carousel-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .event-card {
        transition: transform 0.3s ease;
        border: none;
    }
    .event-card:hover {
        transform: translateY(-5px);
    }
    .event-banner {
        height: 200px;
        object-fit: cover;
    }
    .section-header {
        position: relative;
        display: inline-block;
        margin-bottom: 2rem;
    }
    .section-header::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 50px;
        height: 3px;
        background-color: var(--bs-primary);
    }
    .event-meta {
        font-size: 0.9rem;
    }
    .event-status {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 1;
    }
    .announcement-bar {
        background: var(--primary-color);
        color: white;
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }

    /* News Ticker Animation */
    @keyframes tickerAnimation {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    .announcement-container {
        max-width: 1320px; /* Bootstrap container width */
        margin: 0 auto;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }

    .ticker-wrapper {
        display: inline-flex;
        white-space: nowrap;
        animation: tickerAnimation 10s linear infinite;
        padding-left: 100%;
    }

    /* Add space between repeated items */
    .ticker-item {
        display: inline-flex;
        align-items: center;
        padding: 0 2rem;
    }

    .ticker-wrapper:hover {
        animation-play-state: paused;
    }

    /* Responsive container widths */
    @media (max-width: 1400px) {
        .announcement-container {
            max-width: 1140px;
        }
    }
    @media (max-width: 1200px) {
        .announcement-container {
            max-width: 960px;
        }
    }
    @media (max-width: 992px) {
        .announcement-container {
            max-width: 720px;
        }
    }
    @media (max-width: 768px) {
        .announcement-container {
            max-width: 540px;
        }
    }
    @media (max-width: 576px) {
        .announcement-container {
            max-width: 100%;
            padding: 0 1rem;
        }
    }

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .carousel-caption {
            padding: 1rem;
        }
        
        .carousel-caption h1 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }
        
        .carousel-caption .lead {
            font-size: 1rem;
            margin-bottom: 1rem;
        }
        
        .carousel-caption .btn {
            font-size: 0.9rem;
            padding: 0.5rem 1rem;
        }
        
        .carousel-caption .btn i {
            font-size: 0.8rem;
        }
    }

    /* Small mobile devices */
    @media (max-width: 576px) {
        .carousel-caption h1 {
            font-size: 1.5rem;
        }
        
        .carousel-caption .btn {
            font-size: 0.8rem;
            padding: 0.4rem 0.8rem;
        }
    }
    
    /* Sponsors Carousel Styles */
    .sponsor-logo {
        max-height: 100px;
        width: auto;
        filter: grayscale(100%);
        opacity: 0.7;
        transition: all 0.3s ease;
        margin: 20px;
    }
    
    .sponsor-link {
        display: block;
        text-decoration: none;
    }
    
    .sponsor-logo:hover {
        filter: grayscale(0%);
        opacity: 1;
        transform: scale(1.05);
    }
    
    #sponsorsCarousel {
        padding: 20px 0 50px;
    }
    
    #sponsorsCarousel .carousel-control-prev,
    #sponsorsCarousel .carousel-control-next {
        width: 5%;
        color: #333;
    }
    #sponsorsCarousel .carousel-control-prev-icon,
    #sponsorsCarousel .carousel-control-next-icon {
        filter: invert(1);
    }
    
    #sponsorsCarousel .carousel-indicators {
        bottom: -30px;
    }
    
    #sponsorsCarousel .carousel-indicators button {
        background-color: #333;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin: 0 5px;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .sponsor-logo {
            max-height: 80px;
            margin: 15px;
        }
        
        #sponsorsCarousel {
            padding: 10px 0 40px;
        }
        
        .sponsor-logo:hover {
            transform: scale(1.02);
        }
    }
    
    @media (max-width: 576px) {
        .sponsor-logo {
            max-height: 60px;
            margin: 10px;
        }
    }
    
    .sponsor-card {
        transition: transform 0.3s ease-in-out;
    }
    
    .sponsor-card:hover {
        transform: translateY(-5px);
    }
    
    .sponsor-item {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .sponsor-item:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    
    .sponsor-logo {
        filter: grayscale(100%);
        transition: filter 0.3s ease;
    }
    
    .sponsor-item:hover .sponsor-logo {
        filter: grayscale(0%);
    }
    
    .sponsor-name {
        color: #333;
        font-size: 1.1rem;
        margin-top: 1rem;
        opacity: 0.8;
        transition: opacity 0.3s ease;
    }
    
    .sponsor-item:hover .sponsor-name {
        opacity: 1;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 5%;
        opacity: 0.7;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: rgba(0,0,0,0.3);
        border-radius: 50%;
        padding: 1rem;
    }
    
    .carousel-indicators {
        bottom: -3rem;
    }
    
    .carousel-indicators button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ccc;
        opacity: 0.5;
        transition: all 0.3s ease;
    }
    
    .carousel-indicators button.active {
        background-color: #666;
        opacity: 1;
        transform: scale(1.2);
    }
</style>
{% endblock %}

{% block content %}
{% if latest_announcement %}
<div class="announcement-bar">
    <div class="announcement-container">
        <div class="ticker-wrapper">
            <!-- First set -->
            <div class="ticker-item">
                <i class="bi bi-megaphone me-2"></i>
                <span>{{ latest_announcement }}</span>
            </div>
            <!-- Second set -->
            <div class="ticker-item">
                <i class="bi bi-megaphone me-2"></i>
                <span>{{ latest_announcement }}</span>
            </div>
            <!-- Third set -->
            <div class="ticker-item">
                <i class="bi bi-megaphone me-2"></i>
                <span>{{ latest_announcement }}</span>
            </div>
            <!-- Fourth set -->
            <div class="ticker-item">
                <i class="bi bi-megaphone me-2"></i>
                <span>{{ latest_announcement }}</span>
            </div>

            <!-- Fifth set -->
            <div class="ticker-item">
                <i class="bi bi-megaphone me-2"></i>
                <span>{{ latest_announcement }}</span>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Hero Carousel -->
<div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
        {% for image in carousel_images %}
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ forloop.counter0 }}" 
                {% if forloop.first %}class="active"{% endif %}></button>
        {% endfor %}
    </div>
    
    <div class="carousel-inner">
        {% for image in carousel_images %}
        <div class="carousel-item {% if forloop.first %}active{% endif %}" 
             style="background-image: url('{{ image.image.url }}');">
            <div class="carousel-caption">
                <h1 class="display-4 mb-4">{% if image.caption %}{{ image.caption }}{% else %}Welcome to Bloggers of Zambia<br><em>Event Management System</em>{% endif %}</h1>
                <p class="lead mb-5">Join the largest tech community in Zambia for knowledge sharing, networking, and innovation</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{% url 'events:event_list' %}" class="btn btn-primary btn-lg">
                        <i class="bi bi-calendar-event"></i> Browse Events
                    </a>
                    <a href="{% url 'events:cfp_list' %}" class="btn btn-outline-light btn-lg">
                        <i class="bi bi-megaphone"></i> Call for Proposals
                    </a>
                </div>
            </div>
        </div>
        {% empty %}
        <!-- Fallback if no carousel images -->
        <div class="carousel-item active" 
             style="background-image: url('{% static "img/hero-banner.png" %}');">
            <div class="carousel-caption">
                <h1 class="display-4 mb-4">Welcome to Bloggers of Zambia<br><em>Event Management System</em></h1>
                <p class="lead mb-5">Join the largest tech community in Zambia for knowledge sharing, networking, and innovation</p>
                <div class="d-flex justify-content-center gap-3">
                    <a href="{% url 'events:event_list' %}" class="btn btn-primary btn-lg">
                        <i class="bi bi-calendar-event"></i> Browse Events
                    </a>
                    <a href="{% url 'events:cfp_list' %}" class="btn btn-outline-light btn-lg">
                        <i class="bi bi-megaphone"></i> Call for Proposals
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    {% if carousel_images|length > 1 %}
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
    </button>
    {% endif %}
</div>

<!-- Latest Events Section -->
<section class="py-5">
    <div class="container">
        <h2 class="section-header mb-4">Latest Events</h2>
        <div class="row g-4">
            {% for event in latest_events %}
            <div class="col-md-4">
                <div class="card event-card h-100">
                    {% if event.banner_image %}
                    <img src="{{ event.banner_image.url }}" class="card-img-top event-banner" alt="{{ event.title }}">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ event.title }}</h5>
                        <div class="event-meta text-muted mb-3">
                            <div><i class="bi bi-calendar me-2"></i>{{ event.date_time|date:"F j, Y" }}</div>
                            <div><i class="bi bi-clock me-2"></i>{{ event.date_time|date:"g:i A" }}</div>
                            {% if event.venue %}
                            <div><i class="bi bi-geo-alt me-2"></i>{{ event.venue }}</div>
                            {% endif %}
                        </div>
                        <p class="card-text">{{ event.description|markdownify|truncatewords:30 }}</p>
                        <a href="{% url 'events:event_detail' event.id %}" class="btn btn-outline-primary">View Details</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>No upcoming events at the moment.
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Event Categories Section -->
<section class="bg-light py-5">
    <div class="container" style="font-style: normal; font-weight: normal;">
        <h2 class="section-header text-center mb-5">Event Categories</h2>
        <div class="row g-4 justify-content-center">
            <div class="col-md-4">
                <a href="{% url 'events:event_list' %}?status=upcoming" class="text-decoration-none">
                    <div class="card h-100 text-center border-0 shadow-sm event-card">
                        <div class="card-body p-4">
                            <div class="display-4 text-primary mb-3">
                                <i class="bi bi-calendar-check"></i>
                            </div>
                            <h3 class="h4">Upcoming Events</h3>
                            <p class="text-muted mb-0">Discover and register for our upcoming tech meetups and workshops</p>
                        </div>
                    </div>
                </a>
            </div>
            
            <div class="col-md-4">
                <a href="{% url 'events:event_list' %}?status=ongoing" class="text-decoration-none">
                    <div class="card h-100 text-center border-0 shadow-sm event-card">
                        <div class="card-body p-4">
                            <div class="display-4 text-success mb-3">
                                <i class="bi bi-play-circle"></i>
                            </div>
                            <h3 class="h4">Ongoing Events</h3>
                            <p class="text-muted mb-0">Join our current events and participate in live discussions</p>
                        </div>
                    </div>
                </a>
            </div>
            
            <div class="col-md-4">
                <a href="{% url 'events:archive' %}" class="text-decoration-none">
                    <div class="card h-100 text-center border-0 shadow-sm event-card">
                        <div class="card-body p-4">
                            <div class="display-4 text-secondary mb-3">
                                <i class="bi bi-archive"></i>
                            </div>
                            <h3 class="h4">Past Events</h3>
                            <p class="text-muted mb-0">Browse through our archive of successful past events</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container" style="font-style: normal;">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <h2 class="section-header">Join Our Community</h2>
                <p class="lead mb-4">Be part of Zambia's growing tech ecosystem. Network with industry experts, share knowledge, and stay updated with the latest trends.</p>
                <div class="d-flex gap-3">
                    {% if not user.is_authenticated %}
                    <a href="{% url 'events:register' %}" class="btn btn-primary">
                        <i class="bi bi-person-plus"></i> Register Now
                    </a>
                    {% endif %}
                    <a href="{% url 'events:cfp_list' %}" class="btn btn-outline-primary">
                        <i class="bi bi-megaphone"></i> Submit a Proposal
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <img src="{% static 'img/join-us.jpg' %}" class="img-fluid rounded shadow-lg" alt="Community">
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize all carousels with custom settings
        const carousels = document.querySelectorAll('.carousel');
        carousels.forEach(carousel => {
            new bootstrap.Carousel(carousel, {
                interval: carousel.id === 'sponsorsCarousel' ? 3000 : 5000,
                pause: 'hover'
            });
        });
    });
</script>
{% endblock %}