@extends('components.frontend.master')

@section('title', ($project->meta_title ?: $project->title . ' | Portfolio Welely'))

@section('meta')
    <meta name="description" content="{{ $project->meta_description ?: $project->subtitle }}">
    @if($project->meta_keywords)
        <meta name="keywords" content="{{ $project->meta_keywords }}">
    @endif
    <meta name="author" content="Welely">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:title" content="{{ $project->meta_title ?: $project->title . ' | Portfolio Welely' }}">
    <meta property="og:description" content="{{ $project->meta_description ?: $project->subtitle }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:image" content="{{ $project->og_image ? asset('storage/' . $project->og_image) : ($project->featured_image ? asset('storage/' . $project->featured_image) : 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="{{ $project->title }} | Welely">
    <meta name="twitter:description" content="{{ $project->meta_description ?: $project->subtitle }}">
    <meta name="twitter:image" content="{{ $project->featured_image ? asset('storage/' . $project->featured_image) : asset('images/logo.png') }}">

    <!-- Schema.org -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "CreativeWork",
        "name": "{{ addslashes($project->title) }}",
        "description": "{{ addslashes($project->subtitle ?: $project->description) }}",
        "creator": { "@type": "Organization", "name": "Welely" },
        "dateCreated": "{{ $project->project_year }}",
        "genre": "{{ addslashes($project->project_type) }}",
        @if($project->meta_keywords)
        "keywords": {!! json_encode(array_map('trim', explode(',', $project->meta_keywords))) !!},
        @endif
        "locationCreated": { "@type": "Place", "name": "Abidjan", "addressCountry": "CI" }
    }
    </script>
@endsection

@section('content')
    <!-- ═══ Hero ═══ -->
    <section class="project-hero">
        <div class="container">
            <div class="project-breadcrumb scroll-animate animate-on-load">
                <a href="{{ route('home') }}">Accueil</a>
                <span class="separator">›</span>
                <a href="{{ route('portfolio') }}">Portfolio</a>
                <span class="separator">›</span>
                <span>{{ $project->client_name ?: $project->title }}</span>
            </div>

            @if(is_array($project->categories) && count($project->categories))
                <div class="project-categories scroll-animate animate-on-load">
                    @foreach($project->categories as $cat)
                        <span class="category-badge">{{ $cat }}</span>
                    @endforeach
                </div>
            @endif

            <h1 class="scroll-animate animate-on-load">{{ $project->title }}</h1>

            @if($project->subtitle)
                <p class="subtitle scroll-animate animate-on-load">{{ $project->subtitle }}</p>
            @endif

            @if($project->stat_1_value || $project->stat_2_value || $project->stat_3_value || $project->stat_4_value)
                <div class="quick-stats scroll-animate animate-on-load">
                    @if($project->stat_1_value)
                        <div class="stat-item">
                            <div class="value">{{ $project->stat_1_value }}</div>
                            <div class="label">{{ $project->stat_1_label }}</div>
                        </div>
                    @endif
                    @if($project->stat_2_value)
                        <div class="stat-item">
                            <div class="value">{{ $project->stat_2_value }}</div>
                            <div class="label">{{ $project->stat_2_label }}</div>
                        </div>
                    @endif
                    @if($project->stat_3_value)
                        <div class="stat-item">
                            <div class="value">{{ $project->stat_3_value }}</div>
                            <div class="label">{{ $project->stat_3_label }}</div>
                        </div>
                    @endif
                    @if($project->stat_4_value)
                        <div class="stat-item">
                            <div class="value">{{ $project->stat_4_value }}</div>
                            <div class="label">{{ $project->stat_4_label }}</div>
                        </div>
                    @endif
                </div>
            @endif
        </div>
    </section>

    <!-- ═══ Image principale ═══ -->
    <div class="container">
        <div class="featured-image-wrapper scroll-animate animate-on-load">
            @if($project->featured_image)
                <img src="{{ asset('storage/' . $project->featured_image) }}"
                     alt="Aperçu du projet {{ $project->title }}" loading="lazy">
            @else
                <div class="featured-image-placeholder">
                    <span>{{ mb_strtoupper(mb_substr($project->client_name ?: $project->title, 0, 2)) }}</span>
                </div>
            @endif
            @if($project->website_url)
                <div class="image-overlay">
                    <a href="{{ $project->website_url }}" class="btn" target="_blank" rel="noopener noreferrer">
                        Voir le site en ligne
                    </a>
                </div>
            @endif
        </div>
    </div>

    <!-- ═══ Contenu principal ═══ -->
    <section class="project-detail">
        <div class="container">
            <div class="project-content-grid">

                <!-- Contenu principal -->
                <div class="project-main-content">

                    <!-- Sidebar mobile -->
                    <aside class="project-sidebar mobile-only scroll-animate animate-on-load">
                        @include('partials.frontend.project-sidebar', ['project' => $project])
                    </aside>

                    <!-- Section 01 · Contexte -->
                    @if($project->context)
                        <div class="project-section scroll-animate animate-on-load">
                            <div class="section-header">
                                <span class="section-number">01</span>
                                <h2>Contexte du Projet</h2>
                            </div>
                            <div class="intro-paragraph">
                                {!! nl2br(e($project->context)) !!}
                            </div>
                        </div>
                    @endif

                    <!-- Section 02 · Défis -->
                    @if(is_array($project->challenges) && count($project->challenges) || $project->challenge_quote)
                        <div class="project-section project-challenge scroll-animate animate-on-load">
                            <div class="section-header">
                                <span class="section-number">{{ $project->context ? '02' : '01' }}</span>
                                <h2>Le Défi</h2>
                            </div>
                            <div class="challenge-content">
                                @if(is_array($project->challenges) && count($project->challenges))
                                    <div class="challenge-grid">
                                        @foreach($project->challenges as $challenge)
                                            <div class="challenge-item">
                                                <div class="challenge-icon">
                                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                        @include('partials.frontend.sp-icon', ['icon' => $challenge['icon'] ?? 'bolt'])
                                                    </svg>
                                                </div>
                                                <h4>{{ $challenge['title'] ?? '' }}</h4>
                                                <p>{{ $challenge['description'] ?? '' }}</p>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif

                                @if($project->challenge_quote)
                                    <div class="challenge-quote">
                                        <blockquote>
                                            "{{ $project->challenge_quote }}"
                                            @if($project->challenge_quote_author)
                                                <cite>— {{ $project->challenge_quote_author }}</cite>
                                            @endif
                                        </blockquote>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- Section 03 · Solution -->
                    @if($project->solution_intro || (is_array($project->solution_features) && count($project->solution_features)))
                        @php $sectionNum = 1 + ($project->context ? 1 : 0) + ((is_array($project->challenges) && count($project->challenges)) || $project->challenge_quote ? 1 : 0); @endphp
                        <div class="project-section project-solution scroll-animate animate-on-load">
                            <div class="section-header">
                                <span class="section-number">{{ str_pad($sectionNum, 2, '0', STR_PAD_LEFT) }}</span>
                                <h2>Notre Solution</h2>
                            </div>

                            @if($project->solution_intro)
                                <p class="intro-paragraph">{{ $project->solution_intro }}</p>
                            @endif

                            @if(is_array($project->solution_features) && count($project->solution_features))
                                <div class="solution-features">
                                    @foreach($project->solution_features as $feature)
                                        <div class="feature-item">
                                            <div class="feature-header">
                                                <span class="feature-icon">
                                                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                        @include('partials.frontend.sp-icon', ['icon' => $feature['icon'] ?? 'bolt'])
                                                    </svg>
                                                </span>
                                                <h3>{{ $feature['title'] ?? '' }}</h3>
                                            </div>
                                            @if(!empty($feature['description']))
                                                <p>{{ $feature['description'] }}</p>
                                            @endif
                                            @if(!empty($feature['details']))
                                                <ul>
                                                    @foreach($feature['details'] as $detail)
                                                        <li>{{ $detail }}</li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if(is_array($project->process_timeline) && count($project->process_timeline))
                                <div class="solution-process">
                                    <h3>Processus de Développement</h3>
                                    <div class="process-timeline">
                                        @foreach($project->process_timeline as $i => $step)
                                            <div class="timeline-item">
                                                <div class="timeline-marker">{{ $i + 1 }}</div>
                                                <div class="timeline-content">
                                                    <h4>{{ $step['phase'] ?? '' }}
                                                        @if(!empty($step['duration']))
                                                            <small>({{ $step['duration'] }})</small>
                                                        @endif
                                                    </h4>
                                                    @if(!empty($step['deliverables']))
                                                        <p>{{ $step['deliverables'] }}</p>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif

                    <!-- Section 04 · Résultats -->
                    @if($project->results_intro || (is_array($project->results_metrics) && count($project->results_metrics)))
                        @php $sectionNum++; @endphp
                        <div class="project-section project-results scroll-animate animate-on-load">
                            <div class="section-header">
                                <span class="section-number">{{ str_pad($sectionNum, 2, '0', STR_PAD_LEFT) }}</span>
                                <h2>Les Résultats</h2>
                            </div>

                            @if($project->results_intro)
                                <p class="intro-paragraph">{{ $project->results_intro }}</p>
                            @endif

                            @if(is_array($project->results_metrics) && count($project->results_metrics))
                                <div class="results-metrics">
                                    @foreach($project->results_metrics as $metric)
                                        <div class="metric-card">
                                            <div class="metric-value">{{ $metric['value'] ?? '' }}</div>
                                            <div class="metric-label">
                                                {{ $metric['label'] ?? '' }}
                                                @if(!empty($metric['description']))
                                                    <small>{{ $metric['description'] }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                            @if($project->client_testimonial)
                                <div class="results-testimonial">
                                    <p class="testimonial-text">{{ $project->client_testimonial }}</p>
                                    <div class="testimonial-author">
                                        @if($project->client_testimonial_avatar)
                                            <img src="{{ asset('storage/' . $project->client_testimonial_avatar) }}"
                                                 alt="{{ $project->client_testimonial_author }}"
                                                 class="author-avatar">
                                        @else
                                            <div class="author-avatar-initials">
                                                {{ mb_strtoupper(mb_substr($project->client_testimonial_author ?? $project->client_name, 0, 2)) }}
                                            </div>
                                        @endif
                                        <div class="author-info">
                                            <h5>{{ $project->client_testimonial_author }}</h5>
                                            @if($project->client_testimonial_position)
                                                <p>{{ $project->client_testimonial_position }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if(is_array($project->business_impact) && count($project->business_impact))
                                <div class="results-impact">
                                    <h3>Impact Business</h3>
                                    <ul class="impact-list">
                                        @foreach($project->business_impact as $impact)
                                            <li>{{ $impact }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    @endif

                    <!-- Galerie -->
                    @if(is_array($project->gallery_images) && count($project->gallery_images))
                        @php $sectionNum++; @endphp
                        <div class="project-section project-gallery-section scroll-animate animate-on-load">
                            <div class="section-header">
                                <span class="section-number">{{ str_pad($sectionNum, 2, '0', STR_PAD_LEFT) }}</span>
                                <h2>Galerie du Projet</h2>
                            </div>
                            <div class="project-gallery-grid">
                                @foreach($project->gallery_images as $image)
                                    <div class="gallery-item">
                                        <img src="{{ asset('storage/' . $image['path']) }}"
                                             alt="{{ $image['caption'] ?? $project->title }}"
                                             loading="lazy">
                                        @if(!empty($image['caption']))
                                            <p class="gallery-caption">{{ $image['caption'] }}</p>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Technologies -->
                    @if(is_array($project->technologies) && count($project->technologies))
                        @php $sectionNum++; @endphp
                        <div class="project-section technologies-section scroll-animate animate-on-load">
                            <div class="section-header">
                                <span class="section-number">{{ str_pad($sectionNum, 2, '0', STR_PAD_LEFT) }}</span>
                                <h2>Technologies & Outils</h2>
                            </div>
                            <div class="tech-categories">
                                @foreach($project->technologies as $category => $techs)
                                    <div class="tech-category">
                                        <h4>{{ $category }}</h4>
                                        <div class="tech-items">
                                            @foreach($techs as $tech)
                                                <span class="tech-badge">{{ $tech }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Sidebar desktop -->
                <aside class="project-sidebar desktop-only scroll-animate animate-on-load">
                    @include('partials.frontend.project-sidebar', ['project' => $project])
                </aside>
            </div>

            <!-- Navigation entre projets -->
            <div class="project-navigation scroll-animate animate-on-load">
                @if($project->previousProject)
                    <a href="{{ route('project.detail', $project->previousProject->slug) }}" class="nav-item">
                        <div class="icon">←</div>
                        <span>Projet précédent</span>
                        <strong>{{ $project->previousProject->title }}</strong>
                    </a>
                @else
                    <span class="nav-item nav-item--disabled"></span>
                @endif

                <a href="{{ route('portfolio') }}" class="nav-item all-projects">
                    <div class="icon">⊞</div>
                    <span>Voir</span>
                    <strong>Tous les projets</strong>
                </a>

                @if($project->nextProject)
                    <a href="{{ route('project.detail', $project->nextProject->slug) }}" class="nav-item nav-item--right">
                        <div class="icon">→</div>
                        <span>Projet suivant</span>
                        <strong>{{ $project->nextProject->title }}</strong>
                    </a>
                @else
                    <span class="nav-item nav-item--disabled"></span>
                @endif
            </div>

            <!-- CTA -->
            <div class="project-cta scroll-animate animate-on-load">
                <h2>Vous avez un projet similaire ?</h2>
                <p>Travaillons ensemble pour créer quelque chose d'exceptionnel pour votre entreprise.</p>
                <div class="cta-buttons">
                    <a href="{{ route('contact') }}" class="btn btn-primary">Discuter de mon projet</a>
                    <a href="{{ route('services') }}" class="btn btn-secondary">Voir nos services</a>
                </div>
            </div>
        </div>
    </section>
@endsection