@extends('layout.front.master')

@section('title', __('Sobre mí') . ' | ' . config('site.name'))
@section('description', config('site.about.meta_description', config('site.seo.description')))
@section('og_title', config('site.about.page_title', __('Sobre mí')))
@section('og_description', config('site.about.meta_description', config('site.seo.description')))
@section('og_image', brand_og_image())
@section('og_type', 'profile')
@section('og_url', url()->current())

@section('content')

@php
    $aboutDefaults = [
        'page_eyebrow'   => __('Sobre mí'),
        'page_title'     => config('site.name', __('Sobre mí')),
        'page_subtitle'  => config('site.tagline', ''),
        'experience_heading'    => __('Trayectoria'),
        'experience_subheading' => __('Algunos hitos del camino.'),
        'tools_heading'    => __('Stack'),
        'tools_subheading' => __('Software del día a día.'),
        'process_heading'    => __('Proceso'),
        'process_subheading' => __('Cómo trabajamos juntos.'),
    ];
    $about = function($key, $default = null) use ($aboutDefaults) {
        return config('site.about.' . $key, $aboutDefaults[$key] ?? $default);
    };
@endphp

<div role="main" class="main">

    {{-- HERO de página --}}
    <section class="section section-no-border bg-transparent m-0 cp-page-hero">
        <div class="container">
            <div class="row align-items-end min-vh-50">
                <div class="col-lg-10">
                    <p class="cp-eyebrow mb-3">{{ $about('page_eyebrow') }}</p>
                    <h1 class="cp-page-hero__title">{{ $about('page_title') }}</h1>
                    @if($about('page_subtitle'))
                        <p class="cp-page-hero__subtitle">{{ $about('page_subtitle') }}</p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- BIO --}}
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    @foreach([1,2,3,4] as $i)
                        @if($about("bio_paragraph_{$i}"))
                            <p class="cp-bio__paragraph">{{ $about("bio_paragraph_{$i}") }}</p>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- EXPERIENCIA --}}
    @if($about('exp_1_title') || $about('exp_2_title') || $about('exp_3_title'))
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="cp-section__head mb-5">
                <h2 class="cp-section__title">{{ $about('experience_heading') }}</h2>
                <p class="cp-section__lead">{{ $about('experience_subheading') }}</p>
            </div>

            <ol class="cp-timeline">
                @foreach([1,2,3] as $i)
                    @if($about("exp_{$i}_title"))
                        <li class="cp-timeline__item">
                            <span class="cp-timeline__year">{{ $about("exp_{$i}_year") }}</span>
                            <h3 class="cp-timeline__title">{{ $about("exp_{$i}_title") }}</h3>
                            <p class="cp-timeline__description">{{ $about("exp_{$i}_description") }}</p>
                        </li>
                    @endif
                @endforeach
            </ol>
        </div>
    </section>
    @endif

    {{-- STACK --}}
    @if($about('tool_1') || $about('tool_2'))
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="cp-section__head mb-5">
                <h2 class="cp-section__title">{{ $about('tools_heading') }}</h2>
                <p class="cp-section__lead">{{ $about('tools_subheading') }}</p>
            </div>
            <ul class="cp-tools">
                @foreach([1,2,3,4,5,6] as $i)
                    @if($about("tool_{$i}"))
                        <li class="cp-tools__tag">{{ $about("tool_{$i}") }}</li>
                    @endif
                @endforeach
            </ul>
        </div>
    </section>
    @endif

    {{-- PROCESO --}}
    @if($about('process_1_title'))
    <section class="section section-no-border bg-transparent border-0 cp-section py-6">
        <div class="container">
            <div class="cp-section__head mb-5">
                <h2 class="cp-section__title">{{ $about('process_heading') }}</h2>
                <p class="cp-section__lead">{{ $about('process_subheading') }}</p>
            </div>

            <div class="row g-4">
                @foreach([1,2,3,4] as $i)
                    @if($about("process_{$i}_title"))
                        <div class="col-md-6 col-lg-3">
                            <div class="cp-process-card h-100">
                                <div class="cp-process-card__num">0{{ $i }}</div>
                                <h3 class="cp-process-card__title">{{ $about("process_{$i}_title") }}</h3>
                                <p class="cp-process-card__description">{{ $about("process_{$i}_description") }}</p>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- CTA --}}
    <section class="section section-no-border border-0 m-0 py-6 cp-cta-section">
        <div class="container text-center">
            <h2 class="cp-cta-section__title mb-4">{{ __('¿Hablamos?') }}</h2>
            <a href="/contact" class="btn btn-cta btn-rounded font-weight-bold text-2 text-uppercase px-5 btn-py-3">
                {{ __('Contactame') }}
            </a>
        </div>
    </section>

</div>
@endsection