{% extends 'jobs/base.html' %}
{% load static %}

{% block meta_title %}About Us | Videsh Chalo - Jobs, Study & Travel Abroad{% endblock %}

{% block content %}
<div class="about-page bg-light pb-5">
    
    <!-- 🚀 HERO SECTION -->
    <section class="about-hero py-5 text-white position-relative shadow-sm" style="background: linear-gradient(135deg, rgba(0,31,77,0.9) 0%, rgba(0,68,204,0.9) 100%), url('https://images.unsplash.com/photo-1544027993-37dbfe43562a?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; border-radius: 0 0 50px 50px;">
        <div class="container py-5 text-center position-relative z-index-2">
            <span class="badge bg-warning text-dark px-3 py-2 rounded-pill fw-black mb-3 text-uppercase tracking-widest">About Videsh Chalo</span>
            <h1 class="display-3 fw-black mb-4 italic animate__animated animate__fadeInDown">A Dream Beyond Borders 🌍</h1>
            <p class="lead mb-0 px-md-5 fs-4 fw-light max-w-800 mx-auto">
                Empowering Indian talent to achieve global success. Whether it is securing a high-paying job, pursuing world-class education, or exploring international destinations, <strong>Videsh Chalo</strong> is your trusted gateway.
            </p>
        </div>
        <!-- Decorative Overlay -->
        <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); pointer-events: none;"></div>
    </section>

    <!-- 🎯 OUR VISION (The Videsh Chalo Ecosystem) -->
    <section class="vision-section py-5 mt-4">
        <div class="container">
            <div class="row align-items-center bg-white shadow-lg rounded-[3rem] p-4 p-md-5 border-bottom border-primary border-[12px]">
                <div class="col-md-3 text-center mb-4 mb-md-0">
                    <img src="{% static 'images/videsh_chalo_logo.png' %}" class="img-fluid" style="max-height: 120px;" alt="Videsh Chalo Logo">
                </div>
                <div class="col-md-9 border-start-md ps-md-5">
                    <h3 class="text-primary fw-black italic h2 mb-3">Our Mission & Ecosystem</h3>
                    <p class="text-muted fs-5 mb-0 leading-relaxed">
                        Inspired by the vision of a globally connected India, Videsh Chalo was founded to bridge the gap between Indian aspirations and international opportunities. We operate a secure, transparent, and technology-driven ecosystem that caters to three major global transitions: <strong>Overseas Employment, Study Abroad Programs, and International Travel.</strong>
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- 🌐 OUR CORE PILLARS (Jobs, Study, Travel) -->
    <section class="core-pillars py-5">
        <div class="container text-center">
            <h2 class="fw-black text-dark mb-5 italic display-6">Our Three Pillars of Excellence 🏛️</h2>
            <div class="row g-4">
                
                <!-- Pillar 1: Jobs -->
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white transition-hover border-top border-primary border-5">
                        <div class="bg-primary-subtle text-primary w-16 h-16 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4">
                            <i class="fas fa-briefcase fs-3"></i>
                        </div>
                        <h4 class="fw-black mb-3">Overseas Jobs</h4>
                        <p class="text-muted small mb-0">Connecting skilled and semi-skilled Indian workers with verified international recruiters. We ensure 100% legal compliance, transparent salary terms, and complete protection against fraud.</p>
                    </div>
                </div>

                <!-- Pillar 2: Study -->
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white transition-hover border-top border-warning border-5">
                        <div class="bg-warning-subtle text-warning w-16 h-16 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4">
                            <i class="fas fa-graduation-cap fs-3"></i>
                        </div>
                        <h4 class="fw-black mb-3">Study Abroad</h4>
                        <p class="text-muted small mb-0">Partnering with top global universities to provide students with end-to-end admission counseling, visa documentation support, and post-study career guidance.</p>
                    </div>
                </div>

                <!-- Pillar 3: Travel -->
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm rounded-4 p-4 bg-white transition-hover border-top border-info border-5">
                        <div class="bg-info-subtle text-info w-16 h-16 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4">
                            <i class="fas fa-plane-departure fs-3"></i>
                        </div>
                        <h4 class="fw-black mb-3">Tours & Travel</h4>
                        <p class="text-muted small mb-0">Curating premium international holiday packages and solo travel itineraries. We manage the logistics so you can focus on creating memories across the globe.</p>
                    </div>
                </div>

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

    <!-- 🤝 360° SUPPORT SYSTEM -->
    <section class="support-services py-5 bg-dark text-white rounded-[3rem] mx-3 mx-md-5 my-5 shadow-lg position-relative overflow-hidden">
        <div class="container position-relative z-index-2 py-4">
            <div class="text-center mb-5">
                <h2 class="fw-black italic text-warning">We Stand By You—Every Step of the Way</h2>
                <p class="text-white-50 px-md-5 max-w-800 mx-auto">Paperwork, visas, interviews, and logistics can be overwhelming. At Videsh Chalo, our technology and human expertise combine to provide a seamless, secure experience.</p>
            </div>
            
            <div class="row g-4 text-center">
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="p-3 border border-secondary rounded-4 h-100 bg-white bg-opacity-10 backdrop-blur-sm">
                        <div class="fs-2 mb-2 text-primary">🔍</div>
                        <h6 class="fw-bold small mb-0">Profile Auditing</h6>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="p-3 border border-secondary rounded-4 h-100 bg-white bg-opacity-10 backdrop-blur-sm">
                        <div class="fs-2 mb-2 text-info">🤖</div>
                        <h6 class="fw-bold small mb-0">AI Resume Tools</h6>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="p-3 border border-secondary rounded-4 h-100 bg-white bg-opacity-10 backdrop-blur-sm">
                        <div class="fs-2 mb-2 text-warning">🛂</div>
                        <h6 class="fw-bold small mb-0">Visa Guidance</h6>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="p-3 border border-secondary rounded-4 h-100 bg-white bg-opacity-10 backdrop-blur-sm">
                        <div class="fs-2 mb-2 text-success">📂</div>
                        <h6 class="fw-bold small mb-0">Documentation</h6>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="p-3 border border-secondary rounded-4 h-100 bg-white bg-opacity-10 backdrop-blur-sm">
                        <div class="fs-2 mb-2 text-danger">🛡️</div>
                        <h6 class="fw-bold small mb-0">Fraud Protection</h6>
                    </div>
                </div>
                <div class="col-6 col-md-4 col-lg-2">
                    <div class="p-3 border border-secondary rounded-4 h-100 bg-white bg-opacity-10 backdrop-blur-sm">
                        <div class="fs-2 mb-2 text-light">📱</div>
                        <h6 class="fw-bold small mb-0">24/7 Helpline</h6>
                    </div>
                </div>
            </div>
        </div>
        <!-- Background Icon -->
        <i class="fas fa-globe-americas position-absolute end-0 bottom-0 opacity-10 mb-n5 me-n5" style="font-size: 5rem;"></i>
    </section>

    <!-- ✨ OUR PROMISE -->
    <section class="promise-footer pt-4 pb-5">
        <div class="container">
            <div class="card border-0 shadow-lg text-center p-4 p-md-5 rounded-[3rem] overflow-hidden bg-white border-bottom border-warning border-[10px]">
                <div class="card-body py-4">
                    <h2 class="display-6 fw-black text-dark italic mb-3">Our Core Promise ✨</h2>
                    <p class="fs-5 text-muted mb-4 max-w-700 mx-auto">
                        At Videsh Chalo, you are not just a user—you are our priority. We are committed to ethical processing, absolute transparency, and delivering genuine global opportunities.
                    </p>
                    <div class="d-flex flex-wrap justify-content-center gap-3 mt-5">
                        <a href="{% url 'job_list' %}" class="btn btn-primary rounded-pill px-4 py-2 fw-black shadow-sm">Explore Jobs</a>
                        <a href="{% url 'study_home' %}" class="btn btn-warning rounded-pill px-4 py-2 fw-black shadow-sm text-dark">Study Abroad</a>
                        <a href="{% url 'travels_home' %}" class="btn btn-outline-dark rounded-pill px-4 py-2 fw-black shadow-sm">Book a Tour</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

<style>
    .fw-black { font-weight: 900 !important; }
    .italic { font-style: italic; }
    .tracking-widest { letter-spacing: 0.1em; }
    .max-w-800 { max-width: 800px; }
    .max-w-700 { max-width: 700px; }
    .leading-relaxed { line-height: 1.8; }
    
    .w-16 { width: 4rem; }
    .h-16 { height: 4rem; }
    .backdrop-blur-sm { backdrop-filter: blur(4px); }
    
    .transition-hover { transition: all 0.3s ease; border: 1px solid #f8f9fa; }
    .transition-hover:hover { 
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
        border-color: #e2e8f0;
    }

    @media (min-width: 768px) {
        .border-start-md { border-left: 2px solid #e2e8f0 !important; }
    }
</style>
{% endblock %}