{{-- ═══ Restaurant / Hospitality welcome fields ═══ --}}

{{-- Our Story section --}}
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Sección "Our Story" (en inicio)</h4>
    <p class="text-gray-600 fs-7 mb-4">El bloque de historia que aparece en la homepage.</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="welcome[story_badge]" class="form-control form-control-solid" value="{{ old('welcome.story_badge', $siteData['welcome']['story_badge'] ?? '') }}" placeholder="OUR STORY" />
            <span class="form-text">Texto pequeño encima del título.</span>
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Título</label>
            <input type="text" name="welcome[story_heading]" class="form-control form-control-solid" value="{{ old('welcome.story_heading', $siteData['welcome']['story_heading'] ?? '') }}" placeholder="The Evolution of Homemade." />
        </div>
        <div class="col-12">
            <label class="form-label">Texto</label>
            <textarea name="welcome[story_text]" class="form-control form-control-solid" rows="3">{{ old('welcome.story_text', $siteData['welcome']['story_text'] ?? '') }}</textarea>
        </div>
    </div>

    {{-- Story section images --}}
    <div class="separator separator-dashed my-6"></div>
    <h5 class="fw-semibold text-gray-700 mb-3">Section Images</h5>
    <p class="text-gray-500 fs-7 mb-4">The 3 photos next to the "Our Story" text. Upload new ones to replace.</p>
    <div class="row g-4">
        @php
            $storyImages = [
                ['key' => 'story_image_1', 'label' => 'Main image (large left)', 'file' => 'story_image_1_file', 'hint' => '524 x 886 px — portrait'],
                ['key' => 'story_image_2', 'label' => 'Top right image', 'file' => 'story_image_2_file', 'hint' => '580 x 436 px — landscape'],
                ['key' => 'story_image_3', 'label' => 'Bottom right image', 'file' => 'story_image_3_file', 'hint' => '582 x 490 px — landscape'],
            ];
        @endphp
        @foreach($storyImages as $si)
            <div class="col-12 col-md-4">
                <label class="form-label">{{ $si['label'] }}</label>
                @php
                    $currentImg = $siteData['welcome'][$si['key']] ?? '';
                    $imgUrl = $currentImg ? (filter_var($currentImg, FILTER_VALIDATE_URL) ? $currentImg : asset($currentImg)) : '';
                @endphp
                @if($imgUrl)
                    <div class="mb-2 border rounded p-2 bg-white">
                        <img src="{{ $imgUrl }}" class="img-fluid rounded" style="max-height: 120px; width: 100%; object-fit: cover;" alt="{{ $si['label'] }}" />
                    </div>
                @endif
                <input type="hidden" name="welcome[{{ $si['key'] }}]" value="{{ $currentImg }}" />
                <input type="file" name="{{ $si['file'] }}" class="form-control form-control-solid form-control-sm" accept="image/*" />
                <span class="form-text">{{ $si['hint'] }}</span>
            </div>
        @endforeach
    </div>
</div>

<div class="separator separator-dashed my-6"></div>

{{-- What we offer --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Sección "What we offer"</h4>
    <p class="text-gray-600 fs-7 mb-4">El bloque de propuesta de valor en la homepage.</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="welcome[offer_badge]" class="form-control form-control-solid" value="{{ old('welcome.offer_badge', $siteData['welcome']['offer_badge'] ?? '') }}" placeholder="WHAT WE OFFER" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Título</label>
            <input type="text" name="welcome[offer_heading]" class="form-control form-control-solid" value="{{ old('welcome.offer_heading', $siteData['welcome']['offer_heading'] ?? '') }}" placeholder="Colorful, Real & Simple." />
        </div>
        <div class="col-12">
            <label class="form-label">Texto descriptivo</label>
            <textarea name="welcome[offer_text]" class="form-control form-control-solid" rows="2">{{ old('welcome.offer_text', $siteData['welcome']['offer_text'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- Gallery & Blog --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Sección Galería & Blog</h4>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Título Galería</label>
            <input type="text" name="welcome[gallery_heading]" class="form-control form-control-solid" value="{{ old('welcome.gallery_heading', $siteData['welcome']['gallery_heading'] ?? '') }}" placeholder="Our Gallery" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Badge Blog</label>
            <input type="text" name="welcome[blog_badge]" class="form-control form-control-solid" value="{{ old('welcome.blog_badge', $siteData['welcome']['blog_badge'] ?? '') }}" placeholder="RECENT NEWS" />
        </div>
        <div class="col-12 col-md-3">
            <label class="form-label">Título Blog</label>
            <input type="text" name="welcome[blog_heading]" class="form-control form-control-solid" value="{{ old('welcome.blog_heading', $siteData['welcome']['blog_heading'] ?? '') }}" placeholder="Our Blog" />
        </div>
    </div>
</div>

{{-- Founders Quote --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Founders Quote</h4>
    <p class="text-gray-600 fs-7 mb-4">The quote section with circular photo on the homepage.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Photo</label>
            @php
                $founderImg = $siteData['welcome']['founder_image'] ?? '';
                $founderImgUrl = $founderImg ? (filter_var($founderImg, FILTER_VALIDATE_URL) ? $founderImg : asset($founderImg)) : '';
            @endphp
            @if($founderImgUrl)
                <div class="mb-2 border rounded p-2 bg-white text-center">
                    <img src="{{ $founderImgUrl }}" class="rounded-circle" style="max-height: 100px; max-width: 100px; object-fit: cover;" alt="Founder" />
                </div>
            @endif
            <input type="hidden" name="welcome[founder_image]" value="{{ $founderImg }}" />
            <input type="file" name="founder_image_file" class="form-control form-control-solid form-control-sm" accept="image/*" />
            <span class="form-text">800 x 800 px — square, displayed as circle</span>
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Quote</label>
            <textarea name="welcome[founder_quote]" class="form-control form-control-solid" rows="2">{{ old('welcome.founder_quote', $siteData['welcome']['founder_quote'] ?? '') }}</textarea>
            <div class="mt-3">
                <label class="form-label">Attribution</label>
                <input type="text" name="welcome[founder_attribution]" class="form-control form-control-solid" value="{{ old('welcome.founder_attribution', $siteData['welcome']['founder_attribution'] ?? '') }}" placeholder="Founders" />
            </div>
        </div>
    </div>
</div>

{{-- ═══ Hero + CTAs labels ═══ --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Hero y CTAs</h4>
    <p class="text-gray-600 fs-7 mb-4">Etiquetas del hero y botones de llamada a la acción.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Etiqueta del hero</label>
            <input type="text" name="welcome[hero_label]" class="form-control form-control-solid" value="{{ old('welcome.hero_label', $siteData['welcome']['hero_label'] ?? '') }}" placeholder="Sabores que enamoran" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">CTA principal del hero</label>
            <input type="text" name="welcome[cta_label]" class="form-control form-control-solid" value="{{ old('welcome.cta_label', $siteData['welcome']['cta_label'] ?? '') }}" placeholder="Reservar mesa" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">CTA "Ver carta"</label>
            <input type="text" name="welcome[menu_cta_label]" class="form-control form-control-solid" value="{{ old('welcome.menu_cta_label', $siteData['welcome']['menu_cta_label'] ?? '') }}" placeholder="Ver carta completa" />
        </div>
        <div class="col-12 col-md-6">
            <label class="form-label">CTA "Conocer historia"</label>
            <input type="text" name="welcome[about_cta_label]" class="form-control form-control-solid" value="{{ old('welcome.about_cta_label', $siteData['welcome']['about_cta_label'] ?? '') }}" placeholder="Conocer la historia" />
        </div>
    </div>
</div>

{{-- ═══ Gallery + Story images ═══ --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Galería y Story images</h4>
    <p class="text-gray-600 fs-7 mb-4">Badge de galería + 3 imágenes que ilustran la sección "story".</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-6">
            <label class="form-label">Badge sección Galería</label>
            <input type="text" name="welcome[gallery_badge]" class="form-control form-control-solid" value="{{ old('welcome.gallery_badge', $siteData['welcome']['gallery_badge'] ?? '') }}" placeholder="Ambiente" />
        </div>
        @for($i = 1; $i <= 3; $i++)
        <div class="col-12 col-md-4">
            <label class="form-label">Story image {{ $i }}</label>
            <input type="text" name="welcome[story_image_{{ $i }}]" class="form-control form-control-solid form-control-sm" value="{{ old("welcome.story_image_{$i}", $siteData['welcome']["story_image_{$i}"] ?? '') }}" placeholder="cd-project/img/demos/restaurant/about/about-{{ $i }}.jpg" />
        </div>
        @endfor
    </div>
</div>