{{-- About fields for demo-accounting-1 — ALL editable fields matching the blade --}}

{{-- 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. Encabezado de página</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Heading principal</label>
            <input type="text" name="about[page_heading]" class="form-control form-control-solid" value="{{ old('about.page_heading', $siteData['about']['page_heading'] ?? '') }}" placeholder="Acompañamiento digital real, desde Tucumán" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Meta description (SEO)</label>
            <input type="text" name="about[meta_description]" class="form-control form-control-solid" value="{{ old('about.meta_description', $siteData['about']['meta_description'] ?? '') }}" placeholder="Conocé nuestra historia, misión y valores..." />
            <span class="form-text">Aparece como meta description en los resultados de Google y Open Graph.</span>
        </div>
    </div>
</div>

{{-- 2. HISTORIA --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Nuestra Historia</h4>
    <p class="text-gray-600 fs-7 mb-4">4 párrafos. Se muestran en la sección principal del About.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Párrafo 1 (destacado, más grande — HTML permitido)</label>
            <textarea name="about[story_1]" class="form-control form-control-solid" rows="3">{{ old('about.story_1', $siteData['about']['story_1'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Párrafo 2 (HTML permitido)</label>
            <textarea name="about[story_2]" class="form-control form-control-solid" rows="3">{{ old('about.story_2', $siteData['about']['story_2'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Párrafo 3 (HTML permitido)</label>
            <textarea name="about[story_3]" class="form-control form-control-solid" rows="3">{{ old('about.story_3', $siteData['about']['story_3'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Párrafo 4 (HTML permitido)</label>
            <textarea name="about[story_4]" class="form-control form-control-solid" rows="3">{{ old('about.story_4', $siteData['about']['story_4'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 2.1 FIRMA / AUTOR DEL STORY --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2.1 Firma del autor (al pie del story)</h4>
    <p class="text-gray-600 fs-7 mb-4">Aparece debajo de los 4 párrafos como atribución (logo + nombre + ubicación).</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Nombre / Autor del story</label>
            <input type="text" name="about[author_name]" class="form-control form-control-solid" value="{{ old('about.author_name', $siteData['about']['author_name'] ?? '') }}" placeholder="Equipo de la Fundación" />
            <span class="form-text">Si lo dejás vacío, se usa el nombre del sitio.</span>
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Ubicación</label>
            <input type="text" name="about[author_location]" class="form-control form-control-solid" value="{{ old('about.author_location', $siteData['about']['author_location'] ?? '') }}" placeholder="BUENOS AIRES, ARGENTINA" />
            <span class="form-text">Texto en mayúsculas, color primario. Ej: "TUCUMÁN, ARGENTINA".</span>
        </div>
    </div>
</div>

{{-- 2.2 IMÁGENES INSTITUCIONALES --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2.2 Galería del About (3 imágenes)</h4>
    <p class="text-gray-600 fs-7 mb-4">Se muestran en composición superpuesta a la derecha del story (solo desktop).</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Imagen 1 (principal, arriba derecha)</label>
            <input type="text" name="about[image_1]" class="form-control form-control-solid" value="{{ old('about.image_1', $siteData['about']['image_1'] ?? '') }}" placeholder="cd-project/img/demos/accounting-1/about/about-1.jpg" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Imagen 2 (medio izquierda)</label>
            <input type="text" name="about[image_2]" class="form-control form-control-solid" value="{{ old('about.image_2', $siteData['about']['image_2'] ?? '') }}" placeholder="cd-project/img/demos/accounting-1/about/about-2.jpg" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Imagen 3 (abajo derecha)</label>
            <input type="text" name="about[image_3]" class="form-control form-control-solid" value="{{ old('about.image_3', $siteData['about']['image_3'] ?? '') }}" placeholder="cd-project/img/demos/accounting-1/about/about-3.jpg" />
        </div>
        <div class="col-12">
            <label class="form-label">Alt text de las 3 imágenes (SEO + accesibilidad)</label>
            <input type="text" name="about[images_alt]" class="form-control form-control-solid" value="{{ old('about.images_alt', $siteData['about']['images_alt'] ?? '') }}" placeholder="Equipo de la fundación en acción comunitaria" />
            <span class="form-text">Se aplica a las 3 imágenes. Importante para SEO.</span>
        </div>
    </div>
</div>

{{-- 3. NÚMEROS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Números / Contadores</h4>
    <p class="text-gray-600 fs-7 mb-4">Contadores animados con datos clave.</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="6">{{ $countersRaw }}</textarea>
            <span class="form-text">Array de objetos. Cada uno: <code>{"value": "500", "suffix": "+", "label": "Beneficiarios", "subtitle": "En programas activos"}</code>. Máximo 3.</span>
        </div>
    </div>
</div>

{{-- 4. APPROACH --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Cómo trabajamos (Approach)</h4>
    <p class="text-gray-600 fs-7 mb-4">Badge, heading, subtítulo y 3 tarjetas numeradas.</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[approach_badge]" class="form-control form-control-solid" value="{{ old('about.approach_badge', $siteData['about']['approach_badge'] ?? '') }}" placeholder="ACOMPAÑAMIENTO DIGITAL" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Heading</label>
            <input type="text" name="about[approach_heading]" class="form-control form-control-solid" value="{{ old('about.approach_heading', $siteData['about']['approach_heading'] ?? '') }}" placeholder="Cómo trabajamos" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Subtítulo</label>
            <textarea name="about[approach_subtitle]" class="form-control form-control-solid" rows="2">{{ old('about.approach_subtitle', $siteData['about']['approach_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">CTA al pie del approach</label>
            <input type="text" name="about[approach_cta]" class="form-control form-control-solid" value="{{ old('about.approach_cta', $siteData['about']['approach_cta'] ?? '') }}" placeholder="Conocé nuestros programas" />
            <span class="form-text">Texto del botón link a /services.</span>
        </div>
        <div class="col-12">
            <label class="form-label">Approach cards (JSON)</label>
            @php
                $approachRaw = old('about.approach', $siteData['about']['approach'] ?? '');
                if (is_array($approachRaw)) { $approachRaw = json_encode($approachRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); }
            @endphp
            <textarea name="about[approach]" class="form-control form-control-solid" rows="6">{{ $approachRaw }}</textarea>
            <span class="form-text">Cada objeto: {"number": "01", "title": "Escuchamos", "text": "Descripción..."}. Máximo 3.</span>
        </div>
    </div>
</div>

{{-- 5. CTA FINAL --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. CTA Final</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Heading</label>
            <input type="text" name="about[cta_heading]" class="form-control form-control-solid" value="{{ old('about.cta_heading', $siteData['about']['cta_heading'] ?? '') }}" placeholder="¿Tiene sentido trabajar juntos?" />
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo</label>
            <textarea name="about[cta_subtitle]" class="form-control form-control-solid" rows="2">{{ old('about.cta_subtitle', $siteData['about']['cta_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Botón principal</label>
            <input type="text" name="about[cta_button_label]" class="form-control form-control-solid" value="{{ old('about.cta_button_label', $siteData['about']['cta_button_label'] ?? '') }}" placeholder="Agendar reunión" />
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Botón WhatsApp</label>
            <input type="text" name="about[whatsapp_label]" class="form-control form-control-solid" value="{{ old('about.whatsapp_label', $siteData['about']['whatsapp_label'] ?? '') }}" placeholder="WhatsApp" />
        </div>
    </div>
</div>