@extends('layout.front.master')

@section('title', __('Nuestra Misión') . ' | ' . config('site.name'))
@section('description', __('Conoce cómo estamos democratizando el acceso a software premium.'))
@section('keywords', 'saas, software factory, misión, bewpro')
@section('og_title', __('Nuestra Misión') . ' | ' . config('site.name'))
@section('og_description', __('Conoce cómo estamos democratizando el acceso a software premium.'))

@section('content')

    {{-- Page Header --}}
    @include('layout.front.partials.page-header-demo-bewpro', [
        'pageTitle' => __('Nosotros'),
        'pageLabel' => __('NUESTRA VISIÓN'),
        'pageSubtitle' => __('Democratizando el software de alta calidad. Tu negocio online en minutos, no en meses.'),
    ])

    {{-- The Platform Section --}}
    <section class="section border-0 m-0 py-5" style="background-color: var(--secondary);">
        <div class="container container-xl-custom py-5">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 mb-5 mb-lg-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200">
                    <h2 class="text-color-light font-weight-bold text-8 mb-4">
                        La <span class="text-color-primary">Fábrica</span> de Software del Futuro
                    </h2>
                    <p class="custom-text-4 text-color-light opacity-7 mb-4">
                        Nacimos de la frustración con las agencias tradicionales: presupuestos inalcanzables, tiempos de entrega de meses y resultados inciertos. 
                    </p>
                    <p class="custom-text-4 text-color-light opacity-7 mb-4">
                        Decidimos cambiar las reglas. En BewPro hemos pre-construido, certificado y perfeccionado más de 240 arquitecturas de negocio listas para operar. Lo que a otros les toma 6 meses desarrollar, nosotros lo desplegamos en 1 click, con calidad <strong class="text-color-light">Deluxe</strong> garantizada.
                    </p>
                    <a href="{{ route('front.contact') }}" class="btn btn-primary btn-modern rounded-0 font-weight-bold text-3 mt-3 px-5 py-3">Hablar con un Asesor</a>
                </div>
                <div class="col-lg-6 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400">
                    <div class="row">
                        <div class="col-sm-6 mb-4">
                            <div class="card border-0 deluxe-card with-border-left h-100">
                                <div class="card-body p-5">
                                    <h4 class="text-color-primary font-weight-bold text-8 mb-2">+240</h4>
                                    <p class="text-color-light font-weight-semibold mb-0">Variantes de Producto</p>
                                    <p class="text-color-light opacity-5 text-2 mb-0 mt-1">Soluciones para cada industria</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 mb-4">
                            <div class="card border-0 deluxe-card with-border-left h-100">
                                <div class="card-body p-5">
                                    <h4 class="text-color-primary font-weight-bold text-8 mb-2">100%</h4>
                                    <p class="text-color-light font-weight-semibold mb-0">Certificación Técnica</p>
                                    <p class="text-color-light opacity-5 text-2 mb-0 mt-1">Auditoría estricta de calidad</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 mb-4 mb-sm-0">
                            <div class="card border-0 deluxe-card with-border-left h-100">
                                <div class="card-body p-5">
                                    <h4 class="text-color-primary font-weight-bold text-8 mb-2">&lt;30m</h4>
                                    <p class="text-color-light font-weight-semibold mb-0">Go-To-Market</p>
                                    <p class="text-color-light opacity-5 text-2 mb-0 mt-1">Tiempo desde la idea hasta estar online</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="card border-0 deluxe-card with-border-left h-100">
                                <div class="card-body p-5">
                                    <h4 class="text-color-primary font-weight-bold text-8 mb-2">6+</h4>
                                    <p class="text-color-light font-weight-semibold mb-0">Módulos Integrados</p>
                                    <p class="text-color-light opacity-5 text-2 mb-0 mt-1">Blog, Productos, Galería y más</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Values Section --}}
    <section class="section border-0 m-0 py-5" style="background-color: var(--secondary-100);">
        <div class="container container-xl-custom py-5">
            <div class="row text-center mb-5">
                <div class="col">
                    <h2 class="text-color-light font-weight-bold text-8 mb-3">Nuestros Principios Fundamentales</h2>
                    <p class="text-color-light opacity-7 custom-text-5 mx-auto max-width-700">Construimos software bajo tres pilares innegociables que nos separan del resto del mercado.</p>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
                    <div class="card border-0 deluxe-card h-100">
                        <div class="card-body p-5">
                            <i class="fas fa-bolt text-color-primary text-10 mb-4"></i>
                            <h4 class="text-color-light font-weight-bold text-5 mb-3">Velocidad sin Sacrificar Calidad</h4>
                            <p class="text-color-light opacity-6 mb-0">Automatizamos el código repetitivo para enfocarnos en lo importante: el crecimiento de tu negocio. Desplegamos arquitectura premium al instante.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4 mb-md-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                    <div class="card border-0 deluxe-card h-100">
                        <div class="card-body p-5">
                            <i class="fas fa-layer-group text-color-primary text-10 mb-4"></i>
                            <h4 class="text-color-light font-weight-bold text-5 mb-3">Arquitectura Escalable</h4>
                            <p class="text-color-light opacity-6 mb-0">Todos nuestros productos nacen sobre un core SaaS escalable. Podrás crecer de 10 a 10,000 clientes sin tener que reescribir tu sistema.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                    <div class="card border-0 deluxe-card h-100">
                        <div class="card-body p-5">
                            <i class="fas fa-bullseye text-color-primary text-10 mb-4"></i>
                            <h4 class="text-color-light font-weight-bold text-5 mb-3">Foco en la Conversión</h4>
                            <p class="text-color-light opacity-6 mb-0">No hacemos "páginas web bonitas". Diseñamos activos de alto rendimiento: herramientas digitales probadas y optimizadas para captar leads y cerrar ventas.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- CTA Section --}}
    <section class="get-in-touch bg-color-after-secondary overlay overlay-color-primary overlay-show p-relative overflow-hidden cta-gradient">
        <span class="custom-circle custom-circle-1 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
        <span class="custom-circle custom-circle-2 bg-color-light appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="100"></span>
        <div class="container container-xl-custom py-5">
            <div class="row align-items-center text-center text-lg-start py-3">
                <div class="col-lg-8">
                    <h4 class="text-color-light font-weight-bold custom-text-10 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                        ¿Listo para escalar tu negocio digital?
                    </h4>
                    <p class="mb-0 text-color-light opacity-8 custom-text-6 mt-3 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="500">
                        Explora nuestro catálogo de +240 soluciones y elige el motor de tu próximo proyecto.
                    </p>
                </div>
                <div class="col-lg-4 d-flex align-items-center justify-content-center justify-content-lg-end mt-5 mt-lg-0">
                    <a href="{{ url('/products-catalogue') }}" class="btn btn-outline custom-btn-outline btn-light border-white rounded-0 px-5 py-4 text-color-light text-color-hover-dark bg-color-hover-light custom-text-6 line-height-6 font-weight-bold appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="600">Ver Catálogo de Productos</a>
                </div>
            </div>
        </div>
    </section>
@endsection