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

{{-- 1. WHO WE ARE --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Who We Are</h4>
    <p class="text-gray-600 fs-7 mb-4">Intro con quote del CEO y KPIs.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título 1</label>
            <input type="text" name="about[who_title_1]" class="form-control form-control-solid" value="{{ old('about.who_title_1', $siteData['about']['who_title_1'] ?? '') }}" placeholder="Who" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Título 2</label>
            <input type="text" name="about[who_title_2]" class="form-control form-control-solid" value="{{ old('about.who_title_2', $siteData['about']['who_title_2'] ?? '') }}" placeholder="We Are" />
        </div>
        <div class="col-12">
            <label class="form-label">Párrafo intro 1</label>
            <textarea name="about[intro_paragraph_1]" class="form-control form-control-solid" rows="2">{{ old('about.intro_paragraph_1', $siteData['about']['intro_paragraph_1'] ?? '') }}</textarea>
        </div>
        <div class="col-12">
            <label class="form-label">Párrafo intro 2</label>
            <textarea name="about[intro_paragraph_2]" class="form-control form-control-solid" rows="2">{{ old('about.intro_paragraph_2', $siteData['about']['intro_paragraph_2'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Quote del CEO</label>
            <textarea name="about[quote_text]" class="form-control form-control-solid" rows="2">{{ old('about.quote_text', $siteData['about']['quote_text'] ?? '') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <label class="form-label">Autor del quote</label>
            <input type="text" name="about[quote_author]" class="form-control form-control-solid" value="{{ old('about.quote_author', $siteData['about']['quote_author'] ?? '') }}" placeholder="John Doe, CEO" />
        </div>
    </div>
</div>

{{-- 2. KPIs --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Contadores KPI</h4>
    <div class="row g-4 mb-6">
        @php $kpis = ['years' => 'Años', 'customers' => 'Clientes', 'agencies' => 'Agencias', 'offices' => 'Oficinas']; @endphp
        @foreach($kpis as $key => $label)
        <div class="col-6 col-md-2">
            <label class="form-label">{{ $label }} — Valor</label>
            <input type="text" name="about[kpi_{{ $key }}]" class="form-control form-control-solid" value="{{ old("about.kpi_{$key}", $siteData['about']["kpi_{$key}"] ?? '') }}" />
        </div>
        <div class="col-6 col-md-4">
            <label class="form-label">{{ $label }} — Etiqueta</label>
            <input type="text" name="about[kpi_{{ $key }}_label]" class="form-control form-control-solid" value="{{ old("about.kpi_{$key}_label", $siteData['about']["kpi_{$key}_label"] ?? '') }}" />
        </div>
        @endforeach
    </div>
</div>

{{-- 3. OUR STORY --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Our Story (timeline)</h4>
    <p class="text-gray-600 fs-7 mb-4">Títulos de la sección de historia. Los tabs se configuran desde config.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título 1</label>
            <input type="text" name="about[story_title_1]" class="form-control form-control-solid" value="{{ old('about.story_title_1', $siteData['about']['story_title_1'] ?? '') }}" placeholder="Our" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Título 2 (bold)</label>
            <input type="text" name="about[story_title_2]" class="form-control form-control-solid" value="{{ old('about.story_title_2', $siteData['about']['story_title_2'] ?? '') }}" placeholder="Story" />
        </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. Team (títulos)</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título 1</label>
            <input type="text" name="about[team_title_1]" class="form-control form-control-solid" value="{{ old('about.team_title_1', $siteData['about']['team_title_1'] ?? '') }}" placeholder="Our" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">Título 2 (bold)</label>
            <input type="text" name="about[team_title_2]" class="form-control form-control-solid" value="{{ old('about.team_title_2', $siteData['about']['team_title_2'] ?? '') }}" placeholder="Agents" />
        </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 (llamado a la acción)</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[cta_title]" class="form-control form-control-solid" value="{{ old('about.cta_title', $siteData['about']['cta_title'] ?? '') }}" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Subtítulo</label>
            <input type="text" name="about[cta_subtitle]" class="form-control form-control-solid" value="{{ old('about.cta_subtitle', $siteData['about']['cta_subtitle'] ?? '') }}" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Botón</label>
            <input type="text" name="about[cta_label]" class="form-control form-control-solid" value="{{ old('about.cta_label', $siteData['about']['cta_label'] ?? '') }}" placeholder="GET STARTED" />
        </div>
    </div>
</div>