@extends('layout.front.master')

@section('title', __('Nuestra Empresa'))
@section('description', config('site.about.main_subtitle') . ' ' . config('site.contact.phone') . ' | ' . config('site.contact.email'))
@section('keywords', config('site.seo.keywords') . ', empresa, sobre nosotros, historia, misión, visión')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Nuestra Empresa'))
@section('og_description', config('site.about.main_subtitle'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('Nuestra Empresa'))
@section('twitter_description', config('site.about.main_subtitle'))
@section('twitter_image', brand_twitter_image())

@section('content')

<div role="main" class="main no-height" id="main">
    {{-- Revolution Slider Header --}}
    <div class="slider-container rev_slider_wrapper rev_about_us" style="height: 500px;">
        <div id="revolutionSlider" class="slider rev_slider manual" data-version="5.4.8">
            <ul>
                <li data-transition="fade">
                    <img src="{{ asset('cd-project/img/demos/photography/about/about-us-slide-1.jpg') }}"
                        alt=""
                        data-bgposition="center center"
                        data-bgfit="cover"
                        data-bgrepeat="no-repeat"
                        data-bgparallax="1"
                        class="rev-slidebg">
                </li>
                <li data-transition="fade">
                    <img src="{{ asset('cd-project/img/demos/photography/about/about-us-slide-2.jpg') }}"
                        alt=""
                        data-bgposition="center center"
                        data-bgfit="cover"
                        data-bgrepeat="no-repeat"
                        data-bgparallax="2"
                        class="rev-slidebg">
                </li>
            </ul>
            <div class="tp-static-layers">
                <h1 class="tp-caption tp-caption-photo-label tp-caption-main-custom tp-static-layer font-weight-normal text-color-light"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="0"
                    data-start="500"
                    data-basealign="slide"
                    data-startslide="0"
                    data-endslide="99"
                    data-transform_in="y:[-300%];opacity:0;s:500;" style="font-size: 56px;">{{ config('site.name') }}</h1>
                <div class="tp-caption tp-caption-photo-label tp-caption-sub-custom tp-static-layer text-color-light"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="60"
                    data-start="800"
                    data-basealign="slide"
                    data-startslide="0"
                    data-endslide="99"
                    data-transform_in="y:[-300%];opacity:0;s:500;" style="font-size: 32px;">{{ __('Nice to Meet You') }}</div>
            </div>
        </div>
    </div>

    {{-- About Section --}}
    <section>
        <div class="container">
            <div class="row text-center pt-4 mt-4 pb-4">
                <div class="col">
                    <h2 class="font-weight-normal custom-font-size-1 mb-4 mt-4">{{ __('We Love What We Do') }}</h2>
                    <p>{{ config('site.about.main_subtitle', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna lobortis, at consectetur odio euismod. Maecenas eleifend semper vulputate. Integer pellentesque massa et felis aliquam, a pharetra mauris bibendum. Nullam ullamcorper enim id aliquet convallis. Cras pellentesque, ipsum sollicitudin suscipit mollis, nibh nisi facilisis lorem.')) }}</p>
                </div>
            </div>
        </div>
    </section>

    {{-- Team Section --}}
    @if(is_module_active('team') && ($teamMembers ?? collect())->count() > 0)
    <section class="section photographers">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <h2 class="font-weight-normal custom-font-size-1">{{ __('Our Team') }}</h2>
                </div>
            </div>
        </div>
        <div class="container-fluid p-0">
            <div class="owl-carousel owl-theme nav-center custom-carousel-arrows-style m-0" data-plugin-options="{'items': 6, 'loop': false, 'dots': false, 'nav': true}">
                @foreach($teamMembers->take(6) as $member)
                    <div>
                        <span class="thumb-info thumb-info-centered-icons custom-thumb-info-photographers rounded-0">
                            <span class="thumb-info-wrapper rounded-0">
                                <a href="#">
                                    <img src="{{ asset($member->photo ?? 'cd-project/img/demos/photography/about/photographer-1.jpg') }}" class="img-fluid rounded-0" alt="{{ $member->name }}">
                                    <span class="thumb-info-action font-color-light">
                                        <span class="thumb-info-title">
                                            {{ $member->name }}
                                            <span class="thumb-info-subtitle">
                                                {{ $member->position ?? __('Team Member') }}
                                            </span>
                                        </span>
                                    </span>
                                </a>
                                <ul class="social-icons">
                                    @if($member->facebook)
                                        <li class="social-icons-facebook">
                                            <a href="{{ $member->facebook }}" target="_blank" title="Facebook">
                                                <i class="fab fa-facebook-f"></i>
                                            </a>
                                        </li>
                                    @endif
                                    @if($member->twitter)
                                        <li class="social-icons-x">
                                            <a href="{{ $member->twitter }}" target="_blank" title="X">
                                                <i class="fab fa-x-twitter"></i>
                                            </a>
                                        </li>
                                    @endif
                                    @if($member->instagram)
                                        <li class="social-icons-instagram">
                                            <a href="{{ $member->instagram }}" target="_blank" title="Instagram">
                                                <i class="fab fa-instagram"></i>
                                            </a>
                                        </li>
                                    @endif
                                </ul>
                            </span>
                        </span>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Services Section --}}
    @if(is_module_active('services'))
    <section class="section our-services">
        <div class="container">
            <div class="row text-center mb-3">
                <div class="col">
                    <h2 class="font-weight-normal custom-font-size-1 mt-4">{{ __('Our Services') }}</h2>
                </div>
            </div>
            <div class="row mb-4">
                @forelse(($services ?? collect())->take(3) as $service)
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <div class="feature-box feature-box-style-2 align-items-center">
                            <div class="feature-box-icon">
                                <img src="{{ asset($service->icon ?? 'cd-project/img/demos/photography/about/our-services-1.jpg') }}" alt="{{ $service->title }}">
                            </div>
                            <div class="feature-box-info">
                                <h4 class="font-weight-normal text-5">{{ $service->title }}</h4>
                                <p class="mb-0">{{ Str::limit($service->description ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna.'), 100) }}</p>
                            </div>
                        </div>
                    </div>
                @empty
                    {{-- Default services --}}
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <div class="feature-box feature-box-style-2 align-items-center">
                            <div class="feature-box-icon">
                                <img src="{{ asset('cd-project/img/demos/photography/about/our-services-1.jpg') }}" alt="">
                            </div>
                            <div class="feature-box-info">
                                <h4 class="font-weight-normal text-5">{{ __('Model Portfolio') }}</h4>
                                <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna.') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 mb-4 mb-lg-0">
                        <div class="feature-box feature-box-style-2 align-items-center">
                            <div class="feature-box-icon">
                                <img src="{{ asset('cd-project/img/demos/photography/about/our-services-2.jpg') }}" alt="">
                            </div>
                            <div class="feature-box-info">
                                <h4 class="font-weight-normal text-5">{{ __('Corporate Photo') }}</h4>
                                <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna.') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="feature-box feature-box-style-2 align-items-center">
                            <div class="feature-box-icon">
                                <img src="{{ asset('cd-project/img/demos/photography/about/our-services-3.jpg') }}" alt="">
                            </div>
                            <div class="feature-box-info">
                                <h4 class="font-weight-normal text-5">{{ __('Wedding Photos') }}</h4>
                                <p class="mb-0">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna.') }}</p>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
    @endif

    {{-- Why Choose Us Section --}}
    <section class="section section-quaternary why-choose-us">
        <div class="container">
            <div class="row text-center mb-5">
                <div class="col">
                    <h2 class="font-weight-normal custom-font-size-1 text-color-light m-0 mt-4">{{ __('Why Choose Us') }}</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="feature-box feature-box-style-2 flex-wrap">
                        <div class="feature-box-icon px-0 pb-4 justify-content-start">
                            <img src="{{ asset('cd-project/img/demos/photography/about/why-choose-us-1.png') }}" alt="" class="img-fluid">
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-normal text-color-light text-5">{{ __('Experience') }}</h4>
                            <p>{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna lobortis, at consectetur odio euismod. Maecenas eleifend semper vulputate.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="feature-box feature-box-style-2 flex-wrap">
                        <div class="feature-box-icon px-0 pb-4 justify-content-start">
                            <img src="{{ asset('cd-project/img/demos/photography/about/why-choose-us-2.png') }}" alt="" class="img-fluid">
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-normal text-color-light text-5">{{ __('Efficiency') }}</h4>
                            <p>{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna lobortis, at consectetur odio euismod. Maecenas eleifend semper vulputate.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-box feature-box-style-2 flex-wrap">
                        <div class="feature-box-icon px-0 pb-4 justify-content-start">
                            <img src="{{ asset('cd-project/img/demos/photography/about/why-choose-us-3.png') }}" alt="" class="img-fluid">
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-normal text-color-light text-5">{{ __('Creativity') }}</h4>
                            <p>{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam id urna lobortis, at consectetur odio euismod. Maecenas eleifend semper vulputate.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@endsection