@extends('layouts.app')

@section('title', $data['title'])
@if (!empty($data['meta_description']))
    @section('meta_description', $data['meta_description'])
@endif

@section('content')

    @php
        $darkNav = false;
    @endphp

    <main class="page-wrapper pt-5">
        <!-- Page title -->
        <section class="container pb-5 mb-md-2 mb-lg-4 mb-xl-5 mt-5">
            <div class="row pb-5 mb-md-2 mb-lg-4 mb-xl-5 pt-5">
                <div class="col-lg-6">
                    <h1 class="display-2 mb-0">{{ $data['heading_main_title'] }}</h1>
                </div>
                <div class="col-lg-6 col-xl-5 offset-xl-1 pt-3 pt-sm-4 pt-lg-3">
                    <p class="fs-xl pb-4 mb-1 mb-md-2 mb-xl-3">{{ $data['heading_main_paragraph'] }}</p>
                    <a href="{{ $data['heading_main_btn_url'] ?? route('contact') }}" class="btn btn-lg btn-primary shadow-primary">{{ $data['heading_main_btn'] }}</a>
                </div>
            </div>
            <hr>
        </section>

        <!-- What we offer -->
        <section class="overflow-hidden pt-md-2 pt-lg-3 pb-3 pb-md-4 pb-xl-5">
            <div class="container">
                <div class="d-flex flex-column flex-md-row flex-md-nowrap align-items-start">
                    <div class="col-md-7 ps-0 pe-lg-4 mb-5 mb-md-0">
                        <div style="max-width: 660px;">
                            <h2 class="h1 pb-3 mb-2 mb-md-3">{{ $data['what_we_offer_title'] }}</h2>
                            <div class="row row-cols-1 row-cols-sm-2 gx-lg-5 g-4">
                                <div class="col pt-1 pt-sm-2 pt-lg-3">
                                    <i class="bx bx-network-chart d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                                    <h3 class="h5 pb-sm-1 mb-2">{{ $data['what_we_offer_point1_title'] }}</h3>
                                    <p class="mb-0">{{ $data['what_we_offer_point1_text'] }}</p>
                                </div>
                                <div class="col pt-1 pt-sm-2 pt-lg-3">
                                    <i class="bx bx-cog d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                                    <h3 class="h5 pb-sm-1 mb-2">{{ $data['what_we_offer_point2_title'] }}</h3>
                                    <p class="mb-0">{{ $data['what_we_offer_point2_text'] }}</p>
                                </div>
                                <div class="col pt-1 pt-sm-2 pt-lg-3">
                                    <i class="bx bx-brain d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                                    <h3 class="h5 pb-sm-1 mb-2">{{ $data['what_we_offer_point3_title'] }}</h3>
                                    <p class="mb-0">{{ $data['what_we_offer_point3_text'] }}</p>
                                </div>
                                <div class="col pt-1 pt-sm-2 pt-lg-3">
                                    <i class="bx bx-shield-quarter d-block fs-2 text-primary mb-2 mb-sm-3"></i>
                                    <h3 class="h5 pb-sm-1 mb-2">{{ $data['what_we_offer_point4_title'] }}</h3>
                                    <p class="mb-0">{{ $data['what_we_offer_point4_text'] }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Image FIXE (plus de dépendance au JSON) --}}
                    <img src="{{ asset('assets/img/services/ecommerce.png') }}"
                         width="836"
                         class="ms-3 ms-sm-5 ms-xl-3"
                         alt="Dashboard">
                </div>
            </div>
        </section>

        <!-- How we work (Steps) -->
        <section class="container pb-5 mb-md-2 mb-lg-4 mb-xl-5">
            <h2 class="h1 pb-2 pb-md-0 mb-4 mb-md-5">{{ $data['how_we_work_title'] }}</h2>
            <div class="steps steps-sm steps-horizontal-md pb-2 pb-sm-3">
                <div class="step">
                    <div class="step-number">
                        <div class="step-number-inner">1</div>
                    </div>
                    <div class="step-body">
                        <h3 class="h4 mb-3">{{ $data['how_we_work_step1_title'] }}</h3>
                        <p class="mb-0">{{ $data['how_we_work_step1_text'] }}</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">
                        <div class="step-number-inner">2</div>
                    </div>
                    <div class="step-body">
                        <h3 class="h4 mb-3">{{ $data['how_we_work_step2_title'] }}</h3>
                        <p class="mb-0">{{ $data['how_we_work_step2_text'] }}</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">
                        <div class="step-number-inner">3</div>
                    </div>
                    <div class="step-body">
                        <h3 class="h4 mb-3">{{ $data['how_we_work_step3_title'] }}</h3>
                        <p class="mb-0">{{ $data['how_we_work_step3_text'] }}</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">
                        <div class="step-number-inner">4</div>
                    </div>
                    <div class="step-body">
                        <h3 class="h4 mb-3">{{ $data['how_we_work_step4_title'] }}</h3>
                        <p class="mb-0">{{ $data['how_we_work_step4_text'] }}</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Image + Text sections (images FIXES) -->
        <section class="container pb-sm-1 pb-md-3">
            <!-- Row 1 -->
            <div class="row align-items-lg-center pb-5 mb-2 mb-lg-4 mb-xl-5">
                <div class="col-md-6 mb-4 mb-md-0">
                    <img src="{{ asset('assets/img/services/ecommerce.png') }}" class="rounded-3" alt="Illustration">
                </div>
                <div class="col-md-6">
                    <div class="ps-xl-5 ms-md-2 ms-lg-4">
                        <h2 class="h1 mb-3 mb-sm-4">{{ $data['personalize_section_title'] }}</h2>
                        <p class="mb-4 mb-lg-5">{{ $data['personalize_section_text'] }}</p>
                        <a href="{{ $data['personalize_section_btn_url'] ?? route('contact') }}" class="btn btn-lg btn-primary shadow-primary">{{ $data['personalize_section_btn'] }}</a>
                    </div>
                </div>
            </div>

            <!-- Row 2 -->
            <div class="row align-items-lg-center pt-md-3 pb-5 mb-2 mb-lg-4 mb-xl-5">
                <div class="col-md-6 order-md-2 mb-4 mb-md-0">
                    <img src="{{ asset('assets/img/services/ecommerce.png') }}" class="rounded-3" alt="Illustration">
                </div>
                <div class="col-md-6 order-md-1">
                    <div class="pe-xl-5 me-md-2 me-lg-4">
                        <h2 class="h1 mb-3 mb-sm-4">{{ $data['product_dev_section_title'] }}</h2>
                        <p class="mb-3 mb-sm-4">{{ $data['product_dev_section_text'] }}</p>
                        <ul class="list-unstyled mb-0">
                            <li class="d-flex mb-2">
                                <i class="bx bx-check text-primary lead me-2"></i>
                                {{ $data['product_dev_section_list_item1'] }}
                            </li>
                            <li class="d-flex mb-2">
                                <i class="bx bx-check text-primary lead me-2"></i>
                                {{ $data['product_dev_section_list_item2'] }}
                            </li>
                            <li class="d-flex">
                                <i class="bx bx-check text-primary lead me-2"></i>
                                {{ $data['product_dev_section_list_item3'] }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- FAQ -->
        <section class="{{ $data['faq_section_bg_class'] }}">
            <div class="container {{ $data['faq_section_container_class'] }}">
                <div class="row">
                    <div class="col-xl-4 col-md-5 text-center text-md-start pb-2 pb-md-0 mb-4 mb-md-0">
                        <h2 class="pb-3 mb-1 mb-lg-2">
                            {{ $data['faq_section_title'] }}
                        </h2>
                        <p class="fs-lg pb-3 mb-2 mb-lg-3">
                            {{ $data['faq_section_subtitle'] }}
                        </p>
                        <a href="{{ route($data['faq_section_btn_route']) }}" class="btn btn-primary">
                            {{ $data['faq_section_btn_text'] }}
                        </a>
                    </div>

                    <div class="col-md-7 offset-xl-1">
                        <div class="accordion" id="faq">
                            @foreach ($data['faq_questions'] as $index => $faq)
                                @php
                                    $isFirst = $index === 0;
                                    $expanded = $isFirst ? 'true' : 'false';
                                    $collapsedClass = $isFirst ? '' : 'collapsed';
                                    $showClass = $isFirst ? 'show' : '';
                                @endphp

                                <div class="accordion-item border-0 rounded-3 shadow-sm mb-3">
                                    <h2 class="accordion-header" id="{{ $faq['heading_id'] }}-heading">
                                        <button class="accordion-button shadow-none rounded-3 {{ $collapsedClass }}"
                                            type="button" data-bs-toggle="collapse" data-bs-target="#{{ $faq['collapse_id'] }}"
                                            aria-expanded="{{ $expanded }}" aria-controls="{{ $faq['collapse_id'] }}">
                                            {{ $faq['question'] }}
                                        </button>
                                    </h2>
                                    <div id="{{ $faq['collapse_id'] }}" class="accordion-collapse collapse {{ $showClass }}"
                                        aria-labelledby="{{ $faq['heading_id'] }}-heading" data-bs-parent="#faq">
                                        <div class="accordion-body fs-sm pt-0">
                                            <p>{{ $faq['answer'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div> <!-- End accordion -->
                    </div>
                </div>
            </div>
        </section>

        @if (request()->routeIs('local.pages.show'))
        @php
            $meta = $data['meta'] ?? [];
            $outgoing = $meta['outgoing_links'] ?? [];
            $things = $meta['things_to_do'] ?? [];
            $localityName = $meta['locality_name'] ?? null;
        @endphp

        @if (!empty($outgoing))
        <!-- Internal links: version liste simple -->
        <section class="container py-3">
            <h2 class="h6 mb-2 text-muted">Retrouvez-nous aussi ici :</h2>
            <ul class="list-unstyled ms-2">
                @foreach ($outgoing as $link)
                    @php
                        $slug = $link['slug'] ?? null;
                        $label = $link['locality_name'] ?? ($link['title'] ?? $slug);
                        $url = $slug ? route('local.pages.show', ['slug' => $slug]) : '#';
                    @endphp
                    <li class="mb-1">
                        <span class="me-2">•</span>
                        <a href="{{ $url }}" class="link-body-emphasis text-decoration-underline">{{ $label }}</a>
                    </li>
                @endforeach
            </ul>
        </section>
        @endif

        @if (!empty($things))
        <!-- Things to do: small carousel -->
        <section class="container py-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h2 class="h3 mb-0">À faire{{ $localityName ? ' à ' . $localityName : '' }}</h2>
                <div class="d-none d-sm-flex gap-2">
                    <button type="button" id="things-prev" class="btn btn-sm btn-primary rounded-circle btn-icon" aria-label="Précédent">
                        <i class="bx bx-chevron-left text-white fs-5"></i>
                    </button>
                    <button type="button" id="things-next" class="btn btn-sm btn-primary rounded-circle btn-icon" aria-label="Suivant">
                        <i class="bx bx-chevron-right text-white fs-5"></i>
                    </button>
                </div>
            </div>
            <div class="swiper" data-swiper-options='{
                "slidesPerView": 1,
                "spaceBetween": 16,
                "loop": false,
                "navigation": { "prevEl": "#things-prev", "nextEl": "#things-next" },
                "pagination": { "el": ".swiper-pagination", "clickable": true },
                "breakpoints": { "576": { "slidesPerView": 2 }, "992": { "slidesPerView": 3 } }
            }'>
                <div class="swiper-wrapper">
                    @foreach ($things as $item)
                        @php
                            $img = $item['image_url'] ?? null;
                            $name = $item['name'] ?? '';
                            $url = $item['url'] ?? '#';
                            $source = $item['source'] ?? null;
                        @endphp
                        <div class="swiper-slide">
                            <a class="card text-decoration-none h-100" href="{{ $url }}" target="_blank" rel="noopener noreferrer">
                                @if ($img)
                                    <div class="ratio ratio-16x9 bg-light" style="background-image:url('{{ $img }}'); background-size:cover; background-position:center;"></div>
                                @endif
                                <div class="card-body">
                                    <h3 class="h6 mb-1 text-body">{{ $name }}</h3>
                                    @if ($source)
                                        <div class="text-muted small">Source: {{ ucfirst($source) }}</div>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination position-relative bottom-0 mt-3 d-sm-none"></div>
            </div>
        </section>
        @endif
        <!-- CTA final (Présence locale) -->
        <section class="container py-5 my-4">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <h2 class="h1 mb-3">Automatisez, connectez, amplifiez vos produits</h2>
                    <p class="fs-lg mb-0">E-commerce, SaaS, ERP et conseil IA. Grâce à l’IA, on livre plus vite et beaucoup moins cher, sans compromis sur la qualité.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="{{ route('contact') }}" class="btn btn-lg btn-primary">Parlez-nous de votre projet</a>
                </div>
            </div>
        </section>
        @endif

        <!-- CTA -->
        <section class="position-relative bg-dark py-5">
            <span class="position-absolute top-0 start-0 w-100 h-100"
                  style="background-color: rgba(255, 255, 255, .05)"></span>
            <div class="container position-relative zindex-5 text-center my-xl-3 py-1 py-md-4 py-lg-5">
                <p class="lead text-light opacity-70 mb-3">{{ $data['cta_title'] }}</p>
                <h2 class="h1 text-light pb-3 pb-lg-0 mb-lg-5">{{ $data['cta_subtitle'] }}</h2>
                <a href="#" class="btn btn-primary shadow-primary btn-lg">{{ $data['cta_btn'] }}</a>
            </div>
        </section>
    </main>

@endsection