@extends('layouts.app')

@section('title', 'Home - DIGITAL STUDIO2')

@push('styles')
    <style>
        /* ===== Home Page Specific Styles ===== */

        /* Hero Section */
        .hero-section {
            min-height: 90vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            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;
            background-attachment: fixed;
        }

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

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--primary-50);
            color: var(--primary-500);
            padding: 0.5rem 1rem;
            border-radius: var(--radius-full);
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 2rem;
            border: 1px solid var(--primary-100);
        }

        .hero-badge i {
            font-size: 1rem;
        }

        /* Stats Section */
        .stats-section {
            position: relative;
            z-index: 1;
            margin-top: -4rem;
        }

        /* Communal styles for stat-card, service-card, and service-icon are now in app.blade.php */

        /* Portfolio Showcase */
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .showcase-item {
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .showcase-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .showcase-item:hover .showcase-image {
            transform: scale(1.1);
        }

        .showcase-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top,
                    rgba(15, 23, 42, 0.9) 0%,
                    rgba(15, 23, 42, 0.7) 50%,
                    rgba(15, 23, 42, 0.3) 100%);
            opacity: 0;
            transition: opacity var(--transition-normal);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
        }

        .showcase-item:hover .showcase-overlay {
            opacity: 1;
        }

        .showcase-category {
            color: var(--primary-500);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .showcase-title {
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .showcase-link {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 40px;
            height: 40px;
            background: var(--primary-500);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            opacity: 0;
            transform: translateY(10px);
            transition: all var(--transition-normal);
        }

        .showcase-item:hover .showcase-link {
            opacity: 1;
            transform: translateY(0);
        }

        .showcase-link:hover {
            background: var(--primary-600);
            transform: translateY(-2px);
        }

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

        /* Testimonials */
        .testimonial-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            padding: 2rem;
            border: 1px solid var(--text-200);
            transition: all var(--transition-normal);
        }

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

        .testimonial-quote {
            font-size: 1.125rem;
            font-style: italic;
            color: var(--text-700);
            margin-bottom: 1.5rem;
            position: relative;
            padding-left: 1.5rem;
        }

        .testimonial-quote::before {
            content: '"';
            position: absolute;
            left: 0;
            top: -1rem;
            font-size: 3rem;
            color: var(--primary-300);
            font-family: serif;
            line-height: 1;
        }

        .client-avatar {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-full);
            object-fit: cover;
        }

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

        /* Pricing Tabs */
        .pricing-tabs {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 3rem;
        }

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

        .pricing-tab:hover {
            border-color: var(--primary-500);
            color: var(--primary-500);
            transform: translateY(-2px);
        }

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

        .pricing-card {
            background: var(--bg-white);
            border-radius: var(--radius-xl);
            padding: 3rem 2rem;
            border: 2px solid var(--text-200);
            transition: all var(--transition-normal);
            height: 100%;
            position: relative;
        }

        .pricing-card.featured {
            border-color: var(--primary-500);
            box-shadow: var(--shadow-primary);
            transform: scale(1.02);
        }

        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
        }

        .pricing-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-500);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: var(--radius-full);
            font-size: 0.875rem;
            font-weight: 700;
        }

        .pricing-price {
            font-family: 'Sora', sans-serif;
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--text-900);
            margin: 1.5rem 0;
            line-height: 1;
        }

        .pricing-price span {
            font-size: 1rem;
            color: var(--text-500);
            font-weight: 600;
        }

        .pricing-feature {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
            color: var(--text-600);
        }

        .pricing-feature i {
            color: var(--primary-500);
            font-size: 0.875rem;
        }

        .pricing-feature.unavailable {
            color: var(--text-400);
        }

        .pricing-feature.unavailable i {
            color: var(--text-400);
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) {
            .hero-section {
                min-height: 80vh;
                background-attachment: scroll;
            }

            .stats-section {
                margin-top: -2rem;
            }

            .stat-card {
                padding: 1.5rem;
            }

            .process-step:not(:last-child)::after {
                display: none;
            }

            .process-step {
                padding-left: 0;
                padding-bottom: 2rem;
            }

            .process-number {
                position: static;
                margin-bottom: 1rem;
            }
        }

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

            .showcase-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .pricing-card {
                padding: 2rem 1.5rem;
            }

            .pricing-price {
                font-size: 2.5rem;
            }
        }

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

            .service-card {
                padding: 1.5rem;
            }

            .pricing-tabs {
                gap: 0.25rem;
            }

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

        /* Animation Classes */
        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        /* Loading Animation */
        .loading-skeleton {
            background: linear-gradient(90deg,
                    var(--text-200) 25%,
                    var(--text-100) 50%,
                    var(--text-200) 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: var(--radius-md);
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-section">
        <!-- 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 align-items-center min-vh-90">
                <div class="col-lg-8 col-xl-7" data-aos="fade-up" data-aos-delay="100">
                    <div class="hero-content text-white">
                        <!-- Badge -->
                        <div class="hero-badge animate-float">
                            <i class="fas fa-star"></i>
                            <span>Premium Digital Agency</span>
                        </div>

                        <!-- Headline -->
                        <h1 class="display-3 fw-bold mb-4 text-white-50">
                            Transform Your Business
                            <span class="text-gradient">Digitally</span>
                        </h1>

                        <!-- Description -->
                        <p class="lead mb-5 text-light opacity-90">
                            We help UK businesses grow from local operations to global digital platforms.
                            Sell worldwide, reach audiences 24/7, and unlock new revenue streams with
                            our innovative digital solutions.
                        </p>

                        <!-- CTA Buttons -->
                        <div class="d-flex flex-wrap gap-3">
                            <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-rocket me-2"></i>
                                Start Your Project
                            </a>
                            <a href="#services" class="btn btn-light btn-lg">
                                <i class="fas fa-eye me-2"></i>
                                View Our Services
                            </a>
                        </div>

                        <!-- Stats Row -->
                        <div class="row mt-5 pt-4">
                            <div class="col-4">
                                <div class="text-center">
                                    <div class="stat-number">150+</div>
                                    <div class="stat-label">Projects</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center">
                                    <div class="stat-number">98%</div>
                                    <div class="stat-label">Satisfaction</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center">
                                    <div class="stat-number">50+</div>
                                    <div class="stat-label">Clients</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hero Image/Illustration -->
                <div class="col-lg-4 col-xl-5" data-aos="fade-left" data-aos-delay="300">
                    <div class="position-relative">
                        <div class="ratio ratio-1x1">
                            <div class="rounded-4 overflow-hidden shadow-xl border border-white border-4">
                                <img src="{{ asset('assets/hero-illustration.svg') }}" alt="Digital Studio Illustration"
                                    class="object-fit-cover"
                                    onerror="this.src='https://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                            </div>
                        </div>
                        <!-- Floating Elements -->
                        <div
                            class="position-absolute top-0 start-0 translate-middle bg-primary rounded-circle p-3 animate-float">
                            <i class="fas fa-code text-white fs-4"></i>
                        </div>
                        <div class="position-absolute bottom-0 end-0 translate-middle bg-primary rounded-circle p-3 animate-float"
                            style="animation-delay: 1s">
                            <i class="fas fa-paint-brush text-white fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats-section">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="stat-card">
                        <div class="stat-number">24/7</div>
                        <div class="stat-label">Support</div>
                        <p class="text-muted mt-2 small">Round the clock assistance</p>
                    </div>
                </div>
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="stat-card">
                        <div class="stat-number">5+</div>
                        <div class="stat-label">Years Experience</div>
                        <p class="text-muted mt-2 small">Industry expertise</p>
                    </div>
                </div>
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-card">
                        <div class="stat-number">100+</div>
                        <div class="stat-label">Technologies</div>
                        <p class="text-muted mt-2 small">Latest tools & frameworks</p>
                    </div>
                </div>
                <div class="col-md-3 col-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="stat-card">
                        <div class="stat-number">99%</div>
                        <div class="stat-label">On Time Delivery</div>
                        <p class="text-muted mt-2 small">Deadline commitment</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" 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 Services
                </span>
                <h2 class="mb-4">Premium Digital Solutions <br><span class="text-gradient">Tailored for You</span></h2>
                <p class="text-muted mx-auto" style="max-width: 700px">
                    We provide comprehensive digital services that drive growth, enhance visibility,
                    and deliver measurable ROI. Each solution is customised to meet your specific business needs.
                </p>
            </div>

            <div class="row g-4">
                @php
                    $services = [
                        ['icon' => 'fas fa-code', 'title' => 'Web Development', 'desc' => 'High-performance websites with modern technologies'],
                        ['icon' => 'fas fa-mobile-alt', 'title' => 'Mobile Apps', 'desc' => 'Native & cross-platform mobile applications'],
                        ['icon' => 'fas fa-shopping-cart', 'title' => 'E-commerce', 'desc' => 'Complete online store solutions'],
                        ['icon' => 'fas fa-palette', 'title' => 'Logo & Branding', 'desc' => 'Memorable brand identities'],
                        ['icon' => 'fas fa-chart-line', 'title' => 'Digital Marketing', 'desc' => 'Data-driven marketing strategies'],
                        ['icon' => 'fas fa-search', 'title' => 'SEO Optimisation', 'desc' => 'Top search engine rankings'],
                    ];
                @endphp

                @foreach($services as $service)
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="service-card hover-lift">
                            <div class="service-icon">
                                <i class="{{ $service['icon'] }}"></i>
                            </div>
                            <h4 class="mb-3">{{ $service['title'] }}</h4>
                            <p class="text-muted mb-4">{{ $service['desc'] }}</p>
                            <a href="{{ route('services') }}" class="text-primary fw-semibold d-flex align-items-center gap-2">
                                Learn More
                                <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="text-center mt-5" data-aos="fade-up">
                <a href="{{ route('services') }}" class="btn btn-outline-primary btn-lg">
                    View All Services
                    <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Portfolio Showcase -->
    <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">
                    Our Portfolio
                </span>
                <h2 class="mb-4">Featured <span class="text-gradient">Projects</span></h2>
                <p class="text-muted mx-auto" style="max-width: 700px">
                    Discover our portfolio of successful projects across various industries,
                    showcasing our expertise in digital transformation.
                </p>
            </div>

            <!-- Filter Tabs -->
            <div class="d-flex justify-content-center gap-3 mb-5 flex-wrap" data-aos="fade-up">
                <button class="pricing-tab active" data-filter="all">All Projects</button>
                <button class="pricing-tab" data-filter="web">Web Development</button>
                <button class="pricing-tab" data-filter="app">Mobile Apps</button>
                <button class="pricing-tab" data-filter="branding">Branding</button>
            </div>

            <!-- Portfolio Grid -->
            <div class="showcase-grid">
                @php
                    $projects = [
                        ['category' => 'web', 'image' => 'WebPortfolios1.webp', 'title' => 'E-commerce Platform', 'desc' => 'Full-featured online store'],
                        ['category' => 'app', 'image' => 'AppPortfolio1.png', 'title' => 'Fitness Mobile App', 'desc' => 'Health & wellness application'],
                        ['category' => 'branding', 'image' => 'BrandPortfolio1.jpg', 'title' => 'Corporate Identity', 'desc' => 'Complete brand redesign'],
                        ['category' => 'web', 'image' => 'WebPortfolios2.webp', 'title' => 'SaaS Dashboard', 'desc' => 'Analytics platform'],
                        ['category' => 'app', 'image' => 'AppPortfolio2.png', 'title' => 'Food Delivery App', 'desc' => 'Restaurant ordering system'],
                        ['category' => 'branding', 'image' => 'BrandPortfolio2.png', 'title' => 'Startup Branding', 'desc' => 'Launch identity package'],
                    ];
                @endphp

                @foreach($projects as $project)
                    <div class="showcase-item" data-category="{{ $project['category'] }}" data-aos="zoom-in">
                        <img src="{{ asset('assets/Portfolios/' . $project['image']) }}" alt="{{ $project['title'] }}"
                            class="showcase-image"
                            onerror="this.src='https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                        <div class="showcase-overlay">
                            <div class="showcase-category">{{ ucfirst($project['category']) }}</div>
                            <h3 class="showcase-title">{{ $project['title'] }}</h3>
                            <p class="text-light mb-0">{{ $project['desc'] }}</p>
                        </div>
                        <a href="{{ route('portfolio') }}" class="showcase-link">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                @endforeach
            </div>

            <div class="text-center mt-5" data-aos="fade-up">
                <a href="{{ route('portfolio') }}" class="btn btn-primary btn-lg">
                    View Full Portfolio
                    <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </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: 700px">
                    Our proven process ensures seamless project execution, transparent communication,
                    and exceptional results every time.
                </p>
            </div>

            <div class="row">
                <div class="col-lg-10 mx-auto">
                    @php
                        $steps = [
                            ['title' => 'Discovery & Strategy', 'desc' => 'We begin by understanding your business goals, target audience, and project requirements to create a tailored strategy.'],
                            ['title' => 'Design & Prototyping', 'desc' => 'Our designers create wireframes and prototypes, ensuring the user experience is intuitive and aligned with your brand.'],
                            ['title' => 'Development & Testing', 'desc' => 'Our developers build your solution using best practices, followed by rigorous testing to ensure quality and performance.'],
                            ['title' => 'Launch & Support', 'desc' => 'We deploy your project and provide ongoing support, maintenance, and optimisation services.'],
                        ];
                    @endphp

                    <div class="process-list">
                        @foreach($steps as $index => $step)
                            <div class="process-item" data-aos="fade-up" data-aos-delay="{{ ($index + 1) * 100 }}">
                                <h4 class="fw-bold mb-3">{{ $step['title'] }}</h4>
                                <p class="text-muted mb-0">{{ $step['desc'] }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section class="py-5" id="pricing">
        <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">
                    Pricing Plans
                </span>
                <h2 class="mb-4">Transparent <span class="text-gradient">Pricing</span></h2>
                <p class="text-muted mx-auto" style="max-width: 700px">
                    Choose the perfect plan for your business. All packages include premium features
                    and dedicated support.
                </p>
            </div>

            <!-- Pricing Tabs -->
            <div class="pricing-tabs" data-aos="fade-up">
                <button class="pricing-tab active" data-plan="web">Web Development</button>
                <button class="pricing-tab" data-plan="branding">Branding</button>
                <button class="pricing-tab" data-plan="seo">SEO</button>
                <button class="pricing-tab" data-plan="marketing">Marketing</button>
            </div>

            <!-- Pricing Cards -->
            <div class="row g-4 justify-content-center">
                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="pricing-card">
                        <h4 class="fw-bold mb-4">Basic</h4>
                        <div class="pricing-price" id="basic-price">£299<span>/project</span></div>
                        <p class="text-muted mb-4">Perfect for startups and small businesses</p>

                        <ul class="list-unstyled mb-4" id="basic-features">
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>1-3
                                Page Website</li>
                            <li class="mb-2 d-flex align-items-center"><i
                                    class="fas fa-check me-2 text-primary"></i>WordPress Based</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>1
                                Banner Design</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>Contact
                                Form</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>3-4
                                Revisions</li>
                        </ul>

                        <a href="{{ route('contact') }}" class="btn btn-outline-primary w-100">
                            Get Started
                        </a>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="pricing-card featured">
                        <div class="pricing-badge">Most Popular</div>
                        <h4 class="fw-bold mb-4">Standard</h4>
                        <div class="pricing-price" id="standard-price">£599<span>/project</span></div>
                        <p class="text-muted mb-4">Ideal for growing businesses</p>

                        <ul class="list-unstyled mb-4" id="standard-features">
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>4-5
                                Pages Website</li>
                            <li class="mb-2 d-flex align-items-center"><i
                                    class="fas fa-check me-2 text-primary"></i>WordPress Based</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>3
                                Banner Designs</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>3
                                Professional Emails</li>
                            <li class="mb-2 d-flex align-items-center"><i
                                    class="fas fa-check me-2 text-primary"></i>Unlimited Revisions</li>
                        </ul>

                        <a href="{{ route('contact') }}" class="btn btn-primary w-100">
                            Get Started
                        </a>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="pricing-card">
                        <h4 class="fw-bold mb-4">Premium</h4>
                        <div class="pricing-price" id="premium-price">£1299<span>/project</span></div>
                        <p class="text-muted mb-4">For enterprises and large projects</p>

                        <ul class="list-unstyled mb-4" id="premium-features">
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>10+
                                Pages Website</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>Custom
                                Development</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>10
                                Stock Images</li>
                            <li class="mb-2 d-flex align-items-center"><i class="fas fa-check me-2 text-primary"></i>5
                                Professional Emails</li>
                            <li class="mb-2 d-flex align-items-center"><i
                                    class="fas fa-check me-2 text-primary"></i>Complete SEO</li>
                        </ul>

                        <a href="{{ route('contact') }}" class="btn btn-outline-primary w-100">
                            Get Started
                        </a>
                    </div>
                </div>
            </div>

            <div class="text-center mt-5" data-aos="fade-up">
                <p class="text-muted">Need a custom solution? <a href="{{ route('contact') }}"
                        class="text-primary fw-semibold">Contact us for a quote</a></p>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <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">
                    Testimonials
                </span>
                <h2 class="mb-4">What Our <span class="text-gradient">Clients Say</span></h2>
            </div>

            <div class="row g-4">
                @php
                    $testimonials = [
                        ['name' => 'Sarah Johnson', 'role' => 'CEO, TechStart', 'quote' => 'Digital Studio2 transformed our online presence completely. Their attention to detail and professional approach was exceptional.'],
                        ['name' => 'Michael Chen', 'role' => 'Marketing Director', 'quote' => 'The team delivered beyond expectations. Our website traffic increased by 300% in just 3 months. Highly recommended!'],
                        ['name' => 'Emma Wilson', 'role' => 'Founder, Bloom&Grow', 'quote' => 'Working with Digital Studio2 was a game-changer for our business. Their creative solutions helped us stand out in a crowded market.'],
                    ];
                @endphp

                @foreach($testimonials as $testimonial)
                    <div class="col-lg-4" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                        <div class="testimonial-card h-100">
                            <div class="testimonial-quote mb-4">{{ $testimonial['quote'] }}</div>
                            <div class="d-flex align-items-center">
                                <div>
                                    <div class="fw-bold">{{ $testimonial['name'] }}</div>
                                    <div class="text-muted small">{{ $testimonial['role'] }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section py-5">
        <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">
                    <h2 class="text-white mb-4">Ready to Transform Your Business?</h2>
                    <p class="text-light mb-5 opacity-90">
                        Let's discuss how we can help you achieve your digital goals.
                        Get a free consultation and project estimate today.
                    </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 a Call
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Portfolio Filtering
            const filterButtons = document.querySelectorAll('[data-filter]');
            const portfolioItems = document.querySelectorAll('.showcase-item');

            filterButtons.forEach(button => {
                button.addEventListener('click', function () {
                    // Update active button
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');

                    const filter = this.dataset.filter;

                    // Filter items
                    portfolioItems.forEach(item => {
                        if (filter === 'all' || item.dataset.category === filter) {
                            item.style.display = 'block';
                            // Trigger AOS refresh for newly visible items
                            item.classList.add('aos-animate');
                        } else {
                            item.style.display = 'none';
                        }
                    });

                    // Refresh AOS
                    AOS.refresh();
                });
            });

            // Pricing Tabs
            const pricingTabs = document.querySelectorAll('.pricing-tab[data-plan]');
            const pricingCards = document.querySelectorAll('.pricing-card');

            // Example: Update pricing based on selected plan
            pricingTabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    // Only handle tabs that are siblings in the same container to avoid conflicts with other tab groups
                    const container = this.closest('.pricing-tabs');
                    if (container) {
                        container.querySelectorAll('.pricing-tab').forEach(t => t.classList.remove('active'));
                    } else {
                        pricingTabs.forEach(t => t.classList.remove('active')); // Fallback
                    }

                    this.classList.add('active');

                    const plan = this.dataset.plan;

                    if (typeof updatePricing === 'function') {
                        updatePricing(plan);
                    }

                    // Optional: Visual feedback for cards
                    pricingCards.forEach(card => {
                        card.classList.remove('featured');
                        card.style.transform = '';
                    });

                    // Make the standard plan featured for web plan (or usually the middle one)
                    if (pricingCards[1]) {
                        pricingCards[1].classList.add('featured');
                        // pricingCards[1].style.transform = 'scale(1.02)'; // CSS hover effect might conflict
                    }
                });
            });

            // Smooth scroll for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();

                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;

                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 100,
                            behavior: 'smooth'
                        });
                    }
                });
            });

            // Intersection Observer for animations
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-fade-in-up');
                    }
                });
            }, observerOptions);

            // Observe elements that should animate on scroll
            document.querySelectorAll('.service-card, .stat-card, .showcase-item').forEach(el => {
                observer.observe(el);
            });

            // Form submission handling
            const contactForm = document.getElementById('contactForm');
            if (contactForm) {
                contactForm.addEventListener('submit', async function (e) {
                    e.preventDefault();

                    const submitBtn = this.querySelector('[type="submit"]');
                    const originalText = submitBtn.innerHTML;

                    // Show loading state
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Sending...';
                    submitBtn.disabled = true;

                    try {
                        // Simulate API call
                        await new Promise(resolve => setTimeout(resolve, 1500));

                        // Show success message
                        showToast('Message sent successfully! We\'ll contact you soon.', 'success');
                        this.reset();

                    } catch (error) {
                        showToast('Something went wrong. Please try again.', 'error');
                    } finally {
                        // Reset button
                        submitBtn.innerHTML = originalText;
                        submitBtn.disabled = false;
                    }
                });
            }

            // Toast notification function
            function showToast(message, type = 'success') {
                const toast = document.createElement('div');
                toast.className = `toast-notification toast-${type}`;
                toast.innerHTML = `
                                <div class="toast-content">
                                    <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'} me-2"></i>
                                    <span>${message}</span>
                                </div>
                                <button class="toast-close"><i class="fas fa-times"></i></button>
                            `;

                // Add styles
                toast.style.cssText = `
                                position: fixed;
                                top: 1rem;
                                right: 1rem;
                                background: ${type === 'success' ? '#10b981' : '#ef4444'};
                                color: white;
                                padding: 1rem 1.5rem;
                                border-radius: var(--radius-md);
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                gap: 1rem;
                                z-index: 9999;
                                box-shadow: var(--shadow-lg);
                                animation: slideInRight 0.3s ease;
                                max-width: 400px;
                            `;

                // Add close button handler
                toast.querySelector('.toast-close').addEventListener('click', () => {
                    toast.style.animation = 'slideOutRight 0.3s ease';
                    setTimeout(() => toast.remove(), 300);
                });

                document.body.appendChild(toast);

                // Auto remove after 5 seconds
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.style.animation = 'slideOutRight 0.3s ease';
                        setTimeout(() => toast.remove(), 300);
                    }
                }, 5000);

                // Add animations
                const style = document.createElement('style');
                style.textContent = `
                                @keyframes slideInRight {
                                    from { transform: translateX(100%); opacity: 0; }
                                    to { transform: translateX(0); opacity: 1; }
                                }
                                @keyframes slideOutRight {
                                    from { transform: translateX(0); opacity: 1; }
                                    to { transform: translateX(100%); opacity: 0; }
                                }
                            `;
                document.head.appendChild(style);
            }

            // Lazy loading images
            const lazyImages = document.querySelectorAll('[data-src]');

            if ('IntersectionObserver' in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const img = entry.target;
                            img.src = img.dataset.src;
                            img.classList.add('loaded');
                            observer.unobserve(img);
                        }
                    });
                });

                lazyImages.forEach(img => imageObserver.observe(img));
            }
        });
    </script>
@endpush