@extends('layout.front.master')

@section('title', __('Nosotros'))
@section('description', config('site.about.main_subtitle', config('site.seo.description')))
@section('keywords', config('site.seo.keywords'))

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

@section('header_classes', 'header-transparent')

@section('content')

{{-- Hero Section --}}
<section class="section bg-dark border-0 overlay overlay-show overlay-color-dark overlay-op-8 m-0" style="height: 100vh; background-image: url({{ asset('cd-project/img/demos/product-landing/backgrounds/background-1.jpg') }}); background-size: cover; background-position: center;">
    <div class="container position-relative z-index-3 h-100">
        <div class="row align-items-center h-100">
            <div class="col-lg-6">
                <div class="hero-content">
                    {{-- Breadcrumb --}}
                    <ul class="breadcrumb breadcrumb-light font-weight-bold d-block text-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        <li><a href="{{ front_homepage_url() }}" class="text-decoration-none text-color-light">{{ __('Home') }}</a></li>
                        <li class="text-uppercase active text-color-primary">{{ __('Nosotros') }}</li>
                    </ul>

                    {{-- Título principal --}}
                    <h1 class="text-color-light font-weight-extra-bold text-8 line-height-1 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                        {{ __('NOSOTROS') }} <span class="text-color-primary">{{ config('site.name') }}</span>
                    </h1>

                    {{-- Mensaje directo --}}
                    <div class="hero-message mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                        <p class="text-color-light text-3 font-weight-light mb-2">
                            {{ config('site.about.main_subtitle', __('Somos especialistas en productos de alta calidad con tecnología avanzada.')) }}
                        </p>
                        <p class="text-color-light text-2 opacity-7 mb-0">
                            {{ config('site.about.tagline', __('Tecnología de vanguardia para el máximo rendimiento.')) }}
                        </p>
                    </div>

                    {{-- Botón CTA --}}
                    <div class="hero-buttons appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                        <a href="#historia" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">
                            {{ __('Conoce Nuestra Historia') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <a href="#main" class="slider-scroll-button slider-scroll-button-light position-absolute bottom-10 left-50pct transform3dx-n50" data-hash data-hash-offset="0" data-hash-offset-lg="80">{{ __('Deslizar Abajo') }}</a>
    </div>
</section>

<div class="" id="main">

    {{-- Historia - Sección Principal --}}
    <section id="historia" class="section bg-dark border-0 m-0 py-5">
        <div class="container">
            <div class="row text-center text-xl-start align-items-center">
                <div class="col-xl-8">
                    <div class="overflow-hidden">
                        <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                            <h3 class="text-color-light font-weight-bold text-6 mb-4">{{ config('site.about.history_title', __('Nacimos con pasión')) }} <span class="text-color-primary">{{ config('site.about.history_highlight', __('por la excelencia')) }}</span></h3>
                        </div>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        <p class="text-color-light text-4 mb-4 opacity-8">
                            {{ config('site.about.history_content_1', __('Todo comenzó con una visión clara: crear productos de la más alta calidad que combinen tecnología avanzada con diseño innovador.')) }}
                        </p>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                        <p class="text-color-light text-4 mb-4 opacity-8">
                            {{ config('site.about.history_content_2', __('Cada detalle fue pensado para ofrecer el máximo rendimiento y la mejor experiencia. Porque sabemos que cuando la calidad importa, no hay lugar para compromisos.')) }}
                        </p>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                        <a href="#filosofia" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">
                            {{ __('Nuestra Filosofía') }} <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
                <div class="col-xl-4 pt-5 pt-xl-0">
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800">
                        <div class="card border-0 bg-primary box-shadow-10 p-4">
                            <div class="text-center">
                                <h4 class="text-color-light font-weight-bold mb-3">{{ __('Nuestro Origen') }}</h4>
                                <ul class="list-unstyled text-color-light">
                                    <li class="mb-2"><i class="fas fa-star text-color-light me-2"></i> {{ config('site.about.origin_1', __('Calidad Premium')) }}</li>
                                    <li class="mb-2"><i class="fas fa-cog text-color-light me-2"></i> {{ config('site.about.origin_2', __('Tecnología Avanzada')) }}</li>
                                    <li class="mb-2"><i class="fas fa-heart text-color-light me-2"></i> {{ config('site.about.origin_3', __('Hecho con Pasión')) }}</li>
                                    <li class="mb-2"><i class="fas fa-shield-alt text-color-light me-2"></i> {{ config('site.about.origin_4', __('Confiabilidad Total')) }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Misión - Sección Secundaria --}}
    <section class="section bg-light border-0 m-0 py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300">
                        <img src="{{ asset('cd-project/img/demos/product-landing/product-carousel-1.jpg') }}" class="img-fluid rounded box-shadow-10 anim-hover-translate-top-10px transition-3ms" alt="{{ config('site.name') }}" />
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">
                        <h2 class="text-color-dark font-weight-bold text-6 mb-4">{{ __('Creamos') }} <span class="text-color-primary">{{ __('tecnología') }}</span> {{ __('de vanguardia') }}</h2>
                        <p class="text-color-dark text-4 mb-4 opacity-7">
                            {{ config('site.about.mission.content', __('No queríamos hacer "otro producto más". Queríamos crear el producto más avanzado del mercado. Cada componente fue elegido pensando en el máximo rendimiento.')) }}
                        </p>
                        <p class="text-color-dark text-4 mb-4 opacity-7">
                            {{ config('site.about.mission.content_2', __('Cada detalle fue pensado para ofrecer la mejor experiencia. Porque sabemos que cuando la calidad importa, no hay lugar para compromisos.')) }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Filosofía - Sección Principal --}}
    <section id="filosofia" class="section bg-dark border-0 m-0 py-5">
        <div class="container">
            <div class="row text-center text-xl-start align-items-center">
                <div class="col-xl-8">
                    <div class="overflow-hidden">
                        <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                            <h3 class="text-color-light font-weight-bold text-6 mb-4">{{ __('Nuestra filosofía es') }} <span class="text-color-primary">{{ __('simple') }}</span></h3>
                        </div>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                        <p class="text-color-light text-4 mb-4 opacity-8">
                            {{ config('site.about.philosophy.content', __('El máximo rendimiento no espera. Creemos que cada cliente merece un producto que no solo funcione, sino que ofrezca el mejor rendimiento en cada uso.')) }}
                        </p>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                        <p class="text-color-light text-4 mb-4 opacity-8">
                            {{ config('site.about.philosophy.content_2', __('Por eso cada producto está diseñado con tecnología de vanguardia, componentes de gama alta y la precisión de la ingeniería más avanzada.')) }}
                        </p>
                    </div>
                </div>
                <div class="col-xl-4 pt-5 pt-xl-0">
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800">
                        <div class="card border-0 bg-primary box-shadow-10 p-4">
                            <div class="text-center">
                                <h4 class="text-color-light font-weight-bold mb-3">{{ __('Nuestros Valores') }}</h4>
                                <ul class="list-unstyled text-color-light">
                                    <li class="mb-2"><i class="fas fa-star text-color-light me-2"></i> {{ config('site.about.value_1', __('Excelencia')) }}</li>
                                    <li class="mb-2"><i class="fas fa-cog text-color-light me-2"></i> {{ config('site.about.value_2', __('Innovación')) }}</li>
                                    <li class="mb-2"><i class="fas fa-heart text-color-light me-2"></i> {{ config('site.about.value_3', __('Pasión')) }}</li>
                                    <li class="mb-2"><i class="fas fa-shield-alt text-color-light me-2"></i> {{ config('site.about.value_4', __('Confiabilidad')) }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Equipo - Sección Principal (si está activo el módulo) --}}
    @if(is_module_active('team') && isset($teamMembers) && $teamMembers->count() > 0)
        <section class="section bg-dark border-0 m-0 py-5">
            <div class="container">
                <div class="row text-center text-xl-start align-items-center">
                    <div class="col-xl-8">
                        <div class="overflow-hidden">
                            <div class="appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="0">
                                <h3 class="text-color-light font-weight-bold text-6 mb-4">{{ __('El equipo que hace') }} <span class="text-color-primary">{{ __('posible la excelencia') }}</span></h3>
                            </div>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                            <p class="text-color-light text-4 mb-4 opacity-8">
                                {{ config('site.about.team.content', __('Somos un equipo de profesionales especializados y apasionados por crear los mejores productos. Cada miembro del equipo entiende lo que significa el máximo rendimiento.')) }}
                            </p>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                            <a href="{{ route('frontend.team.index') }}" class="btn btn-primary btn-modern font-weight-bold text-3 px-5 py-3">
                                {{ __('Conoce al Equipo') }} <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-xl-4 pt-5 pt-xl-0">
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800">
                            <div class="card border-0 bg-primary box-shadow-10 p-4">
                                <div class="text-center">
                                    <h4 class="text-color-light font-weight-bold mb-3">{{ __('Nuestro Equipo') }}</h4>
                                    <ul class="list-unstyled text-color-light">
                                        <li class="mb-2"><i class="fas fa-pencil-ruler text-color-light me-2"></i> {{ __('Equipo de Diseño') }}</li>
                                        <li class="mb-2"><i class="fas fa-cogs text-color-light me-2"></i> {{ __('Ingeniería') }}</li>
                                        <li class="mb-2"><i class="fas fa-check-circle text-color-light me-2"></i> {{ __('Testing & Calidad') }}</li>
                                        <li class="mb-2"><i class="fas fa-users text-color-light me-2"></i> {{ __('Profesionales') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
</div>

{{-- Call to Action --}}
<section class="call-to-action with-borders button-centered bg-primary">
    <div class="container">
        <div class="col-12">
            <div class="call-to-action-content">
                <h3 class="text-color-light">{{ __('¿Listo para experimentar el') }} <strong class="font-weight-extra-bold">{{ __('máximo rendimiento') }}</strong>?</h3>
                <p class="mb-0 text-color-light opacity-7">{{ config('site.about.cta_text', __('Cada gran experiencia comienza con nosotros')) }}</p>
            </div>
        </div>
        <div class="col-12">
            <div class="call-to-action-btn">
                <a href="{{ route('front.contact') }}" class="btn btn-modern text-2 btn-light">{{ __('¡Contáctanos!') }}</a>
            </div>
        </div>
    </div>
</section>

@endsection