@extends('layouts.master')
@section('title')
    {{ $solution['name'] }}
@endsection

@section('content')
    <div class="breadcumb-wrapper" data-bg-src="assets/img/breadcumb/breadcumb-bg.jpg">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">{{ $solution['name'] }}</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{ route('index') }}">Accueil</a></li>
                        <li><a href="{{ route('solutions') }}">Nos Solutions</a></li>
                        <li>{{ $solution['name'] }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    @php
        $heroImage = \App\Support\SolutionAssets::url(
            $solution['assets']['hero'] ?? null,
            $solution['image']
        );
        $logoImage = \App\Support\SolutionAssets::url($solution['assets']['logo'] ?? null);
        $screenshots = collect($solution['assets']['screenshots'] ?? [])
            ->filter(fn ($shot) => \App\Support\SolutionAssets::exists($shot['file']));
    @endphp

    <section class="space-top space-bottom" @if($heroImage) style="background: linear-gradient(rgba(0,60,110,0.85), rgba(0,60,110,0.85)), url('{{ $heroImage }}') center/cover no-repeat;" @else data-bg-src="{{ $solution['image'] }}" @endif>
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-7 wow fadeInUp" data-wow-delay="0.2s">
                    @if ($logoImage)
                        <img src="{{ $logoImage }}" alt="{{ $solution['name'] }}" height="48" class="mb-3">
                    @endif
                    <span class="sec-subtitle {{ $heroImage ? 'text-white' : '' }}"><i class="fas fa-bring-forward"></i>{{ $solution['sector'] }}</span>
                    <h2 class="sec-title h3 {{ $heroImage ? 'text-white' : '' }}">{{ $solution['tagline'] }}</h2>
                    <p class="mt-3 {{ $heroImage ? 'text-white' : '' }}">{{ $solution['long_description'] }}</p>
                    @if (! empty($solution['audiences']))
                        <div class="mt-3">
                            <strong class="d-block mb-2 {{ $heroImage ? 'text-white' : '' }}">Pour qui ?</strong>
                            @foreach ($solution['audiences'] as $audience)
                                <span class="badge me-1 mb-1" style="background-color: {{ $solution['color'] ?? 'var(--theme-color)' }};">{{ $audience }}</span>
                            @endforeach
                        </div>
                    @endif
                    <div class="d-flex flex-wrap gap-2 mt-4">
                        @if (($solution['url'] ?? '') !== ($solution['app_url'] ?? ''))
                            <a href="{{ $solution['url'] }}" class="vs-btn" target="_blank" rel="noopener">
                                Site vitrine<i class="far fa-external-link"></i>
                            </a>
                            <a href="{{ $solution['app_url'] }}" class="vs-btn style2" target="_blank" rel="noopener">
                                Application<i class="far fa-external-link"></i>
                            </a>
                        @else
                            <a href="{{ $solution['app_url'] }}" class="vs-btn" target="_blank" rel="noopener">
                                Accéder à la plateforme<i class="far fa-external-link"></i>
                            </a>
                        @endif
                        <a href="{{ route('contact') }}" class="vs-btn style4">
                            Demander une démo<i class="far fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-5 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="bg-white p-4 rounded shadow-sm">
                        <h4 class="h5 mb-3">En chiffres</h4>
                        @foreach ($solution['stats'] as $stat)
                            <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                                <span>{{ $stat['label'] }}</span>
                                <strong style="color: var(--theme-color);">{{ $stat['value'] }}</strong>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if ($screenshots->isNotEmpty())
        <section class="space-extra-bottom bg-light">
            <div class="container">
                <div class="title-area text-center">
                    <span class="sec-subtitle"><i class="fas fa-bring-forward"></i>Aperçu</span>
                    <h2 class="sec-title h4">La plateforme en images</h2>
                </div>
                <div class="row g-4 mt-2">
                    @foreach ($screenshots as $shot)
                        <div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
                            <div class="bg-white rounded shadow-sm overflow-hidden h-100">
                                <img src="{{ asset($shot['file']) }}" alt="{{ $shot['caption'] }}" class="w-100" style="object-fit: cover; object-position: top;">
                                <p class="p-3 mb-0 text-center"><strong>{{ $shot['caption'] }}</strong></p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="space-extra-bottom bg-white">
        <div class="container">
            <div class="title-area text-center">
                <span class="sec-subtitle"><i class="fas fa-bring-forward"></i>Fonctionnalités</span>
                <h2 class="sec-title h4">Ce que {{ $solution['name'] }} vous apporte</h2>
            </div>
            <div class="row g-4 mt-2">
                @foreach ($solution['features'] as $feature)
                    <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="feature-style1 h-100">
                            <div class="feature-icon">
                                <img src="{{ $feature['icon'] }}" alt="{{ $feature['title'] }}">
                            </div>
                            <h3 class="feature-title h6">{{ $feature['title'] }}</h3>
                            <p class="feature-text">{{ $feature['text'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @if (! empty($solution['testimonials']))
        <section class="space-top space-extra-bottom bg-light">
            <div class="container">
                <div class="title-area text-center">
                    <span class="sec-subtitle"><i class="fas fa-bring-forward"></i>Témoignages</span>
                    <h2 class="sec-title h4">Ce que disent nos utilisateurs</h2>
                </div>
                <div class="row g-4 mt-2">
                    @foreach ($solution['testimonials'] as $testimonial)
                        <div class="col-md-6 wow fadeInUp" data-wow-delay="0.2s">
                            <div class="bg-white p-4 rounded shadow-sm h-100">
                                <img src="assets/img/testimonial/quote-icon.svg" alt="" width="32" class="mb-3">
                                <p class="mb-3">« {{ $testimonial['quote'] }} »</p>
                                <strong class="d-block">{{ $testimonial['author'] }}</strong>
                                <small class="text-muted">{{ $testimonial['role'] }}</small>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="space-top space-extra-bottom">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
                    <span class="sec-subtitle"><i class="fas fa-bring-forward"></i>Pourquoi {{ $solution['name'] }}</span>
                    <h2 class="sec-title h4">Une solution pensée pour le terrain</h2>
                    <ul class="list-unstyled mt-4">
                        @foreach ($solution['highlights'] as $highlight)
                            <li class="mb-3">
                                <i class="far fa-check-circle me-2" style="color: var(--theme-color);"></i>
                                {{ $highlight }}
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="call-media p-4 bg-light rounded">
                        <div class="call-media__icon"><img src="assets/img/icon/tel-1-1.png" alt="icon"></div>
                        <div class="media-body">
                            <span class="call-media__label">Développé par Evolutic Groupe</span>
                            <p class="call-media__info mb-2">Besoin d'une démonstration personnalisée ou d'un accompagnement à l'intégration ?</p>
                            <a href="{{ route('contact') }}" class="vs-btn style3">Contactez-nous<i class="far fa-long-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="z-index-common cta-style2">
        <div class="vs-container2 space" data-bg-src="assets/img/bg/counter-bg-2-1.jpg">
            <div class="row text-center text-lg-start align-items-center justify-content-around">
                <div class="col-lg-auto">
                    <span class="sec-subtitle text-white">Prêt à commencer ?</span>
                    <h2 class="h1 sec-title cta-title1 text-white">Essayez {{ $solution['name'] }}</h2>
                </div>
                <div class="col-lg-auto d-flex flex-wrap gap-2 justify-content-center justify-content-lg-end">
                    @if (($solution['url'] ?? '') !== ($solution['app_url'] ?? ''))
                        <a href="{{ $solution['url'] }}" class="vs-btn style2" target="_blank" rel="noopener">
                            Site vitrine<i class="far fa-external-link"></i>
                        </a>
                        <a href="{{ $solution['app_url'] }}" class="vs-btn" target="_blank" rel="noopener">
                            Application<i class="far fa-external-link"></i>
                        </a>
                    @else
                        <a href="{{ $solution['app_url'] }}" class="vs-btn" target="_blank" rel="noopener">
                            Accéder à la plateforme<i class="far fa-external-link"></i>
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection