@extends('layout.front.master')

@section('title', __('Nuestra Empresa'))
@section('description', __('Technoa es una empresa argentina especializada en soluciones industriales integrales. Representamos marcas líderes mundiales como Yokogawa, ofreciendo tecnología de vanguardia en ingenios, agroindustria, oil & gas, tratamiento de aguas y alimentos & bebidas.'))
@section('keywords', config('site.seo.keywords') . ', empresa, sobre nosotros, historia, misión, visión')

@section('content')

    <div class="custom-page-header border-bottom-light">
    <section class="page-header page-header-modern page-header-lg overlay overlay-light overlay-show overlay-op-9 m-0" style="background-image: url({{ asset('cd-project/img/demos/transportation-logistic/contact/contact-page-header.jpg') }}); background-size: cover; background-position: center;">
        <div class="container container-xl-custom py-4">
                <div class="row">
                    <div class="col">
                        <ul class="breadcrumb text-4 font-weight-semi-bold mb-2">
                        <li><a href="{{ url('/') }}" class="text-color-primary text-decoration-none text-capitalize">{{ __('Inicio') }}</a></li>
                        <li class="text-color-primary active text-capitalize">{{ __('Empresa') }}</li>
                        </ul>
                    <h1 class="text-color-tertiary font-weight-semi-bold text-9">{{ __('Nuestra Empresa') }}</h1>
                    </div>
                </div>
            </div>
        </section>
    </div>

<div class="container container-xl-custom">
        <div class="row py-5 my-3">
            <div class="col-lg-6">
            <p class="font-weight-medium text-8 line-height-4 text-color-tertiary negative-ls-1 p-relative bottom-10">{{ __('Estamos') }} <strong>{{ __('comprometidos') }}</strong> {{ __('en brindar a nuestros clientes las mejores soluciones en bombas, instrumentación y automatización industrial.') }}</p>

            <p class="line-height-8 font-weight-medium text-4">{{ __('Technoa es una empresa argentina especializada en soluciones industriales integrales.') }} <span class="highlight highlight-primary highlight-bg-opacity highlight-animated text-color-tertiary" data-appear-animation="highlight-animated-start" data-appear-animation-delay="400" data-plugin-options="{'flagClassOnly': true}">{{ __('Representamos marcas líderes mundiales como Yokogawa.') }}</span> {{ __('Nuestro compromiso es ofrecer tecnología de vanguardia respaldada por un servicio técnico excepcional en los sectores de ingenios, agroindustria, oil & gas, tratamiento de aguas y alimentos & bebidas.') }}</p>

            <p class="custom-drop-caps font-weight-medium text-4 my-4"><span class="custom-drop-caps-number text-color-dark negative-ls-1"><span class="d-inline-block appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">25+</span></span> {{ __('años de experiencia en el sector industrial argentino nos han posicionado como referentes en soluciones de bombeo, instrumentación y automatización.') }}</p>

            <p class="line-height-7 font-weight-regular text-3">{{ __('Nuestra misión es proporcionar equipos y servicios de la más alta calidad, garantizando la eficiencia operativa y la confiabilidad que nuestros clientes necesitan para sus procesos críticos.') }}</p>

                    <div class="d-flex flex-row pt-3">
                        <div class="pt-2">
                    <img class="avatar rounded-circle" alt="" width="50" src="{{ asset('cd-project/img/demos/transportation-logistic/avatars/avatar-4.jpg') }}">
                        </div>
                        <div class="ps-3">
                    <h4 class="mt-2 mb-0 text-5 font-weight-semi-bold">{{ __('Equipo Directivo') }}</h4>
                    <p class="mb-2 font-weight-medium text-3">{{ __('TECHNOA') }}</p>
                    </div>
            </div>
            </div>
            <div class="col-lg-6">
                <div class="cascading-images-wrapper mt-5">
                    <div class="cascading-images position-relative">
                    <img src="{{ asset('cd-project/img/demos/transportation-logistic/about/about-1.jpg') }}" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-duration="600ms" />
                        <div class="position-absolute w-100" style="top: 41%; left: -30%;">
                        <img src="{{ asset('cd-project/img/demos/transportation-logistic/about/about-2.jpg') }}" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="300" data-appear-animation-duration="600ms" />
                        </div>
                        <div class="position-absolute w-100" style="top: 75%; left: 30%;">
                        <img src="{{ asset('cd-project/img/demos/transportation-logistic/about/about-3.jpg') }}" class="appear-animation" width="500" alt="" data-appear-animation="expandIn" data-appear-animation-delay="600" data-appear-animation-duration="600ms" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="border-0 custom-bg-color-grey-1 pt-5 custom-el-pos-3 p-relative z-index-1 mt-5">
    <div class="container container-xl-custom py-5">
            <div class="row justify-content-between">
                <div class="col-lg-5">
                <h3 class="font-weight-semibold text-9 text-capitalize mb-2">{{ __('Últimas Novedades') }}</h3>
                    <div class="divider divider-small mt-0 mb-4">
                        <hr class="bg-primary">
                    </div>
                @php
                    try {
                        // Cargar el último post del blog dinámicamente
                        $latestPost = \App\Modules\Blog\Models\Post::with('category')
                            ->where('status', 'Published')
                            ->latest()
                            ->first();
                    } catch (\Exception $e) {
                        $latestPost = null;
                    }
                @endphp

                @if($latestPost)
                        <div class="card border-0 bg-transparent">
                            <div class="card-img-top position-relative overlay">
                        <a href="{{ route('blog.post', $latestPost->slug) }}" class="stretched-link">
                                    <span class="position-absolute bottom-10 left-0 d-flex justify-content-start w-100 py-3 px-4 z-index-3">
                                        <span class="text-center bg-primary text-color-light font-weight-semibold line-height-2 px-3 py-2">
                                            <span class="position-relative text-6 z-index-2">
                                        {{ $latestPost->created_at->format('d') }}
                                        <span class="d-block text-0 positive-ls-2 px-1">{{ strtoupper($latestPost->created_at->format('M')) }}</span>
                                            </span>
                                        </span>
                                    </span>
                            @if($latestPost->header)
                            <img src="{{ asset($latestPost->header) }}" class="img-fluid" alt="{{ $latestPost->title }}" />
                            @else
                            <img src="{{ asset('cd-project/img/demos/transportation-logistic/blog/post-thumb-1.jpg') }}" class="img-fluid" alt="{{ $latestPost->title }}" />
                            @endif
                                </a>
                            </div>
                            <div class="card-body py-4 px-0">
                        <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">{{ __('POR EQUIPO TECHNOA') }} @if($latestPost->category) • {{ strtoupper($latestPost->category->name) }} @endif</span>
                        <h4 class="font-weight-bold text-5 text-color-hover-primary mb-2">{{ $latestPost->title }}</h4>
                        <p class="text-3-5 mb-3">{{ \Illuminate\Support\Str::limit($latestPost->description, 120, '...') }}</p>
                        <p class="m-0"><a href="{{ route('blog.post', $latestPost->slug) }}" class="text-uppercase text-3 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block stretched-link">{{ __('Leer Más') }}</a></p>
                            </div>
                        </div>
                    @else
                {{-- Fallback si no hay posts --}}
                        <div class="card border-0 bg-transparent">
                            <div class="card-img-top position-relative overlay">
                        <a href="{{ route('blog.index') }}" class="stretched-link">
                                    <span class="position-absolute bottom-10 left-0 d-flex justify-content-start w-100 py-3 px-4 z-index-3">
                                        <span class="text-center bg-primary text-color-light font-weight-semibold line-height-2 px-3 py-2">
                                            <span class="position-relative text-6 z-index-2">
                                        {{ now()->format('d') }}
                                        <span class="d-block text-0 positive-ls-2 px-1">{{ strtoupper(now()->format('M')) }}</span>
                                            </span>
                                        </span>
                                    </span>
                            <img src="{{ asset('cd-project/img/demos/transportation-logistic/blog/post-thumb-1.jpg') }}" class="img-fluid" alt="{{ __('Novedades Technoa') }}" />
                                </a>
                            </div>
                            <div class="card-body py-4 px-0">
                        <span class="d-block text-color-grey font-weight-semibold positive-ls-2 text-2">{{ __('POR EQUIPO TECHNOA') }}</span>
                        <h4 class="font-weight-bold text-5 text-color-hover-primary mb-2">{{ __('Últimas Novedades Industriales') }}</h4>
                        <p class="text-3-5 mb-3">{{ __('Mantente al día con las últimas novedades en tecnología industrial y soluciones de automatización.') }}</p>
                        <p class="m-0"><a href="{{ route('blog.index') }}" class="text-uppercase text-3 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block stretched-link">{{ __('Ver Blog') }}</a></p>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-lg-6 pt-5 pt-lg-0">
                <h3 class="font-weight-semibold text-9 text-capitalize mb-2">{{ __('Preguntas Frecuentes') }}</h3>
                    <div class="divider divider-small mt-0 mb-4">
                        <hr class="bg-primary">
                </div>

                @php
                    try {
                        // Cargar FAQs destacadas dinámicamente
                        $featuredFaqs = \App\Modules\CdBase\Faqs\Models\Faq::orderBy('order', 'asc')
                            ->orderBy('created_at', 'asc')
                            ->limit(4)
                            ->get();
                    } catch (\Exception $e) {
                        $featuredFaqs = collect(); // Colección vacía si hay error
                    }
                @endphp

                <div class="accordion accordion-modern-status accordion-modern-status-primary" id="accordion100">
                    @forelse($featuredFaqs as $index => $faq)
                    <div class="card card-default">
                        <div class="card-header" id="collapse100Heading{{ $loop->iteration }}">
                            <h4 class="card-title m-0">
                                <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100{{ $loop->iteration }}" aria-expanded="false" aria-controls="collapse100{{ $loop->iteration }}">
                                    {{ $loop->iteration }} - {{ $faq->question }}
                                </a>
                            </h4>
                        </div>
                        <div id="collapse100{{ $loop->iteration }}" class="collapse" aria-labelledby="collapse100Heading{{ $loop->iteration }}" data-bs-parent="#accordion100">
                            <div class="card-body">
                                <p class="mb-0">{{ $faq->answer }}</p>
                            </div>
                        </div>
                    </div>
                    @empty
                    {{-- Fallback si no hay FAQs --}}
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingOne">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100One" aria-expanded="false" aria-controls="collapse100One">
                                    1 - {{ __('¿Qué sectores industriales atiende Technoa?') }}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100One" class="collapse" aria-labelledby="collapse100HeadingOne" data-bs-parent="#accordion100">
                                <div class="card-body">
                                <p class="mb-0">{{ __('Technoa atiende principalmente los sectores de ingenios azucareros, agroindustria, oil & gas, tratamiento de aguas, alimentos & bebidas y plantas de procesamiento industrial en general.') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingTwo">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100Two" aria-expanded="false" aria-controls="collapse100Two">
                                    2 - {{ __('¿Qué marcas representan?') }}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100Two" class="collapse" aria-labelledby="collapse100HeadingTwo" data-bs-parent="#accordion100">
                                <div class="card-body">
                                <p class="mb-0">{{ __('Somos representantes oficiales de Yokogawa para instrumentación y control, además de trabajar con las mejores marcas internacionales en bombas industriales y sistemas de automatización.') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingThree">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100Three" aria-expanded="false" aria-controls="collapse100Three">
                                    3 - {{ __('¿Ofrecen servicio técnico post-venta?') }}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100Three" class="collapse" aria-labelledby="collapse100HeadingThree" data-bs-parent="#accordion100">
                                <div class="card-body">
                                <p class="mb-0">{{ __('Sí, contamos con un equipo técnico especializado que brinda soporte completo: mantenimiento preventivo, reparaciones, repuestos originales y capacitación técnica.') }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card card-default">
                            <div class="card-header" id="collapse100HeadingFour">
                                <h4 class="card-title m-0">
                                    <a class="accordion-toggle bg-light text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse100Four" aria-expanded="false" aria-controls="collapse100Four">
                                    4 - {{ __('¿Realizan proyectos llave en mano?') }}
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse100Four" class="collapse" aria-labelledby="collapse100HeadingFour" data-bs-parent="#accordion100">
                                <div class="card-body">
                                <p class="mb-0">{{ __('Absolutamente. Desarrollamos proyectos integrales desde la ingeniería conceptual hasta la puesta en marcha, incluyendo suministro, instalación y comisionado de equipos.') }}</p>
                            </div>
                        </div>
                    </div>
                    @endforelse
                </div>

                <p class="m-0 mt-5"><a href="{{ url('/faqs') }}" class="text-uppercase text-3 text-decoration-underline text-color-primary text-color-hover-tertiary font-weight-semi-bold transition-3ms d-inline-block">{{ __('Ver Todas las FAQs') }}</a></p>
                </div>
            </div>
        </div>
    </section>

@endsection