@php
    $sections = $page->sections ?? [];
    $hero = old('blog.hero', $sections['hero'] ?? []);
    $postsIntro = old('blog.posts_intro', $sections['posts_intro'] ?? []);
    $cta = old('blog.cta', $sections['cta'] ?? []);
@endphp

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

    <div class="admin-card">
        <p class="admin-section-title">Manage articles</p>
        <div class="mt-4 rounded-2xl border border-[#D5E9A4] bg-[#EAF5EA] p-5">
            <p class="text-sm font-semibold text-[#123262]">Blog articles now live in their own manager.</p>
            <p class="mt-2 text-sm leading-7 text-[#224672]">
                Use the <strong>Blog Posts</strong> section to add, edit, publish, or feature articles. This page now controls the blog landing page layout only.
            </p>
            <div class="mt-4">
                <a href="{{ route('admin.blog-posts.index') }}" class="admin-button admin-button--secondary">Open Blog Posts</a>
            </div>
        </div>
    </div>

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

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