@extends('components.frontend.master')

@section('title', 'Portfolio Welely - Nos Réalisations Digitales | Projets Web, Mobile & Design à Abidjan')

@section('meta')
    <meta name="description" content="Découvrez notre portfolio de réalisations digitales : sites e-commerce, applications mobiles, design graphique. Projets réussis pour PME africaines. Témoignages clients et études de cas.">
    <meta name="keywords" content="portfolio agence digitale, réalisations web Abidjan, projets e-commerce, applications mobiles Côte d'Ivoire, design graphique, études de cas, témoignages clients">
    <meta name="author" content="Welely">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:title" content="Portfolio Welely - Nos Réalisations Digitales | Projets Web, Mobile & Design à Abidjan">
    <meta property="og:description" content="Découvrez notre portfolio de réalisations digitales : sites e-commerce, applications mobiles, design graphique. Projets réussis pour PME africaines.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image" content="{{ asset('images/logo.png') }}">
    <meta property="og:site_name" content="Welely">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Portfolio Welely - Réalisations Digitales">
    <meta name="twitter:description" content="Découvrez nos projets : sites e-commerce, applications mobiles, design graphique. Projets réussis pour PME africaines.">
    <meta name="twitter:image" content="{{ asset('images/logo.png') }}">

    <!-- Schema.org -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "CreativeWork",
        "name": "Portfolio Welely",
        "description": "Portfolio de réalisations digitales : sites web, applications mobiles, design graphique",
        "creator": {
            "@type": "Organization",
            "name": "Welely"
        },
        "genre": ["Développement Web", "Développement Mobile", "Design Graphique"],
        "locationCreated": {
            "@type": "Place",
            "name": "Abidjan",
            "addressCountry": "CI"
        }
    }
    </script>
@endsection

@section('content')
    <section class="portfolio-header">
        <div class="container">
            <nav class="breadcrumb-nav" aria-label="Fil d'Ariane">
                <a href="{{ route('home') }}">Accueil</a>
                <span aria-hidden="true"> / </span>
                <span aria-current="page">Portfolio</span>
            </nav>
            <h1 data-text="Nos Réalisations">Nos Réalisations</h1>
            <p>Découvrez comment nous avons aidé nos clients à se développer grâce au digital</p>
            @if($projects->isNotEmpty())
                <div class="portfolio-header-stats">
                    <span><strong>{{ $projects->count() }}</strong> projets réalisés</span>
                    @if($categories->isNotEmpty())
                        <span><strong>{{ $categories->count() }}</strong> domaines d'expertise</span>
                    @endif
                </div>
            @endif
        </div>
    </section>

    <section class="portfolio-details">
        <div class="container">

            {{-- Filtres dynamiques --}}
            <div class="portfolio-filters">
                <button class="filter-btn active" data-filter="all">Tous</button>
                @foreach($categories as $category)
                    <button class="filter-btn" data-filter="{{ Str::slug($category) }}">{{ $category }}</button>
                @endforeach
            </div>

            {{-- Grille de projets --}}
            <div class="portfolio-grid" id="portfolioGrid">
                @forelse($projects as $project)
                    @php
                        $projectCategories = is_array($project->categories) && count($project->categories)
                            ? $project->categories
                            : [$project->project_type];
                        $categorySlugs = collect($projectCategories)->map(fn($c) => Str::slug($c))->join(' ');
                        $primaryCategory = $projectCategories[0] ?? 'Projet';
                        $techStack = is_array($project->tech_stack) ? array_slice($project->tech_stack, 0, 3) : [];
                        $descriptionShort = $project->subtitle ?: Str::limit($project->description, 100);
                    @endphp
                    <article class="pf-card scroll-animate animate-on-load {{ $project->is_featured ? 'pf-card--featured' : '' }}"
                             data-category="{{ $categorySlugs }}">

                        {{-- Visuel --}}
                        <div class="pf-card__visual">
                            @if($project->featured_image)
                                <img src="{{ asset('storage/' . $project->featured_image) }}"
                                     alt="{{ $project->title }}"
                                     class="pf-card__img"
                                     loading="lazy">
                            @else
                                <div class="pf-card__placeholder">
                                    <span class="pf-card__initials">{{ mb_strtoupper(mb_substr($project->client_name ?: $project->title, 0, 2)) }}</span>
                                </div>
                            @endif

                            {{-- Badges --}}
                            <div class="pf-card__badges">
                                @if($project->is_featured)
                                    <span class="pf-badge pf-badge--featured">★ Mis en avant</span>
                                @endif
                                <span class="pf-badge pf-badge--type">{{ $project->project_type }}</span>
                            </div>

                            {{-- Année --}}
                            @if($project->project_year)
                                <span class="pf-card__year">{{ $project->project_year }}</span>
                            @endif
                        </div>

                        {{-- Contenu --}}
                        <div class="pf-card__body">
                            {{-- Catégories --}}
                            <div class="pf-card__cats">
                                @foreach(array_slice($projectCategories, 0, 2) as $cat)
                                    <span class="pf-cat">{{ $cat }}</span>
                                @endforeach
                            </div>

                            <h3 class="pf-card__title">{{ $project->title }}</h3>

                            @if($descriptionShort)
                                <p class="pf-card__desc">{{ $descriptionShort }}</p>
                            @endif

                            {{-- Stats rapides --}}
                            @if($project->stat_1_value)
                                <div class="pf-card__stats">
                                    @if($project->stat_1_value)
                                        <div class="pf-stat">
                                            <span class="pf-stat__value">{{ $project->stat_1_value }}</span>
                                            <span class="pf-stat__label">{{ $project->stat_1_label }}</span>
                                        </div>
                                    @endif
                                    @if($project->stat_2_value)
                                        <div class="pf-stat">
                                            <span class="pf-stat__value">{{ $project->stat_2_value }}</span>
                                            <span class="pf-stat__label">{{ $project->stat_2_label }}</span>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            {{-- Footer --}}
                            <div class="pf-card__footer">
                                @if(!empty($techStack))
                                    <div class="pf-techs">
                                        @foreach($techStack as $tech)
                                            <span class="pf-tech">{{ $tech }}</span>
                                        @endforeach
                                    </div>
                                @endif
                                <a href="{{ route('project.detail', $project->slug) }}" class="pf-card__cta">
                                    Voir le projet
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                                </a>
                            </div>
                        </div>
                    </article>
                @empty
                    <div class="portfolio-empty">
                        <div class="portfolio-empty-icon" aria-hidden="true">
                            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <rect x="2" y="3" width="20" height="14" rx="2"/>
                                <path d="M8 21h8M12 17v4"/>
                            </svg>
                        </div>
                        <h3>Aucun projet publié pour l'instant</h3>
                        <p>Nos réalisations seront bientôt disponibles. En attendant, <a href="{{ route('contact') }}">contactez-nous</a> pour discuter de votre projet.</p>
                    </div>
                @endforelse
            </div>

            {{-- Message "aucun résultat" pour les filtres --}}
            <div class="portfolio-no-results" id="portfolioNoResults" style="display:none;">
                <p>Aucun projet dans cette catégorie pour l'instant.</p>
            </div>

        </div>
    </section>

    {{-- CTA section --}}
    @if($projects->isNotEmpty())
    <section class="portfolio-cta">
        <div class="container">
            <div class="portfolio-cta-inner">
                <h2>Vous avez un projet en tête ?</h2>
                <p>Travaillons ensemble pour créer quelque chose d'exceptionnel.</p>
                <div class="portfolio-cta-btns">
                    <a href="{{ route('contact') }}" class="btn btn-primary">Démarrer mon projet</a>
                    <a href="{{ route('services') }}" class="btn btn-outline">Voir nos services</a>
                </div>
            </div>
        </div>
    </section>
    @endif
@endsection

@section('scripts')
<script>
    (function () {
        const filterBtns = document.querySelectorAll('.filter-btn');
        const items = document.querySelectorAll('#portfolioGrid .pf-card');
        const noResults = document.getElementById('portfolioNoResults');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', function () {
                filterBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                const filter = this.dataset.filter;
                let visible = 0;

                items.forEach(item => {
                    if (filter === 'all' || item.dataset.category.split(' ').includes(filter)) {
                        item.style.display = '';
                        visible++;
                    } else {
                        item.style.display = 'none';
                    }
                });

                noResults.style.display = visible === 0 ? 'block' : 'none';
            });
        });
    })();
</script>
@endsection