@extends('layouts.app')

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

@push('styles')
    <style>
        /* Services Page Specific Styles */
        .hero-services {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%),
                url('{{ asset("assets/service-hero-bg.png") }}');
            background-size: cover;
            background-position: center;
            min-height: 60vh;
            display: flex;
            align-items: center;
        }

        .service-tabs {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 3rem;
            border-bottom: 1px solid var(--text-200);
            padding-bottom: 1rem;
        }

        .service-tab {
            padding: 0.75rem 1.5rem;
            background: transparent;
            border: 2px solid transparent;
            color: var(--text-600);
            border-radius: var(--radius-full);
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .service-tab:hover {
            color: var(--primary-500);
            border-color: var(--text-300);
        }

        .service-tab.active {
            background: var(--primary-500);
            border-color: var(--primary-500);
            color: white;
        }

        .service-detail-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 3rem;
            border: 1px solid var(--text-200);
            margin-bottom: 2rem;
            transition: all var(--transition-normal);
        }

        .service-detail-card:hover {
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-300);
        }

        .service-feature {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .service-feature-icon {
            width: 48px;
            height: 48px;
            background: var(--primary-100);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .service-feature-icon i {
            color: var(--primary-500);
            font-size: 1.25rem;
        }

        /* Process section styles are now global in app.blade.php */

        .service-benefits {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin: 2rem 0;
        }

        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 1rem;
            background: var(--bg-light);
            border-radius: var(--radius-md);
            border: 1px solid var(--text-200);
        }

        .benefit-item i {
            color: var(--primary-500);
            margin-top: 0.25rem;
        }

        /* CTA & Banner styles are now handled by global service-cta in app.blade.php */

        .service-category-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .category-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 2rem;
            border: 1px solid var(--text-200);
            text-align: center;
            transition: all var(--transition-normal);
        }

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

        @media (max-width: 768px) {
            .hero-services {
                min-height: 50vh;
            }

            .service-detail-card {
                padding: 2rem;
            }

            .service-tab {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }

            .pricing-banner {
                padding: 2rem;
            }
        }

        @media (max-width: 576px) {
            .service-detail-card {
                padding: 1.5rem;
            }

            .service-feature {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-services position-relative">
        <!-- Glow Effects -->
        <div class="glow-effect glow-primary glow-top-right"></div>
        <div class="glow-effect glow-primary glow-bottom-left"></div>

        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <h1 class="display-3 fw-bold text-white mb-4">
                        Our Professional <span class="text-gradient">Services</span>
                    </h1>
                    <p class="lead text-light opacity-90">
                        At DIGITAL STUDIO2, we thrive on bringing ambitious ideas to life. Whether you're
                        a growing business or an established brand, get in touch today for a free initial
                        consultation!
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Categories -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    What We Offer
                </span>
                <h2 class="mb-4">Comprehensive <span class="text-gradient">Digital Solutions</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px">
                    We offer a complete range of digital services designed to help your business grow,
                    from stunning web design to powerful marketing strategies.
                </p>
            </div>

            <!-- Service Tabs -->
            <div class="service-tabs" data-aos="fade-up">
                <button class="service-tab active" data-service="web">Web Development</button>
                <button class="service-tab" data-service="app">Mobile Apps</button>
                <button class="service-tab" data-service="ecommerce">E-commerce</button>
                <button class="service-tab" data-service="logo">Logo & Branding</button>
                <button class="service-tab" data-service="marketing">Digital Marketing</button>
                <button class="service-tab" data-service="seo">SEO Optimisation</button>
            </div>

            <!-- Service Category Grid -->
            <div class="service-category-grid">
                @php
                    $services = [
                        [
                            'icon' => 'fas fa-code',
                            'title' => 'Web Development',
                            'description' => 'Custom websites and web applications built with modern technologies',
                            'features' => ['Responsive Design', 'CMS Integration', 'Custom Features']
                        ],
                        [
                            'icon' => 'fas fa-mobile-alt',
                            'title' => 'Mobile App Development',
                            'description' => 'Native and cross-platform mobile applications for iOS and Android',
                            'features' => ['iOS & Android', 'Cross-Platform', 'App Store Ready']
                        ],
                        [
                            'icon' => 'fas fa-shopping-cart',
                            'title' => 'E-commerce Solutions',
                            'description' => 'Complete online store solutions with secure payment integration',
                            'features' => ['Payment Gateways', 'Inventory Management', 'Secure Checkout']
                        ],
                        [
                            'icon' => 'fas fa-palette',
                            'title' => 'Logo & Branding',
                            'description' => 'Memorable brand identities that make lasting impressions',
                            'features' => ['Logo Design', 'Brand Guidelines', 'Visual Identity']
                        ],
                        [
                            'icon' => 'fas fa-chart-line',
                            'title' => 'Digital Marketing',
                            'description' => 'Data-driven marketing strategies to boost your online presence',
                            'features' => ['Social Media', 'Email Marketing', 'Campaign Management']
                        ],
                        [
                            'icon' => 'fas fa-search',
                            'title' => 'SEO Optimisation',
                            'description' => 'Improve search rankings and drive organic traffic to your site',
                            'features' => ['Keyword Research', 'Technical SEO', 'Content Optimisation']
                        ],
                    ];
                @endphp

                @foreach($services as $service)
                    <div class="category-card" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="mb-4">
                            <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
                                style="width: 80px; height: 80px; background: var(--primary-100);">
                                <i class="{{ $service['icon'] }} fa-2x text-primary"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">{{ $service['title'] }}</h4>
                        <p class="text-muted mb-4">{{ $service['description'] }}</p>
                        <div class="d-flex flex-wrap gap-2 justify-content-center">
                            @foreach($service['features'] as $feature)
                                <span class="badge bg-primary-100 text-primary px-3 py-2 rounded-pill">
                                    {{ $feature }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Service Details -->
    <section class="py-5 bg-light">
        <div class="container">
            <!-- Web Development Service -->
            <div class="service-detail-card" id="web-service" data-aos="fade-up">
                <div class="row align-items-center mb-5">
                    <div class="col-md-8">
                        <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                            Featured Service
                        </span>
                        <h2 class="fw-bold mb-3">Web Development Solutions</h2>
                        <p class="text-muted">
                            Get a powerful, responsive website that represents your brand and drives results.
                            We create sleek, fast, and secure websites built for success across all devices.
                        </p>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle"
                            style="width: 120px; height: 120px; background: var(--primary-100);">
                            <i class="fas fa-code fa-3x text-primary"></i>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <h4 class="fw-bold mb-4">What We Offer</h4>
                        <div class="service-features">
                            <div class="service-feature">
                                <div class="service-feature-icon">
                                    <i class="fas fa-laptop"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">Responsive Design</h5>
                                    <p class="text-muted mb-0">
                                        Websites that work perfectly on all devices and screen sizes
                                    </p>
                                </div>
                            </div>
                            <div class="service-feature">
                                <div class="service-feature-icon">
                                    <i class="fas fa-rocket"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">Fast Performance</h5>
                                    <p class="text-muted mb-0">
                                        Optimised for speed and performance with modern technologies
                                    </p>
                                </div>
                            </div>
                            <div class="service-feature">
                                <div class="service-feature-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <div>
                                    <h5 class="fw-bold mb-2">Security</h5>
                                    <p class="text-muted mb-0">
                                        Built with security best practices and regular updates
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <h4 class="fw-bold mb-4">Our Process</h4>
                        <div class="service-process">
                            <div class="process-step">
                                <h5 class="fw-bold mb-2">Discovery & Planning</h5>
                                <p class="text-muted mb-0">
                                    Understanding your goals, audience, and requirements
                                </p>
                            </div>
                            <div class="process-step">
                                <h5 class="fw-bold mb-2">Design & Prototyping</h5>
                                <p class="text-muted mb-0">
                                    Creating wireframes and design mockups for approval
                                </p>
                            </div>
                            <div class="process-step">
                                <h5 class="fw-bold mb-2">Development & Testing</h5>
                                <p class="text-muted mb-0">
                                    Building and rigorous testing across all platforms
                                </p>
                            </div>
                            <div class="process-step">
                                <h5 class="fw-bold mb-2">Launch & Support</h5>
                                <p class="text-muted mb-0">
                                    Deployment and ongoing maintenance support
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-3 col-6" data-aos="fade-up">
                    <div class="stat-card text-center">
                        <div class="stat-number">200+</div>
                        <div class="stat-label">Happy Clients</div>
                    </div>
                </div>
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="stat-card text-center">
                        <div class="stat-number">280+</div>
                        <div class="stat-label">Projects Completed</div>
                    </div>
                </div>
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="stat-card text-center">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">Satisfaction Rate</div>
                    </div>
                </div>
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-card text-center">
                        <div class="stat-number">10+</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Service Benefits -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Why Choose Us
                </span>
                <h2 class="mb-4">Benefits of Working With <span class="text-gradient">DIGITAL STUDIO2</span></h2>
            </div>

            <div class="service-benefits">
                <div class="benefit-item" data-aos="fade-up">
                    <i class="fas fa-check-circle text-primary"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Expert Team</h6>
                        <p class="text-muted small mb-0">Experienced professionals with industry expertise</p>
                    </div>
                </div>
                <div class="benefit-item" data-aos="fade-up" data-aos-delay="100">
                    <i class="fas fa-check-circle text-primary"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Timely Delivery</h6>
                        <p class="text-muted small mb-0">We respect deadlines and deliver on time</p>
                    </div>
                </div>
                <div class="benefit-item" data-aos="fade-up" data-aos-delay="200">
                    <i class="fas fa-check-circle text-primary"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Quality Assurance</h6>
                        <p class="text-muted small mb-0">Rigorous testing and quality checks</p>
                    </div>
                </div>
                <div class="benefit-item" data-aos="fade-up" data-aos-delay="300">
                    <i class="fas fa-check-circle text-primary"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Ongoing Support</h6>
                        <p class="text-muted small mb-0">Continuous support after project completion</p>
                    </div>
                </div>
                <div class="benefit-item" data-aos="fade-up" data-aos-delay="400">
                    <i class="fas fa-check-circle text-primary"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Transparent Pricing</h6>
                        <p class="text-muted small mb-0">No hidden costs, clear pricing structure</p>
                    </div>
                </div>
                <div class="benefit-item" data-aos="fade-up" data-aos-delay="500">
                    <i class="fas fa-check-circle text-primary"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Custom Solutions</h6>
                        <p class="text-muted small mb-0">Tailored solutions for your specific needs</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Banner -->
    <section class="py-5">
        <div class="container">
            <div class="cta-box" data-aos="fade-up">
                <h2 class="fw-bold mb-4 text-white">Ready to Start Your Project?</h2>
                <p class="mb-4 opacity-90">
                    Get transparent pricing and exceptional service. Choose from our flexible packages
                    or request a custom quote for your specific requirements.
                </p>
                <div class="d-flex flex-wrap gap-3 justify-content-center">
                    <a href="{{ route('packages') }}" class="btn btn-light btn-lg">
                        View Pricing Plans
                    </a>
                    <a href="{{ route('contact') }}" class="btn btn-outline-light btn-lg">
                        Get Custom Quote
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Process
                </span>
                <h2 class="mb-4">How We <span class="text-gradient">Work</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px">
                    Working with DIGITAL STUDIO2 provides numerous advantages. Experience greater brand awareness,
                    improved customer interaction, and a superior return on investment.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-card text-center">
                        <div class="service-icon mx-auto">
                            <i class="fas fa-file-signature"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Submit Brief</h4>
                        <p class="text-muted mb-0">
                            Fill out our detailed project brief form with all requirements and vision.
                        </p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-card text-center">
                        <div class="service-icon mx-auto">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Secure Payment</h4>
                        <p class="text-muted mb-0">
                            Choose your package and complete secure payment to start project.
                        </p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-card text-center">
                        <div class="service-icon mx-auto">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Launch Project</h4>
                        <p class="text-muted mb-0">
                            We deliver completed project with revisions and ongoing support.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="service-cta">
        <div class="cta-pattern"></div>
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <div class="service-cta-content">
                        <h2 class="text-white mb-4">Let's Create Something Amazing Together</h2>
                        <p class="text-light mb-5 opacity-90">
                            Ready to transform your digital presence? Contact us today for a free consultation
                            and let's discuss how we can help achieve your business goals.
                        </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>
                                Book 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>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Service tabs functionality
            const serviceTabs = document.querySelectorAll('.service-tab');
            const serviceSections = {
                web: document.getElementById('web-service'),
                app: null, // You would add other service sections similarly
                ecommerce: null,
                logo: null,
                marketing: null,
                seo: null
            };

            serviceTabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    // Remove active class from all tabs
                    serviceTabs.forEach(t => t.classList.remove('active'));

                    // Add active class to clicked tab
                    this.classList.add('active');

                    const service = this.dataset.service;

                    // Here you would typically show/hide service sections
                    // For now, we'll just scroll to the web service section
                    if (service === 'web' && serviceSections.web) {
                        serviceSections.web.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }

                    console.log(`Selected service: ${service}`);
                });
            });

            // Service card hover effects
            const categoryCards = document.querySelectorAll('.category-card');

            categoryCards.forEach(card => {
                card.addEventListener('mouseenter', function () {
                    const icon = this.querySelector('i');
                    if (icon) {
                        icon.style.transform = 'scale(1.1) rotate(5deg)';
                        icon.style.transition = 'transform 0.3s ease';
                    }
                });

                card.addEventListener('mouseleave', function () {
                    const icon = this.querySelector('i');
                    if (icon) {
                        icon.style.transform = 'scale(1) rotate(0deg)';
                    }
                });
            });
        });
    </script>
@endpush