@extends('layouts.public')

@section('content')
@php
    $hero = $blocksByKey['hero'] ?? null;
    $benefits = $blocksByKey['beneficios'] ?? null;
    $tools = $blocksByKey['herramientas'] ?? null;
    $plans = $blocksByKey['planes'] ?? null;
    $faq = $blocksByKey['faq'] ?? null;
    $cta = $blocksByKey['cta-final'] ?? null;
    $leadForm = $forms['solicitud-comercial'] ?? null;
@endphp

@if($hero)
<section class="hero-panel bg-brand text-white p-4 p-lg-5 mb-5">
    <div class="row align-items-center g-4">
        <div class="col-lg-7">
            <span class="badge bg-white text-dark mb-3">{{ $branding['nombre_visible'] ?? 'AFECR' }}</span>
            <h1 class="display-5 fw-bold mb-3">{{ $hero['titulo'] }}</h1>
            <p class="lead mb-3">{{ $hero['subtitulo'] }}</p>
            @if(!empty($hero['contenido']))<p class="mb-4 text-white-50">{{ $hero['contenido'] }}</p>@endif
            <div class="d-flex flex-wrap gap-3">
                @foreach(($hero['config']['buttons'] ?? []) as $button)
                    <a href="{{ $button['url'] }}" class="btn {{ $loop->first ? 'btn-light' : 'btn-outline-light' }} btn-lg">{{ $button['text'] }}</a>
                @endforeach
            </div>
        </div>
        <div class="col-lg-5">
            <div class="bg-white text-dark rounded-4 p-4 h-100">
                <div class="small text-uppercase text-muted fw-semibold mb-2">Lo que ya queda listo</div>
                <ul class="list-unstyled mb-0 d-grid gap-3">
                    <li><strong>Página principal conectada</strong><br><span class="text-muted">Se arma desde datos reales y bloques activos.</span></li>
                    <li><strong>Planes y herramientas</strong><br><span class="text-muted">Presentados con mensaje claro y comercial.</span></li>
                    <li><strong>Solicitudes registradas</strong><br><span class="text-muted">Cada contacto queda guardado para seguimiento.</span></li>
                </ul>
            </div>
        </div>
    </div>
</section>
@endif

@if($benefits)
<section class="mb-5">
    <div class="text-center mb-4">
        <h2 class="section-title fw-bold">{{ $benefits['titulo'] }}</h2>
        <p class="text-muted mb-0">{{ $benefits['subtitulo'] }}</p>
    </div>
    <div class="row g-4">
        @foreach(($benefits['config']['items'] ?? []) as $item)
            <div class="col-md-4">
                <div class="card section-card h-100 p-4">
                    <div class="icon-bullet mb-3">{{ $loop->iteration }}</div>
                    <h3 class="h5 fw-bold">{{ $item['title'] }}</h3>
                    <p class="text-muted mb-0">{{ $item['text'] }}</p>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif

@if($tools)
<section class="mb-5">
    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-3 mb-4">
        <div>
            <h2 class="section-title fw-bold mb-2">{{ $tools['titulo'] }}</h2>
            <p class="text-muted mb-0">{{ $tools['subtitulo'] }}</p>
        </div>
        <a href="{{ $tools['config']['cta']['url'] ?? '/herramientas' }}" class="btn btn-outline-brand">{{ $tools['config']['cta']['text'] ?? 'Ver más' }}</a>
    </div>
    <div class="row g-4">
        @foreach(($tools['config']['items'] ?? []) as $item)
            <div class="col-lg-4">
                <div class="card section-card h-100 p-4">
                    <h3 class="h5 fw-bold">{{ $item['title'] }}</h3>
                    <p class="text-muted mb-0">{{ $item['text'] }}</p>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif

@if($plans)
<section class="mb-5">
    <div class="text-center mb-4">
        <h2 class="section-title fw-bold">{{ $plans['titulo'] }}</h2>
        <p class="text-muted mb-0">{{ $plans['subtitulo'] }}</p>
    </div>
    <div class="row g-4">
        @foreach(($plans['config']['items'] ?? []) as $item)
            <div class="col-lg-4">
                <div class="card section-card h-100 p-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3 class="h4 fw-bold mb-0">{{ $item['nombre'] }}</h3>
                        <span class="plan-badge">{{ $item['etiqueta'] }}</span>
                    </div>
                    <p class="text-muted">{{ $item['resumen'] }}</p>
                    <div class="fw-semibold mb-3">{{ $item['precio'] }}</div>
                    <ul class="small text-muted ps-3 mb-4">
                        @foreach(($item['caracteristicas'] ?? []) as $feature)
                            <li class="mb-2">{{ $feature }}</li>
                        @endforeach
                    </ul>
                    <a href="/planes/{{ $item['slug'] }}" class="btn btn-outline-brand w-100">Ver detalle</a>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif

@if($faq)
<section class="mb-5">
    <div class="text-center mb-4">
        <h2 class="section-title fw-bold">{{ $faq['titulo'] }}</h2>
        <p class="text-muted mb-0">{{ $faq['subtitulo'] }}</p>
    </div>
    <div class="accordion" id="faqAccordion">
        @foreach(($faq['config']['items'] ?? []) as $item)
            <div class="accordion-item border-0 rounded-4 overflow-hidden mb-3 shadow-sm">
                <h3 class="accordion-header">
                    <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $loop->iteration }}">
                        {{ $item['question'] }}
                    </button>
                </h3>
                <div id="faq{{ $loop->iteration }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#faqAccordion">
                    <div class="accordion-body text-muted">{{ $item['answer'] }}</div>
                </div>
            </div>
        @endforeach
    </div>
</section>
@endif

@if($cta)
<section class="card section-card p-4 p-lg-5">
    <div class="row g-4 align-items-center">
        <div class="col-lg-6">
            <h2 class="section-title fw-bold">{{ $cta['titulo'] }}</h2>
            <p class="text-muted mb-3">{{ $cta['subtitulo'] }}</p>
            @if(!empty($cta['contenido']))<p class="mb-0">{{ $cta['contenido'] }}</p>@endif
        </div>
        <div class="col-lg-6">
            @if($leadForm)
                @include('public.partials.form', ['form' => $leadForm, 'pageId' => $page['id']])
            @endif
        </div>
    </div>
</section>
@endif
@endsection