{% extends "base.html" %}

{% block title %}Smart Job Platform for Seekers & Employers{% endblock %}

{% block content %}
<!-- Hero Section – Full Width -->
<style>
    .hero-full-width {
        /* Make the hero span the full browser width */
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        width: 100vw;

        /* Desktop height */
        min-height: 460px;

        /* Background */
        background:
            linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
            url('{{ url_for("static", filename="Diverse-Interview-Panel-1024x538.png") }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /* Center content */
        display: flex;
        align-items: center;
        justify-content: center;

        /* Spacing */
        padding: 4rem 1rem;
        margin-bottom: 4rem;

        box-sizing: border-box;
    }

    /* Large Desktop */
    @media (min-width: 1400px) {
        .hero-full-width {
            min-height: 500px;
        }
    }

    /* Tablets */
    @media (max-width: 991px) {
        .hero-full-width {
            min-height: 420px;
            padding: 3rem 1rem;
            margin-bottom: 3rem;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .hero-full-width {
            min-height: 50vh;
            padding: 2.5rem 1rem;
            margin-bottom: 2rem;
        }

        .hero-full-width h1 {
            font-size: 2.4rem;
        }

        .hero-full-width .lead {
            font-size: 1.15rem;
        }

        .hero-full-width .btn {
            width: 100%;
        }

        .hero-full-width .d-flex {
            flex-direction: column;
        }
    }
</style>

<div class="hero-full-width">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-8 col-xl-7">

                <h1 class="display-3 fw-bold text-white mb-4 animate__animated animate__fadeInUp">
                    Find Your Dream Job or Perfect Candidate
                </h1>

                <p class="lead text-light opacity-90 mb-5">
                    Workforce connects talented professionals with leading companies.
                    Post jobs, apply with one click, and grow your career or team.
                </p>

                <div class="d-flex flex-wrap justify-content-center gap-3">

                    <a href="{{ url_for('register') }}"
                       class="btn btn-primary btn-lg px-5 py-3 fw-semibold shadow-lg">
                        <i class="fas fa-user-plus me-2"></i>
                        Create Profile
                    </a>

                    <a href="{{ url_for('job_seeker_login') }}"
                       class="btn btn-outline-light btn-lg px-5 py-3 fw-semibold">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        Sign In
                    </a>

                    <a href="{{ url_for('how_it_works') }}"
                       class="btn btn-light btn-lg px-4 py-3 fw-semibold">
                        <i class="fas fa-play-circle me-2"></i>
                        How It Works
                    </a>

                </div>

                <div class="mt-4 small text-light opacity-75">
                    <span>
                        🔹 Employers
                        <a href="{{ url_for('employer_login_page') }}"
                           class="text-warning fw-bold text-decoration-none">
                            Post Jobs
                        </a>
                    </span>

                    <span class="mx-2">|</span>

                    <span>
                        🔹 Job Seekers
                        <a href="{{ url_for('register') }}"
                           class="text-warning fw-bold text-decoration-none">
                            Apply Free
                        </a>
                    </span>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- SEARCH & JOB LISTINGS SECTION -->
<div class="container mb-5">

    <!-- 🔍 PREMIUM SEARCH -->
<div class="premium-search-wrapper">
    <form method="GET" action="{{ url_for('index') }}" class="premium-search" autocomplete="off">

        <i class="fas fa-search search-icon-inside"></i>

        <input type="text" name="search" id="liveSearch"
            placeholder="Search jobs, companies..."
            value="{{ search_query or '' }}">

        <button type="submit">Search</button>

        <div id="searchResults" class="search-results"></div>

    </form>
</div>

    <div class="row g-4">

        <!-- 🔷 SIDEBAR -->
        <div class="col-lg-3">
            <div class="premium-sidebar">
                <h5><i class="fas fa-filter"></i> Categories</h5>

                <ul>
                    <li class="{% if not selected_category %}active{% endif %}">
                        <a href="{{ url_for('index', search=search_query) }}">
                            All Categories
                            <span>{{ total }}</span>
                        </a>
                    </li>

                    {% for cat in categories %}
                    <li class="{% if selected_category == cat.id %}active{% endif %}">
                        <a href="{{ url_for('index', category=cat.id, search=search_query) }}">
                            {{ cat.name }}
                            <span>{{ category_counts.get(cat.id, 0) }}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>

                <!-- MOBILE SCROLL -->
                <div class="mobile-cats d-md-none">
                    <a href="{{ url_for('index', search=search_query) }}"
                       class="{% if not selected_category %}active{% endif %}">
                       All ({{ total }})
                    </a>

                    {% for cat in categories %}
                    <a href="{{ url_for('index', category=cat.id, search=search_query) }}"
                       class="{% if selected_category == cat.id %}active{% endif %}">
                       {{ cat.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- 🔷 JOB LIST -->
        <div class="col-lg-9">

            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="section-title">Active Jobs</h3>
                <span class="result-count">{{ total }} found</span>
            </div>

            {% if jobs %}
            <div class="row g-4">
                {% for job in jobs %}
                <div class="col-md-6">

                    <div class="job-card-premium">

                        <div class="job-body">
                            <h5>{{ job.title }}</h5>

                            <div class="mb-2">
                                {% if job.is_new %}
                                    <span class="badge-new">New</span>
                                {% endif %}
                                {% if job.deadline_badge %}
                                    <span class="badge-deadline bg-{{ job.deadline_badge[1] }}">
                                        {{ job.deadline_badge[0] }}
                                    </span>
                                {% endif %}
                            </div>

                            {% if match_scores and match_scores.get(job.id, 0) > 0 %}
    <span class="badge bg-info ms-2">Match: {{ match_scores[job.id] }}%</span>
{% endif %}

                            <p class="company">
                                <i class="fas fa-building"></i>
                                {% if job.is_linked and job.company %}
                                    {{ job.company.name }}
                                {% elif job.manual_company_name %}
                                    {{ job.manual_company_name }}
                                {% else %}
                                    Confidential
                                {% endif %}
                            </p>

                            <p class="desc">
                                {{ job.description|striptags|truncate(100) }}
                            </p>

                            <div class="bottom-row">
                                <span class="category">{{ job.category.name }}</span>

                                <a href="{{ url_for('view_job_post', job_id=job.id, next=request.full_path) }}"
                                   class="details-btn">
                                   View
                                </a>
                            </div>
                        </div>

                        <div class="job-footer">
                            {% if current_user.is_authenticated %}
                                {% if current_user.role == 'job_seeker' %}
                                    {% if can_apply_status.get(job.id, False) %}
                                        <a href="{{ url_for('view_job_post', job_id=job.id, next=request.full_path) }}"
                                           class="apply-btn success">Apply Now</a>
                                    {% else %}
                                        <button class="apply-btn disabled">Complete Profile</button>
                                    {% endif %}
                                {% elif current_user.role == 'employer' %}
                                    <button class="apply-btn info">Employer View</button>
                                {% else %}
                                    <button class="apply-btn disabled">Admin</button>
                                {% endif %}
                            {% else %}
                                <a href="{{ url_for('job_seeker_login', next=request.full_path) }}"
                                   class="apply-btn warning">Login to Apply</a>
                            {% endif %}
                        </div>

                    </div>

                </div>
                {% endfor %}
            </div>

            <!-- PAGINATION (unchanged logic, styled) -->
            {% if pagination.pages > 1 %}
            <nav class="mt-5">
                <ul class="pagination justify-content-center premium-pagination">

                    {% if pagination.has_prev %}
                    <li><a href="{{ url_for('index', page=pagination.prev_num, category=selected_category, search=search_query) }}">←</a></li>
                    {% endif %}

                    {% for page_num in pagination.iter_pages(left_edge=1, left_current=2, right_current=2, right_edge=1) %}
                        {% if page_num %}
                            <li class="{% if page_num == pagination.page %}active{% endif %}">
                                <a href="{{ url_for('index', page=page_num, category=selected_category, search=search_query) }}">{{ page_num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if pagination.has_next %}
                    <li><a href="{{ url_for('index', page=pagination.next_num, category=selected_category, search=search_query) }}">→</a></li>
                    {% endif %}

                </ul>
            </nav>
            {% endif %}

            {% else %}
                <div class="alert alert-info text-center">
                    No jobs found.
                </div>
            {% endif %}
        </div>
    </div>
</div>




<!-- Stats Section -->
<div class="container mb-5">
    <div class="row text-center g-4">
        <!-- Each card: 2 columns on mobile (col-6), 4 columns on desktop (col-md-3) -->
        <div class="col-6 col-md-3">
            <div class="premium-card">
                <div class="icon-wrap">
                    <i class="fas fa-briefcase"></i>
                </div>
                <h3>500+</h3>
                <p>Jobs Posted</p>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="premium-card">
                <div class="icon-wrap">
                    <i class="fas fa-users"></i>
                </div>
                <h3>10k+</h3>
                <p>Active Job Seekers</p>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="premium-card">
                <div class="icon-wrap">
                    <i class="fas fa-building"></i>
                </div>
                <h3>200+</h3>
                <p>Companies</p>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="premium-card">
                <div class="icon-wrap">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h3>98%</h3>
                <p>Satisfaction Rate</p>
            </div>
        </div>
    </div>
</div>

<!-- 🔵 FEATURES SECTION (NAVY PREMIUM) -->
<div class="features-section py-5 mb-5">
    <div class="container">
        <div class="text-center mb-5 text-white">
            <h2 class="fw-bold">Why Choose Workforce?</h2>
            <p class="lead opacity-75">A platform built for efficiency and simplicity</p>
        </div>

        <div class="row g-4">
            {% set features = [
                ('fa-rocket','One-Click Apply','Job seekers can apply instantly after completing their profile.'),
                ('fa-filter','Smart Filtering','Employers get pre-filtered candidates ready to hire.'),
                ('fa-file-alt','Document Management','Upload CVs, cover letters and certificates securely.'),
                ('fa-chart-line','Profile Completion','Track your profile strength and readiness.'),
                ('fa-tags','Category Matching','Get personalized job recommendations instantly.'),
                ('fa-shield-alt','Secure & Private','Your data is protected and fully controlled.')
            ] %}

            {% for icon, title, text in features %}
            <div class="col-6 col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas {{ icon }}"></i>
                    </div>
                    <h5>{{ title }}</h5>
                    <p>{{ text }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>


<!-- ⚪ TESTIMONIALS (ELEVATED) -->
<div class="testimonial-section py-5 mb-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Trusted by Thousands</h2>
            <p class="lead text-muted">What our users say about Workforce</p>
        </div>

        <div class="row g-4">
            <!-- Card 1 -->
            <div class="col-6 col-md-4">
                <div class="testimonial-card">
                    <i class="fas fa-quote-left quote-icon"></i>
                    <p>"Workforce helped me land my dream job in just two weeks. The one-click apply is a game changer."</p>
                    <div class="user">
                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sarah Johnson">
                        <div>
                            <h6>Sarah Johnson</h6>
                            <span>Software Engineer</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="col-6 col-md-4">
                <div class="testimonial-card">
                    <i class="fas fa-quote-left quote-icon"></i>
                    <p>"The ready pool feature saved us hours of screening. We found our ideal candidate within days."</p>
                    <div class="user">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
                        <div>
                            <h6>Michael Chen</h6>
                            <span>HR Manager</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 3 (full width on mobile? still 2 per row, third will go to next row) -->
            <div class="col-6 col-md-4">
                <div class="testimonial-card">
                    <i class="fas fa-quote-left quote-icon"></i>
                    <p>"The profile system helped me organize everything. I now apply with confidence."</p>
                    <div class="user">
                        <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Maria Rodriguez">
                        <div>
                            <h6>Maria Rodriguez</h6>
                            <span>Marketing Specialist</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 🔥 PREMIUM CTA -->
<div class="container mb-5">
    <div class="cta-premium text-center">

        <h2>Ready to Start Your Journey?</h2>
        <p>Join thousands of job seekers and employers already using Workforce.</p>

        <a href="{{ url_for('register') }}" class="cta-btn">
            Sign Up Now <i class="fas fa-arrow-right"></i>
        </a>

    </div>
</div>


<!-- ⚙️ HOW IT WORKS (with connecting arrows) -->
<div class="container mb-5">
    <div class="text-center mb-5">
        <h2 class="fw-bold">Simple 3-Step Process</h2>
        <p class="text-muted">Get started in minutes</p>
    </div>

    <div class="row g-4 process-row justify-content-center">
        <!-- STEP 1 -->
        <div class="col-md-4 text-center process-step">
            <div class="step-wrapper">
                <div class="step-circle">1</div>
                <div class="step-arrow d-none d-md-block"></div>
            </div>
            <h5>Create Account</h5>
            <p>Sign up as a job seeker or employer in seconds.</p>
        </div>

        <!-- STEP 2 -->
        <div class="col-md-4 text-center process-step">
            <div class="step-wrapper">
                <div class="step-circle">2</div>
                <div class="step-arrow d-none d-md-block"></div>
            </div>
            <h5>Build Profile / Post Jobs</h5>
            <p>Complete your profile or post job openings.</p>
        </div>

        <!-- STEP 3 -->
        <div class="col-md-4 text-center process-step">
            <div class="step-wrapper">
                <div class="step-circle">3</div>
            </div>
            <h5>Apply / Hire</h5>
            <p>Apply with one click or find the perfect candidate.</p>
        </div>
    </div>
</div>

<style>
    .job-card {
        transition: transform 0.2s;
    }
    .job-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .overflow-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
</style>

<script>
const input = document.getElementById("liveSearch");
const resultsBox = document.getElementById("searchResults");
let debounceTimer;

input.addEventListener("keyup", function () {
    const query = this.value.trim();
    clearTimeout(debounceTimer);
    if (query.length < 2) {
        resultsBox.innerHTML = "";
        resultsBox.style.display = "none";
        return;
    }
    debounceTimer = setTimeout(() => {
        fetch(`/search_jobs?q=${encodeURIComponent(query)}`)
            .then(res => res.json())
            .then(data => {
                resultsBox.innerHTML = "";
                if (data.length === 0) {
                    resultsBox.innerHTML = "<div class='no-results'>No results found</div>";
                } else {
                    data.forEach(job => {
                        const item = document.createElement("div");
                        item.classList.add("result-item");
                        item.innerHTML = `
                            <strong>${escapeHtml(job.title)}</strong>
                            <small>${escapeHtml(job.company)}</small>
                        `;
                        // Store job ID as data attribute
                        item.dataset.jobId = job.id;
                        item.onclick = () => {
                            // Get current URL with all query parameters to preserve search/filters
                            const currentUrl = window.location.href;
                            const nextParam = encodeURIComponent(currentUrl);
                            window.location.href = `/job-seeker/view-job/${job.id}?next=${nextParam}`;
                        };
                        resultsBox.appendChild(item);
                    });
                }
                resultsBox.style.display = "block";
            });
    }, 300);
});

// Helper to escape HTML to prevent XSS
function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, function(m) {
        if (m === '&') return '&amp;';
        if (m === '<') return '&lt;';
        if (m === '>') return '&gt;';
        return m;
    });
}

// Close on click outside
document.addEventListener("click", function(e) {
    if (!e.target.closest(".premium-search")) {
        resultsBox.style.display = "none";
    }
});
</script>
{% endblock %}