@extends(getTemplate() . '.layouts.app')

@push('styles_top')
    <style>
        /* Essential custom styles that can't be achieved with Bootstrap alone */
        :root {
            --about-primary: #ff6b00;
            --about-primary-dark: #b94d01;

            --about-secondary: #6c757d;
        }

        .bg-about-primary {
            background-color: var(--about-primary) !important;
        }

        .text-about-primary {
            color: var(--about-primary) !important;
        }

        .btn-about-primary {
            background-color: var(--about-primary);
            border-color: var(--about-primary);
        }

        .btn-about-primary:hover {
            background-color: #e65d00;
            border-color: #e65d00;
        }

        .stats-item {
            text-align: center;
            padding: 2rem;
            border-radius: 0.5rem;
            background: #fff;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .stats-item:hover {
            transform: translateY(-5px);
        }

        .hero-section {
            min-height: 60vh;
            background: linear-gradient(135deg, #1a1a1a, #333);
            position: relative;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .toc-history-line {
            position: relative;
            padding-left: 3rem;
            margin-bottom: 3rem;
            border-left: 2px solid var(--about-primary);
        }

        .toc-history-line::before {
            content: '';
            position: absolute;
            left: -0.5rem;
            top: 0;
            width: 1rem;
            height: 1rem;
            background: var(--about-primary);
            border-radius: 50%;
        }

        /* Custom animations */
        .fade-up {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }

        .fade-up.show {
            opacity: 1;
            transform: translateY(0);
        }

        .value-card {
            transition: transform 0.3s ease;
        }

        .value-card:hover {
            transform: translateY(-5px);
        }

        .bg-overlay {
            background: linear-gradient(135deg, var(--about-primary) 0%, var(--about-primary-dark) 100%);
            min-height: 300px;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .bg-overlay::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
            animation: rotate 30s linear infinite;
        }

        @media (max-width: 768px) {
            .bg-overlay::before {
                top: -25%;
                left: -25%;
                width: 150%;
                height: 100%;
            }
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    {{-- <section class="hero-section d-flex align-items-center bg-dark" id="home">
        <div class="hero-overlay"></div>
        <div class="container hero-content text-center text-white py-20">
            <h1 class="display-3 fw-bold mb-8 fade-up">About The Orange Card</h1>
            <p class="lead mb-8 fade-up">Leading the Way in Compliance Training Excellence Since 1998</p>
        </div>
    </section> --}}
    <section class="bg-overlay position-relative mb-5">
        <div class="container text-center text-white position-relative">
            <h1 class="display-3 fw-bold mb-8 fade-up">About The Orange Card</h1>
            <p class="lead mb-8 fade-up">Leading the Way in Compliance Training Excellence Since 1998</p>
        </div>
    </section>

    <!-- Company Overview Section -->
    <section class="py-20">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 mb-8 mb-lg-0">
                    <span class="badge bg-about-primary mb-10">Our Story</span>
                    <h2 class="h1" class="display-6 fw-bold mb-8">Transforming Compliance Training for the Digital Age
                    </h2>
                    <p class="lead mb-8">The Orange Card was founded with a simple yet powerful mission: to make compliance
                        training accessible, engaging, and effective for businesses of all sizes.</p>
                    <p class="mb-8">What started as a small team passionate about improving workplace training has grown
                        into Australia's leading compliance training platform, serving thousands of businesses nationwide.
                    </p>
                    <div class="d-flex gap-3">
                        <a href="/contact" class="btn btn-about-primary">Contact Us</a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="bg-light rounded p-8">
                        <div class="row g-4">
                            <div class="col-6">
                                <div class="text-center p-6">
                                    <i class="fas fa-users fs-2qx text-about-primary mb-6"></i>
                                    <h2 class="h1" class="h1 fw-bold">50K+</h2>
                                    <p class="mb-0">Active Users</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-6">
                                    <i class="fas fa-building fs-2qx text-about-primary mb-6"></i>
                                    <h2 class="h1" class="h1 fw-bold">1000+</h2>
                                    <p class="mb-0">Companies</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-6">
                                    <i class="fas fa-certificate fs-2qx text-about-primary mb-6"></i>
                                    <h2 class="h1" class="h1 fw-bold">100K+</h2>
                                    <p class="mb-0">Certifications</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-center p-6">
                                    <i class="fas fa-globe fs-2qx text-about-primary mb-6"></i>
                                    <h2 class="h1" class="h1 fw-bold">25+</h2>
                                    <p class="mb-0">Years Experience</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="py-20 bg-light">
        <div class="container">
            <div class="text-center mb-10">
                <span class="badge bg-about-primary mb-10">Our Values</span>
                <h2 class="h1" class="display-6 fw-bold">What Drives Us Forward</h2>
                <p class="lead">Our core values shape everything we do</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm h-100 value-card">
                        <div class="card-body p-8">
                            <div class=" mb-6">
                                <i class="fas fa-star fs-2qx text-about-primary"></i>
                            </div>
                            <h2 class="h1">Excellence</h2>
                            <p class="text-muted">We strive for excellence in every aspect of our service, from course
                                content to customer support.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm h-100 value-card">
                        <div class="card-body p-8">
                            <div class=" mb-6">
                                <i class="fas fa-handshake fs-2qx text-about-primary"></i>
                            </div>
                            <h2 class="h1">Partnership</h2>
                            <p class="text-muted">We build lasting partnerships with our clients, understanding their needs
                                and growing together.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm h-100 value-card">
                        <div class="card-body p-8">
                            <div class=" mb-6">
                                <i class="fas fa-lightbulb fs-2qx text-about-primary"></i>
                            </div>
                            <h2 class="h1">Innovation</h2>
                            <p class="text-muted">We continuously innovate our platform and content to meet evolving
                                industry needs.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    
    <!-- Team Section -->
    {{-- <section class="py-20 bg-dark text-white" id="team">
        <div class="container">
            <div class="text-center mb-10">
                <span class="badge bg-about-primary mb-10">Leadership Team</span>
                <h2 class="h1" class="display-6 fw-bold">Meet the Minds Behind The Orange Card</h2>
            </div>
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-dark text-white border-0">
                        <div class="card-body text-center p-8">
                            <div class="rounded-circle bg-about-primary mx-auto mb-8 d-flex align-items-center justify-content-center"
                                style="width: 100px; height: 100px;">
                                <i class="fas fa-user fs-2qx text-white"></i>
                            </div>
                            <h5>Michael Chen</h5>
                            <p class="small mb-0">CEO & Founder</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-dark text-white border-0">
                        <div class="card-body text-center p-8">
                            <div class="rounded-circle bg-about-primary mx-auto mb-8 d-flex align-items-center justify-content-center"
                                style="width: 100px; height: 100px;">
                                <i class="fas fa-user fs-2qx text-white"></i>
                            </div>
                            <h5>Sarah Thompson</h5>
                            <p class="small mb-0">Chief Learning Officer</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-dark text-white border-0">
                        <div class="card-body text-center p-8">
                            <div class="rounded-circle bg-about-primary mx-auto mb-8 d-flex align-items-center justify-content-center"
                                style="width: 100px; height: 100px;">
                                <i class="fas fa-user fs-2qx text-white"></i>
                            </div>
                            <h5>David Wilson</h5>
                            <p class="small mb-0">Head of Technology</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card bg-dark text-white border-0">
                        <div class="card-body text-center p-8">
                            <div class="rounded-circle bg-about-primary mx-auto mb-8 d-flex align-items-center justify-content-center"
                                style="width: 100px; height: 100px;">
                                <i class="fas fa-user fs-2qx text-white"></i>
                            </div>
                            <h5>Emma Taylor</h5>
                            <p class="small mb-0">Customer Success Director</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
@endsection

@push('scripts_bottom')
    <script>
        // Fade up animation
        const fadeUpElements = document.querySelectorAll('.fade-up');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('show');
                }
            });
        });
        fadeUpElements.forEach(element => observer.observe(element));
    </script>
@endpush