{{-- About fields for demo-real-estate — 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">Primera sección de la página About con watermark, badge, título y descripción.</p>
    <div class="row g-4 mb-6">
        <div class="col-md-4">
            <label class="form-label">Watermark (texto grande de fondo)</label>
            <input type="text" name="about[watermark]" class="form-control form-control-solid" value="{{ old('about.watermark', $siteData['about']['watermark'] ?? '') }}" placeholder="Ej: INMOBILIARIA, ARQUITECTURA" />
            <span class="form-text">Texto decorativo grande que aparece al fondo. Dejá vacío para no mostrar.</span>
        </div>
        <div class="col-md-4">
            <label class="form-label">Badge</label>
            <input type="text" name="about[commitment_badge]" class="form-control form-control-solid" value="{{ old('about.commitment_badge', $siteData['about']['commitment_badge'] ?? '') }}" placeholder="NUESTRO COMPROMISO" />
        </div>
        <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>
</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 usan los textos secundario y terciario como fallback.</span>
        </div>
        <div class="col-md-6">
            <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 class="col-md-6">
            <label class="form-label">Texto terciario (opcional)</label>
            <textarea name="about[tertiary_text]" class="form-control form-control-solid" rows="2">{{ old('about.tertiary_text', $siteData['about']['tertiary_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>