{# Django Template: home.html #}
{% extends "base.html" %}
{% load static %}

{% block extra_styles %}
<style>
    /* Section Headers */
    .section-header {
        margin-bottom: 4rem;
        text-align: center;
    }
    .section-header .eyebrow {
        font-family: var(--font-head);
        color: var(--col-accent);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.85rem;
    }

    /* FEATURED PROJECTS GRID */
    .home-projects-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .home-project-card {
        background-color: var(--col-surface);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: var(--shadow-soft);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .home-project-card:hover { transform: translateY(-8px); }

    .home-project-img-container {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 11; 
        overflow: hidden;
        background-color: #f2f2f2;
    }
    .home-project-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .home-project-card-content {
        padding: 2.5rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .home-project-card-content h3 { 
        font-size: 1.5rem; 
        margin-bottom: 0.8rem; 
        display: inline-block;
        position: relative;
        width: fit-content;
    }
    .home-project-card-content h3::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        background-color: var(--col-accent);
        transition: width 0.3s ease;
    }
    .home-project-card:hover h3::after { width: 100%; }

    .home-project-card-content p { font-size: 1rem; color: var(--col-text-muted); margin-bottom: 1.5rem; }
    .home-project-card-link { margin-top: auto; color: var(--col-accent); font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; }

    /* =============================================== */
    /* NEW TEAM COLLAGE SECTION                        */
    /* =============================================== */
    .team-collage-box {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        background-color: var(--col-surface);
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: var(--shadow-soft);
        align-items: center;
    }

    .team-collage-text {
        padding: 4rem;
    }

    .team-collage-text h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        position: relative;
        display: inline-block;
    }
    .team-collage-text h2::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 3px;
        bottom: -10px;
        left: 0;
        background-color: var(--col-accent);
    }

    /* Mosaic Grid */
    .team-collage-display {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(10, 1fr);
        gap: 10px;
        padding: 20px;
        aspect-ratio: 1 / 1;
        background-color: #f8f9f7;
    }

    .collage-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
        transition: transform 0.4s ease;
    }

    /* Positioning images to look like an interesting collage */
    .img-1 { grid-area: 1 / 1 / 7 / 6; }   /* Large Top Left */
    .img-2 { grid-area: 1 / 6 / 5 / 11; }  /* Medium Top Right */
    .img-3 { grid-area: 7 / 1 / 11 / 5; }  /* Medium Bottom Left */
    .img-4 { grid-area: 5 / 5 / 11 / 11; } /* Large Bottom Right */

    .team-collage-box:hover .collage-img {
        transform: scale(1.03);
    }

    /* Hero Styling */
    .hero {
        position: relative;
        min-height: 70vh;
        display: flex;
        align-items: center;
        padding: 60px 0;
        text-align: center;
    }
    .hero-bg-blob {
        position: absolute;
        top: -15%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, #EAF7CF 0%, rgba(255,255,255,0) 70%);
        z-index: -1;
        filter: blur(40px);
        pointer-events: none;
    }
    .hero-text h1 { font-size: clamp(2.5rem, 8vw, 4.8rem); margin-bottom: 1.8rem; line-height: 1; }
    .hero-text h1 span { color: var(--col-accent); font-family: var(--font-body); font-style: italic; font-weight: 300; }

    @media (max-width: 950px) {
        .team-collage-box { grid-template-columns: 1fr; }
        .team-collage-text { padding: 3rem 2rem; text-align: center; }
        .team-collage-text h2::after { left: 50%; transform: translateX(-50%); }
        .home-projects-grid { grid-template-columns: 1fr; }
    }
</style>
{% endblock extra_styles %}

{% block title %}{{ site_title }} - Home{% endblock %}

{% block content %}
    <!-- HERO -->
    <section class="hero">
        <div class="hero-bg-blob"></div>
        <div class="container">
            <div class="hero-text">
                <h1>Action Today,<br><span>Legacy Tomorrow.</span></h1>
                <p style="margin: 0 auto 3rem auto; font-size: 1.25rem; color: var(--col-text-muted);">We are the next generation of environmental leaders. We dig the soil, plant the seeds, and nurture the future.</p>
                <div style="display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center;">
                    <a href="{% url 'contact' %}" class="btn btn-primary">Join Club</a>
                    <a href="{% url 'projects' %}" class="btn btn-secondary">Explore Work</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ABOUT -->
    <section id="about" class="standard-section">
        <div class="container">
            <div class="section-header">
                <div class="eyebrow">Who We Are</div>
                <h2 style="font-size: 2.6rem; margin-top: 0.5rem;">About Us</h2>
            </div>
            <div style="text-align: center;">
                <p style="font-size: 1.15rem; line-height: 1.8;">Welcome to the Green Rotaract Club. We are a collective of young professionals and students dedicated to making a tangible impact on our environment. Through local service projects, we foster a community that values sustainability, action, and fellowship.</p>
                <div style="margin-top: 3rem;">
                    <a href="{% url 'about' %}" style="color: var(--col-accent); font-weight: 700;">Read Full Story <i data-lucide="arrow-right" size="20" style="vertical-align: middle; margin-left: 6px;"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- PROJECTS -->
    <section id="home-projects" class="standard-section" style="background-color: rgba(0,0,0,0.015);">
        <div class="container">
            <div class="section-header">
                <div class="eyebrow">Impact</div>
                <h2 style="font-size: 2.6rem; margin-top: 0.5rem;">Featured Projects</h2>
            </div>
            <div class="home-projects-grid">
                {% for project in home_projects %}
                <div class="home-project-card">
                    <a href="{% url 'project_detail' category_name=project.name %}" class="home-project-img-container">
                        <img src="{% if project.preview_image %}{% static project.preview_image %}{% else %}{% static 'images/placeholder.jpg' %}{% endif %}" alt="{{ project.name }}">
                    </a>
                    <div class="home-project-card-content">
                        <h3>{{ project.name|title }}</h3>
                        <p>{{ project.teaser }}</p>
                        <a href="{% url 'project_detail' category_name=project.name %}" class="home-project-card-link">Learn More <i data-lucide="arrow-right" size="18"></i></a>
                    </div>
                </div>
                {% empty %}
                <p style="text-align: center; grid-column: 1 / -1; padding: 4rem 0;">No featured projects to display.</p>
                {% endfor %}
            </div>
            <div style="text-align: center; margin-top: 5rem;">
                <a href="{% url 'projects' %}" class="btn btn-secondary">View All Work</a>
            </div>
        </div>
    </section>

    <!-- TEAM PREVIEW COLLAGE -->
    <section id="team-preview" class="standard-section">
        <div class="container">
            <div class="team-collage-box">
                <div class="team-collage-text">
                    <div class="eyebrow" style="color: var(--col-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 1rem;">Our People</div>
                    <h2>Meet the Team</h2>
                    <p style="margin-bottom: 2.5rem; color: var(--col-text-muted); font-size: 1.1rem; line-height: 1.6;">
                        Our impact is driven by a diverse group of passionate volunteers and professionals. 
                        Together, we coordinate local actions that create a global legacy.
                    </p>
                    <a href="{% url 'team' %}" class="btn btn-primary">See All Members</a>
                </div>
                <div class="team-collage-display">
                    <!-- Replace these src with static paths or placeholder images -->
                    <img src="{% static 'images/ChairImages/Bethelhem AbebeGRC Chairs.png' %}" class="collage-img img-1" alt="Team member">
                    <img src="{% static 'images/BodImages/Strategy Director-Yohannes GutayeGRC Chairs.png' %}" class="collage-img img-2" alt="Team member">
                    <img src="{% static 'images/ChairImages/Michael EndalamawGRC Chairs.png' %}" class="collage-img img-3" alt="Team member">
                    <img src="{% static 'images/BodImages/Vice Chair-Nuhamin TibebuGRC Chairs.png' %}" class="collage-img img-4" alt="Team member">
                </div>
            </div>
        </div>
    </section>

    <!-- CONTACT -->
    <section id="contact" class="standard-section" style="background-color: var(--col-primary); color: white; border-radius: 40px; margin: 0 2rem;">
        <div class="container">
            <div class="section-header">
                <div class="eyebrow" style="color: var(--col-secondary);">Join Us</div>
                <h2 style="font-size: 2.6rem; margin-top: 0.5rem; color: white;">Ready to Help?</h2>
            </div>
            <div style="text-align: center;">
                <p style="margin-bottom: 3rem; font-size: 1.15rem; opacity: 0.9;">Have questions or want to join our next project? Become part of a global network of volunteers working for a greener planet.</p>
                <a href="{% url 'contact' %}" class="btn btn-secondary" style="padding: 1.2rem 3rem;">Become a Member</a>
            </div>
        </div>
    </section>
{% endblock content %}