@extends('layout.front.master')

@section('title', config('site.name') . ' | ' . config('site.tagline', __('Welcome')))
@section('description', config('site.seo.description') ?? config('site.description', ''))
@section('keywords', config('site.seo.keywords') ?? '')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name'))
@section('og_description', config('site.og.description') ?? config('site.description', ''))
@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'))
@section('twitter_description', config('site.twitter.description') ?? config('site.description', ''))
@section('twitter_image', brand_twitter_image())

@section('content')

{{-- ══════════════════════════════════════════════════════════
     HERO
     ══════════════════════════════════════════════════════════ --}}
<section class="section border-0 m-0 p-0 hero-main" style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary--100) 30%, var(--primary--300) 60%, var(--secondary-300) 150%); position: relative;">
    <div class="container h-100 d-flex align-items-center" style="position: relative; z-index: 2;">
        <div class="row align-items-center w-100">

            {{-- Columna de contenido --}}
            <div class="col-lg-6 d-flex flex-column justify-content-center hero-content-col">

                <h1 class="text-color-light hero-headline appear-animation mt-5" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                    {!! config('site.welcome.hero_line1', config('site.tagline', __('Welcome'))) !!}<br><strong>{!! config('site.welcome.hero_line2', '') !!} <span style="color: var(--secondary);">✦</span></strong>
                </h1>

                <div class="hero-cta-block">
                    <a href="{{ route('front.contact') }}" class="btn font-weight-bold text-3-5 py-2 px-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600" style="background-color: var(--primary); color: #fff; border: 1.5px solid var(--secondary-rgba-40); border-radius: 50px; letter-spacing: 1px; box-shadow: 0 0 20px var(--secondary-rgba-20), 0 0 40px var(--secondary-rgba-10); transition: all 0.3s ease;">{{ config('site.welcome.cta_label', __('CONTACT US')) }}</a>
                </div>

                <div class="hero-subpoints-wrap appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800">
                    <p class="text-color-light opacity-7 hero-subpoints hero-subpoints-item mb-0">{{ config('site.welcome.hero_subpoint_1', __('100% digital')) }}</p>
                    <p class="text-color-light opacity-7 hero-subpoints hero-subpoints-item mb-0">{{ config('site.welcome.hero_subpoint_2', __('Simple, ágil y seguro.')) }}</p>
                </div>

                {{-- Partners --}}
                @php
                    $partners = config('site.welcome.partners', []);
                    if (is_string($partners)) { $partners = json_decode($partners, true) ?? []; }
                @endphp
                @if(!empty($partners))
                <div class="hero-partners-block appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1000">
                    <p class="text-color-light text-uppercase font-weight-bold hero-partners-label mb-2">{{ config('site.welcome.partners_label', __('Our Partners')) }}</p>
                    <div class="d-flex align-items-center gap-4 hero-partners-logos">
                        @foreach($partners as $partner)
                        <img src="{{ filter_var($partner['logo'] ?? '', FILTER_VALIDATE_URL) ? $partner['logo'] : asset($partner['logo'] ?? '') }}" alt="{{ $partner['name'] ?? '' }}" class="hero-partner-logo {{ ($partner['large'] ?? false) ? 'hero-partner-logo--large' : '' }}" loading="lazy" />
                        @endforeach
                    </div>
                    @if(config('site.welcome.hero_footnote'))
                    <p class="text-color-light opacity-5 mb-0 hero-foot-note mt-3">{{ config('site.welcome.hero_footnote') }}</p>
                    @endif
                </div>
                @endif

            </div>

            {{-- Columna visual --}}
            <div class="col-lg-6 d-none d-lg-flex align-items-center justify-content-center hero-symbol-col">
                <img src="{{ asset('cd-project/img/demos/business-consulting/backgrounds/Recurso 1.svg') }}" alt="" class="hero-symbol-img img-fluid appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400" loading="eager" />
            </div>

        </div>
    </div>
</section>


{{-- ══════════════════════════════════════════════════════════
     ABOUT US (Piedra)
     ══════════════════════════════════════════════════════════ --}}
<section id="aboutus" class="section border-0 m-0 p-0 welcome-section-fullheight d-flex flex-column justify-content-start welcome-section-aboutus" style="position: relative; overflow: hidden; background: #838687;">
    <div class="welcome-aboutus-stone" aria-hidden="true" style="background-image: url('{{ asset('cd-project/img/demos/business-consulting/backgrounds/pidra-mockup.png') }}');"></div>
    <div class="welcome-aboutus-gradient-overlay" aria-hidden="true"></div>
    <div class="container py-5 position-relative z-index-2">
        <div class="row mt-5 justify-content-center">
            <div class="col-12 col-lg-5 col-xl-4 mx-auto ps-lg-5 pe-lg-3 text-center d-flex flex-column justify-content-start welcome-section-aboutus-content">
                <div class="mb-3">
                    <h2 class="font-weight-bold text-9 line-height-2 negative-ls-05 mb-0 text-start appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="500" style="color: var(--light);">{{ config('site.welcome.about_heading', __('About Us')) }}</h2>
                    <div class="d-flex align-items-center justify-content-start">
                        <div class="flex-grow-1" style="height: 2px; background: var(--secondary); opacity: .9;"></div>
                        <img src="{{ asset('cd-project/img/demos/business-consulting/backgrounds/start-green.svg') }}" alt="Separator" style="width: 22px; height: 22px; margin-left: 14px;">
                    </div>
                </div>
                <div class="mb-4 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="700">
                    <p class="text-4 font-weight-normal mb-0 text-start" style="color: var(--light); opacity: .7; font-weight: 400;">{{ config('site.welcome.about_subtitle', '') }}</p>
                    @if(config('site.welcome.about_subtitle_accent'))
                    <p class="text-4 font-weight-normal mb-0 text-start" style="color: var(--secondary); font-weight: 400;">{{ config('site.welcome.about_subtitle_accent') }}</p>
                    @endif
                </div>
                <div class="mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900">
                    <a href="{{ route('front.contact') }}" class="btn font-weight-bold text-4-5 py-3 px-7 w-100 d-block" style="background-color: var(--secondary); color: var(--dark); border: 1.5px solid var(--secondary-rgba-40); border-radius: 20px; letter-spacing: 1px; transition: all 0.3s ease; box-shadow: 0 0 22px var(--secondary-rgba-20), 0 0 44px var(--secondary-rgba-10);">{{ config('site.welcome.about_cta', __('CONTACT US')) }}</a>
                </div>
                @if(config('site.welcome.about_footnote'))
                <div class="mt-auto pt-3 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="1200">
                    <p class="text-2 mb-0 text-start" style="color: #fff !important; opacity: 1; line-height: 1.5; text-align: left;">{{ config('site.welcome.about_footnote') }}</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════════════
     FINANZAS
     ══════════════════════════════════════════════════════════ --}}
<section id="finanzas" class="section border-0 m-0 p-0 welcome-section-fullheight welcome-section-finanzas d-flex flex-column justify-content-center">
    <div class="container py-5 position-relative z-index-2">
        <div class="row mb-5 mb-lg-0">
            <div class="col-12 text-center">
                <h2 class="font-weight-bold text-color-light text-8 text-lg-9 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ config('site.welcome.section2_heading', config('site.tagline', __('Welcome'))) }}</h2>
                <a href="{{ route('front.contact') }}" class="btn font-weight-bold text-3 py-2 px-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="background-color: var(--secondary); color: var(--dark); border: 1.5px solid var(--secondary); border-radius: 50px; letter-spacing: 1px;">{{ config('site.welcome.section2_cta', __('CONTACT US')) }}</a>
            </div>
        </div>
        <div class="row align-items-center py-4 justify-content-end">
            <div class="col-lg-7 d-flex align-items-center justify-content-center mb-5 mb-lg-0 order-2 order-lg-1">
                <img src="{{ asset('cd-project/img/demos/business-consulting/backgrounds/Recurso 1tortacircular.png') }}" class="img-fluid appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="300" alt="Data Visualization" />
            </div>
            <div class="col-12 col-lg-5 col-xl-4 ms-lg-auto ps-lg-5 pe-lg-3 d-flex flex-column justify-content-center order-1 order-lg-2">
                <h3 class="font-weight-bold text-5 mb-4 text-center appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="color: var(--secondary); text-transform: none;">{{ config('site.welcome.process_heading', __('Our Process')) }}</h3>
                @php
                    $steps = config('site.welcome.process_steps', []);
                    if (is_string($steps)) { $steps = json_decode($steps, true) ?? []; }
                @endphp
                @if(!empty($steps))
                <ul class="list-unstyled mb-4 welcome-finanzas-steps text-center">
                    @foreach($steps as $index => $step)
                    <li class="appear-animation mb-3 text-center" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ 500 + ($index * 100) }}">{{ is_array($step) ? ($step['text'] ?? '') : $step }}</li>
                    @endforeach
                </ul>
                @endif
                <p class="text-2 mb-0 appear-animation text-start" data-appear-animation="fadeIn" data-appear-animation-delay="900" style="color: var(--light); opacity: .7; line-height: 1.5;">{{ config('site.welcome.process_description', config('site.description', '')) }}</p>
            </div>
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════════════
     INSTRUMENTOS (Stack Cards) — config-driven
     ══════════════════════════════════════════════════════════ --}}
@php
    $instruments = config('site.welcome.instruments', []);
    if (is_string($instruments)) { $instruments = json_decode($instruments, true) ?? []; }
@endphp
@if(!empty($instruments))
<section class="sc-section" id="instrumentos">
    <div class="sc-header">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-7 text-center">
                    <h2 class="sc-title">{!! config('site.welcome.instruments_heading', __('What We Offer')) !!}</h2>
                    <p class="sc-subtitle">{{ config('site.welcome.instruments_subtitle', '') }}</p>
                </div>
            </div>
        </div>
    </div>
    <div class="sc-track" id="sc-track">
        @foreach($instruments as $index => $instrument)
        <div class="sc-item">
        <div class="sc-card sc-card--{{ ($index % 4) + 1 }}">
            <div class="w-100">
                <div class="row align-items-center g-5">
                    <div class="col-lg-5">
                        <span class="sc-card-num">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                        <h3 class="sc-card-title">{!! str_replace(['\n', "\n"], '<br>', e($instrument['title'] ?? '')) !!}</h3>
                        @if(!empty($instrument['description']))
                        <p class="sc-card-desc">{{ $instrument['description'] }}</p>
                        @endif
                        @if(!empty($instrument['checks']))
                        <ul class="sc-checklist">
                            @foreach($instrument['checks'] as $check)
                            <li>{{ is_array($check) ? ($check['text'] ?? '') : $check }}</li>
                            @endforeach
                        </ul>
                        @endif
                    </div>
                    @if(!empty($instrument['image']))
                    <div class="col-lg-6 offset-lg-1 d-none d-lg-block">
                        <img src="{{ filter_var($instrument['image'], FILTER_VALIDATE_URL) ? $instrument['image'] : asset($instrument['image']) }}" class="img-fluid" alt="{{ strip_tags($instrument['title'] ?? '') }}" style="border: 1.5px solid var(--tertiary-rgba-30); border-radius: 16px; box-shadow: 0 10px 26px rgba(0,0,0,0.22), 0 0 0 1px rgba(180,180,180,0.18) inset;" />
                    </div>
                    @endif
                </div>
            </div>
        </div>
        </div>
        @endforeach
    </div>
</section>

<script>
(function () {
    function initStackCards() {
        var track = document.getElementById('sc-track');
        if (!track) return;
        var items = track.querySelectorAll('.sc-item');
        if (!items.length) return;
        function update() {
            if (window.innerWidth < 992) {
                items.forEach(function (item) { item.style.transform = ''; });
                return;
            }
            var trackRect = track.getBoundingClientRect();
            var trackTop = trackRect.top + window.scrollY;
            var scrolled = window.scrollY - trackTop;
            var vh = window.innerHeight;
            var progress = scrolled / vh;
            items.forEach(function (item, index) {
                var stepsBack = progress - index;
                if (stepsBack <= 0) { item.style.transform = ''; }
                else {
                    var ty = Math.min(stepsBack * 33.33, 100);
                    var sc = Math.max(1 - stepsBack * 0.0667, 0.8);
                    item.style.transform = 'translateY(' + ty.toFixed(2) + 'px) scale(' + sc.toFixed(4) + ')';
                }
            });
        }
        window.addEventListener('scroll', update, { passive: true });
        window.addEventListener('resize', update, { passive: true });
        update();
    }
    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initStackCards); }
    else { initStackCards(); }
})();
</script>
@endif

{{-- ══════════════════════════════════════════════════════════
     EJES CENTRALES (Evolution / Pillars)
     ══════════════════════════════════════════════════════════ --}}
<section class="section overlay overlay-show overlay-color-primary custom-overlay-opacity-95 border-0 m-0 welcome-section-fullheight welcome-section-evolution d-flex flex-column justify-content-center" style="background: url({{ asset('cd-project/img/demos/business-consulting/backgrounds/background-1.jpg') }}); background-size: cover; background-position: center;">
    <div class="container position-relative z-index-2 pt-5">
        <div class="row">
            <div class="col text-center">
                <span class="gf-eyebrow mb-3 d-block">{{ config('site.welcome.evolution_eyebrow', config('site.name')) }}</span>
                <h2 class="font-weight-bold text-color-light line-height-1 mb-4" style="font-size: clamp(2.5rem, 5vw, 3.5rem);">{{ config('site.welcome.evolution_heading', config('site.tagline', __('Welcome'))) }}</h2>
                <p class="text-color-light line-height-9 mx-auto mb-0" style="max-width: 44rem; opacity: 0.75; font-size: 1rem; font-weight: 400;">{{ config('site.welcome.evolution_description', config('site.description', '')) }}</p>
            </div>
        </div>
        <div class="row mt-5 pt-5 pb-2">
            <div class="col-12 text-center mb-5 gf-section-header">
                <h4 class="text-color-light font-weight-bold text-uppercase mb-2" style="font-size: 0.7rem; letter-spacing: 0.2em; color: var(--secondary) !important;">{{ config('site.welcome.pillars_heading', __('Our Core Values')) }}</h4>
                <hr class="gf-divider gf-divider--center" style="background: var(--tertiary-rgba-20);">
            </div>
        </div>
        <div class="row pb-5">
            @php
                $pillars = config('site.welcome.pillars', []);
                if (is_string($pillars)) { $pillars = json_decode($pillars, true) ?? []; }
            @endphp
            @foreach($pillars as $pillar)
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="gf-glass-card text-center">
                    <span class="gf-card-eyebrow">{{ $pillar['eyebrow'] ?? '' }}</span>
                    <h5>{{ $pillar['title'] ?? '' }}</h5>
                    <p>{{ $pillar['text'] ?? '' }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ══════════════════════════════════════════════════════════
     SERVICIOS HOME — Dynamic from DB
     ══════════════════════════════════════════════════════════ --}}
@if(is_module_active('services') && isset($services) && $services->isNotEmpty())
<section class="section border-0 m-0 gf-services-section">
    <div class="container">
        <div class="row mb-5">
            <div class="col-12">
                @php
                    $servicesConfig = get_module_page_header_config('services');
                    $servicesTitle = $servicesConfig['title'] ?? config('cd-system.modules.services.name', __('Services'));
                @endphp
                <span class="gf-eyebrow mb-3 d-block">{{ $servicesTitle }}</span>
                <h2 class="mb-0" style="font-size: clamp(2rem, 4vw, 2.75rem); color: var(--primary);">{{ config('site.welcome.services_heading', __('Why choose')) }} {{ config('site.name') }}</h2>
                <hr class="gf-divider mt-3">
            </div>
        </div>
        <div class="row">
            @foreach($services->take(3) as $service)
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="gf-service-card">
                    @if($service->subtitle)
                    <span class="gf-card-eyebrow">{{ $service->subtitle }}</span>
                    @endif
                    <h4>{{ $service->title }}</h4>
                    @if($service->description)
                    <p>{{ Str::limit(strip_tags($service->description), 155) }}</p>
                    @endif
                    <a href="{{ route('frontend.services.detail', $service->slug) }}" class="gf-card-link">
                        {{ __('Ver más') }} <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        <div class="row mt-5 gf-section-cta">
            <div class="col-12 text-center">
                <a href="{{ route('frontend.services.index') }}" class="btn">{{ config('site.welcome.services_all_cta', __('Ver todos los servicios')) }}</a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ══════════════════════════════════════════════════════════
     CONTACTO SPLIT
     ══════════════════════════════════════════════════════════ --}}
<section id="contact" class="welcome-section-contact d-flex flex-column justify-content-center m-0 pt-0">
    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-lg-6 p-0">
                <section class="section border-0 bg-color-primary h-100 m-0">
                    <div class="row justify-content-end py-5-5 m-0 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="350">
                        <div class="col-half-section col-half-section-right ps-4">
                            <h2 class="text-color-light font-weight-bold text-8 ls-0 mb-3">{{ config('site.welcome.contact_heading', __('Contact Us')) }}</h2>
                            <p class="text-color-light opacity-7 font-weight-light text-3-5 line-height-9">{{ config('site.welcome.contact_subtitle', config('site.description', '')) }}</p>
                            <form class="contact-form form-style-4 form-style-4-border-light-2 form-errors-light pe-lg-5" action="{{ route('front.contact.store') }}" method="POST">
                                @csrf
                                <div class="contact-form-success alert alert-success d-none mt-4">
                                    <strong>{{ __('¡Listo!') }}</strong> {{ __('Tu mensaje fue enviado correctamente.') }}
                                </div>
                                <div class="contact-form-error alert alert-danger d-none mt-4">
                                    <strong>{{ __('Error.') }}</strong> {{ __('No se pudo enviar el mensaje.') }}
                                    <span class="mail-error-message text-1 mt-2 d-block"></span>
                                </div>
                                <div class="row mb-2 mx-0">
                                    <input type="text" class="form-control font-weight-semibold text-color-light px-1 py-3" name="name" placeholder="{{ __('Nombre') }} *" data-msg-required="{{ __('Este campo es obligatorio.') }}" id="welcome-name" value="{{ old('name') }}" required />
                                </div>
                                <div class="row mx-0 mb-3">
                                    <input type="email" class="form-control font-weight-semibold text-color-light px-1 py-3" name="email" placeholder="{{ __('Email') }} *" data-msg-required="{{ __('Este campo es obligatorio.') }}" id="welcome-email" value="{{ old('email') }}" required />
                                </div>
                                <div class="row mb-4 mx-0">
                                    <textarea name="message" id="welcome-message" rows="4" class="form-control font-weight-semibold text-color-light px-1 py-3" placeholder="{{ __('Mensaje') }} *">{{ old('message') }}</textarea>
                                </div>
                                <input type="submit" class="btn font-weight-bold text-3 py-2 px-5" style="background-color: var(--secondary); color: var(--dark); border: none; border-radius: 50px; letter-spacing: 1px; transition: all 0.3s ease;" value="{{ __('Enviar') }}" />
                            </form>
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-lg-6 p-0">
                <section class="section section-no-border bg-dark overflow-hidden h-100 m-0">
                    <div class="row py-5-5 m-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="300">
                        <div class="col-half-section col-half-section-left ps-lg-5">
                            <h2 class="text-color-light font-weight-bold text-8 ls-0 mb-3">{{ config('site.welcome.cta_heading', __('Get in touch with us today')) }}</h2>
                            <p class="text-color-grey line-height-9 text-3-5 mb-5-5">{{ config('site.welcome.cta_description', config('site.description', '')) }}</p>
                            <div class="d-flex align-items-center">
                                <i class="icons icon-phone text-9 text-color-light position-relative bottom-1"></i>
                                <a href="tel:{{ str_replace([' ', '-', '(', ')'], '', config('site.contact.phone')) }}" class="text-4-5 font-weight-bold text-color-light opacity-hover-8 text-decoration-none ps-3-5">{{ config('site.contact.phone') }}</a>
                            </div>
                            <div class="d-flex align-items-center my-5-5">
                                <img width="38" height="38" src="{{ asset('cd-project/img/demos/business-consulting/icons/email.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light'}" />
                                <a href="mailto:{{ config('site.contact.email') }}" class="text-4-5 font-weight-bold text-color-light opacity-hover-8 text-decoration-none ps-3-5">{{ config('site.contact.email') }}</a>
                            </div>
                            <div class="d-flex align-items-center pe-lg-5 mb-5">
                                <img width="38" height="38" src="{{ asset('cd-project/img/demos/business-consulting/icons/map-pin.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light'}" />
                                <p class="text-color-light font-weight-bold text-4-5 mb-0 ps-3-5 pe-lg-5 me-lg-5">{{ config('site.contact.address', '') }}</p>
                            </div>
                            <a href="{{ route('front.about') }}" class="btn font-weight-bold text-3 py-2 px-5" style="background-color: var(--secondary); color: var(--dark); border: none; border-radius: 50px; letter-spacing: 1px; transition: all 0.3s ease;">{{ config('site.welcome.about_cta_label', __('Conócenos')) }}</a>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>

@endsection