{{-- ═══ Personal Brand (demo-accounting-2) about fields ═══ --}}

{{-- 1. SEO + 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">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="Sobre Mí" />
        </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é mi historia, mi proceso..." />
        </div>
    </div>
</div>

{{-- 2. Hero principal --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Hero — Quién soy</h4>
    <p class="text-gray-600 fs-7 mb-4">Bloque principal con badge, título, subtítulo y descripción introductoria.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Badge (chip superior)</label>
            <input type="text" name="about[badge]" class="form-control form-control-solid" value="{{ old('about.badge', $siteData['about']['badge'] ?? '') }}" placeholder="Creator · Builder · Explorer" />
        </div>
        <div class="col-12 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="Quién Soy" />
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="about[main_subtitle]" class="form-control form-control-solid" value="{{ old('about.main_subtitle', $siteData['about']['main_subtitle'] ?? '') }}" placeholder="Mi historia, mi proceso, mi camino." />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Descripción intro</label>
            <textarea name="about[main_description]" class="form-control form-control-solid" rows="4" placeholder="Este espacio conecta todo lo que hago, vivo y aprendo...">{{ old('about.main_description', $siteData['about']['main_description'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Imagen de Cabecera (Fondo Video)</label>
            @php
                $imgParallax = $siteData['about']['image_parallax'] ?? '';
            @endphp
            @if($imgParallax)
                <div class="mb-2">
                    <img src="{{ filter_var($imgParallax, FILTER_VALIDATE_URL) ? $imgParallax : asset($imgParallax) }}" class="img-fluid rounded" style="max-height: 100px; border: 1px solid #e8e8e8;" />
                </div>
            @endif
            <input type="file" name="about_image_parallax_file" class="form-control form-control-solid" accept="image/*" />
            <span class="form-text text-muted fs-8">Fondo de la caja de video o banner superior. Dejar vacío para usar default.</span>
        </div>
    </div>
</div>

{{-- 3. Story (3 párrafos) --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Mi historia (3 párrafos)</h4>
    <p class="text-gray-600 fs-7 mb-4">Tu historia en 3 párrafos. El primero introduce, el segundo profundiza, el tercero cierra.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Párrafo 1</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">Párrafo 2</label>
            <textarea name="about[description_2]" class="form-control form-control-solid" rows="3">{{ old('about.description_2', $siteData['about']['description_2'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Párrafo 3</label>
            <textarea name="about[description_3]" class="form-control form-control-solid" rows="3">{{ old('about.description_3', $siteData['about']['description_3'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 4. Stats (3 contadores) --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Stats / Números clave (3)</h4>
    <p class="text-gray-600 fs-7 mb-4">Tres números destacados con animación counter.</p>
    @for($i = 1; $i <= 3; $i++)
    <div class="row g-2 mb-3">
        <div class="col-12"><h6 class="text-gray-700 fw-bold mb-2">Stat {{ $i }}</h6></div>
        <div class="col-4 col-md-2">
            <label class="form-label">Valor</label>
            <input type="text" name="about[stat_{{ $i }}_value]" class="form-control form-control-solid form-control-sm" value="{{ old("about.stat_{$i}_value", $siteData['about']["stat_{$i}_value"] ?? '') }}" placeholder="10" />
        </div>
        <div class="col-8 col-md-10">
            <label class="form-label">Etiqueta</label>
            <input type="text" name="about[stat_{{ $i }}_label]" class="form-control form-control-solid form-control-sm" value="{{ old("about.stat_{$i}_label", $siteData['about']["stat_{$i}_label"] ?? '') }}" placeholder="años creando" />
        </div>
    </div>
    @endfor
</div>

{{-- 5. Values (3 facetas con título y descripción) --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. Mis facetas / Valores (3)</h4>
    <p class="text-gray-600 fs-7 mb-4">Las 3 dimensiones que definen tu marca personal (matchean los Tabs del home).</p>
    @for($i = 1; $i <= 3; $i++)
    @php
        $fileFields = [1 => 'about_image_culture_file', 2 => 'about_image_values_file', 3 => 'about_image_extra_file'];
        $configKeys = [1 => 'image_culture', 2 => 'image_values', 3 => 'image_extra'];
        $fileField = $fileFields[$i];
        $configKey = $configKeys[$i];
        $currentPilarImg = $siteData['about'][$configKey] ?? '';
    @endphp
    <div class="row g-2 mb-4 border-bottom pb-3 border-gray-200">
        <div class="col-12"><h6 class="text-gray-700 fw-bold mb-2">Faceta {{ $i }}</h6></div>
        <div class="col-12 col-md-4">
            <label class="form-label">Título</label>
            <input type="text" name="about[value_{{ $i }}_title]" class="form-control form-control-solid form-control-sm mb-2" value="{{ old("about.value_{$i}_title", $siteData['about']["value_{$i}_title"] ?? '') }}" placeholder="Crear" />
            
            <label class="form-label fs-8 text-muted">Imagen / Avatar de la Faceta</label>
            @if($currentPilarImg)
                <div class="mb-2">
                    <img src="{{ filter_var($currentPilarImg, FILTER_VALIDATE_URL) ? $currentPilarImg : asset($currentPilarImg) }}" class="rounded-circle" style="width: 50px; height: 50px; object-fit: cover; border: 1px solid #e8e8e8;" />
                </div>
            @endif
            <input type="file" name="{{ $fileField }}" class="form-control form-control-solid form-control-sm" accept="image/*" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Descripción</label>
            <textarea name="about[value_{{ $i }}_description]" class="form-control form-control-solid form-control-sm" rows="4">{{ old("about.value_{$i}_description", $siteData['about']["value_{$i}_description"] ?? '') }}</textarea>
        </div>
    </div>
    @endfor
</div>

{{-- 6. Growth section --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">6. Sección "Cómo crezco" (proceso personal)</h4>
    <p class="text-gray-600 fs-7 mb-4">Bloque sobre tu proceso de crecimiento, conectando trabajo y vida personal.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-3">
            <label class="form-label">Badge</label>
            <input type="text" name="about[growth_badge]" class="form-control form-control-solid" value="{{ old('about.growth_badge', $siteData['about']['growth_badge'] ?? '') }}" placeholder="El proceso" />
        </div>
        <div class="col-12 col-md-9">
            <label class="form-label">Título</label>
            <input type="text" name="about[growth_title]" class="form-control form-control-solid" value="{{ old('about.growth_title', $siteData['about']['growth_title'] ?? '') }}" placeholder="Cómo crezco" />
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="about[growth_subtitle]" class="form-control form-control-solid" value="{{ old('about.growth_subtitle', $siteData['about']['growth_subtitle'] ?? '') }}" placeholder="Trabajo, deporte y exploración..." />
        </div>
        <div class="col-12 col-md-8">
            <div class="mb-3">
                <label class="form-label">Párrafo 1</label>
                <textarea name="about[growth_description_1]" class="form-control form-control-solid" rows="3">{{ old('about.growth_description_1', $siteData['about']['growth_description_1'] ?? '') }}</textarea>
            </div>
            <div>
                <label class="form-label">Párrafo 2</label>
                <textarea name="about[growth_description_2]" class="form-control form-control-solid" rows="3">{{ old('about.growth_description_2', $siteData['about']['growth_description_2'] ?? '') }}</textarea>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Imagen de la Biografía (Intro/Bio)</label>
            @php
                $introImg = $siteData['about']['intro_image'] ?? '';
            @endphp
            @if($introImg)
                <div class="mb-2">
                    <img src="{{ filter_var($introImg, FILTER_VALIDATE_URL) ? $introImg : asset($introImg) }}" class="img-fluid rounded" style="max-height: 140px; border: 1px solid #e8e8e8;" />
                </div>
            @endif
            <input type="file" name="about_intro_image_file" class="form-control form-control-solid" accept="image/*" />
            <span class="form-text text-muted fs-8">Fotografía personal que acompaña los párrafos de biografía. Max 10MB.</span>
        </div>
    </div>
</div>

{{-- 7. History / Timeline --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">7. Mi camino / Historia</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección histórica con hitos cronológicos (hasta 5), URL de video y texto de cierre.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Encabezado de la sección</label>
            <input type="text" name="about[history_years]" class="form-control form-control-solid" value="{{ old('about.history_years', $siteData['about']['history_years'] ?? '') }}" placeholder="Mi trayectoria" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">URL de video (opcional)</label>
            <input type="text" name="about[video_url]" class="form-control form-control-solid" value="{{ old('about.video_url', $siteData['about']['video_url'] ?? '') }}" placeholder="https://youtu.be/..." />
        </div>

        <div class="col-12 mt-4">
            <h6 class="text-gray-700 fw-bold mb-2">Hitos de la trayectoria (Milestones)</h6>
            <p class="text-gray-500 fs-8 mb-4">Define hasta 5 hitos para tu línea de tiempo. Deja vacíos los que no uses.</p>
            @for($i = 1; $i <= 5; $i++)
            <div class="row g-2 mb-3 align-items-center">
                <div class="col-3 col-md-2">
                    <label class="form-label fs-8 text-muted">Año</label>
                    <input type="text" name="about[history_year_{{ $i }}]" class="form-control form-control-solid form-control-sm" value="{{ old("about.history_year_{$i}", $siteData['about']["history_year_{$i}"] ?? '') }}" placeholder="202X" />
                </div>
                <div class="col-9 col-md-10">
                    <label class="form-label fs-8 text-muted">Descripción del Hito {{ $i }}</label>
                    <input type="text" name="about[history_desc_{{ $i }}]" class="form-control form-control-solid form-control-sm" value="{{ old("about.history_desc_{$i}", $siteData['about']["history_desc_{$i}"] ?? '') }}" placeholder="Describe el hito..." />
                </div>
            </div>
            @endfor
        </div>

        <div class="col-12 mt-2">
            <label class="form-label">Texto de cierre histórico</label>
            <textarea name="about[history_continuation]" class="form-control form-control-solid" rows="3">{{ old('about.history_continuation', $siteData['about']['history_continuation'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 8. Connect / CTA final --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">8. Cierre — ¿Conectamos?</h4>
    <p class="text-gray-600 fs-7 mb-4">Sección final que invita a contactarse.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título</label>
            <input type="text" name="about[team_title]" class="form-control form-control-solid" value="{{ old('about.team_title', $siteData['about']['team_title'] ?? '') }}" placeholder="¿Conectamos?" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Tagline corto</label>
            <input type="text" name="about[tagline]" class="form-control form-control-solid" value="{{ old('about.tagline', $siteData['about']['tagline'] ?? '') }}" placeholder="Todo conectado." />
        </div>
        <div class="col-12">
            <label class="form-label">Descripción de cierre</label>
            <textarea name="about[connect_description]" class="form-control form-control-solid" rows="2">{{ old('about.connect_description', $siteData['about']['connect_description'] ?? '') }}</textarea>
        </div>
    </div>
</div>