@php
    $sections = $page->sections ?? [];
    $hero = old('about.hero', $sections['hero'] ?? []);
    $intro = old('about.intro', $sections['intro'] ?? []);
    $mission = old('about.mission', $sections['mission'] ?? []);
    $expertise = array_pad(old('about.expertise.items', $sections['expertise']['items'] ?? []), 4, '');
    $whyChoose = array_pad(old('about.why_choose.items', $sections['why_choose']['items'] ?? []), 4, '');
    $cta = old('about.cta', $sections['cta'] ?? []);
@endphp

<div class="admin-grid">
    <div class="admin-card">
        <p class="admin-section-title">Hero block</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="about-hero-eyebrow">Eyebrow</label>
                <input id="about-hero-eyebrow" type="text" name="about[hero][eyebrow]" value="{{ $hero['eyebrow'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="about-hero-title">Title</label>
                <input id="about-hero-title" type="text" name="about[hero][title]" value="{{ $hero['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="about-hero-description">Description</label>
                <textarea id="about-hero-description" name="about[hero][description]" rows="4">{{ $hero['description'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Company intro</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="about-intro-title">Intro title</label>
                <input id="about-intro-title" type="text" name="about[intro][title]" value="{{ $intro['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="about-intro-content">Intro copy</label>
                <textarea id="about-intro-content" name="about[intro][content]" rows="5">{{ $intro['content'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="admin-card">
        <p class="admin-section-title">Mission</p>
        <div class="mt-4 admin-form-grid admin-form-grid--two">
            <div class="admin-field">
                <label for="about-mission-title">Mission title</label>
                <input id="about-mission-title" type="text" name="about[mission][title]" value="{{ $mission['title'] ?? '' }}">
            </div>
            <div class="admin-field md:col-span-2">
                <label for="about-mission-content">Mission copy</label>
                <textarea id="about-mission-content" name="about[mission][content]" rows="5">{{ $mission['content'] ?? '' }}</textarea>
            </div>
        </div>
    </div>

    <div class="admin-grid admin-grid--two">
        <div class="admin-card">
            <p class="admin-section-title">How we help</p>
            <div class="mt-4 admin-form-grid">
                <div class="admin-field">
                    <label for="about-expertise-title">Section title</label>
                    <input id="about-expertise-title" type="text" name="about[expertise][title]" value="{{ old('about.expertise.title', $sections['expertise']['title'] ?? '') }}">
                </div>
                @foreach($expertise as $index => $item)
                    <div class="admin-field">
                        <label for="about-expertise-item-{{ $index }}">Item {{ $index + 1 }}</label>
                        <input id="about-expertise-item-{{ $index }}" type="text" name="about[expertise][items][{{ $index }}][value]" value="{{ $item['value'] ?? $item }}">
                    </div>
                @endforeach
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Why choose us</p>
            <div class="mt-4 admin-form-grid">
                <div class="admin-field">
                    <label for="about-why-title">Section title</label>
                    <input id="about-why-title" type="text" name="about[why_choose][title]" value="{{ old('about.why_choose.title', $sections['why_choose']['title'] ?? '') }}">
                </div>
                @foreach($whyChoose as $index => $item)
                    <div class="admin-field">
                        <label for="about-why-item-{{ $index }}">Item {{ $index + 1 }}</label>
                        <input id="about-why-item-{{ $index }}" type="text" name="about[why_choose][items][{{ $index }}][value]" value="{{ $item['value'] ?? $item }}">
                    </div>
                @endforeach
            </div>
        </div>
    </div>

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