{{-- About fields for demo-digital-agency-2 — order matches visual flow --}}

{{-- 1. PAGE HEADER --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Page Header</h4>
    <p class="text-gray-600 fs-7 mb-4">Título que se muestra en el header de la página About.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título de página</label>
            <input type="text" name="about[page_title]" class="form-control form-control-solid" value="{{ old('about.page_title', $siteData['about']['page_title'] ?? '') }}" placeholder="Sobre Nosotros" />
        </div>
    </div>
</div>

{{-- 2. FEATURED BLOCK --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Bloque Destacado</h4>
    <p class="text-gray-600 fs-7 mb-4">Caja primaria con badge y título grande sobre la imagen.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Badge</label>
            <input type="text" name="about[badge]" class="form-control form-control-solid" value="{{ old('about.badge', $siteData['about']['badge'] ?? '') }}" placeholder="Quiénes Somos" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Título principal</label>
            <input type="text" name="about[main_title]" class="form-control form-control-solid" value="{{ old('about.main_title', $siteData['about']['main_title'] ?? '') }}" placeholder="Soluciones que funcionan" />
        </div>
    </div>
</div>

{{-- 3. CONTENT --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Contenido Principal</h4>
    <p class="text-gray-600 fs-7 mb-4">Textos descriptivos debajo de las imágenes.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Subtítulo / Descripción corta</label>
            <textarea name="about[main_subtitle]" class="form-control form-control-solid" rows="2">{{ old('about.main_subtitle', $siteData['about']['main_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Descripción 1</label>
            <textarea name="about[description_1]" class="form-control form-control-solid" rows="2">{{ old('about.description_1', $siteData['about']['description_1'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 4. COUNTERS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Contadores</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección oscura con números animados. Formato JSON: array de objetos con value, label, append.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Counters (JSON)</label>
            @php
                $countersRaw = old('about.counters', $siteData['about']['counters'] ?? '');
                if (is_array($countersRaw)) { $countersRaw = json_encode($countersRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); }
            @endphp
            <textarea name="about[counters]" class="form-control form-control-solid" rows="4" placeholder='[{"value":"500","label":"Proyectos","append":"+"},{"value":"10","label":"Años","append":"+"}]'>{{ $countersRaw }}</textarea>
            <span class="form-text">Cada objeto: {"value": "500", "label": "Proyectos", "append": "+"}. Máximo 4 contadores.</span>
        </div>
    </div>
</div>

{{-- 5. MISSION / VALUES --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. Misión / Valores</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección con logo, quote y texto secundario.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Quote / Texto destacado</label>
            <textarea name="about[description_2]" class="form-control form-control-solid" rows="3">{{ old('about.description_2', $siteData['about']['description_2'] ?? '') }}</textarea>
            <span class="form-text">Texto grande en tipografía serif (Lora).</span>
        </div>
        <div class="col-12">
            <label class="form-label">Texto secundario</label>
            <textarea name="about[secondary_text]" class="form-control form-control-solid" rows="2">{{ old('about.secondary_text', $siteData['about']['secondary_text'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 6. CTA --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">6. CTA Final</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección de llamada a la acción al final de about.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">CTA botón</label>
            <input type="text" name="about[cta_label]" class="form-control form-control-solid" value="{{ old('about.cta_label', $siteData['about']['cta_label'] ?? '') }}" placeholder="Contacto" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">CTA título</label>
            <input type="text" name="about[cta_title]" class="form-control form-control-solid" value="{{ old('about.cta_title', $siteData['about']['cta_title'] ?? '') }}" placeholder="Estamos listos para ayudarte" />
        </div>
    </div>
</div>