@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', asset(config('site.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', asset('cd-project/img/meta-tags/twitter-image.png'))

@section('content')

<div role="main" class="main">
    {{-- Page Header --}}
    <section class="custom-page-header-1 page-header page-header-modern page-header-lg bg-primary border-0 z-index-1 my-0">
        <div class="custom-page-header-1-wrapper overflow-hidden">
            <div class="py-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800" style="background-color: #847266 !important;">
                <div class="container py-3 my-3">
                    <div class="row">
                        <div class="col-md-12 align-self-center p-static text-center">
                            <div class="overflow-hidden mb-2">
                                <h1 class="font-weight-black text-12 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1200">{{ __('About') }}</h1>
                            </div>
                        </div>
                        <div class="col-md-12 align-self-center">
                            <div class="overflow-hidden">
                                <ul class="custom-breadcrumb-style-1 breadcrumb breadcrumb-light custom-font-secondary d-block text-center custom-ls-1 text-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1450">
                                    <li class="text-transform-none"><a href="{{ route('front.homepage') }}" class="text-decoration-none">{{ __('Home') }}</a></li>
                                    <li class="text-transform-none active">{{ __('About Us') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="custom-page-wrapper pt-5" style="background-color: #efebe4;">
        <div class="container container-xl-custom pt-5 mt-5">
            <div class="row pt-5">
                <div class="col position-relative">
                    <div class="overflow-hidden mb-2">
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1500">{{ __('NUESTRA EMPRESA') }}</h2>
                    </div>
                    <div class="overflow-hidden mb-3">
                        <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1700">{{ __('Más de 15 Años Creando Experiencias Memorables') }}</h3>
                    </div>

                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2100">{{ __('Terashe es una empresa referente en alquiler de mobiliario para eventos. Nos posicionamos en nuestra región creando experiencias memorables y aportando valor a cada celebración.') }}</p>
                    <p class="text-3-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300">{{ __('Nos dedicamos a la provisión de mobiliario para eventos. Especializada en crear espacios funcionales y estéticamente cuidados, ofrecemos soluciones integrales que abarcan equipamiento, montaje y logística, garantizando experiencias visuales de alto nivel para cada tipo de evento.') }}</p>
                    <p class="text-3-5 pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2500">{{ __('En Terashe creemos que cada evento merece un espacio único, pensado con intención y detalle. Nuestro enfoque es crear ambientes que combinan estética, funcionalidad y calidez, transformando mobiliario en experiencias y espacios en recuerdos. Nos mueve la dedicación y el compromiso de acompañar a cada cliente para que su celebración tenga identidad propia.') }}</p>
                </div>
            </div>
            {{-- Gallery --}}
            <div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                <div class="row pb-3 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="2700" data-plugin-options="{'accY': 200}">
                    @php
                        $galleryImages = [11, 12, 13];
                    @endphp
                    @foreach($galleryImages as $index => $imgNum)
                        <div class="col-md-4 mb-4 mb-md-0">
                            <a class="d-inline-block custom-img-thumbnail-style-1 img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0" href="{{ asset("cd-project/img/demos/architecture-2/generic/generic-{$imgNum}.jpg") }}">
                                <img src="{{ asset("cd-project/img/demos/architecture-2/generic/generic-{$imgNum}.jpg") }}" class="img-fluid rounded-0" alt="" />
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="row pb-5 mb-5">
                <div class="col">
                    <h3 class="text-color-dark font-weight-bold text-6 mb-3">{{ __('Nuestra Misión') }}</h3>
                    <p class="text-3-5 mb-4">{{ __('Crear experiencias memorables a través del mobiliario y equipamiento de alta calidad, ofreciendo un servicio completo que incluye entrega, armado y retiro. Trabajamos con compromiso y atención al detalle para acompañar a nuestros clientes en cada celebración, garantizando excelencia, confianza y soluciones adaptadas a cada estilo y necesidad.') }}</p>

                    <h3 class="text-color-dark font-weight-bold text-6 mb-3">{{ __('Nuestra Visión') }}</h3>
                    <p class="text-3-5 mb-4">{{ __('Ser la empresa líder en mobiliario y equipamiento para eventos en el norte del país, reconocida por la calidad, innovación y confiabilidad de nuestro servicio.') }}</p>

                    <h3 class="text-color-dark font-weight-bold text-6 mb-3">{{ __('Nuestros Valores') }}</h3>
                    <ul class="text-3-5 mb-4">
                        <li class="mb-2"><strong>{{ __('Calidad:') }}</strong> {{ __('Garantizar mobiliario estético y en óptimas condiciones para cada evento.') }}</li>
                        <li class="mb-2"><strong>{{ __('Confianza:') }}</strong> {{ __('Cumplir con responsabilidad y consistencia en cada entrega, posicionándonos como un aliado seguro para nuestros clientes.') }}</li>
                        <li class="mb-2"><strong>{{ __('Innovación:') }}</strong> {{ __('Buscar nuevas soluciones, diseños y tendencias para ofrecer propuestas actuales y versátiles.') }}</li>
                        <li class="mb-2"><strong>{{ __('Experiencia de servicio:') }}</strong> {{ __('Acompañar al cliente de principio a fin: armado, acomodo y retiro, asegurando tranquilidad y un proceso fluido.') }}</li>
                        <li class="mb-2"><strong>{{ __('Compromiso:') }}</strong> {{ __('Honrar la trayectoria y construir sobre ella con dedicación, respeto y profesionalismo.') }}</li>
                        <li class="mb-2"><strong>{{ __('Adaptabilidad:') }}</strong> {{ __('Ofrecer variedad y flexibilidad para ajustarnos a distintos estilos, necesidades y magnitudes de eventos.') }}</li>
                        <li class="mb-2"><strong>{{ __('Pasión por crear experiencias:') }}</strong> {{ __('Entender que cada mobiliario y cada puesta en escena forma parte de un momento único en la vida de las personas.') }}</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <hr class="my-0">
                </div>
            </div>
            {{-- Team Section --}}
            <div class="row py-5 my-5">
                <div class="col-lg-6 col-xl-7 mx-auto mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500">
                    <div class="owl-carousel owl-theme nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 1}, '1200': {'items': 2}}, 'loop': true, 'nav': true, 'dots': false, 'margin': 20}">
                        @if(is_module_active('team') && ($teamMembers ?? collect())->count() > 0)
                            @foreach(($teamMembers ?? collect())->take(3) as $index => $member)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset($member->photo ?? "cd-project/img/demos/architecture-2/authors/author-" . (($index % 2) + 1) . ".jpg") }}" alt="{{ $member->name }}" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member->name }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member->position ?? __('ARCHITECT') }}</h3>
                                            <p class="card-text font-weight-light">{{ Str::limit($member->bio ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor...'), 80) }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            @php
                                $defaultTeam = [
                                    ['name' => 'John Doe', 'position' => 'CEO & FOUNDER', 'img' => 1],
                                    ['name' => 'Janice Doe', 'position' => 'ARCHITECT', 'img' => 2],
                                    ['name' => 'John Doe', 'position' => 'CEO & FOUNDER', 'img' => 1],
                                ];
                            @endphp
                            @foreach($defaultTeam as $member)
                                <div>
                                    <div class="card border-radius-0">
                                        <img class="card-img-top border-radius-0" src="{{ asset("cd-project/img/demos/architecture-2/authors/author-{$member['img']}.jpg") }}" alt="" />
                                        <div class="card-body text-center">
                                            <h4 class="card-title font-weight-extra-bold text-color-dark text-5 mb-1">{{ $member['name'] }}</h4>
                                            <h3 class="text-color-default text-3-5 ls-0 font-weight-normal mb-2 pb-1">{{ $member['position'] }}</h3>
                                            <p class="card-text font-weight-light">{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci, ac auctor...') }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4 text-end position-relative appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="250">

                    <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-2">{{ __('NUESTRO COMPROMISO') }}</h2>
                    <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-4">{{ __('Trabajamos para Wedding Planners y Organizadores') }}</h3>

                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2">{{ __('Nuestro enfoque está orientado al B2B, trabajando de la mano con wedding planners, organizadores de eventos y productoras.') }}</p>
                    <p class="text-3-5 pb-3 mb-4">{{ __('Ofrecemos una experiencia integral. No solo cuenta el mobiliario contratado, también sumamos una logística adaptada a cada cliente para ser sus aliados estratégicos y cumplir correctamente el timing del evento.') }}</p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary custom-btn-style-1 custom-btn-style-1-right font-weight-bold text-3 px-5 py-3">{{ __('CONTACT US') }}</a>
                </div>
            </div>
        </div>
        {{-- Testimonials Section --}}
        <section class="section parallax bg-transparent border-0 py-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'scrollableParallax': true, 'scrollableParallaxMinWidth': 991, 'startOffset': 13, 'cssProperty': 'width', 'cssValueStart': 40, 'cssValueEnd': 100, 'cssValueUnit': 'vw'}">
            <div class="d-flex justify-content-center">
                <div class="scrollable-parallax-wrapper bg-primary overflow-hidden">
                    <div class="container container-xl-custom custom-container-style-3 custom-container-position-1 py-5 my-5 mx-0">
                        <div class="row justify-content-center pt-3 mb-5">
                            <div class="col-sm-8 col-md-12 text-center">
                                <h2 class="text-color-light opacity-6 positive-ls-3 line-height-3 text-4 mb-3">{{ __('CLIENTES SATISFECHOS') }}</h2>
                                <h3 class="text-transform-none text-color-light font-weight-black line-height-2 text-10 negative-ls-1 mb-0">{{ __('Lo Que Dicen Nuestros Clientes') }}</h3>
                            </div>
                        </div>
                        <div class="row justify-content-center pb-3">
                            <div class="col-lg-9">
                                <div class="owl-carousel owl-theme nav-style-1 nav-light nav-outside nav-font-size-lg custom-dots-style-1 custom-dots-style-1-light mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1, 'nav': false, 'dots': true}, '992': {'items': 1}, '1200': {'items': 1}}, 'loop': false, 'nav': true, 'dots': false}">
                                    @if(is_module_active('references') && ($featuredReferences ?? collect())->count() > 0)
                                        @foreach(($featuredReferences ?? collect())->take(2) as $reference)
                                            <div>
                                                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                    <blockquote>
                                                        <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ $reference->testimonial ?? $reference->description ?? __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.') }}</em></p>
                                                    </blockquote>
                                                    <div class="testimonial-author">
                                                        <p class="text-color-light font-weight-bold text-4 mb-0">{{ $reference->name ?? __('John Smith') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        @for($i = 0; $i < 2; $i++)
                                            <div>
                                                <div class="testimonial testimonial-style-2 testimonial-with-quotes testimonial-remove-right-quote custom-testimonial-quote mb-0">
                                                    <blockquote>
                                                        <p class="custom-font-secondary text-color-light opacity-8 font-weight-light line-height-6 text-4-5 px-2 px-lg-3 mb-0"><em>{{ __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget risus porta, tincidunt turpis at, interdum tortor. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.') }}</em></p>
                                                    </blockquote>
                                                    <div class="testimonial-author">
                                                        <p class="text-color-light font-weight-bold text-4 mb-0">{{ __('John Smith') }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- Client Logos --}}
        <div class="container container-xl-custom pb-3">
            <div class="row align-items-center text-center py-5 my-5">
                @php
                    $logoNumbers = [8, 9, 10, 11, 12, 13];
                @endphp
                @foreach($logoNumbers as $index => $logoNum)
                    <div class="col-sm-4 col-xl-2 mb-5 mb-xl-0">
                        <img src="{{ asset("cd-project/img/logos/logo-{$logoNum}.png") }}" alt="" class="img-fluid" style="max-width: 140px;" />
                    </div>
                @endforeach
            </div>
            <div class="row">
                <div class="col">
                    <p class="text-3-5 mb-4">{{ __('Continuamos innovando y mejorando nuestros procesos para ofrecer siempre lo mejor a nuestros clientes. Nuestro compromiso es mantenernos a la vanguardia en calidad y servicio, buscando constantemente nuevas soluciones y tendencias.') }}</p>
                    <p class="text-3-5 pb-3 mb-4">{{ __('Estamos orgullosos de las relaciones duraderas que hemos construido con nuestros clientes a lo largo de más de 15 años. Su confianza nos impulsa a seguir mejorando y expandiendo nuestra oferta de mobiliario y servicios. Trabajamos cada día para superar expectativas y ser el aliado estratégico que tu evento necesita.') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection