@extends('welcome')
@section('title', __('aboutus.seo_about_title', ['company' => config('app.name')]))
@section('meta_description', __('aboutus.seo_about_description', ['company' => config('app.name')]))
@section('content')

    <!--==============================
            Breadcumb
        ============================== -->
    <div class="breadcumb-wrapper" data-bg-src="{{ asset('images/banners/bg_03.jpg') }}">
        <div class="container">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">{{ __('aboutus.title') }}</h1>
                <ul class="breadcumb-menu">
                    <li>
                        @php
                            $trackMetaHome = [
                                'origem'  => 'breadcrumb',
                                'destino' => 'Início',
                                'secao'   => 'Sobre Nós',
                                'acao'    => 'Abrir página inicial',
                            ];
                        @endphp

                        <a href="{{ route('welcome') }}"
                           data-track-click="breadcrumb:click"
                           data-track-type="navigation"
                           data-track-meta='{{ json_encode($trackMetaHome, JSON_UNESCAPED_UNICODE) }}'>
                            {{ __('aboutus.home') }}
                        </a>
                    </li>
                    <li>{{ __('aboutus.title') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!--==============================
            About Area  
        ==============================-->
    <div class="overflow-hidden overflow-hidden space" id="about-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6 mb-30 mb-xl-0">
                    <div class="img-box1">
                        <div class="img1">
                            <img src="{{ asset('images/banners/about_1_1.jpg') }}" alt="About">
                        </div>
                        <div class="img2">
                            <img src="{{ asset('images/banners/about_1_2.jpg') }}" alt="Image">
                        </div>
                        <div class="shape1 movingX">
                            <img src="{{ asset('images/banners/about_1_3.png') }}" alt="Image">
                        </div>
                        <div class="year-counter">
                            <div class="year-counter_number">
                                <span class="counter-number">{{ $years }}</span>+
                            </div>
                            <p class="year-counter_text">
                                {{ __('aboutus.years_experience') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="ps-xxl-5 ps-xl-2 ms-xl-1 text-center text-xl-start">
                        <div class="title-area mb-32">
                            <span class="sub-title">
                                <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="shape">
                                {{ __('aboutus.subtitle') }}
                            </span>

                            <h2 class="sec-title">
                                {{ __('aboutus.title') }}
                            </h2>

                            <p class="sec-text text-justify">
                                {{ __('aboutus.description') }}
                            </p>
                        </div>

                        <div class="about-feature-wrap">
                            <div class="about-feature">
                                <div class="box-icon">
                                    <img src="{{ asset('assets/img/icon/about_feature_1.svg') }}" alt="Icon">
                                </div>
                                <h3 class="box-title">
                                    {{ __('aboutus.feature_1') }}
                                </h3>
                            </div>

                            <div class="about-feature">
                                <div class="box-icon">
                                    <img src="{{ asset('assets/img/icon/about_feature_2.svg') }}" alt="Icon">
                                </div>
                                <h3 class="box-title">
                                    {{ __('aboutus.feature_2') }}
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!--==============================
            Process Area  
        ==============================-->
    <section class="space bg-smoke2" id="process-sec">
        <div class="shape-mockup" data-top="0" data-left="0"><img src="assets/img/shape/vector_shape_7.png" alt="shape"></div>
        <div class="shape-mockup" data-bottom="0" data-right="0"><img src="assets/img/shape/vector_shape_6.png" alt="shape"></div>
        <div class="container">
            <div class="title-area text-center">
                <span class="sub-title">
                    <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="Icon">
                    {{ __('aboutus.process_subtitle') }}
                </span>
                <h2 class="sec-title">
                    {{ __('aboutus.process_title') }}
                </h2>
            </div>
            <div class="row gy-4 justify-content-center">
                <div class="col-xl-3 col-md-6 process-box-wrap">
                    <div class="process-box">
                        <div class="box-icon">
                            <img src="assets/img/icon/process_box_1.svg" alt="icon">
                        </div>
                        <div class="box-img" data-mask-src="assets/img/bg/process_bg_shape.png">
                            <img src="{{ asset('assets/img/normal/process_box_1.jpg') }}" alt="image">
                        </div>
                        <p class="box-number">01</p>
                        <h3 class="box-title">{{ __('aboutus.step_1_title') }}</h3>
                        <p class="box-text">{{ __('aboutus.step_1_text') }}</p>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 process-box-wrap">
                    <div class="process-box">
                        <div class="box-icon">
                            <img src="assets/img/icon/process_box_4.svg" alt="icon">
                        </div>
                        <div class="box-img" data-mask-src="assets/img/bg/process_bg_shape.png">
                            <img src="assets/img/normal/process_box_2.jpg" alt="image">
                        </div>
                        <p class="box-number">02</p>
                        <h3 class="box-title">{{ __('aboutus.step_2_title') }}</h3>
                        <p class="box-text">{{ __('aboutus.step_2_text') }}</p>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 process-box-wrap">
                    <div class="process-box">
                        <div class="box-icon">
                            <img src="assets/img/icon/process_box_3.svg" alt="icon">
                        </div>
                        <div class="box-img" data-mask-src="assets/img/bg/process_bg_shape.png">
                            <img src="assets/img/normal/process_box_3.jpg" alt="image">
                        </div>
                        <p class="box-number">03</p>
                        <h3 class="box-title">{{ __('aboutus.step_3_title') }}</h3>
                        <p class="box-text">{{ __('aboutus.step_3_text') }}</p>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 process-box-wrap">
                    <div class="process-box">
                        <div class="box-icon">
                            <img src="assets/img/icon/process_box_2.svg" alt="icon">
                        </div>
                        <div class="box-img" data-mask-src="assets/img/bg/process_bg_shape.png">
                            <img src="assets/img/normal/process_box_4.jpg" alt="image">
                        </div>
                        <p class="box-number">04</p>
                        <h3 class="box-title">{{ __('aboutus.step_4_title') }}</h3>
                        <p class="box-text">{{ __('aboutus.step_4_text') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!--==============================
            Counter Area  
        ==============================-->
    <div class="counter-sec11" data-bg-src="assets/img/bg/counter_bg_1_1.jpg">
        <div class="container">
            <div class="counter-card-wrap">
                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_1.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">{{ $numberOfPacks }}</span>
                        </h2>
                        <p class="box-text">{{ __('index.healthy_packs') }}</p>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_2.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">14</span>+
                        </h2>
                        <p class="box-text">{{ __('index.dedicated_team') }}</p>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_3.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">{{ $ordersDelivered }}</span>+
                        </h2>
                        <p class="box-text">{{ __('index.orders_delivered') }}</p>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="counter-card">
                    <div class="box-icon">
                        <img src="{{ asset('assets/img/icon/counter_card_4.svg') }}" alt="Icon">
                    </div>
                    <div class="media-body">
                        <h2 class="box-number">
                            <span class="counter-number">100</span>%
                        </h2>
                        <p class="box-text">{{ __('index.fresh_products') }}</p>
                    </div>
                </div>
                <div class="divider"></div>
            </div>
        </div>
    </div>
    
    <!--==============================
            Feature Area  
        ==============================-->
    <div class="overflow-hidden space">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 text-center text-xl-start">
                    <div class="title-area">
                        <span class="sub-title">
                            <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="shape">
                            {{ __('aboutus.why_subtitle') }}
                        </span>

                        <h2 class="sec-title">
                            {{ __('aboutus.why_title') }}
                        </h2>

                        <p class="sec-text">
                            {{ __('aboutus.why_description') }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="text-center text-xl-start">
                <div class="choose-feature-area">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="choose-feature-wrap">
                                <div class="choose-feature">
                                    <div class="box-icon">
                                        <img src="assets/img/icon/choose_feature_1.svg" alt="Icon">
                                    </div>
                                    <h3 class="box-title">{{ __('aboutus.why_feature_1_title') }}</h3>
                                    <p class="box-text">{{ __('aboutus.why_feature_1_text') }}</p>
                                </div>
                                <div class="choose-feature">
                                    <div class="box-icon">
                                        <img src="assets/img/icon/choose_feature_2.svg" alt="Icon">
                                    </div>
                                    <h3 class="box-title">{{ __('aboutus.why_feature_2_title') }}</h3>
                                    <p class="box-text">{{ __('aboutus.why_feature_2_text') }}</p>
                                </div>
                                <div class="choose-feature">
                                    <div class="box-icon">
                                        <img src="assets/img/icon/choose_feature_3.svg" alt="Icon">
                                    </div>
                                    <h3 class="box-title">{{ __('aboutus.why_feature_3_title') }}</h3>
                                    <p class="box-text">{{ __('aboutus.why_feature_3_text') }}</p>
                                </div>
                                <div class="choose-feature">
                                    <div class="box-icon">
                                        <img src="assets/img/icon/choose_feature_4.svg" alt="Icon">
                                    </div>
                                    <h3 class="box-title">{{ __('aboutus.why_feature_4_title') }}</h3>
                                    <p class="box-text">{{ __('aboutus.why_feature_4_text') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-5 d-none d-xl-block">
                            <div class="img-box2-wrap">
                                <div class="img-box2">
                                    <div class="img1">
                                        @if($whyBanner)
                                            <img src="{{ $whyBanner->image_url }}"
                                                 alt="{{ $whyBanner->text(1) }}"
                                                 style="border-radius: 20px; width: 100%;">
                                        @endif
                                    </div>
                                    <div class="img2">
                                        <img src="assets/img/normal/why_1_2.png" alt="Why">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!--==============================
            Testimonial Area  
        ==============================-->
    @if($testimonials->count())
    <section class="overflow-hidden bg-smoke2" id="testi-sec" style="max-height: 609px;">

        <div class="shape-mockup testi-shape1" data-top="0" data-left="0">
            <img src="{{ $secBanner->image_url }}"
                alt="{{ $secBanner->text(1) }}">
        </div>

        <div class="shape-mockup" data-bottom="0" data-right="0">
            <img src="{{ asset('assets/img/shape/vector_shape_5.png') }}" alt="shape">
        </div>

        <div class="container">
            <div class="testi-card-area">

                <div class="title-area">
                    <span class="sub-title">
                        <img src="{{ asset('assets/img/theme-img/title_icon.svg') }}" alt="Icon">
                        {{ __('index.testimonials') }}
                    </span>

                    <h2 class="sec-title">
                        {{ __('index.customer_feedback') }}
                    </h2>
                </div>

                <div class="testi-card-slide">
                    <div class="swiper th-slider" id="testiSlide1" data-slider-options='{"effect":"slide"}'>
                        <div class="swiper-wrapper">

                            @foreach($testimonials as $testimonial)
                                <div class="swiper-slide">
                                    <div class="testi-card"
                                         data-track-click="Testemunho"
                                         data-track-type="visualização"
                                         data-track-meta="Autor: {{ $testimonial->tes_author }} | Estrelas: {{ $testimonial->stars }}">

                                        <p class="testi-card_text">
                                            {!! $testimonial->text !!}
                                        </p>

                                        <div class="testi-card_profile">

                                            <div class="testi-card_avater">
                                                <img src="{{ asset('images/account/user-ava-md.jpg') }}" alt="Avatar">
                                            </div>

                                            <div class="testi-card_content">

                                                <h3 class="testi-card_name">
                                                    {{ $testimonial->tes_author }}
                                                </h3>

                                                <span class="testi-card_desig">
                                                    {{ __('index.customer_label') }}
                                                </span>

                                                {{-- Stars --}}
                                                <div class="mt-1">
                                                    @for($i = 1; $i <= 5; $i++)
                                                        <i class="fas fa-star {{ $i <= $testimonial->stars ? 'text-warning' : 'text-muted' }}"></i>
                                                    @endfor
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                    <div class="icon-box">
                        <button data-slider-prev="#testiSlide1" class="slider-arrow default">
                            <i class="far fa-arrow-left"></i>
                        </button>
                        <button data-slider-next="#testiSlide1" class="slider-arrow default">
                            <i class="far fa-arrow-right"></i>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </section>
    @endif
    
    <!--==============================
            Team Area  
        ==============================-->
    <div class="row gy-40 justify-content-center">

        @foreach($teamMembers as $member)
            <div class="col-xl-4 col-md-6">
                <div class="th-team team-card">
                    <div class="img-wrap">
                        <div class="shape" data-mask-src="{{ asset('assets/img/bg/team_card_bg.png') }}"></div>
                        <div class="team-img">
                            <img src="{{ $member->avatar_url }}" alt="{{ $member->tem_name }}">
                        </div>
                    </div>

                    <div class="box-content">
                        <span class="team-desig">
                            {{ $member->role }}
                        </span>

                        <h3 class="box-title">
                            {{ $member->tem_name }}
                        </h3>

                        @if($member->hasSocialLinks())
                            <div class="social-links">

                                @if($member->tem_facebook)
                                    <a target="_blank"
                                       href="{{ $member->tem_facebook }}"
                                       data-track-click="team:social"
                                       data-track-type="social"
                                       data-track-meta='@json([
                                            "secao" => "Equipa",
                                            "membro" => $member->tem_name,
                                            "rede" => "Facebook"
                                       ])'>
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                @endif

                                @if($member->tem_instagram)
                                    <a target="_blank"
                                       href="{{ $member->tem_instagram }}"
                                       data-track-click="team:social"
                                       data-track-type="social"
                                       data-track-meta='@json([
                                            "secao" => "Equipa",
                                            "membro" => $member->tem_name,
                                            "rede" => "Instagram"
                                       ])'>
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                @endif

                                @if($member->tem_linkedin)
                                    <a target="_blank"
                                       href="{{ $member->tem_linkedin }}"
                                       data-track-click="team:social"
                                       data-track-type="social"
                                       data-track-meta='@json([
                                            "secao" => "Equipa",
                                            "membro" => $member->tem_name,
                                            "rede" => "LinkedIn"
                                       ])'>
                                        <i class="fab fa-linkedin-in"></i>
                                    </a>
                                @endif

                            </div>
                        @endif

                    </div>
                </div>
            </div>
        @endforeach

    </div>
@endsection