{{-- ═══ Creative Portfolio (demo-creative-portfolio) about fields ═══ --}}

{{-- 1. PAGE HERO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Encabezado página /about</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Eyebrow</label>
            <input type="text" name="about[page_eyebrow]" class="form-control form-control-solid" value="{{ old('about.page_eyebrow', $siteData['about']['page_eyebrow'] ?? '') }}" placeholder="Sobre mí">
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Título</label>
            <input type="text" name="about[page_title]" class="form-control form-control-solid" value="{{ old('about.page_title', $siteData['about']['page_title'] ?? '') }}" placeholder="El editor detrás del trabajo">
        </div>
        <div class="col-12">
            <label class="form-label">Subtítulo</label>
            <textarea name="about[page_subtitle]" class="form-control form-control-solid" rows="2">{{ old('about.page_subtitle', $siteData['about']['page_subtitle'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Meta description (SEO)</label>
            <textarea name="about[meta_description]" class="form-control form-control-solid" rows="2">{{ old('about.meta_description', $siteData['about']['meta_description'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- 2. BIO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Biografía (4 párrafos)</h4>
    <p class="text-gray-600 fs-7 mb-4">Hasta 4 párrafos. Los que dejes en blanco no se renderizan.</p>
    <div class="row g-4 mb-6">
        @foreach([1,2,3,4] as $i)
            <div class="col-12">
                <label class="form-label">Párrafo {{ $i }}</label>
                <textarea name="about[bio_paragraph_{{ $i }}]" class="form-control form-control-solid" rows="3">{{ old('about.bio_paragraph_'.$i, $siteData['about']['bio_paragraph_'.$i] ?? '') }}</textarea>
            </div>
        @endforeach
    </div>
</div>

{{-- 3. EXPERIENCIA --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Experiencia / Trayectoria (3 hitos)</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título sección</label>
            <input type="text" name="about[experience_heading]" class="form-control form-control-solid" value="{{ old('about.experience_heading', $siteData['about']['experience_heading'] ?? '') }}" placeholder="Trayectoria">
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="about[experience_subheading]" class="form-control form-control-solid" value="{{ old('about.experience_subheading', $siteData['about']['experience_subheading'] ?? '') }}">
        </div>
        @foreach([1,2,3] as $i)
            <div class="col-12 col-md-2">
                <label class="form-label">Hito {{ $i }} — año</label>
                <input type="text" name="about[exp_{{ $i }}_year]" class="form-control form-control-solid" value="{{ old('about.exp_'.$i.'_year', $siteData['about']['exp_'.$i.'_year'] ?? '') }}" placeholder="2024">
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label">Hito {{ $i }} — título</label>
                <input type="text" name="about[exp_{{ $i }}_title]" class="form-control form-control-solid" value="{{ old('about.exp_'.$i.'_title', $siteData['about']['exp_'.$i.'_title'] ?? '') }}">
            </div>
            <div class="col-12 col-md-6">
                <label class="form-label">Hito {{ $i }} — descripción</label>
                <textarea name="about[exp_{{ $i }}_description]" class="form-control form-control-solid" rows="2">{{ old('about.exp_'.$i.'_description', $siteData['about']['exp_'.$i.'_description'] ?? '') }}</textarea>
            </div>
        @endforeach
    </div>
</div>

{{-- 4. STACK / Tools --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Stack / Herramientas (6 tags)</h4>
    <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[tools_heading]" class="form-control form-control-solid" value="{{ old('about.tools_heading', $siteData['about']['tools_heading'] ?? '') }}" placeholder="Stack">
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="about[tools_subheading]" class="form-control form-control-solid" value="{{ old('about.tools_subheading', $siteData['about']['tools_subheading'] ?? '') }}">
        </div>
        @foreach([1,2,3,4,5,6] as $i)
            <div class="col-12 col-md-4">
                <label class="form-label">Herramienta {{ $i }}</label>
                <input type="text" name="about[tool_{{ $i }}]" class="form-control form-control-solid" value="{{ old('about.tool_'.$i, $siteData['about']['tool_'.$i] ?? '') }}">
            </div>
        @endforeach
    </div>
</div>

{{-- 5. PROCESO --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. Proceso de trabajo (4 pasos)</h4>
    <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[process_heading]" class="form-control form-control-solid" value="{{ old('about.process_heading', $siteData['about']['process_heading'] ?? '') }}" placeholder="Proceso">
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="about[process_subheading]" class="form-control form-control-solid" value="{{ old('about.process_subheading', $siteData['about']['process_subheading'] ?? '') }}">
        </div>
        @foreach([1,2,3,4] as $i)
            <div class="col-12 col-md-4">
                <label class="form-label">Paso {{ $i }} — título</label>
                <input type="text" name="about[process_{{ $i }}_title]" class="form-control form-control-solid" value="{{ old('about.process_'.$i.'_title', $siteData['about']['process_'.$i.'_title'] ?? '') }}">
            </div>
            <div class="col-12 col-md-8">
                <label class="form-label">Paso {{ $i }} — descripción</label>
                <textarea name="about[process_{{ $i }}_description]" class="form-control form-control-solid" rows="2">{{ old('about.process_'.$i.'_description', $siteData['about']['process_'.$i.'_description'] ?? '') }}</textarea>
            </div>
        @endforeach
    </div>
</div>