{{-- About fields for demo-urban-development — order matches visual flow --}}

{{-- 1. COMMITMENT / INTRO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Sección Compromiso</h4>
    <p class="text-gray-600 fs-7 mb-4">Intro de la página Nosotros: label, títulos y descripción.</p>
    <div class="row g-4 mb-6">
        <div class="col-md-4">
            <label class="form-label">Label página (page header)</label>
            <input type="text" name="about[page_label]" class="form-control form-control-solid" value="{{ old('about.page_label', $siteData['about']['page_label'] ?? '') }}" placeholder="SOBRE NOSOTROS" />
        </div>
        <div class="col-md-6">
            <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="Innovación, Sostenibilidad y Comunidad" />
        </div>
        <div class="col-md-6">
            <label class="form-label">Título 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="Nosotros" />
        </div>
        <div class="col-12">
            <label class="form-label">Descripción principal</label>
            <textarea name="about[main_subtitle]" class="form-control form-control-solid" rows="3">{{ old('about.main_subtitle', $siteData['about']['main_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-md-6">
            <label class="form-label">Imagen de la desarrolladora</label>
            <div class="mb-2"><img src="{{ site_asset_url('about_image_1', 'cd-project/img/demos/urban-development/about/about-1.jpg') }}" style="height:96px;width:auto;max-width:100%;object-fit:cover;border-radius:6px;border:1px solid #e8e8e8" alt="Imagen actual" /></div>
            <input type="file" name="assets_about_image_1_file" accept="image/*" class="form-control form-control-solid" />
            <span class="form-text">Foto principal de la página Nosotros (junto a la intro).</span>
        </div>
    </div>
</div>

{{-- 2. MISIÓN / VISIÓN / VALORES --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Misión, Visión y Valores</h4>
    <p class="text-gray-600 fs-7 mb-4">Tres columnas con título y texto. Formato JSON array.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Valores (JSON)</label>
            @php $valuesRaw = old('about.values', $siteData['about']['values'] ?? ''); @endphp
            <textarea name="about[values]" class="form-control form-control-solid font-monospace" rows="6" placeholder='[{"title":"Nuestra Misión","text":"..."},{"title":"Nuestra Visión","text":"..."},{"title":"Valores","text":"..."}]'>{{ is_array($valuesRaw) ? json_encode($valuesRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : $valuesRaw }}</textarea>
            <span class="form-text">Array JSON con objetos {title, text}. Si se deja vacío, se usa el texto secundario como fallback.</span>
        </div>
        <div class="col-12">
            <label class="form-label">Texto secundario (fallback)</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>

{{-- 3. COUNTERS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Counters</h4>
    <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'] ?? ''); @endphp
            <textarea name="about[counters]" class="form-control form-control-solid font-monospace" rows="4" placeholder='[{"value":"500","label":"Propiedades","append":"+"}]'>{{ is_array($countersRaw) ? json_encode($countersRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) : $countersRaw }}</textarea>
            <span class="form-text">Máximo 4 items: {"value":"500","label":"Propiedades","append":"+"}</span>
        </div>
    </div>
</div>

{{-- 4. TEAM --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Equipo</h4>
    <div class="row g-4 mb-6">
        <div class="col-md-6">
            <label class="form-label">Título sección</label>
            <input type="text" name="about[team_title]" class="form-control form-control-solid" value="{{ old('about.team_title', $siteData['about']['team_title'] ?? '') }}" placeholder="NUESTRO EQUIPO" />
        </div>
    </div>
</div>

{{-- 5. CTA --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. CTA</h4>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Subtítulo CTA</label>
            <input type="text" name="about[cta_subtitle]" class="form-control form-control-solid" value="{{ old('about.cta_subtitle', $siteData['about']['cta_subtitle'] ?? '') }}" placeholder="Nuestro equipo está capacitado para encontrar el lugar que necesitas." />
        </div>
    </div>
</div>