@extends('layouts.app')

@section('content')
<section class="it-about-3-area p-relative pt-30 pb-125">
	<img class="it-about-shape-1" src="{{ asset('assets/img/shape/about-1-1.png') }}" alt="">
    <div class="container">





  <div class="container">
    <div class="row">
      <div class="col-12 text-center mb-4">
        <span class="it-section-subtitle"> {{ trans_field($builder, 'titre') ?? $builder->titre_ar }}</span>
      </div>
    </div>

    <div class="it-about-2-area p-relative pt-0 pb-45">
    <div class="it-project-3-area pt-65 pb-45" style="background:white;">
        <div class="container">
            <div class="row mb-50">
    @foreach($builder->contenus as $contenu)
        @php
            if ($contenu->nature == 'video') {
                preg_match("/v=([a-zA-Z0-9_-]+)/", $contenu->url_video, $matches);
                $videoId = $matches[1] ?? '';
                $videoEmbed = $videoId ? "https://www.youtube.com/embed/$videoId" : '';
            }
        @endphp

        <div class="{{ $contenu->col }} mb-30">
          
									@if($contenu->nature == 'image' && $contenu->image)
										<div class="" style="animation: none !important; transition: none !important;">
											<div class="" style="animation: none !important; transition: none !important;">
												<img src="data:image/*;base64,{{ base64_encode($contenu->image) }}" 
													 alt="" 
													 style="width:100%; height:auto; animation: none !important; transition: none !important;">
											</div>
										</div>

            @elseif($contenu->nature == 'texte')
                <div class="it-about-2-text">
                    {!! trans_field($contenu, 'text') ?? $contenu->text_ar !!}
                </div>
            @elseif($contenu->nature == 'video' && $videoEmbed)
                <div class="it-about-2-text">
                    <iframe width="100%" height="315" src="{{ $videoEmbed }}" frameborder="0" allowfullscreen></iframe>
                </div>
            @endif
        </div>
    @endforeach
</div>

        </div>
    </div>
</div>



    
  </div>
</section>
@endsection