{{-- About fields for demo-business-consulting — order matches visual flow --}}

{{-- 1. HERO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Hero About</h4>
    <p class="text-gray-600 fs-7 mb-4">Banner con gradiente en 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="About Us" />
        </div>
        <div class="col-12">
            <label class="form-label">Hero heading (HTML permitido)</label>
            <textarea name="about[hero_heading]" class="form-control form-control-solid" rows="2">{{ old('about.hero_heading', $siteData['about']['hero_heading'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Hero subtítulo</label>
            <textarea name="about[hero_subtitle]" class="form-control form-control-solid" rows="2">{{ old('about.hero_subtitle', $siteData['about']['hero_subtitle'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 2. INTRO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Introducción</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección oscura con párrafos descriptivos e imagen.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Descripción 1 (principal, HTML permitido)</label>
            <textarea name="about[description_1]" class="form-control form-control-solid" rows="3">{{ old('about.description_1', $siteData['about']['description_1'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Descripción 2</label>
            <textarea name="about[description_2]" class="form-control form-control-solid" rows="2">{{ old('about.description_2', $siteData['about']['description_2'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Descripción 3 (opcional — dejar vacío para ocultar)</label>
            <textarea name="about[description_3]" class="form-control form-control-solid" rows="2">{{ old('about.description_3', $siteData['about']['description_3'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Imagen de la sección</label>
            @php
                $introImage = $siteData['about']['intro_image'] ?? 'cd-project/img/demos/business-consulting/generic/generic-2.jpg';
            @endphp
            <div class="mb-2">
                <img src="{{ filter_var($introImage, FILTER_VALIDATE_URL) ? $introImage : asset($introImage) }}" class="img-fluid rounded" style="max-height: 160px; border: 1px solid #e8e8e8;" />
            </div>
            <input type="file" name="about_intro_image_file" class="form-control form-control-solid" accept="image/*" />
            <span class="form-text">Imagen que aparece al lado de los párrafos. Max 10MB.</span>
        </div>
    </div>
</div>

{{-- 3. PILLARS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Pilares</h4>
    <p class="text-gray-600 fs-7 mb-4">3 pilares con ícono, título y texto.</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[pillars_badge]" class="form-control form-control-solid" value="{{ old('about.pillars_badge', $siteData['about']['pillars_badge'] ?? '') }}" placeholder="Our Pillars" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Heading</label>
            <input type="text" name="about[pillars_heading]" class="form-control form-control-solid" value="{{ old('about.pillars_heading', $siteData['about']['pillars_heading'] ?? '') }}" placeholder="Why Choose Us" />
        </div>
        <div class="col-12">
            <label class="form-label">Pilares (JSON)</label>
            @php
                $pillarsRaw = old('about.pillars', $siteData['about']['pillars'] ?? '');
                if (is_array($pillarsRaw)) { $pillarsRaw = json_encode($pillarsRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); }
            @endphp
            <textarea name="about[pillars]" class="form-control form-control-solid" rows="6" placeholder='[{"icon":"fas fa-shield-alt","title":"Security","text":"..."}]'>{{ $pillarsRaw }}</textarea>
            <span class="form-text">Cada objeto: {"icon": "fas fa-...", "title": "...", "text": "..."}. Máximo 3.</span>
        </div>
    </div>
</div>

{{-- 4. MISSION / VISION / VALUES --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Misión / Visión / Valores</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Badge sección</label>
            <input type="text" name="about[essence_badge]" class="form-control form-control-solid" value="{{ old('about.essence_badge', $siteData['about']['essence_badge'] ?? '') }}" placeholder="Our Essence" />
        </div>
    </div>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Etiqueta Misión</label>
            <input type="text" name="about[mission_label]" class="form-control form-control-solid" value="{{ old('about.mission_label', $siteData['about']['mission_label'] ?? '') }}" placeholder="Our Mission" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Texto Misión</label>
            <textarea name="about[mission]" class="form-control form-control-solid" rows="2">{{ old('about.mission', $siteData['about']['mission'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Etiqueta Visión</label>
            <input type="text" name="about[vision_label]" class="form-control form-control-solid" value="{{ old('about.vision_label', $siteData['about']['vision_label'] ?? '') }}" placeholder="Our Vision" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Texto Visión</label>
            <textarea name="about[vision]" class="form-control form-control-solid" rows="2">{{ old('about.vision', $siteData['about']['vision'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Etiqueta Valores</label>
            <input type="text" name="about[values_label]" class="form-control form-control-solid" value="{{ old('about.values_label', $siteData['about']['values_label'] ?? '') }}" placeholder="Our Values" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Texto Valores</label>
            <textarea name="about[values_text]" class="form-control form-control-solid" rows="2">{{ old('about.values_text', $siteData['about']['values_text'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 5. SKILLS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. Capacidades (Progress Bars)</h4>
    <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[skills_badge]" class="form-control form-control-solid" value="{{ old('about.skills_badge', $siteData['about']['skills_badge'] ?? '') }}" placeholder="Experience" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Heading</label>
            <input type="text" name="about[skills_heading]" class="form-control form-control-solid" value="{{ old('about.skills_heading', $siteData['about']['skills_heading'] ?? '') }}" placeholder="Our Capabilities" />
        </div>
        <div class="col-12">
            <label class="form-label">Skills (JSON)</label>
            @php
                $skillsRaw = old('about.skills', $siteData['about']['skills'] ?? '');
                if (is_array($skillsRaw)) { $skillsRaw = json_encode($skillsRaw, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); }
            @endphp
            <textarea name="about[skills]" class="form-control form-control-solid" rows="4" placeholder='[{"name":"Strategic Planning","value":"95"}]'>{{ $skillsRaw }}</textarea>
            <span class="form-text">Cada objeto: {"name": "...", "value": "95"}. Valor = porcentaje.</span>
        </div>
    </div>
</div>

{{-- 6. COUNTERS --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">6. Contadores</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'] ?? '');
                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":"Projects","append":"+"}]'>{{ $countersRaw }}</textarea>
            <span class="form-text">Cada objeto: {"value": "500", "label": "Projects", "append": "+"}. Máximo 4.</span>
        </div>
    </div>
</div>

{{-- 7. TEAM --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">7. Equipo</h4>
    <p class="text-gray-600 fs-7 mb-4">Se muestran los miembros del módulo Team (si está activo).</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[team_badge]" class="form-control form-control-solid" value="{{ old('about.team_badge', $siteData['about']['team_badge'] ?? '') }}" placeholder="Meet the Team" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Heading</label>
            <input type="text" name="about[team_heading]" class="form-control form-control-solid" value="{{ old('about.team_heading', $siteData['about']['team_heading'] ?? '') }}" placeholder="Our Team" />
        </div>
    </div>
</div>

{{-- 8. CTA --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">8. CTA Final</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Eyebrow (form)</label>
            <input type="text" name="about[cta_eyebrow]" class="form-control form-control-solid" value="{{ old('about.cta_eyebrow', $siteData['about']['cta_eyebrow'] ?? '') }}" placeholder="Request a callback" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Heading (form)</label>
            <input type="text" name="about[cta_heading]" class="form-control form-control-solid" value="{{ old('about.cta_heading', $siteData['about']['cta_heading'] ?? '') }}" placeholder="We will call you" />
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo (form)</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-6">
            <label class="form-label">Eyebrow (contact info)</label>
            <input type="text" name="about[contact_eyebrow]" class="form-control form-control-solid" value="{{ old('about.contact_eyebrow', $siteData['about']['contact_eyebrow'] ?? '') }}" placeholder="Talk to us" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Heading (contact info)</label>
            <input type="text" name="about[contact_heading]" class="form-control form-control-solid" value="{{ old('about.contact_heading', $siteData['about']['contact_heading'] ?? '') }}" placeholder="Get in Touch" />
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo (contact info)</label>
            <textarea name="about[contact_subtitle]" class="form-control form-control-solid" rows="2">{{ old('about.contact_subtitle', $siteData['about']['contact_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">CTA botón (contact info)</label>
            <input type="text" name="about[contact_cta]" class="form-control form-control-solid" value="{{ old('about.contact_cta', $siteData['about']['contact_cta'] ?? '') }}" placeholder="Contacto" />
        </div>
    </div>
</div>