{{-- 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>
</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 — dejar vacío para usar los párrafos 4 y 5 predeterminados)</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>

{{-- 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="4">{{ $countersRaw }}</textarea>
            <span class="form-text">Cada objeto: {"value": "45", "append": "+", "label": "Proyectos entregados"}. 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">
            <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">
            <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>