@extends('layouts.app')

@section('title', 'Services | DIGITAL STUDIO')

@section('content')
    <section class="hero hero-services 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">
                Our <span class="text-gradient">Expertise</span>
            </h1>
            <p class="lead text-muted mx-auto mb-0" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="200">
                At DIGITAL STUDIO, we excel at transforming ambitious concepts into reality. Whether you are an emerging
                enterprise or an established brand, contact us today for a professional consultation.
            </p>
        </div>
    </section>

    <section class="services-grid py-5" data-aos="fade-up">
        <div class="container">
            <div class="row g-4 justify-content-center">
                @php
                    $services = [
                        ['icon' => 'fa-mobile-alt', 'title' => 'Mobile Application Development', 'desc' => 'Transform your concepts into reality with high-performance mobile applications that are intuitive and scalable.', 'link' => 'services.app'],
                        ['icon' => 'fa-code', 'title' => 'Bespoke Web Development', 'desc' => 'Acquire a powerful, responsive website that perfectly represents your brand and delivers tangible results.', 'link' => 'services'],
                        ['icon' => 'fa-shopping-cart', 'title' => 'eCommerce Solutions', 'desc' => 'Maximise your sales with a bespoke eCommerce architecture that simplifies the client shopping experience.', 'link' => 'services.ecom'],
                        ['icon' => 'fa-palette', 'title' => 'Bespoke Logo Design', 'desc' => 'Create a memorable brand identity with our professional and creative logo design services.', 'link' => 'services.logo'],
                        ['icon' => 'fa-bullhorn', 'title' => 'Brand Identity Systems', 'desc' => 'Develop a consistent and impactful brand identity across all digital platforms and touchpoints.', 'link' => 'services.brand'],
                        ['icon' => 'fa-hashtag', 'title' => 'Social Media Marketing', 'desc' => 'Engage your target audience and strengthen your brand presence across modern social media.', 'link' => 'services.smm'],
                        ['icon' => 'fa-search', 'title' => 'Search Engine Optimisation', 'desc' => 'Enhance your website’s visibility and drive organic traffic with strategic SEO specialist expertise.', 'link' => 'services.seo'],
                        ['icon' => 'fa-video', 'title' => 'Motion Graphics & Video', 'desc' => 'Communicate your brand story with captivating video animations and professional motion graphics.', 'link' => 'contact'],
                    ];
                @endphp

                @foreach($services as $index => $service)
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="{{ ($index % 4) * 100 }}">
                        <a href="{{ route($service['link']) }}" class="text-decoration-none">
                            <div class="service-card-minimal h-100 text-center p-4">
                                <div class="service-icon-minimal mb-4">
                                    <i class="fas {{ $service['icon'] }} fa-2x text-primary"></i>
                                </div>
                                <h4 class="h6 fw-bold text-dark mb-3">{{ $service['title'] }}</h4>
                                <p class="text-muted small mb-0">{{ $service['desc'] }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="stats-section py-5 bg-primary-ultra-light" 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="marketing-services py-5" data-aos="fade-up">
        <div class="container text-center">
            <h2 class="mb-4 text-dark" data-aos="fade-up">
                Evolving Businesses into Market-Leading Brands - <span class="text-gradient">Discover Premier Digital
                    Solutions</span>
            </h2>
            <p class="mx-auto mb-5 text-muted" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                Establish your digital authority with DIGITAL STUDIO. We empower organisations to surpass their competition
                through professional, bespoke digital marketing solutions.
            </p>

            <!-- Service Features -->
            <div class="row g-4 justify-content-center">
                @php
                    $features = [
                        ['icon' => 'fa-headset', 'title' => '24/7 Client Assistance'],
                        ['icon' => 'fa-users', 'title' => 'Professional Specialist Team'],
                        ['icon' => 'fa-shield-alt', 'title' => '100% Money-back Guarantee'],
                        ['icon' => 'fa-award', 'title' => 'Assured Quality'],
                        ['icon' => 'fa-sync-alt', 'title' => 'Unlimited Revisions'],
                    ];
                @endphp

                @foreach($features as $index => $feature)
                    <div class="col-md-4 col-lg" data-aos="fade-up" data-aos-delay="{{ ($index + 2) * 100 }}">
                        <div class="feature-box p-4 bg-white border rounded-3 shadow-sm h-100">
                            <div class="feature-icon mb-3">
                                <i class="fas {{ $feature['icon'] }} fa-2x text-primary"></i>
                            </div>
                            <h4 class="h6 mb-0 text-dark fw-bold">{{ $feature['title'] }}</h4>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="digital-journey py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container text-center">
            <h2 class="display-5 fw-bold mb-4" data-aos="fade-up">
                How DIGITAL STUDIO Elevates <span class="text-gradient">Your Digital Journey</span>
            </h2>
            <p class="mx-auto mb-5 text-muted" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                Partnering with DIGITAL STUDIO provides significant commercial advantages. Expect enhanced brand
                recognition, superior client engagement, and an exceptional return on investment.
            </p>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="process-card h-100">
                        <div class="process-number">01</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Enquiry & Consultation</h3>
                        <p class="text-muted mb-0">
                            Complete the required details in our consultation form. Please ensure all pertinent information
                            and project requirements are included for a comprehensive assessment.
                        </p>
                    </div>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="process-card h-100">
                        <div class="process-number">02</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Secure Payment</h3>
                        <p class="text-muted mb-0">
                            Upon completing the form, you will be directed to our secure payment portal. Choose the package
                            that best aligns with your business needs.
                        </p>
                    </div>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="process-card h-100">
                        <div class="process-number">03</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Solution Deployment</h3>
                        <p class="text-muted mb-0">
                            Once your project is finalised, we will present it for your formal approval. You may then
                            request any necessary refinements before the official launch.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <style>
        .hero-services {
            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-1521737711867-e3b97375f902?auto=format&fit=crop&q=80&w=1974");
            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;
        }

        .service-card-minimal {
            background: white;
            border-radius: 12px;
            border: 2px solid var(--primary-color);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            height: 100%;
        }

        .service-card-minimal:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .service-icon-minimal {
            width: 70px;
            height: 70px;
            background: var(--primary-ultra-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: all 0.3s ease;
        }

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

        .service-card-minimal:hover .service-icon-minimal 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;
        }

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

        .feature-box:hover {
            border-color: var(--primary-color);
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

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

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

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

        .process-card {
            text-align: center;
            padding: 2.5rem 2rem;
            background: white;
            border-radius: 16px;
            border: 1px solid var(--primary-color);
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
        }

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

        .process-number {
            position: absolute;
            top: 1rem;
            left: 1rem;
            font-size: 3rem;
            font-weight: 900;
            color: var(--primary-ultra-light);
            line-height: 1;
            z-index: 0;
        }

        .process-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-ultra-light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            transition: var(--transition-smooth);
            position: relative;
            z-index: 1;
        }

        .process-card:hover .process-icon {
            background: var(--primary-color);
            transform: rotate(10deg);
        }

        .process-icon i {
            font-size: 2rem;
            color: var(--primary-color);
            transition: var(--transition-smooth);
        }

        .process-card:hover .process-icon i {
            color: white;
        }

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

            .stats-container {
                padding: 1.5rem;
            }

            .process-card {
                padding: 2rem 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