{{-- ═══ Corporate / Marketing about fields ═══ --}}

{{-- Intro Section (title + subtitle) --}}
<div class="separator separator-dashed my-6"></div>
<h4 class="fw-bold text-gray-800 mb-1">Intro Section</h4>
<p class="text-gray-600 fs-7 mb-4">The main heading and description below the page header.</p>
<div class="row g-4 mb-6">
    <div class="col-12">
        <label class="form-label">Main Heading</label>
        <textarea name="about[main_title]" class="form-control form-control-solid" rows="2">{{ old('about.main_title', $siteData['about']['main_title'] ?? '') }}</textarea>
        <span class="form-text">The large heading text. E.g. "Our vision is to transform bold ideas into impactful brand experiences."</span>
    </div>
    <div class="col-12">
        <label class="form-label">Description</label>
        <textarea name="about[main_subtitle]" class="form-control form-control-solid" rows="3">{{ old('about.main_subtitle', $siteData['about']['main_subtitle'] ?? '') }}</textarea>
    </div>
</div>

{{-- Mission / Gradient Section --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Mission / Gradient Section</h4>
    <p class="text-gray-600 fs-7 mb-4">The gradient background section with your company mission statement.</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="about[gradient_badge]" class="form-control form-control-solid" value="{{ old('about.gradient_badge', $siteData['about']['gradient_badge'] ?? '') }}" placeholder="Our Mission" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Heading</label>
            <input type="text" name="about[gradient_heading]" class="form-control form-control-solid" value="{{ old('about.gradient_heading', $siteData['about']['gradient_heading'] ?? '') }}" placeholder="Empowering brands with innovative strategies..." />
        </div>
        <div class="col-12">
            <label class="form-label">Description</label>
            <textarea name="about[gradient_description]" class="form-control form-control-solid" rows="4">{{ old('about.gradient_description', $siteData['about']['gradient_description'] ?? '') }}</textarea>
        </div>
    </div>
</div>

{{-- Culture Section --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Culture Section</h4>
    <p class="text-gray-600 fs-7 mb-4">The "Culture" block with sticky scroll. Paragraphs appear as scrollable text.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Title</label>
            <input type="text" name="about[culture_title]" class="form-control form-control-solid" value="{{ old('about.culture_title', $siteData['about']['culture_title'] ?? '') }}" placeholder="Our Culture" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Watermark text</label>
            <input type="text" name="about[culture_watermark]" class="form-control form-control-solid" value="{{ old('about.culture_watermark', $siteData['about']['culture_watermark'] ?? '') }}" placeholder="Culture" />
            <span class="form-text">Large background text behind the section.</span>
        </div>
    </div>
</div>

{{-- Values Section --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Values Section</h4>
    <p class="text-gray-600 fs-7 mb-4">The "Values" block below Culture. Same sticky scroll layout.</p>
    <div class="row g-4 mb-6">
        <div class="col-12 col-md-4">
            <label class="form-label">Title</label>
            <input type="text" name="about[values_title]" class="form-control form-control-solid" value="{{ old('about.values_title', $siteData['about']['values_title'] ?? '') }}" placeholder="Our Values" />
        </div>
        <div class="col-12 col-md-8">
            <label class="form-label">Watermark text</label>
            <input type="text" name="about[values_watermark]" class="form-control form-control-solid" value="{{ old('about.values_watermark', $siteData['about']['values_watermark'] ?? '') }}" placeholder="Values" />
        </div>
    </div>
</div>

{{-- Section Images --}}
<div class="separator separator-dashed my-6"></div>
<div class="mb-8">
    <h4 class="fw-bold text-gray-800 mb-1">Section Images</h4>
    <p class="text-gray-600 fs-7 mb-4">Images used in the parallax, culture, and values sections of the About page.</p>
    <div class="row g-4">
        @php
            $corporateAboutImages = [
                ['key' => 'image_parallax', 'label' => 'Parallax background', 'hint' => '1920 x 1080 px — full width'],
                ['key' => 'image_culture', 'label' => 'Culture section image', 'hint' => '800 x 1000 px — portrait'],
                ['key' => 'image_values', 'label' => 'Values section image', 'hint' => '800 x 1000 px — portrait'],
            ];
        @endphp
        @foreach($corporateAboutImages as $ci)
            <div class="col-12 col-md-4">
                <label class="form-label">{{ $ci['label'] }}</label>
                @php
                    $currentImg = $siteData['about'][$ci['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: 100px; width: 100%; object-fit: cover;" alt="{{ $ci['label'] }}" />
                    </div>
                @endif
                <input type="hidden" name="about[{{ $ci['key'] }}]" value="{{ $currentImg }}" />
                <input type="file" name="about_{{ $ci['key'] }}_file" class="form-control form-control-solid form-control-sm" accept="image/*" />
                <span class="form-text">{{ $ci['hint'] }}</span>
            </div>
        @endforeach
    </div>
</div>

{{-- Counters + CTA from default --}}
@include('admin.site-data.about._default')