@php
    $sections = $page->sections ?? [];
    $hero = old('home.hero', $sections['hero'] ?? []);
    $trusted = old('home.trusted', $sections['trusted'] ?? []);
    $whyTracking = old('home.why_tracking', $sections['why_tracking'] ?? []);
    $servicesIntro = old('home.services_intro', $sections['services_intro'] ?? []);
    $pricing = old('home.pricing', $sections['pricing'] ?? []);
    $security = old('home.security', $sections['security'] ?? []);
    $caseStudies = old('home.case_studies', $sections['case_studies'] ?? []);
    $contactOptions = old('home.contact_options', $sections['contact_options'] ?? []);
    $benefits = old('home.benefits', $sections['benefits'] ?? []);
    $cta = old('home.cta', $sections['cta'] ?? []);
    $heroPlatforms = array_pad($hero['platforms'] ?? [], 7, ['label' => '', 'media_id' => null]);
    $heroPlatformSlots = [
        ['title' => 'Floating icon 1', 'hint' => 'Top left floating bubble on desktop.', 'default_label' => 'GA4'],
        ['title' => 'Floating icon 2', 'hint' => 'Bottom left floating bubble on desktop.', 'default_label' => 'GTM'],
        ['title' => 'Floating icon 3', 'hint' => 'Top right floating bubble on desktop.', 'default_label' => 'Looker Studio'],
        ['title' => 'Floating icon 4', 'hint' => 'Bottom right floating bubble on desktop.', 'default_label' => 'Google Ads'],
        ['title' => 'Platform chip 1', 'hint' => 'Shown in the platform strip under the hero buttons.', 'default_label' => 'Meta Ads'],
        ['title' => 'Platform chip 2', 'hint' => 'Shown in the platform strip under the hero buttons.', 'default_label' => 'TikTok Ads'],
        ['title' => 'Platform chip 3', 'hint' => 'Shown in the platform strip under the hero buttons.', 'default_label' => 'Server-Side'],
    ];
    $trustedLogos = array_pad($trusted['logos'] ?? [], 5, ['label' => '', 'media_id' => null]);
    $whyItems = array_pad($whyTracking['items'] ?? [], 4, ['title' => '', 'description' => '', 'media_id' => null]);
    $pricingPackages = collect($pricing['packages'] ?? [])
        ->map(function ($package) {
            $items = collect($package['items'] ?? [])
                ->map(fn ($item) => $item['value'] ?? $item)
                ->filter(fn ($item) => filled($item))
                ->values()
                ->all();

            return [
                'badge' => $package['badge'] ?? '',
                'featured' => (bool) ($package['featured'] ?? false),
                'name' => $package['name'] ?? '',
                'price' => $package['price'] ?? '',
                'timeline' => $package['timeline'] ?? '',
                'summary' => $package['summary'] ?? '',
                'items' => $items === [] ? [''] : $items,
            ];
        })
        ->values()
        ->all();
    if ($pricingPackages === []) {
        $pricingPackages = [[
            'badge' => '',
            'featured' => false,
            'name' => '',
            'price' => '',
            'timeline' => '',
            'summary' => '',
            'items' => [''],
        ]];
    }
    $securityItems = array_pad($security['items'] ?? [], 4, ['title' => '', 'description' => '', 'media_id' => null]);
    $caseStudyItems = array_pad($caseStudies['studies'] ?? [], 2, ['label' => '', 'title' => '', 'summary' => '', 'result' => '', 'before_media_id' => null, 'after_media_id' => null]);
    $benefitItems = array_pad($benefits['items'] ?? [], 6, ['title' => '', 'description' => '', 'media_id' => null]);
@endphp

<div class="admin-grid">
    <div class="admin-card">
        <p class="admin-section-title">Hero section</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="hero-eyebrow">Eyebrow</label>
                <input id="hero-eyebrow" type="text" name="home[hero][eyebrow]" value="{{ $hero['eyebrow'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="hero-eyebrow-highlight">Eyebrow highlight</label>
                <input id="hero-eyebrow-highlight" type="text" name="home[hero][eyebrow_highlight]" value="{{ $hero['eyebrow_highlight'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="hero-title-html">Headline (HTML allowed)</label>
                <textarea id="hero-title-html" name="home[hero][title_html]" rows="3">{{ $hero['title_html'] ?? '' }}</textarea>
            </div>
            <div class="admin-field md:col-span-2">
                <label for="hero-description">Description</label>
                <textarea id="hero-description" name="home[hero][description]" rows="4">{{ $hero['description'] ?? '' }}</textarea>
            </div>
            <div class="admin-field">
                <label for="hero-primary-label">Primary CTA label</label>
                <input id="hero-primary-label" type="text" name="home[hero][primary_cta_label]" value="{{ $hero['primary_cta_label'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="hero-primary-url">Primary CTA URL</label>
                <input id="hero-primary-url" type="text" name="home[hero][primary_cta_url]" value="{{ $hero['primary_cta_url'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="hero-secondary-label">Secondary CTA label</label>
                <input id="hero-secondary-label" type="text" name="home[hero][secondary_cta_label]" value="{{ $hero['secondary_cta_label'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="hero-secondary-url">Secondary CTA URL</label>
                <input id="hero-secondary-url" type="text" name="home[hero][secondary_cta_url]" value="{{ $hero['secondary_cta_url'] ?? '' }}">
            </div>
        </div>

        <div class="mt-4">
            @include('admin.partials.media-picker', [
                'label' => 'Hero image',
                'name' => 'home[hero][image_media_id]',
                'fieldId' => 'home-hero-image-media',
                'value' => $hero['image_media_id'] ?? null,
                'hint' => 'Choose the main analytics dashboard visual shown in the hero.',
            ])
        </div>

        <div class="mt-6">
            <p class="admin-section-subtitle">Floating hero icons</p>
            <p class="admin-field__hint">Pick real icons from the Media Library here. The first 4 slots control the floating desktop bubbles, and the last 3 slots control the platform strip shown below the hero buttons.</p>

            <div class="mt-4 admin-grid admin-grid--two">
                @foreach($heroPlatforms as $index => $platform)
                    @php($slot = $heroPlatformSlots[$index] ?? ['title' => 'Platform icon', 'hint' => 'Choose an icon from the Media Library.', 'default_label' => 'Platform'])
                    <div class="admin-card admin-card--compact">
                        <p class="admin-section-title">{{ $slot['title'] }}</p>
                        <p class="admin-field__hint mt-2">{{ $slot['hint'] }}</p>

                        <div class="admin-field">
                            <label for="hero-platform-label-{{ $index }}">Platform label</label>
                            <input id="hero-platform-label-{{ $index }}" type="text" name="home[hero][platforms][{{ $index }}][label]" value="{{ $platform['label'] ?? '' }}" placeholder="{{ $slot['default_label'] }}">
                        </div>

                        <div class="mt-4">
                            @include('admin.partials.media-picker', [
                                'label' => 'Platform icon',
                                'name' => 'home[hero][platforms][' . $index . '][media_id]',
                                'fieldId' => 'home-hero-platform-' . $index,
                                'value' => $platform['media_id'] ?? null,
                                'hint' => 'Pick the icon shown in this slot.',
                            ])
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Trusted logos</p>
        <div class="mt-4 admin-field">
            <label for="trusted-title">Section text</label>
            <input id="trusted-title" type="text" name="home[trusted][title]" value="{{ $trusted['title'] ?? '' }}">
        </div>

        <div class="mt-4 admin-grid admin-grid--two">
            @foreach($trustedLogos as $index => $logo)
                <div class="admin-card admin-card--compact">
                    <div class="admin-field">
                        <label for="trusted-label-{{ $index }}">Logo label</label>
                        <input id="trusted-label-{{ $index }}" type="text" name="home[trusted][logos][{{ $index }}][label]" value="{{ $logo['label'] ?? '' }}">
                    </div>
                    <div class="mt-4">
                        @include('admin.partials.media-picker', [
                            'label' => 'Logo image',
                            'name' => 'home[trusted][logos][' . $index . '][media_id]',
                            'fieldId' => 'home-trusted-logo-' . $index,
                            'value' => $logo['media_id'] ?? null,
                        ])
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Why tracking matters</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="why-badge">Badge</label>
                <input id="why-badge" type="text" name="home[why_tracking][badge]" value="{{ $whyTracking['badge'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="why-cta-label">CTA label</label>
                <input id="why-cta-label" type="text" name="home[why_tracking][cta_label]" value="{{ $whyTracking['cta_label'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="why-title">Title</label>
                <input id="why-title" type="text" name="home[why_tracking][title]" value="{{ $whyTracking['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="why-description">Description</label>
                <textarea id="why-description" name="home[why_tracking][description]" rows="4">{{ $whyTracking['description'] ?? '' }}</textarea>
            </div>
            <div class="admin-field">
                <label for="why-cta-url">CTA URL</label>
                <input id="why-cta-url" type="text" name="home[why_tracking][cta_url]" value="{{ $whyTracking['cta_url'] ?? '' }}">
            </div>
        </div>

        <div class="mt-4 admin-grid admin-grid--two">
            @foreach($whyItems as $index => $item)
                <div class="admin-card admin-card--compact">
                    <div class="admin-form-grid">
                        <div class="admin-field">
                            <label for="why-item-title-{{ $index }}">Card title</label>
                            <input id="why-item-title-{{ $index }}" type="text" name="home[why_tracking][items][{{ $index }}][title]" value="{{ $item['title'] ?? '' }}">
                        </div>
                        <div class="admin-field">
                            <label for="why-item-description-{{ $index }}">Description</label>
                            <textarea id="why-item-description-{{ $index }}" name="home[why_tracking][items][{{ $index }}][description]" rows="4">{{ $item['description'] ?? '' }}</textarea>
                        </div>
                        @include('admin.partials.media-picker', [
                            'label' => 'Card icon',
                            'name' => 'home[why_tracking][items][' . $index . '][media_id]',
                            'fieldId' => 'home-why-item-' . $index,
                            'value' => $item['media_id'] ?? null,
                        ])
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Services intro</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="services-intro-badge">Badge</label>
                <input id="services-intro-badge" type="text" name="home[services_intro][badge]" value="{{ $servicesIntro['badge'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="services-intro-title">Title</label>
                <input id="services-intro-title" type="text" name="home[services_intro][title]" value="{{ $servicesIntro['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="services-intro-description">Description</label>
                <textarea id="services-intro-description" name="home[services_intro][description]" rows="4">{{ $servicesIntro['description'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="admin-card" x-data="{ packages: @js($pricingPackages) }">
        <p class="admin-section-title">Pricing & packages</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="pricing-badge">Badge</label>
                <input id="pricing-badge" type="text" name="home[pricing][badge]" value="{{ $pricing['badge'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="pricing-title">Title</label>
                <input id="pricing-title" type="text" name="home[pricing][title]" value="{{ $pricing['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="pricing-description">Description</label>
                <textarea id="pricing-description" name="home[pricing][description]" rows="4">{{ $pricing['description'] ?? '' }}</textarea>
            </div>
            <div class="admin-field">
                <label for="pricing-audit-title">Audit banner title</label>
                <input id="pricing-audit-title" type="text" name="home[pricing][audit_title]" value="{{ $pricing['audit_title'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="pricing-audit-label">Audit button label</label>
                <input id="pricing-audit-label" type="text" name="home[pricing][audit_label]" value="{{ $pricing['audit_label'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="pricing-audit-description">Audit banner description</label>
                <textarea id="pricing-audit-description" name="home[pricing][audit_description]" rows="3">{{ $pricing['audit_description'] ?? '' }}</textarea>
            </div>
        </div>

        <div class="mt-4 admin-repeater-toolbar">
            <p class="admin-field__hint">Add, remove, and reorder package copy here. The frontend pricing block will update from these entries.</p>
            <button
                type="button"
                class="admin-button admin-button--secondary"
                @click="packages.push({ badge: '', featured: false, name: '', price: '', timeline: '', summary: '', items: [''] })"
            >
                Add package
            </button>
        </div>

        <div class="mt-4 admin-repeater-stack">
            <template x-for="(pkg, packageIndex) in packages" :key="`package-${packageIndex}`">
                <div class="admin-card admin-card--compact">
                    <div class="admin-card__actions">
                        <p class="admin-section-title" x-text="pkg.name ? pkg.name : `Package ${packageIndex + 1}`"></p>
                        <button
                            type="button"
                            class="admin-button admin-button--ghost"
                            x-show="packages.length > 1"
                            @click="packages.splice(packageIndex, 1)"
                        >
                            Remove
                        </button>
                    </div>

                    <div class="mt-4 admin-form-grid admin-form-grid--two">
                        <div class="admin-field">
                            <label>Badge</label>
                            <input type="text" x-model="pkg.badge" :name="`home[pricing][packages][${packageIndex}][badge]`">
                        </div>
                        <div class="admin-field">
                            <label>Package name</label>
                            <input type="text" x-model="pkg.name" :name="`home[pricing][packages][${packageIndex}][name]`">
                        </div>
                        <div class="admin-field">
                            <label>Price</label>
                            <input type="text" x-model="pkg.price" :name="`home[pricing][packages][${packageIndex}][price]`">
                        </div>
                        <div class="admin-field">
                            <label>Timeline</label>
                            <input type="text" x-model="pkg.timeline" :name="`home[pricing][packages][${packageIndex}][timeline]`">
                        </div>
                        <div class="admin-field">
                            <span class="admin-field__label">Featured package</span>
                            <div class="admin-inline-switch">
                                <div>
                                    <p class="admin-field__hint">Highlight this package on the homepage pricing block.</p>
                                </div>
                                <label class="admin-toggle">
                                    <input type="checkbox" x-model="pkg.featured" :name="`home[pricing][packages][${packageIndex}][featured]`" value="1">
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="admin-field md:col-span-2">
                            <label>Summary</label>
                            <textarea rows="3" x-model="pkg.summary" :name="`home[pricing][packages][${packageIndex}][summary]`"></textarea>
                        </div>
                    </div>

                    <div class="mt-4 admin-repeater-toolbar">
                        <p class="admin-section-subtitle">Package features</p>
                        <button
                            type="button"
                            class="admin-button admin-button--ghost"
                            @click="pkg.items.push('')"
                        >
                            Add feature
                        </button>
                    </div>

                    <div class="admin-list mt-4">
                        <template x-for="(item, itemIndex) in pkg.items" :key="`package-${packageIndex}-item-${itemIndex}`">
                            <div class="admin-card admin-card--subtle">
                                <div class="admin-card__actions">
                                    <label class="admin-field__label" x-text="`Feature ${itemIndex + 1}`"></label>
                                    <button
                                        type="button"
                                        class="admin-button admin-button--ghost"
                                        x-show="pkg.items.length > 1"
                                        @click="pkg.items.splice(itemIndex, 1)"
                                    >
                                        Remove
                                    </button>
                                </div>
                                <div class="admin-field mt-3">
                                    <input type="text" x-model="pkg.items[itemIndex]" :name="`home[pricing][packages][${packageIndex}][items][${itemIndex}][value]`">
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Security & governance</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="security-badge">Badge</label>
                <input id="security-badge" type="text" name="home[security][badge]" value="{{ $security['badge'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="security-cta-label">Button label</label>
                <input id="security-cta-label" type="text" name="home[security][cta_label]" value="{{ $security['cta_label'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="security-title">Title</label>
                <input id="security-title" type="text" name="home[security][title]" value="{{ $security['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="security-description">Description</label>
                <textarea id="security-description" name="home[security][description]" rows="4">{{ $security['description'] ?? '' }}</textarea>
            </div>
        </div>

        <div class="mt-4 admin-grid admin-grid--two">
            @foreach($securityItems as $index => $item)
                <div class="admin-card admin-card--compact">
                    <div class="admin-form-grid">
                        <div class="admin-field">
                            <label for="security-item-title-{{ $index }}">Card title</label>
                            <input id="security-item-title-{{ $index }}" type="text" name="home[security][items][{{ $index }}][title]" value="{{ $item['title'] ?? '' }}">
                        </div>
                        <div class="admin-field">
                            <label for="security-item-description-{{ $index }}">Description</label>
                            <textarea id="security-item-description-{{ $index }}" name="home[security][items][{{ $index }}][description]" rows="4">{{ $item['description'] ?? '' }}</textarea>
                        </div>
                        @include('admin.partials.media-picker', [
                            'label' => 'Card icon',
                            'name' => 'home[security][items][' . $index . '][media_id]',
                            'fieldId' => 'home-security-item-' . $index,
                            'value' => $item['media_id'] ?? null,
                        ])
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Case studies</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="case-studies-badge">Badge</label>
                <input id="case-studies-badge" type="text" name="home[case_studies][badge]" value="{{ $caseStudies['badge'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="case-studies-title">Title</label>
                <input id="case-studies-title" type="text" name="home[case_studies][title]" value="{{ $caseStudies['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="case-studies-description">Description</label>
                <textarea id="case-studies-description" name="home[case_studies][description]" rows="4">{{ $caseStudies['description'] ?? '' }}</textarea>
            </div>
        </div>

        <div class="mt-4 admin-grid admin-grid--two">
            @foreach($caseStudyItems as $index => $study)
                <div class="admin-card admin-card--compact">
                    <p class="admin-section-title">Case study {{ $index + 1 }}</p>
                    <div class="mt-4 admin-form-grid">
                        <div class="admin-field">
                            <label for="case-study-label-{{ $index }}">Label</label>
                            <input id="case-study-label-{{ $index }}" type="text" name="home[case_studies][studies][{{ $index }}][label]" value="{{ $study['label'] ?? '' }}">
                        </div>
                        <div class="admin-field">
                            <label for="case-study-title-{{ $index }}">Title</label>
                            <input id="case-study-title-{{ $index }}" type="text" name="home[case_studies][studies][{{ $index }}][title]" value="{{ $study['title'] ?? '' }}">
                        </div>
                        <div class="admin-field">
                            <label for="case-study-summary-{{ $index }}">Summary</label>
                            <textarea id="case-study-summary-{{ $index }}" name="home[case_studies][studies][{{ $index }}][summary]" rows="4">{{ $study['summary'] ?? '' }}</textarea>
                        </div>
                        <div class="admin-field">
                            <label for="case-study-result-{{ $index }}">Result text</label>
                            <textarea id="case-study-result-{{ $index }}" name="home[case_studies][studies][{{ $index }}][result]" rows="3">{{ $study['result'] ?? '' }}</textarea>
                        </div>

                        @include('admin.partials.media-picker', [
                            'label' => 'Before screenshot',
                            'name' => 'home[case_studies][studies][' . $index . '][before_media_id]',
                            'fieldId' => 'home-case-study-before-' . $index,
                            'value' => $study['before_media_id'] ?? null,
                        ])

                        @include('admin.partials.media-picker', [
                            'label' => 'After screenshot',
                            'name' => 'home[case_studies][studies][' . $index . '][after_media_id]',
                            'fieldId' => 'home-case-study-after-' . $index,
                            'value' => $study['after_media_id'] ?? null,
                        ])
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Contact options block</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="contact-options-badge">Badge</label>
                <input id="contact-options-badge" type="text" name="home[contact_options][badge]" value="{{ $contactOptions['badge'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="contact-options-title">Title</label>
                <input id="contact-options-title" type="text" name="home[contact_options][title]" value="{{ $contactOptions['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="contact-options-description">Description</label>
                <textarea id="contact-options-description" name="home[contact_options][description]" rows="4">{{ $contactOptions['description'] ?? '' }}</textarea>
            </div>
            <div class="admin-field md:col-span-2">
                <label for="contact-options-headline">Card headline</label>
                <input id="contact-options-headline" type="text" name="home[contact_options][headline]" value="{{ $contactOptions['headline'] ?? '' }}">
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Benefits grid</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="benefits-badge">Badge</label>
                <input id="benefits-badge" type="text" name="home[benefits][badge]" value="{{ $benefits['badge'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="benefits-highlight">Highlight pill</label>
                <input id="benefits-highlight" type="text" name="home[benefits][highlight]" value="{{ $benefits['highlight'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="benefits-title">Title</label>
                <input id="benefits-title" type="text" name="home[benefits][title]" value="{{ $benefits['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="benefits-description">Description</label>
                <textarea id="benefits-description" name="home[benefits][description]" rows="4">{{ $benefits['description'] ?? '' }}</textarea>
            </div>
        </div>

        <div class="mt-4 admin-grid admin-grid--two">
            @foreach($benefitItems as $index => $item)
                <div class="admin-card admin-card--compact">
                    <div class="admin-form-grid">
                        <div class="admin-field">
                            <label for="benefit-item-title-{{ $index }}">Card title</label>
                            <input id="benefit-item-title-{{ $index }}" type="text" name="home[benefits][items][{{ $index }}][title]" value="{{ $item['title'] ?? '' }}">
                        </div>
                        <div class="admin-field">
                            <label for="benefit-item-description-{{ $index }}">Description</label>
                            <textarea id="benefit-item-description-{{ $index }}" name="home[benefits][items][{{ $index }}][description]" rows="4">{{ $item['description'] ?? '' }}</textarea>
                        </div>
                        @include('admin.partials.media-picker', [
                            'label' => 'Card icon',
                            'name' => 'home[benefits][items][' . $index . '][media_id]',
                            'fieldId' => 'home-benefit-item-' . $index,
                            'value' => $item['media_id'] ?? null,
                        ])
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Final CTA</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field md:col-span-2">
                <label for="cta-title">Title</label>
                <input id="cta-title" type="text" name="home[cta][title]" value="{{ $cta['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="cta-description">Description</label>
                <textarea id="cta-description" name="home[cta][description]" rows="4">{{ $cta['description'] ?? '' }}</textarea>
            </div>
            <div class="admin-field">
                <label for="cta-button-label">Button label</label>
                <input id="cta-button-label" type="text" name="home[cta][button_label]" value="{{ $cta['button_label'] ?? '' }}">
            </div>
            <div class="admin-field">
                <label for="cta-button-url">Button URL</label>
                <input id="cta-button-url" type="text" name="home[cta][button_url]" value="{{ $cta['button_url'] ?? '' }}">
            </div>
        </div>
    </div>
</div>
