@extends('layouts.app')

@section('title', 'About Our Agency | DIGITAL STUDIO')

@section('content')
    <section class="hero hero-about py-5 position-relative overflow-hidden" data-aos="fade-up">
        <div class="hero-pattern"></div>
        <div class="container py-lg-5 text-center">
            <h1 class="display-4 fw-bold mb-4" data-aos="fade-up" data-aos-delay="100">
                A Truly Unified <span class="text-gradient">Creative</span> Studio
            </h1>
            <p class="lead text-muted mx-auto mb-0" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="200">
                Welcome to DIGITAL STUDIO, the hub where collaboration, professional expertise, and a commitment to our
                clients converge to redefine digital innovation.
            </p>
        </div>
    </section>

    <section class="what-we-do py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="mb-4 text-dark" data-aos="fade-up"><span class="text-gradient">Our</span> Expertise</h2>
                    <p class="text-muted lead mb-5" data-aos="fade-up" data-aos-delay="100">
                        Utilising our vast experience, professional focus, and industry-leading talent, we achieve
                        exceptional outcomes for our clients. We provide a full range of services, including web
                        development, eCommerce solutions, stationery design, bespoke logo sets, application development, and
                        illustrative design.
                    </p>
                    <a href="{{ route('packages') }}" class="btn btn-primary btn-lg px-5 py-3 rounded-pill"
                        data-aos="fade-up" data-aos-delay="200">
                        Begin Your Journey <i class="fas fa-arrow-right ms-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section class="stats-section py-5" data-aos="fade-up">
        <div class="container">
            <div class="stats-container p-5 rounded-4">
                <div class="row g-4">
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="200">200+</div>
                            <p class="mb-0 text-white opacity-90">Happy Clients</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="280">280+</div>
                            <p class="mb-0 text-white opacity-90">Completed Projects</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number">100%</div>
                            <p class="mb-0 text-white opacity-90">Success Rate</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="420">420K+</div>
                            <p class="mb-0 text-white opacity-90">Social Followers</p>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg">
                        <div class="stat-box text-center">
                            <div class="stat-number" data-count="10">10+</div>
                            <p class="mb-0 text-white opacity-90">Years of Experience</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="our-story py-5" data-aos="fade-up">
        <div class="container">
            <div class="story-header text-center mb-5">
                <h2 class="mb-4 text-dark" data-aos="fade-up">Our Journey</h2>
                <p class="text-muted mx-auto" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                    At DIGITAL STUDIO, we are of the firm belief that every triumphant project starts with a compelling
                    vision. Our journey began with a mission to transform the digital landscape through creativity,
                    innovation, and technical mastery.
                </p>
            </div>

            <div class="row g-4">
                @php
                    $storyCards = [
                        ['number' => '01', 'title' => 'Design', 'desc' => 'In an era defined by technology, our creative designers believe that aesthetics can fundamentally influence digital interaction.'],
                        ['number' => '02', 'title' => 'Engineering', 'desc' => 'Our engineering team is focused on constructing the resilient foundations for digital innovation.'],
                        ['number' => '03', 'title' => 'Project Management', 'desc' => 'Successful project delivery is at the heart of our operations. Our managers ensure precise and clear communication.'],
                        ['number' => '04', 'title' => 'Synergy', 'desc' => 'At DIGITAL STUDIO, these three core departments unite to form a seamless and highly collaborative unit.'],
                        ['number' => '05', 'title' => 'Client Commitment', 'desc' => 'DIGITAL STUDIO’s success is measured not only by technical proficiency but by our steadfast commitment to client goals.'],
                        ['number' => '06', 'title' => 'Innovation & Growth', 'desc' => 'With every successful launch, DIGITAL STUDIO’s reputation flourishes as our portfolio encompasses a vast range of industries.']
                    ];
                @endphp

                @foreach($storyCards as $index => $card)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ ($index + 1) * 100 }}">
                        <div class="story-card p-4 bg-white border rounded-3 h-100 shadow-sm">
                            <h3 class="h5 mb-3 text-dark">
                                <span class="text-primary fw-bold me-2">{{ $card['number'] }}</span> {{ $card['title'] }}
                            </h3>
                            <p class="text-muted small mb-0">{{ $card['desc'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="why-choose-us py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container text-center">
            <h2 class="mb-4 text-dark" data-aos="fade-up"><span class="text-gradient">Why</span> Partner With Us</h2>
            <p class="mx-auto mb-5 text-muted" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                At DIGITAL STUDIO, we recognise the significance of standing out in a highly competitive digital arena. Our
                team is committed to providing bespoke marketing solutions that accurately mirror your brand's unique
                identity.
            </p>

            <div class="row g-4 justify-content-center">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="feature-card h-100 p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-headset fa-2x text-primary"></i>
                        </div>
                        <h4 class="h6 mb-0 text-dark fw-bold">24/7 Client Assistance</h4>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="feature-card h-100 p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-users fa-2x text-primary"></i>
                        </div>
                        <h4 class="h6 mb-0 text-dark fw-bold">Specialist Team of Professionals</h4>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="feature-card h-100 p-4">
                        <div class="feature-icon mb-3">
                            <i class="fas fa-award fa-2x text-primary"></i>
                        </div>
                        <h4 class="h6 mb-0 text-dark fw-bold">Assured Quality</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .hero-about {
            background-color: var(--background-color);
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
                url("https://images.unsplash.com/photo-152207182399e-b89e7df830c5?auto=format&fit=crop&q=80&w=2070");
            background-size: cover;
            background-position: center;
            min-height: 50vh;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-71c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm20 31c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239929ea' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 1;
            pointer-events: none;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .story-card {
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
        }

        .story-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .feature-card {
            background: white;
            border-radius: 16px;
            border: 1px solid var(--primary-color);
            transition: var(--transition-smooth);
        }

        .feature-card:hover {
            transform: translateY(-4px);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-ultra-light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: var(--transition-smooth);
        }

        .feature-card:hover .feature-icon {
            background: var(--primary-color);
        }

        .feature-card:hover .feature-icon i {
            color: white !important;
        }

        .stats-container {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
            border-radius: 20px;
            padding: 3rem;
            position: relative;
            overflow: hidden;
            color: white;
        }

        .stat-box {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            text-align: center;
            padding: 2rem;
            transition: var(--transition-smooth);
        }

        .stat-box:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, #fff, #e0f2fe);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 0.5rem;
            line-height: 1;
        }

        @media (max-width: 767.98px) {
            .stat-number {
                font-size: 2rem;
            }

            .stats-container {
                padding: 1.5rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Stats Counter Animation
            const statNumbers = document.querySelectorAll('.stat-number[data-count]');
            if (statNumbers.length) {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const element = entry.target;
                            const target = parseInt(element.dataset.count);
                            animateCounter(element, target);
                            observer.unobserve(element);
                        }
                    });
                }, { threshold: 0.5 });

                statNumbers.forEach(number => observer.observe(number));

                function animateCounter(element, target) {
                    let current = 0;
                    const increment = target / 50;
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= target) {
                            element.textContent = target + (element.textContent.includes('+') ? '+' : '');
                            clearInterval(timer);
                        } else {
                            element.textContent = Math.floor(current) + (element.textContent.includes('+') ? '+' : '');
                        }
                    }, 20);
                }
            }
        });
    </script>
@endpush