@extends('layouts.app')

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

@push('styles')
    <style>
        /* Portfolio Page Specific Styles */
        .hero-portfolio {
            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;
        }

        .portfolio-filter {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .filter-btn {
            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);
        }

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

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

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

        .portfolio-item {
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            cursor: pointer;
            background: var(--bg-white);
            border: 1px solid var(--text-200);
            transition: all var(--transition-normal);
        }

        .portfolio-item:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-500);
        }

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

        .portfolio-item:hover .portfolio-image {
            transform: scale(1.05);
        }

        .portfolio-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;
        }

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

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

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

        .portfolio-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);
            text-decoration: none;
        }

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

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

        .portfolio-info {
            padding: 1.5rem;
        }

        .portfolio-tech {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .tech-tag {
            background: var(--primary-50);
            color: var(--primary-600);
            padding: 0.25rem 0.75rem;
            border-radius: var(--radius-full);
            font-size: 0.75rem;
            font-weight: 600;
        }

        .load-more {
            margin-top: 3rem;
            text-align: center;
        }

        .project-modal .modal-content {
            border-radius: var(--radius-lg);
            border: none;
        }

        .project-modal .modal-header {
            border-bottom: 1px solid var(--text-200);
            padding: 1.5rem;
        }

        .project-modal .modal-body {
            padding: 2rem;
        }

        .project-slider {
            margin-bottom: 2rem;
        }

        .project-slider img {
            border-radius: var(--radius-md);
            width: 100%;
            height: 400px;
            object-fit: cover;
        }

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

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

            .portfolio-image {
                height: 240px;
            }

            .filter-btn {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="hero-portfolio 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 <span class="text-gradient">Portfolio</span> Showcase
                    </h1>
                    <p class="lead text-light opacity-90">
                        Looking for design inspiration? Browse our portfolio to see our creative work
                        and discover how we help businesses transform digitally.
                    </p>
                    <a href="{{ route('contact') }}" class="btn btn-primary btn-lg mt-4">
                        Start Your Project
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Filter -->
    <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 Work
                </span>
                <h2 class="mb-4">Featured <span class="text-gradient">Projects</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px">
                    At DIGITAL STUDIO2, we bring your ideas to life through creative design and innovative
                    digital solutions. Explore our portfolio showcasing results of tailored strategies
                    that drive growth and elevate brands.
                </p>
            </div>

            <!-- Filter Buttons -->
            <div class="portfolio-filter" data-aos="fade-up" data-aos-delay="100">
                <button class="filter-btn active" data-filter="all">All Projects</button>
                <button class="filter-btn" data-filter="web">Web Development</button>
                <button class="filter-btn" data-filter="app">Mobile Apps</button>
                <button class="filter-btn" data-filter="ecommerce">E-commerce</button>
                <button class="filter-btn" data-filter="branding">Branding</button>
                <button class="filter-btn" data-filter="marketing">Digital Marketing</button>
            </div>

            <!-- Portfolio Grid -->
            <div class="portfolio-grid">
                @php
                    $projects = [
                        [
                            'category' => 'web',
                            'image' => 'WebPortfolios1.webp',
                            'title' => 'Interactive 3D Landing Page',
                            'description' => 'Modern landing page with interactive 3D elements and smooth animations',
                            'tech' => ['React', 'Three.js', 'GSAP']
                        ],
                        [
                            'category' => 'ecommerce',
                            'image' => 'EcomPortfolios1.webp',
                            'title' => 'Premium E-commerce Platform',
                            'description' => 'Full-featured online store with advanced inventory management',
                            'tech' => ['Laravel', 'Vue.js', 'MySQL']
                        ],
                        [
                            'category' => 'branding',
                            'image' => 'BrandPortfolio1.jpg',
                            'title' => 'Corporate Brand Identity',
                            'description' => 'Complete brand overhaul including logo, guidelines, and assets',
                            'tech' => ['Branding', 'Identity', 'Strategy']
                        ],
                        [
                            'category' => 'app',
                            'image' => 'AppPortfolio1.png',
                            'title' => 'Fitness Mobile Application',
                            'description' => 'Health & wellness app with workout tracking and nutrition plans',
                            'tech' => ['React Native', 'Firebase', 'Node.js']
                        ],
                        [
                            'category' => 'web',
                            'image' => 'WebPortfolios2.webp',
                            'title' => 'SaaS Dashboard Interface',
                            'description' => 'Analytics dashboard with real-time data visualization',
                            'tech' => ['Vue.js', 'Chart.js', 'REST API']
                        ],
                        [
                            'category' => 'marketing',
                            'image' => 'SMMPortfolios1.jpg',
                            'title' => 'Social Media Campaign',
                            'description' => 'Integrated marketing campaign across multiple platforms',
                            'tech' => ['Strategy', 'Content', 'Analytics']
                        ],
                        [
                            'category' => 'ecommerce',
                            'image' => 'EcomPortfolios2.webp',
                            'title' => 'Fashion E-commerce Store',
                            'description' => 'Responsive online store with AR try-on features',
                            'tech' => ['Shopify', 'JavaScript', 'CSS3']
                        ],
                        [
                            'category' => 'app',
                            'image' => 'AppPortfolio2.png',
                            'title' => 'Food Delivery App',
                            'description' => 'Restaurant ordering system with real-time tracking',
                            'tech' => ['Flutter', 'Google Maps', 'Stripe']
                        ],
                    ];
                @endphp

                @foreach($projects as $index => $project)
                    <div class="portfolio-item" data-category="{{ $project['category'] }}" data-aos="fade-up"
                        data-aos-delay="{{ ($index % 3) * 100 }}">
                        <img src="{{ asset('assets/Portfolios/' . $project['image']) }}" alt="{{ $project['title'] }}"
                            class="portfolio-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="portfolio-overlay">
                            <div class="portfolio-category">{{ ucfirst($project['category']) }}</div>
                            <h3 class="portfolio-title">{{ $project['title'] }}</h3>
                            <p class="text-light mb-0 small">{{ $project['description'] }}</p>
                        </div>

                        <a href="#" class="portfolio-link" data-bs-toggle="modal" data-bs-target="#projectModal{{ $index }}">
                            <i class="fas fa-arrow-right"></i>
                        </a>

                        <div class="portfolio-info">
                            <h4 class="fw-bold mb-2">{{ $project['title'] }}</h4>
                            <p class="text-muted small mb-3">{{ $project['description'] }}</p>
                            <div class="portfolio-tech">
                                @foreach($project['tech'] as $tech)
                                    <span class="tech-tag">{{ $tech }}</span>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!-- Project Modal -->
                    <div class="modal fade project-modal" id="projectModal{{ $index }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title fw-bold">{{ $project['title'] }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="project-slider">
                                        <img src="{{ asset('assets/Portfolios/' . $project['image']) }}"
                                            alt="{{ $project['title'] }}"
                                            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>
                                    <h4 class="fw-bold mb-3">Project Overview</h4>
                                    <p class="text-muted mb-4">{{ $project['description'] }}</p>

                                    <h5 class="fw-bold mb-3">Technologies Used</h5>
                                    <div class="d-flex flex-wrap gap-2 mb-4">
                                        @foreach($project['tech'] as $tech)
                                            <span class="badge bg-primary-100 text-primary px-3 py-2 rounded-pill">
                                                {{ $tech }}
                                            </span>
                                        @endforeach
                                    </div>

                                    <h5 class="fw-bold mb-3">Key Features</h5>
                                    <ul class="list-unstyled text-muted">
                                        <li class="mb-2"><i class="fas fa-check text-primary me-2"></i> Responsive Design</li>
                                        <li class="mb-2"><i class="fas fa-check text-primary me-2"></i> High Performance</li>
                                        <li class="mb-2"><i class="fas fa-check text-primary me-2"></i> SEO Optimised</li>
                                        <li class="mb-0"><i class="fas fa-check text-primary me-2"></i> User-Friendly Interface
                                        </li>
                                    </ul>
                                </div>
                                <div class="modal-footer border-top-0">
                                    <a href="{{ route('contact') }}" class="btn btn-primary">
                                        Start Similar Project
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Load More -->
            <div class="load-more" data-aos="fade-up">
                <button class="btn btn-outline-primary btn-lg">
                    <i class="fas fa-sync-alt me-2"></i>
                    Load More Projects
                </button>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-5 bg-light">
        <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">150+</div>
                        <div class="stat-label">Projects Completed</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">98%</div>
                        <div class="stat-label">Client Satisfaction</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">50+</div>
                        <div class="stat-label">Happy Clients</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">24/7</div>
                        <div class="stat-label">Support Available</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <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 Process
                </span>
                <h2 class="mb-4">How We Deliver <span class="text-gradient">Excellence</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px">
                    At DIGITAL STUDIO2, we streamline your digital transformation with expert-led services
                    tailored to your goals. From concept to launch, we ensure seamless execution.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="pricing-card text-center">
                        <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="fas fa-comments fa-2x text-primary"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">Consultation</h4>
                        <p class="text-muted mb-0">
                            We start by understanding your vision, goals, and requirements through detailed discussions.
                        </p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="pricing-card text-center">
                        <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="fas fa-pencil-ruler fa-2x text-primary"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">Design & Strategy</h4>
                        <p class="text-muted mb-0">
                            Our team creates custom strategies and designs aligned with your brand identity.
                        </p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="pricing-card text-center">
                        <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="fas fa-rocket fa-2x text-primary"></i>
                            </div>
                        </div>
                        <h4 class="fw-bold mb-3">Development & Launch</h4>
                        <p class="text-muted mb-0">
                            We build, test, and launch your project with ongoing support and maintenance.
                        </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">Ready to Start Your Next Project?</h2>
                        <p class="text-light mb-5 opacity-90">
                            Let's discuss how we can bring your vision to life with our expert solutions
                            and proven track record.
                        </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 () {
            // Portfolio Filtering
            const filterButtons = document.querySelectorAll('.filter-btn');
            const portfolioItems = document.querySelectorAll('.portfolio-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
                            item.classList.add('aos-animate');
                        } else {
                            item.style.display = 'none';
                        }
                    });

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

            // Load More Button
            const loadMoreBtn = document.querySelector('.load-more button');
            let visibleCount = 8;

            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function () {
                    const allItems = document.querySelectorAll('.portfolio-item');
                    const hiddenItems = Array.from(allItems).slice(visibleCount, visibleCount + 4);

                    hiddenItems.forEach(item => {
                        item.style.display = 'block';
                        // Add animation class
                        item.classList.add('aos-animate');
                    });

                    visibleCount += 4;

                    // Hide button if no more items
                    if (visibleCount >= allItems.length) {
                        loadMoreBtn.style.display = 'none';
                    }

                    // Refresh AOS
                    AOS.refresh();
                });
            }
        });
    </script>
@endpush