{{-- ═══ Creative Agency welcome fields (order matches visual flow) ═══ --}}

{{-- 1. HERO — first thing the visitor sees --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">1. Hero</h4>
    <p class="text-gray-600 fs-7 mb-4">Banner principal de la homepage — lo primero que ve el visitante.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Badge (texto grande de fondo)</label>
            <input type="text" name="welcome[hero_badge]" class="form-control form-control-solid" value="{{ old('welcome.hero_badge', $siteData['welcome']['hero_badge'] ?? '') }}" placeholder="Solutions" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Subtítulo (texto gris sobre el heading)</label>
            <input type="text" name="welcome[hero_subtitle]" class="form-control form-control-solid" value="{{ old('welcome.hero_subtitle', $siteData['welcome']['hero_subtitle'] ?? '') }}" placeholder="A creative solutions company" />
        </div>
        <div class="col-12">
            <label class="form-label">Heading principal</label>
            <input type="text" name="welcome[hero_heading]" class="form-control form-control-solid" value="{{ old('welcome.hero_heading', $siteData['welcome']['hero_heading'] ?? '') }}" placeholder="Helping you to meet the goals of the digital age" />
        </div>
    </div>
</div>

{{-- 2. CONCEPT — toggles section --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">2. Sección Concepto</h4>
    <p class="text-gray-600 fs-7 mb-4">Heading + descripción + 3 bloques expandibles debajo de la grilla de servicios.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Heading</label>
            <input type="text" name="welcome[about_heading]" class="form-control form-control-solid" value="{{ old('welcome.about_heading', $siteData['welcome']['about_heading'] ?? '') }}" placeholder="Innovation to transform your organization." />
        </div>
        <div class="col-12">
            <label class="form-label">Descripción</label>
            <textarea name="welcome[about_text]" class="form-control form-control-solid" rows="2">{{ old('welcome.about_text', $siteData['welcome']['about_text'] ?? '') }}</textarea>
        </div>
    </div>
    @for($i = 1; $i <= 3; $i++)
    <div class="row g-4 mb-4">
        <div class="col-12 col-md-4">
            <label class="form-label">Toggle {{ $i }} — Título</label>
            <input type="text" name="welcome[about_section{{ $i }}_title]" class="form-control form-control-solid" value="{{ old("welcome.about_section{$i}_title", $siteData['welcome']["about_section{$i}_title"] ?? '') }}" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Toggle {{ $i }} — Contenido</label>
            <textarea name="welcome[about_section{{ $i }}_content]" class="form-control form-control-solid" rows="2">{{ old("welcome.about_section{$i}_content", $siteData['welcome']["about_section{$i}_content"] ?? '') }}</textarea>
        </div>
    </div>
    @endfor
</div>

{{-- 3. ABOUT — heading + badges over background image --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">3. Sección About (con imagen de fondo)</h4>
    <p class="text-gray-600 fs-7 mb-4">El bloque con heading, texto y badges sobre la foto de fondo.</p>
    <div class="row g-4 mb-6">
        <div class="col-12">
            <label class="form-label">Heading</label>
            <input type="text" name="welcome[split_heading]" class="form-control form-control-solid" value="{{ old('welcome.split_heading', $siteData['welcome']['split_heading'] ?? '') }}" placeholder="Let's take your business to the next level!" />
        </div>
        <div class="col-12">
            <label class="form-label">Texto</label>
            <textarea name="welcome[split_text]" class="form-control form-control-solid" rows="2">{{ old('welcome.split_text', $siteData['welcome']['split_text'] ?? '') }}</textarea>
        </div>
        @for($i = 1; $i <= 5; $i++)
        <div class="col-12 col-md-4">
            <label class="form-label">Badge {{ $i }}</label>
            <input type="text" name="welcome[split_badge_{{ $i }}]" class="form-control form-control-solid" value="{{ old("welcome.split_badge_{$i}", $siteData['welcome']["split_badge_{$i}"] ?? '') }}" />
        </div>
        @endfor
    </div>
</div>

{{-- 4. PROJECTS — fallback titles when no projects loaded --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">4. Proyectos Destacados (fallback)</h4>
    <p class="text-gray-600 fs-7 mb-4">Se muestran cuando no hay proyectos cargados en el módulo. Una vez que cargues proyectos reales, estos se reemplazan.</p>
    @for($i = 1; $i <= 3; $i++)
    <div class="row g-4 mb-4">
        <div class="col-12 col-md-4">
            <label class="form-label">Proyecto {{ $i }} — Título</label>
            <input type="text" name="welcome[project_{{ $i }}_title]" class="form-control form-control-solid" value="{{ old("welcome.project_{$i}_title", $siteData['welcome']["project_{$i}_title"] ?? '') }}" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Proyecto {{ $i }} — Descripción</label>
            <textarea name="welcome[project_{{ $i }}_desc]" class="form-control form-control-solid" rows="2">{{ old("welcome.project_{$i}_desc", $siteData['welcome']["project_{$i}_desc"] ?? '') }}</textarea>
        </div>
    </div>
    @endfor
</div>

{{-- 5. NUMBERS — stats carousel at bottom --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">5. Estadísticas (carousel final)</h4>
    <p class="text-gray-600 fs-7 mb-4">Los contadores animados al final de la homepage.</p>
    <div class="row g-4 mb-4">
        <div class="col-12">
            <label class="form-label">Heading de la sección</label>
            <input type="text" name="welcome[numbers_heading]" class="form-control form-control-solid" value="{{ old('welcome.numbers_heading', $siteData['welcome']['numbers_heading'] ?? '') }}" placeholder="Excellent results for over more than 10 years..." />
        </div>
    </div>
    @for($i = 1; $i <= 5; $i++)
    <div class="row g-4 mb-4">
        <div class="col-6 col-md-2">
            <label class="form-label">Valor {{ $i }}</label>
            <input type="text" name="welcome[stat_{{ $i }}_value]" class="form-control form-control-solid" value="{{ old("welcome.stat_{$i}_value", $siteData['welcome']["stat_{$i}_value"] ?? '') }}" />
        </div>
        <div class="col-6 col-md-4">
            <label class="form-label">Etiqueta {{ $i }}</label>
            <input type="text" name="welcome[stat_{{ $i }}_label]" class="form-control form-control-solid" value="{{ old("welcome.stat_{$i}_label", $siteData['welcome']["stat_{$i}_label"] ?? '') }}" />
        </div>
    </div>
    @endfor
</div>