@extends('layouts.app')

@section('title', 'About Us')

@section('content')

<style>
:root {
    --primary: #3E51B8;           /* Tech Blue */
    --primary-light: #0a67df;     /* Vibrant Electric Blue */
    --secondary: #BC1A1A;         /* Deep Racing Red */
    --secondary-hover: #822424;   /* Dark Burnt Red */
    --bg-light: #F8FAFC;          /* Soft slate light gray */
    --text-main: #0F172A;         /* Slate dark grey */
    --text-muted: #64748B;        /* Neutral gray */
    --card-border: rgba(226, 232, 240, 0.9);
}

/* ===== HERO SECTION ===== */
.hero-about {
    position: relative;
    min-height: 48vh;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.82) 50%, rgba(15, 23, 42, 0.92) 100%), 
                url('https://images.unsplash.com/photo-1617814076367-b759c7d7e738?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 70px 20px;
    overflow: hidden;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #FFE618;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 999px;
    margin-bottom: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.hero-about h1 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.hero-about p.lead {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 16px auto 0;
    line-height: 1.6;
}

/* ===== STATS BAR ===== */
.stats-container {
    margin-top: -38px;
    position: relative;
    z-index: 10;
}

.stat-glass-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 20px 16px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stat-glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(62, 81, 184, 0.14);
    border-color: rgba(62, 81, 184, 0.3);
}

.stat-icon {
    width: 44px;
    height: 44px;
    background: rgba(62, 81, 184, 0.08);
    color: var(--primary);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.stat-number {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ===== MINIMALIST VISION & MISSION ===== */
.minimal-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.animate-item:hover .minimal-icon-badge {
    transform: scale(1.1) rotate(4deg);
}

@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid rgba(226, 232, 240, 0.9) !important;
    }
}

/* ===== FEATURE BOXES ===== */
.about-box {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    padding: 34px 24px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(226, 232, 240, 0.9);
    height: 100%;
    overflow: hidden;
}

.about-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3E51B8 0%, #FFE618 50%, #BC1A1A 100%);
    opacity: 0.35;
    transition: opacity 0.4s ease;
}

.about-box:hover::before {
    opacity: 1;
}

.about-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px -10px rgba(62, 81, 184, 0.14);
    border-color: rgba(62, 81, 184, 0.3);
}

.icon-circle {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(62, 81, 184, 0.1) 0%, rgba(10, 103, 223, 0.06) 100%);
    color: var(--primary);
    border-radius: 20px;
    border: 1px solid rgba(62, 81, 184, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-box:hover .icon-circle {
    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
    color: #ffffff;
    border-color: transparent;
    transform: scale(1.12) rotate(6deg);
    box-shadow: 0 10px 25px rgba(62, 81, 184, 0.35);
}

/* ===== CTA BUTTON ===== */
.cta-btn {
    background: linear-gradient(135deg, #0F2C59 0%, #3E51B8 100%);
    color: #ffffff !important;
    padding: 13px 36px;
    border-radius: 999px;
    font-weight: 750;
    font-size: 14.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.35s ease;
    box-shadow: 0 8px 24px rgba(62, 81, 184, 0.25);
}

.cta-btn:hover {
    background: linear-gradient(135deg, #BC1A1A 0%, #822424 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(188, 26, 26, 0.35);
}

.cta-btn i {
    transition: transform 0.3s ease;
}

.cta-btn:hover i {
    transform: translateX(6px);
}

/* ===== SCROLL ANIMATIONS ===== */
.animate-item {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-up-init { transform: translateY(30px); }
.slide-left-init { transform: translateX(-40px); }
.slide-right-init { transform: translateX(40px); }
.zoom-in-init { transform: scale(0.94); }

.animate-item.animated {
    opacity: 1;
    transform: translate(0) scale(1);
}
</style>

<!-- HERO SECTION -->
<section class="hero-about">
    <div class="container">
        <div class="animate-item animated fade-up-init">
            <span class="hero-badge"><i class="fa-solid fa-graduation-cap"></i> Pioneering Automotive Academy</span>
            <h1 class="fw-bold">Empowering Future Mobility Leaders</h1>
            <p class="lead">
                We are committed to delivering world-class automotive engineering education with hands-on workshop mastery, TVEC accredited qualifications, and cutting-edge EV technology training.
            </p>
        </div>
    </div>
</section>

<!-- FLOATING STATS COUNTER -->
<div class="container stats-container">
    <div class="row g-3 justify-content-center">
        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 100ms;">
            <div class="stat-glass-card">
                <div class="stat-icon"><i class="fa-solid fa-user-graduate"></i></div>
                <div class="stat-number count-up" data-count-target="2500" data-count-suffix="+">0+</div>
                <div class="stat-label">Graduated Technicians</div>
            </div>
        </div>
        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 200ms;">
            <div class="stat-glass-card">
                <div class="stat-icon"><i class="fa-solid fa-screwdriver-wrench"></i></div>
                <div class="stat-number">100%</div>
                <div class="stat-label">Practical Lab Mastery</div>
            </div>
        </div>
        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 300ms;">
            <div class="stat-glass-card">
                <div class="stat-icon"><i class="fa-solid fa-award"></i></div>
                <div class="stat-number">15+</div>
                <div class="stat-label">Years of Excellence</div>
            </div>
        </div>
        <div class="col-6 col-md-3 animate-item zoom-in-init" style="transition-delay: 400ms;">
            <div class="stat-glass-card">
                <div class="stat-icon"><i class="fa-solid fa-briefcase"></i></div>
                <div class="stat-number">95%</div>
                <div class="stat-label">Job Placement Rate</div>
            </div>
        </div>
    </div>
</div>

<!-- VISION & MISSION MINIMALIST 1-ROW SECTION -->
<section class="py-5 bg-white">
    <div class="container py-3">
        <div class="row g-4 align-items-stretch">
            
            <!-- VISION (LEFT COLUMN) -->
            <div class="col-md-6 animate-item slide-left-init">
                <div class="p-4 rounded-4 bg-light border border-light-subtle h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="minimal-icon-badge bg-primary-subtle text-primary">
                            <i class="fa-solid fa-lightbulb"></i>
                        </div>
                        <div>
                            <span class="badge bg-primary-subtle text-primary fw-bold text-uppercase px-2 py-1 rounded-2 small mb-1" style="font-size: 11px;">GLOBAL GOAL</span>
                            <h3 class="fw-bold text-dark mb-0 fs-4">Our Vision</h3>
                        </div>
                    </div>
                    <p class="text-secondary fs-6 lh-base mb-0">
                        To be a global leader in automotive education, driving the future of mobility by empowering the next generation of engineers, technicians, and EV innovators.
                    </p>
                </div>
            </div>

            <!-- MISSION (RIGHT COLUMN) -->
            <div class="col-md-6 animate-item slide-right-init">
                <div class="p-4 rounded-4 bg-light border border-light-subtle h-100">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="minimal-icon-badge bg-danger-subtle text-danger">
                            <i class="fa-solid fa-bullseye"></i>
                        </div>
                        <div>
                            <span class="badge bg-danger-subtle text-danger fw-bold text-uppercase px-2 py-1 rounded-2 small mb-1" style="font-size: 11px;">CORE PURPOSE</span>
                            <h3 class="fw-bold text-dark mb-0 fs-4">Our Mission</h3>
                        </div>
                    </div>
                    <p class="text-secondary fs-6 lh-base mb-0">
                        To foster technical mastery and critical thinking through immersive, practical learning environments, strong industry partnerships, and a commitment to eco-friendly automotive practices.
                    </p>
                </div>
            </div>

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

<!-- ADVANTAGES / WHY CHOOSE US -->
<section class="py-5 bg-light position-relative">
    <div class="container py-4">
        <div class="text-center mb-5 animate-item fade-up-init">
            <span class="text-uppercase fw-bold small text-primary letter-spacing-1"><i class="fa-solid fa-award me-1"></i> Core Advantage</span>
            <h2 class="display-6 fw-bold text-dark mt-2">Why Study With AutoEdu?</h2>
            <p class="text-muted fs-5 max-width-600 mx-auto">We combine academic excellence with real-world workshop diagnostic training.</p>
        </div>

        <div class="row g-4">
            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 100ms;">
                <div class="about-box text-center">
                    <div class="icon-circle">
                        <i class="fa-solid fa-chalkboard-user"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Expert Lecturers</h4>
                    <p class="text-muted mb-0 lh-base">
                        Learn directly from veteran automotive engineers, diagnostic specialists, and TVEC certified master instructors.
                    </p>
                </div>
            </div>

            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 250ms;">
                <div class="about-box text-center">
                    <div class="icon-circle">
                        <i class="fa-solid fa-screwdriver-wrench"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Practical Training</h4>
                    <p class="text-muted mb-0 lh-base">
                        Hands-on workshop experience working on modern EFI engines, EV battery test bays, and automated gearboxes.
                    </p>
                </div>
            </div>

            <div class="col-md-4 animate-item zoom-in-init" style="transition-delay: 400ms;">
                <div class="about-box text-center">
                    <div class="icon-circle">
                        <i class="fa-solid fa-certificate"></i>
                    </div>
                    <h4 class="fw-bold text-dark mb-3">Certified Qualifications</h4>
                    <p class="text-muted mb-0 lh-base">
                        Earn internationally recognized NVQ Level 4/5 diplomas and certifications that accelerate your global career.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CALL TO ACTION (CTA) -->
<section class="py-5 text-center bg-white overflow-hidden position-relative">
    <div class="container py-4 animate-item fade-up-init">
        <div class="p-5 rounded-4 shadow-sm position-relative overflow-hidden" style="background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);">
            <span class="badge bg-warning text-dark font-monospace mb-3 px-3 py-2 rounded-pill"><i class="fa-solid fa-bolt me-1"></i> ADMISSIONS OPEN 2026</span>
            <h2 class="display-6 fw-bold text-white mb-3">Start Your Automotive Career Today</h2>
            <p class="text-white-50 fs-5 mb-4 max-width-600 mx-auto">
                Take the first step toward becoming a certified automotive engineer or high-voltage EV specialist.
            </p>
            <div class="d-flex justify-content-center">
                <a href="/apply" class="cta-btn">
                    Apply For Courses <i class="fa-solid fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Scroll animations observer
    const animatedElements = document.querySelectorAll('.animate-item');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animated');
                observer.unobserve(entry.target); 
            }
        });
    }, {
        threshold: 0.15 
    });

    animatedElements.forEach(el => observer.observe(el));

    // Stats Number Counter Animation
    const counterElements = document.querySelectorAll('.count-up');
    const counterObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const el = entry.target;
                const target = parseInt(el.getAttribute('data-count-target') || '0', 10);
                const suffix = el.getAttribute('data-count-suffix') || '';
                let current = 0;
                const increment = Math.ceil(target / 40);
                const timer = setInterval(() => {
                    current += increment;
                    if (current >= target) {
                        current = target;
                        clearInterval(timer);
                    }
                    el.textContent = current.toLocaleString() + suffix;
                }, 30);
                counterObserver.unobserve(el);
            }
        });
    }, { threshold: 0.5 });

    counterElements.forEach(el => counterObserver.observe(el));
});
</script>

@endsection