@extends('layouts.app')

@section('title', 'Mobile App Development | DIGITAL STUDIO2')

@push('styles')
    <style>
        /* Service Page Specific Styles */
        /* Service Page Specific Styles kept for unique elements if any */
        /* ... communal styles are now in app.blade.php ... */

        /* Technology Grid */
        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1.5rem;
        }

        .tech-item {
            background: white;
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border-subtle);
            transition: all var(--transition-normal);
        }

        .tech-item:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-300);
        }

        .tech-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tech-icon img {
            max-width: 100%;
            max-height: 100%;
            filter: grayscale(100%);
            transition: filter var(--transition-normal);
        }

        .tech-item:hover .tech-icon img {
            filter: grayscale(0%);
        }

        .tech-name {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-700);
            text-align: center;
        }

        /* Platform Cards */
        .platform-card {
            background: white;
            border-radius: var(--radius-lg);
            padding: 2rem;
            border: 1px solid var(--border-subtle);
            transition: all var(--transition-normal);
        }

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

        .platform-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: var(--primary-50);
            color: var(--primary-700);
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1.5rem;
        }

        /* Process Steps */
        .process-step {
            position: relative;
            padding: 2rem;
            background: white;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-subtle);
            transition: all var(--transition-normal);
        }

        .process-step:hover {
            border-color: var(--primary-500);
            box-shadow: var(--shadow-md);
        }

        .step-number {
            position: absolute;
            top: -1rem;
            left: 2rem;
            width: 2.5rem;
            height: 2.5rem;
            background: var(--primary-500);
            color: white;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
        }

        .service-cta-content {
            position: relative;
            z-index: 2;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .service-hero {
                min-height: 50vh;
                padding: 3rem 0;
            }

            .service-card {
                padding: 2rem;
            }

            .tech-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                gap: 1rem;
            }

            .tech-item {
                padding: 1rem;
            }
        }

        @media (max-width: 576px) {
            .service-hero {
                min-height: 40vh;
            }

            .service-section {
                padding: 3rem 0;
            }

            .tech-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="service-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <div class="service-hero-content text-white">
                        <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                            <i class="fas fa-mobile-alt me-2"></i> Mobile App Development
                        </span>
                        <h1 class="display-3 fw-bold mb-4 text-white">
                            Custom Mobile App <br>
                            <span class="text-gradient">Development Services</span>
                        </h1>
                        <p class="lead mb-5 mx-auto" style="max-width: 800px;">
                            Empower your business with high-performance mobile apps tailored to your goals.
                            From iOS to Android, we design intuitive, scalable, and feature-rich applications
                            that drive user engagement and deliver real results.
                        </p>
                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar me-2"></i>
                                Request Free Quote
                            </a>
                            <a href="#services" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-eye me-2"></i>
                                View Services
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Services
                </span>
                <h2 class="mb-4">Mobile App Development <br><span class="text-gradient">Services</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Comprehensive mobile app solutions designed to bring your vision to life.
                    From concept to launch, we handle every aspect of app development.
                </p>
            </div>

            <div class="row g-4">
                <!-- Consultation -->
                <div class="col-lg-8">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-comments"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Mobile App Development Consultation</h4>
                        <p class="text-muted mb-4">
                            Have an app idea but not sure where to start? Our expert consultants help validate your
                            vision, define key features, and provide a clear roadmap to bring your app to life.
                        </p>
                        <a href="{{ route('contact') }}" class="text-primary fw-semibold d-flex align-items-center gap-2">
                            Schedule a Consultation
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="row g-4 h-100">
                        <!-- UI/UX Design -->
                        <div class="col-12">
                            <div class="service-card h-100">
                                <div class="service-icon">
                                    <i class="fas fa-paint-brush"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Mobile App UI/UX Design</h4>
                                <p class="text-muted mb-4">
                                    We create intuitive, engaging, and user-focused app designs that ensure a smooth
                                    experience across all devices.
                                </p>
                            </div>
                        </div>

                        <!-- CTA Card -->
                        <div class="col-12">
                            <div class="service-card bg-primary text-white">
                                <h4 class="fw-bold mb-3">Hire Mobile App Developer</h4>
                                <p class="text-light opacity-90 mb-4">
                                    Get dedicated app developers to work on your project.
                                </p>
                                <a href="{{ route('contact') }}" class="btn btn-light btn-lg w-100 fw-bold">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Custom Development -->
                <div class="col-12">
                    <div class="service-card">
                        <div class="row align-items-center">
                            <div class="col-lg-5 mb-4 mb-lg-0">
                                <img src="{{ asset('assets/App service ca.png') }}" alt="Custom App Development"
                                    class="img-fluid rounded-3 shadow" loading="lazy"
                                    onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1551650975-87deedd944c3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                            </div>
                            <div class="col-lg-7">
                                <h4 class="fw-bold mb-3">Custom Mobile App Development</h4>
                                <p class="text-muted mb-4">
                                    From concept to launch, we build powerful mobile apps tailored to your business needs.
                                    Whether for iOS, Android, or cross-platform, our solutions are secure, scalable, and
                                    performance-driven.
                                </p>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fab fa-android me-1"></i> Android
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fab fa-apple me-1"></i> iOS
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-layer-group me-1"></i> Cross-platform
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-cloud me-1"></i> Backend
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- App Types Section -->
    <section class="service-section bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Expertise
                </span>
                <h2 class="mb-4">Types of Mobile App <br><span class="text-gradient">Development</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    At DIGITAL STUDIO2, we offer versatile mobile app development services tailored to your business goals.
                </p>
            </div>

            <div class="row g-4">
                <!-- Android Development -->
                <div class="col-md-6">
                    <div class="platform-card">
                        <div class="platform-badge">
                            <i class="fab fa-android me-1"></i> Android
                        </div>
                        <h4 class="fw-bold mb-3">Android App Development</h4>
                        <p class="text-muted mb-4">
                            From sleek UI to powerful backend, we craft Android apps that run smoothly across all devices.
                            We build secure, feature-rich apps designed for high performance on the Google Play Store.
                        </p>
                        <ul class="list-unstyled mb-4">
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Native Android
                                Development</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Material Design
                                Guidelines</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Google Play Store
                                Optimisation</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Security & Performance
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- iOS Development -->
                <div class="col-md-6">
                    <div class="platform-card">
                        <div class="platform-badge">
                            <i class="fab fa-apple me-1"></i> iOS
                        </div>
                        <h4 class="fw-bold mb-3">iOS App Development</h4>
                        <p class="text-muted mb-4">
                            We develop iOS applications with cutting-edge design and seamless functionality.
                            Whether it's for iPhone or iPad, our apps follow Apple's strict standards to ensure top-tier
                            quality.
                        </p>
                        <ul class="list-unstyled mb-4">
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Swift & Objective-C</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Apple Human Interface
                                Guidelines</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> App Store Optimisation
                            </li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> ARKit & CoreML
                                Integration</li>
                        </ul>
                    </div>
                </div>

                <!-- Cross-Platform -->
                <div class="col-md-6">
                    <div class="platform-card">
                        <div class="platform-badge">
                            <i class="fas fa-layer-group me-1"></i> Cross-Platform
                        </div>
                        <h4 class="fw-bold mb-3">Cross-Platform Development</h4>
                        <p class="text-muted mb-4">
                            Reach a wider audience with a single codebase. Our cross-platform solutions using Flutter or
                            React Native
                            ensure consistent performance and user experience across Android and iOS devices.
                        </p>
                        <ul class="list-unstyled mb-4">
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Flutter Development</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> React Native Development
                            </li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Single Codebase</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Cost-Effective Solution
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Hybrid -->
                <div class="col-md-6">
                    <div class="platform-card">
                        <div class="platform-badge">
                            <i class="fas fa-cloud me-1"></i> Hybrid
                        </div>
                        <h4 class="fw-bold mb-3">Hybrid App Development</h4>
                        <p class="text-muted mb-4">
                            We build hybrid apps that combine the best of web and native technologies.
                            Ideal for businesses looking to launch quickly with cost-effective and scalable solutions across
                            platforms.
                        </p>
                        <ul class="list-unstyled mb-4">
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Ionic Framework</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Cordova/PhoneGap</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Web Technologies</li>
                            <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Quick Deployment</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Industries Section -->
    <section class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Industries
                </span>
                <h2 class="mb-4">Industries We <br><span class="text-gradient">Serve</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Empower your brand with Mobile App design services tailored to your specific commercial objectives.
                </p>
            </div>

            <div class="row g-4">
                @php
                    $industries = [
                        ['icon' => 'fas fa-users-viewfinder', 'name' => 'Social Media'],
                        ['icon' => 'fas fa-plane-departure', 'name' => 'Travel'],
                        ['icon' => 'fas fa-shield-heart', 'name' => 'Insurance'],
                        ['icon' => 'fas fa-basket-shopping', 'name' => 'E-commerce'],
                        ['icon' => 'fas fa-house-laptop', 'name' => 'Real Estate'],
                        ['icon' => 'fas fa-heartbeat', 'name' => 'Healthcare'],
                        ['icon' => 'fas fa-graduation-cap', 'name' => 'Education'],
                        ['icon' => 'fas fa-utensils', 'name' => 'Food & Beverage'],
                    ];
                @endphp

                @foreach($industries as $industry)
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="service-card text-center h-100">
                            <div class="service-icon mx-auto">
                                <i class="{{ $industry['icon'] }}"></i>
                            </div>
                            <h5 class="fw-bold mb-0">{{ $industry['name'] }}</h5>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Technologies Section -->


    <!-- Process Section -->
    <section class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Process
                </span>
                <h2 class="mb-4">App Development <br><span class="text-gradient">Process</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Our systematic approach ensures quality, transparency, and timely delivery.
                </p>
            </div>

            <div class="row g-4">
                @php
                    $steps = [
                        ['number' => '01', 'title' => 'Discovery & Planning', 'desc' => 'We analyse requirements and create a detailed project roadmap.'],
                        ['number' => '02', 'title' => 'UI/UX Design', 'desc' => 'We design intuitive interfaces and engaging user experiences.'],
                        ['number' => '03', 'title' => 'Development', 'desc' => 'Our developers build your app using best practices and latest technologies.'],
                        ['number' => '04', 'title' => 'Testing & QA', 'desc' => 'Rigorous testing ensures your app is bug-free and performs optimally.'],
                        ['number' => '05', 'title' => 'Deployment', 'desc' => 'We publish your app to relevant stores and ensure proper setup.'],
                        ['number' => '06', 'title' => 'Support & Maintenance', 'desc' => 'Ongoing support and updates keep your app running smoothly.'],
                    ];
                @endphp

                @foreach($steps as $step)
                    <div class="col-md-6 col-lg-4">
                        <div class="process-step">
                            <div class="step-number">{{ $step['number'] }}</div>
                            <h5 class="fw-bold mb-3">{{ $step['title'] }}</h5>
                            <p class="text-muted mb-0">{{ $step['desc'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="service-cta">
        <div class="cta-pattern"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <div class="service-cta-content">
                        <h2 class="display-5 fw-bold mb-4">Ready to Build Your App?</h2>
                        <p class="lead mb-5 text-light opacity-90">
                            Let's discuss your app idea and create a custom solution that drives business growth.
                        </p>

                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar me-2"></i>
                                Schedule Free Consultation
                            </a>
                            <a href="tel:+447476603415" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-phone me-2"></i>
                                Call Now
                            </a>
                        </div>

                        <p class="mt-4 mb-0 text-light opacity-75">
                            <i class="fas fa-clock me-1"></i> Response within 24 hours
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection