{{-- /mentor — la página tesis (docs/paginas/mentor.md v2; G1 decidido:
     determinista). Si una frase de aquí se contradice con otra página, manda
     ésta. Restricciones §0: se cuenta desde la cocina de casa, sin validación
     que anunciar, sin publicar la ficha. --}}
@extends('layouts.web')

@php
    $app = \App\Support\Superficie::base();
    // El copy vive en lang/{idioma}/pagina_mentor.php.
    $t = fn (string $k) => __("pagina_mentor.$k");
@endphp

@section('seo')
<x-seo :title="__('pagina_mentor.seo.title')" :description="__('pagina_mentor.seo.desc')" :canonical="ruta('mentor')" />
@endsection

@push('head')
<link rel="stylesheet" href="{{ asset_v('landing/pages/mentor.css') }}">
@php($ld = ['@context' => 'https://schema.org', '@type' => 'BreadcrumbList', 'itemListElement' => [
    ['@type' => 'ListItem', 'position' => 1, 'name' => __('general.nav.dashboard') === 'Dashboard' ? 'Inicio' : 'Home', 'item' => url('/')],
    ['@type' => 'ListItem', 'position' => 2, 'name' => __('pagina_mentor.crumb'), 'item' => ruta('mentor')],
]])
<script type="application/ld+json">{!! json_encode($ld, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
@endpush

@section('content')
{{-- §2 Hero --}}
<section class="section--tight" style="padding-top:56px">
  <div class="wrap" style="max-width:820px">
    <p class="eyebrow">{{ $t('hero.eyebrow') }}</p>
    <h1 style="margin:.3rem 0 0">{{ $t('hero.title') }}</h1>
    <p class="lede" style="margin-top:14px">{{ $t('hero.lede') }}</p>
    <div class="hero__cta" style="margin-top:22px">
      <a class="btn btn--primary btn--lg" href="{{ ruta('afinador') }}">{{ $t('hero.cta') }}</a>
      <a class="btn btn--ghost btn--lg" href="{{ $app }}/register" data-app-link>{{ $t('hero.cta2') }}</a>
    </div>
    <p style="margin-top:12px;font-size:13.5px;color:var(--ink-400)">{{ $t('hero.pie') }}</p>
  </div>
</section>

{{-- §3 El problema --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:820px">
    <p class="eyebrow">{{ $t('problema.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 12px">{{ $t('problema.title') }}</h2>
    <p style="color:var(--ink-700);line-height:1.7;margin:0 0 12px">{{ $t('problema.p1') }}</p>
    <p style="color:var(--ink-700);line-height:1.7;margin:0">{{ $t('problema.p2') }}</p>
  </div>
</section>

{{-- §4 Qué le dices y qué te devuelve --}}
<section class="section">
  <div class="wrap" style="max-width:900px">
    <p class="eyebrow">{{ $t('tres.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 18px">{{ $t('tres.title') }}</h2>
    <div class="mentor-tres">
      <div><h3>{{ $t('tres.t1') }}</h3><p>{{ $t('tres.p1') }}</p></div>
      <div><h3>{{ $t('tres.t2') }}</h3><p>{{ $t('tres.p2') }}</p></div>
      <div><h3>{{ $t('tres.t3') }}</h3><p>{{ $t('tres.p3') }}</p></div>
    </div>

    <h3 style="font-family:var(--font-display);margin:26px 0 10px">{{ $t('devuelve.title') }}</h3>
    <p style="color:var(--ink-700);line-height:1.7;margin:0 0 16px">{!! $t('devuelve.p') !!}</p>
    <x-mentor.note>{{ $t('devuelve.nota') }}</x-mentor.note>
    <p style="margin-top:16px"><a href="{{ ruta('afinador') }}" style="color:var(--green-700);font-weight:600">{{ $t('devuelve.enlace') }}</a></p>
  </div>
</section>

{{-- §5 Una tanda, de principio a fin — línea de tiempo con las tarjetas reales --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:760px">
    <p class="eyebrow">{{ $t('hitos.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 22px">{{ $t('hitos.title') }}</h2>

    <div class="hito">
      <p class="hito__dia">{{ $t('hitos.d0') }}</p>
      <p class="hito__parrafo"><x-mentor.emblem class="hito__emblema" /> {{ $t('hitos.d0_t') }}</p>
    </div>
    <div class="hito">
      <p class="hito__dia">{{ $t('hitos.d4') }}</p>
      <x-mentor.note>{{ $t('hitos.d4_t') }}</x-mentor.note>
    </div>
    <div class="hito hito--clave">
      <p class="hito__dia">{{ $t('hitos.d6') }}</p>
      <x-mentor.note>{{ $t('hitos.d6_t') }}</x-mentor.note>
      <p class="hito__nota">{!! $t('hitos.d6_nota') !!}</p>
    </div>
    <div class="hito">
      <p class="hito__dia">{{ $t('hitos.d7') }}</p>
      <x-mentor.alert variant="celebrate" kicker="{{ $t('hitos.d7_kicker') }}" cta="{{ $t('hitos.d7_cta') }}" href="{{ $app }}/register">{{ $t('hitos.d7_t') }}</x-mentor.alert>
    </div>
    <div class="hito">
      <p class="hito__dia">{{ $t('hitos.d9') }}</p>
      <p class="hito__parrafo"><x-mentor.emblem class="hito__emblema" /> {{ $t('hitos.d9_t') }}</p>
    </div>

    <p style="color:var(--ink-700);line-height:1.7;margin-top:20px">{{ $t('hitos.cierre') }}</p>
  </div>
</section>

{{-- §6 Los dos aprendizajes --}}
<section class="section">
  <div class="wrap" style="max-width:900px">
    <p class="eyebrow">{{ $t('aprende.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 18px">{{ $t('aprende.title') }}</h2>
    <div class="mentor-dos">
      <div>
        <h3>{{ $t('aprende.dentro') }} <span>{{ $t('aprende.dentro_span') }}</span></h3>
        <p>{{ $t('aprende.dentro_p') }}</p>
      </div>
      <div>
        <h3>{{ $t('aprende.entre') }} <span>{{ $t('aprende.entre_span') }}</span></h3>
        <p>{{ $t('aprende.entre_p') }}</p>
        <p>{{ $t('aprende.entre_p2') }} <a href="{{ ruta('pro') }}" style="color:var(--green-700)">{{ $t('aprende.planes') }}</a></p>
      </div>
    </div>

    <div class="pro-compara" style="margin-top:24px">
      <div>
        <p class="pro-compara__etiqueta">{{ $t('aprende.sin') }}</p>
        <x-mentor.note>{{ $t('aprende.sin_t') }}</x-mentor.note>
      </div>
      <div>
        <p class="pro-compara__etiqueta">{{ $t('aprende.con') }}</p>
        <x-mentor.note>{{ $t('aprende.con_t') }}</x-mentor.note>
      </div>
    </div>
  </div>
</section>

{{-- §7 Por qué te puedes fiar --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:900px">
    <p class="eyebrow">{{ $t('fiar.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 18px">{{ $t('fiar.title') }}</h2>
    <div class="mentor-fiar">
      <div><h3>{{ $t('fiar.t1') }}</h3><p>{{ $t('fiar.p1') }}</p></div>
      <div><h3>{{ $t('fiar.t2') }}</h3><p>{{ $t('fiar.p2') }}</p></div>
      <div><h3>{{ $t('fiar.t3') }}</h3><p>{{ $t('fiar.p3') }}</p></div>
      <div><h3>{{ $t('fiar.t4') }}</h3><p>{{ $t('fiar.p4') }}</p></div>
    </div>
  </div>
</section>

{{-- §7 bis Fundadores --}}
<section class="section--tight">
  <div class="wrap" style="max-width:760px;padding-top:30px;padding-bottom:30px">
    <h2 style="margin:0 0 10px">{{ $t('fundadores.title') }}</h2>
    <p style="color:var(--ink-700);line-height:1.7;margin:0 0 16px">{{ $t('fundadores.p') }}</p>
    <a class="btn btn--primary" href="{{ url('/') }}#fundadores">{{ $t('fundadores.cta') }}</a>
  </div>
</section>

{{-- §8 Lo que el mentor no es (G1: determinista, se publica tal cual) --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap" style="max-width:820px">
    <p class="eyebrow">{{ $t('noes.eyebrow') }}</p>
    <h2 style="margin:.2rem 0 18px">{{ $t('noes.title') }}</h2>
    <div class="mentor-noes">
      <div><h3>{{ $t('noes.t1') }}</h3><p>{{ $t('noes.p1') }}</p></div>
      <div><h3>{{ $t('noes.t2') }}</h3><p>{{ $t('noes.p2') }}</p></div>
      <div><h3>{{ $t('noes.t3') }}</h3><p>{{ $t('noes.p3') }}</p></div>
    </div>
  </div>
</section>

{{-- §9 El sello --}}
<section class="section--tight">
  <div class="wrap center" style="max-width:600px;padding-top:34px;padding-bottom:34px">
    <span class="mentor-sello"><x-mentor.emblem /></span>
    <h2 style="margin:14px 0 8px">{{ $t('sello.title') }}</h2>
    <p style="color:var(--ink-500);line-height:1.65;margin:0">{{ $t('sello.p') }}</p>
  </div>
</section>

{{-- §10 Cierre --}}
<section class="section" style="background:var(--bg-canvas-deep)">
  <div class="wrap center" style="max-width:700px">
    <h2>{{ $t('cierre.title') }}</h2>
    <p class="lede" style="margin-top:10px">{{ $t('cierre.lede') }}</p>
    <div class="hero__cta center" style="justify-content:center;margin-top:20px">
      <a class="btn btn--primary btn--lg" href="{{ ruta('afinador') }}">{{ $t('cierre.cta') }}</a>
      <a class="btn btn--ghost btn--lg" href="{{ $app }}/register" data-app-link>{{ $t('cierre.cta2') }}</a>
    </div>
  </div>
</section>
@endsection