@extends('layouts.app')

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

@section('content')

<style>
:root{
    --primary:#5E244E;
    --secondary:#8B3A74;
    --light:#f8f4f7;
}

.hero-about{
    min-height:60vh;
    background:
    linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),
    url('https://images.pexels.com/photos/1595385/pexels-photo-1595385.jpeg');
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.about-box {
    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid #efeff4;
}

.about-box:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(94, 36, 78, 0.1);
    border-color: var(--primary);
}

.icon-circle {
    width:75px;
    height:75px;
    background:var(--primary);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin:auto;
    transition: all 0.4s ease;
}

.about-box:hover .icon-circle {
    background: var(--secondary);
    transform: rotateY(180deg); /* කාඩ් එක උඩට යද්දී අයිකන් එක කැරකෙනවා */
}

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

/* 1. පල්ලෙහා ඉඳන් උඩට එන ඇනිමේෂන් */
.fade-up-init {
    transform: translateY(40px);
}

/* 2. වමේ ඉඳන් දකුණට (රූපය සඳහා) */
.slide-left-init {
    transform: translateX(-50px);
}

/* 3. දකුණේ ඉඳන් වමට (විස්තරය සඳහා) */
.slide-right-init {
    transform: translateX(50px);
}

/* 4. Zoom වෙලා bounce වෙන්න (කාඩ්ස් සඳහා) */
.zoom-in-init {
    transform: scale(0.85);
}

/* Active Class (Scroll කරද්දී apply වේ) */
.animate-item.animated {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* CTA බටන් එක ගැස්සෙන ඇනිමේෂන් එකක් */
@keyframes pulse-btn {
    0% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(94, 36, 78, 0); }
    100% { box-shadow: 0 0 0 0 rgba(94, 36, 78, 0); }
}

.cta-btn {
    background: var(--primary);
    color: #fff !important;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    animation: pulse-btn 2s infinite;
}

.cta-btn:hover {
    background: var(--secondary);
    transform: scale(1.05);
}
</style>

<!-- HERO -->
<section class="hero-about">
    <div class="container">
        <div class="animate-item animated fade-up-init">
            <h1 class="fw-bold display-4">About Our Institute</h1>
            <p class="mt-3 lead" style="max-width: 700px; margin: auto;">
                We are committed to delivering high-quality automotive education
                with practical training and industry-focused learning.
            </p>
        </div>
    </div>
</section>

<!-- ABOUT CONTENT -->
<section class="py-5 overflow-hidden">
<div class="container">
    <div class="row align-items-center g-5">
        <!-- වමේ සිට දකුණට පැමිණේ -->
        <div class="col-md-6 animate-item slide-left-init">
            <img src="https://images.pexels.com/photos/3862130/pexels-photo-3862130.jpeg"
                 class="img-fluid rounded shadow-lg"
                 alt="About Image">
        </div>

        <!-- දකුණේ සිට වමට පැමිණේ -->
        <div class="col-md-6 animate-item slide-right-init">
            <h2 class="fw-bold mb-3">Who We Are</h2>
            <p class="text-muted fs-5">
                Our institute specializes in automotive engineering education,
                offering hands-on training in modern vehicle technologies,
                mechanical systems, and electric vehicles.
            </p>
            <p class="text-muted mb-4">
                We focus on building skilled professionals who are ready for
                the global automotive industry.
            </p>
            <a href="{{ route('courses') }}" class="btn btn-dark btn-lg px-4 rounded-pill">
                View Courses
            </a>
        </div>
    </div>
</div>
</section>

<!-- FEATURES -->
<section class="py-5 bg-light">
<div class="container">

<div class="section-title animate-item fade-up-init">
    <h2 class="fw-bold">Why Choose Us</h2>
    <p class="text-muted">We provide the best learning experience</p>
</div>

<div class="row g-4">
    <!-- කාඩ් එකින් එක Zoom-in වේ -->
    <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="mt-4 fw-bold">Expert Lecturers</h4>
            <p class="text-muted mb-0">
                Experienced industry professionals guiding your learning journey.
            </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="mt-4 fw-bold">Practical Training</h4>
            <p class="text-muted mb-0">
                Hands-on workshop experience with real vehicles and tools.
            </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="mt-4 fw-bold">Certified Courses</h4>
            <p class="text-muted mb-0">
                Industry-recognized certifications to boost your career.
            </p>
        </div>
    </div>
</div>

</div>
</section>

<!-- CTA -->
<section class="py-5 text-center bg-white overflow-hidden">
<div class="container py-4 animate-item fade-up-init">
    <h2 class="fw-bold mb-3">Start Your Automotive Career Today</h2>
    <p class="text-muted fs-5 mb-5">
        Join our institute and become a skilled automotive professional.
    </p>
    <div class="d-flex justify-content-center">
        <a href="/apply" class="cta-btn shadow">
           Apply Courses
        </a>
    </div>
</div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function () {
    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 // Element එකෙන් 15%ක් පෙනෙද්දීම ඇනිමේෂන් එක පටන් ගනී
    });

    animatedElements.forEach(el => observer.observe(el));
});
</script>

@endsection