@extends('layouts.app')

@section('title', 'Home page content')

@section('content')
<div class="legal-home-page">
    <div class="page-header-bar">
        <div class="header-title-row">
            <div class="page-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div>
                <h1 class="page-title">Home page</h1>
                <p class="page-subtitle">Edit public landing page copy. Images and layout stay in the theme for now.</p>
            </div>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-error legal-home-alert" role="alert">
            <strong>Please fix the errors below.</strong>
            <ul class="legal-home-error-list">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'hero']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-hero">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                Hero
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="hero_title">Title</label>
                    <input class="form-input" id="hero_title" name="hero[title]" value="{{ old('hero.title', $home['hero']['title']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="hero_check_button">Check address button</label>
                    <input class="form-input" id="hero_check_button" name="hero[check_button_label]" value="{{ old('hero.check_button_label', $home['hero']['check_button_label']) }}" required>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="hero_subtitle">Subtitle</label>
                    <textarea class="form-input" id="hero_subtitle" name="hero[subtitle]" rows="2" required>{{ old('hero.subtitle', $home['hero']['subtitle']) }}</textarea>
                </div>
                <div class="form-group form-group--full" style="display: none;">
                    <label class="form-label" for="hero_placeholder">Address field placeholder</label>
                    <input class="form-input" id="hero_placeholder" name="hero[address_placeholder]" value="{{ old('hero.address_placeholder', $home['hero']['address_placeholder']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="hero_checking">Checking state label</label>
                    <input class="form-input" id="hero_checking" name="hero[checking_label]" value="{{ old('hero.checking_label', $home['hero']['checking_label']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="hero_addr_err">Empty address error</label>
                    <input class="form-input" id="hero_addr_err" name="hero[address_error_empty]" value="{{ old('hero.address_error_empty', $home['hero']['address_error_empty']) }}" required>
                </div>
            </div>
            <div class="legal-home-grid legal-home-grid--3 legal-home-grid--badges">
                @foreach([1, 2, 3] as $n)
                    <div class="form-group">
                        <label class="form-label" for="hero_badge_{{ $n }}">Badge {{ $n }}</label>
                        <input class="form-input" id="hero_badge_{{ $n }}" name="hero[badge_{{ $n }}]" value="{{ old('hero.badge_'.$n, $home['hero']['badge_'.$n]) }}" required>
                    </div>
                @endforeach
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'steps']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-steps">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
                Steps
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="steps_pill">Pill</label>
                    <input class="form-input" id="steps_pill" name="steps[pill]" value="{{ old('steps.pill', $home['steps']['pill']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="steps_title">Section title</label>
                    <input class="form-input" id="steps_title" name="steps[title]" value="{{ old('steps.title', $home['steps']['title']) }}" required>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="steps_subtitle">Section subtitle</label>
                    <textarea class="form-input" id="steps_subtitle" name="steps[subtitle]" rows="2" required>{{ old('steps.subtitle', $home['steps']['subtitle']) }}</textarea>
                </div>
            </div>
            @for($i = 0; $i < 3; $i++)
                @php $step = $home['steps']['items'][$i]; @endphp
                <div class="legal-home-subcard">
                    <div class="legal-home-subcard-title">Step {{ $i + 1 }}</div>
                    <div class="legal-home-grid">
                        <div class="form-group">
                            <label class="form-label" for="step_title_{{ $i }}">Title</label>
                            <input class="form-input" id="step_title_{{ $i }}" name="steps[items][{{ $i }}][title]" value="{{ old('steps.items.'.$i.'.title', $step['title']) }}" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="step_desc_{{ $i }}">Description</label>
                            <textarea class="form-input" id="step_desc_{{ $i }}" name="steps[items][{{ $i }}][description]" rows="2" required>{{ old('steps.items.'.$i.'.description', $step['description']) }}</textarea>
                        </div>
                    </div>
                </div>
            @endfor
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'pricing']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-pricing">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                Pricing block
            </div>
            <div class="legal-home-grid">
                <div class="form-group form-group--full ">
                    <label class="form-label" for="pricing_title">Title</label>
                    <input class="form-input" id="pricing_title" name="pricing[title]" value="{{ old('pricing.title', $home['pricing']['title']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="pricing_help">Help link text</label>
                    <input class="form-input" id="pricing_help" name="pricing[help_link_text]" value="{{ old('pricing.help_link_text', $home['pricing']['help_link_text']) }}" required>
                </div>
                <div class="form-group ">
                    <label class="form-label" for="pricing_subtitle">Subtitle</label>
                    <textarea class="form-input" id="pricing_subtitle" name="pricing[subtitle]" rows="2" required>{{ old('pricing.subtitle', $home['pricing']['subtitle']) }}</textarea>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="pricing_nbn">NBN toggle label</label>
                    <input class="form-input" id="pricing_nbn" name="pricing[toggle_nbn]" value="{{ old('pricing.toggle_nbn', $home['pricing']['toggle_nbn']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="pricing_cf">Community Fibre toggle</label>
                    <input class="form-input" id="pricing_cf" name="pricing[toggle_community_fibre]" value="{{ old('pricing.toggle_community_fibre', $home['pricing']['toggle_community_fibre']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="pricing_loading">Loading plans text</label>
                    <input class="form-input" id="pricing_loading" name="pricing[packages_loading_text]" value="{{ old('pricing.packages_loading_text', $home['pricing']['packages_loading_text']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="pricing_empty">Empty state message</label>
                    <input class="form-input" id="pricing_empty" name="pricing[packages_empty_message]" value="{{ old('pricing.packages_empty_message', $home['pricing']['packages_empty_message']) }}" required>
                </div>
                <div class="form-group ">
                    <label class="form-label" for="pricing_note">Footnote line</label>
                    <textarea class="form-input" id="pricing_note" name="pricing[note_line]" rows="2" required>{{ old('pricing.note_line', $home['pricing']['note_line']) }}</textarea>
                </div>
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'about']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-about">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                Internet that gives back
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="about_label">Label</label>
                    <input class="form-input" id="about_label" name="about[label]" value="{{ old('about.label', $home['about']['label']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="about_title">Title</label>
                    <input class="form-input" id="about_title" name="about[title]" value="{{ old('about.title', $home['about']['title']) }}" required>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="about_desc">Description</label>
                    <textarea class="form-input" id="about_desc" name="about[description]" rows="3" required>{{ old('about.description', $home['about']['description']) }}</textarea>
                </div>
            </div>
            @for($i = 0; $i < 3; $i++)
                @php $f = $home['about']['features'][$i]; @endphp
                <div class="legal-home-subcard">
                    <div class="legal-home-subcard-title">Feature {{ $i + 1 }}</div>
                    <div class="legal-home-grid">
                        <div class="form-group">
                            <label class="form-label" for="about_f_{{ $i }}_t">Title</label>
                            <input class="form-input" id="about_f_{{ $i }}_t" name="about[features][{{ $i }}][title]" value="{{ old('about.features.'.$i.'.title', $f['title']) }}" required>
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="about_f_{{ $i }}_x">Text</label>
                            <textarea class="form-input" id="about_f_{{ $i }}_x" name="about[features][{{ $i }}][text]" rows="2" required>{{ old('about.features.'.$i.'.text', $f['text']) }}</textarea>
                        </div>
                    </div>
                </div>
            @endfor
            <div class="legal-home-grid legal-home-grid--4">
                <div class="form-group">
                    <label class="form-label" for="about_stat_num">Stat number</label>
                    <input class="form-input" id="about_stat_num" name="about[stat_families_num]" value="{{ old('about.stat_families_num', $home['about']['stat_families_num']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="about_stat_lab">Families label</label>
                    <input class="form-input" id="about_stat_lab" name="about[stat_families_label]" value="{{ old('about.stat_families_label', $home['about']['stat_families_label']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="about_don_amt">Donation amount</label>
                    <input class="form-input" id="about_don_amt" name="about[stat_donation_amount]" value="{{ old('about.stat_donation_amount', $home['about']['stat_donation_amount']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="about_don_lab">Donation label</label>
                    <input class="form-input" id="about_don_lab" name="about[stat_donation_label]" value="{{ old('about.stat_donation_label', $home['about']['stat_donation_label']) }}" required>
                </div>
            </div>
            <div class="legal-home-grid">
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="about_img_alt">Image alt text</label>
                    <input class="form-input" id="about_img_alt" name="about[image_alt]" value="{{ old('about.image_alt', $home['about']['image_alt']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="about_btn">Check availability button</label>
                    <input class="form-input" id="about_btn" name="about[check_button_label]" value="{{ old('about.check_button_label', $home['about']['check_button_label']) }}" required>
                </div>
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'coverage']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-coverage">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                Coverage (Sydney)
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="cov_pill">Pill</label>
                    <input class="form-input" id="cov_pill" name="coverage[pill]" value="{{ old('coverage.pill', $home['coverage']['pill']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="cov_title">Title</label>
                    <input class="form-input" id="cov_title" name="coverage[title]" value="{{ old('coverage.title', $home['coverage']['title']) }}" required>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="cov_sub">Subtitle</label>
                    <textarea class="form-input" id="cov_sub" name="coverage[subtitle]" rows="2" required>{{ old('coverage.subtitle', $home['coverage']['subtitle']) }}</textarea>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="cov_head">Coverage includes header</label>
                    <input class="form-input" id="cov_head" name="coverage[coverage_header]" value="{{ old('coverage.coverage_header', $home['coverage']['coverage_header']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="cov_hot_t">Hot note title</label>
                    <input class="form-input" id="cov_hot_t" name="coverage[hot_title]" value="{{ old('coverage.hot_title', $home['coverage']['hot_title']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="cov_hot_s">Hot note subtitle</label>
                    <input class="form-input" id="cov_hot_s" name="coverage[hot_subtitle]" value="{{ old('coverage.hot_subtitle', $home['coverage']['hot_subtitle']) }}" required>
                </div>
                <div class="form-group form-group--full" style="display: none;">
                    <label class="form-label" for="cov_hot_b">Hot note button</label>
                    <input class="form-input" id="cov_hot_b" name="coverage[hot_button]" value="{{ old('coverage.hot_button', $home['coverage']['hot_button']) }}" required>
                </div>
            </div>

            <div class="legal-home-subcard">
                <div class="legal-home-subcard-title">Map image badges</div>
                <div class="legal-home-grid">
                    <div class="form-group">
                        <label class="form-label" for="cov_map_top_t">Top badge title</label>
                        <input class="form-input" id="cov_map_top_t" name="coverage[map_top_badge_title]" value="{{ old('coverage.map_top_badge_title', $home['coverage']['map_top_badge_title']) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="cov_map_top_s">Top badge subtitle</label>
                        <input class="form-input" id="cov_map_top_s" name="coverage[map_top_badge_subtitle]" value="{{ old('coverage.map_top_badge_subtitle', $home['coverage']['map_top_badge_subtitle']) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="cov_map_stat_v">Coverage stat value</label>
                        <input class="form-input" id="cov_map_stat_v" name="coverage[map_stat_value]" value="{{ old('coverage.map_stat_value', $home['coverage']['map_stat_value']) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="cov_map_stat_l">Coverage stat label</label>
                        <input class="form-input" id="cov_map_stat_l" name="coverage[map_stat_label]" value="{{ old('coverage.map_stat_label', $home['coverage']['map_stat_label']) }}" required>
                    </div>
                </div>
            </div>

            <div class="legal-home-subcard">
                <div class="legal-home-faq-item-head">
                    <div class="legal-home-subcard-title">Coverage areas (Coverage Includes list)</div>
                </div>
                @php
                    $coverageAreas = old('coverage.areas', $home['coverage']['areas'] ?? []);
                    if (! is_array($coverageAreas) || $coverageAreas === []) {
                        $coverageAreas = [['name' => '']];
                    }
                @endphp
                <div id="coverage-areas-list" class="legal-home-areas-grid">
                    @foreach($coverageAreas as $i => $area)
                        <div class="legal-home-area-row" data-area-row>
                            <div class="legal-home-area-row-head">
                                <span class="legal-home-area-row-num">Area <span class="area-row-num">{{ $i + 1 }}</span></span>
                                <button type="button" class="btn-faq-remove" data-area-remove style="{{ count($coverageAreas) <= 1 ? 'display:none' : '' }}">Remove</button>
                            </div>
                            <input type="text" class="form-input coverage-area-name" name="coverage[areas][{{ $i }}][name]" value="{{ old('coverage.areas.'.$i.'.name', $area['name'] ?? '') }}" placeholder="e.g. Sydney CBD" required>
                        </div>
                    @endforeach
                </div>
                <div class="legal-home-faq-toolbar">
                    <button type="button" class="btn-add-faq" id="coverageAreaAddBtn">Add area</button>
                </div>
            </div>

            <div class="legal-home-grid legal-home-grid--3">
                @for($i = 0; $i < 3; $i++)
                    @php $c = $home['coverage']['cards'][$i]; @endphp
                    <div class="legal-home-subcard legal-home-subcard--compact">
                        <div class="legal-home-subcard-title">Info card {{ $i + 1 }}</div>
                        <div class="legal-home-grid">
                            <div class="form-group">
                                <label class="form-label" for="cov_c_{{ $i }}_t">Title</label>
                                <input class="form-input" id="cov_c_{{ $i }}_t" name="coverage[cards][{{ $i }}][title]" value="{{ old('coverage.cards.'.$i.'.title', $c['title']) }}" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="cov_c_{{ $i }}_s">Subtitle</label>
                                <input class="form-input" id="cov_c_{{ $i }}_s" name="coverage[cards][{{ $i }}][subtitle]" value="{{ old('coverage.cards.'.$i.'.subtitle', $c['subtitle']) }}" required>
                            </div>
                        </div>
                    </div>
                @endfor
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'contact']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-contact">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                Contact section
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="con_pill">Pill</label>
                    <input class="form-input" id="con_pill" name="contact[pill]" value="{{ old('contact.pill', $home['contact']['pill']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="con_title">Title</label>
                    <input class="form-input" id="con_title" name="contact[title]" value="{{ old('contact.title', $home['contact']['title']) }}" required>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="con_sub">Subtitle</label>
                    <textarea class="form-input" id="con_sub" name="contact[subtitle]" rows="2" required>{{ old('contact.subtitle', $home['contact']['subtitle']) }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label" for="con_ft">Form title</label>
                    <input class="form-input" id="con_ft" name="contact[form_title]" value="{{ old('contact.form_title', $home['contact']['form_title']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="con_fs">Form subtitle</label>
                    <input class="form-input" id="con_fs" name="contact[form_sub]" value="{{ old('contact.form_sub', $home['contact']['form_sub']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="con_suc_t">Success title</label>
                    <input class="form-input" id="con_suc_t" name="contact[success_title]" value="{{ old('contact.success_title', $home['contact']['success_title']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="con_suc_s">Success message</label>
                    <textarea class="form-input" id="con_suc_s" name="contact[success_sub]" rows="2" required>{{ old('contact.success_sub', $home['contact']['success_sub']) }}</textarea>
                </div>
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'faq']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-faq">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                FAQ
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="faq_pill">Pill</label>
                    <input class="form-input" id="faq_pill" name="faq[pill]" value="{{ old('faq.pill', $home['faq']['pill']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="faq_title">Title</label>
                    <input class="form-input" id="faq_title" name="faq[title]" value="{{ old('faq.title', $home['faq']['title']) }}" required>
                </div>
                <div class="form-group form-group--full">
                    <label class="form-label" for="faq_sub">Subtitle</label>
                    <textarea class="form-input" id="faq_sub" name="faq[subtitle]" rows="2" required>{{ old('faq.subtitle', $home['faq']['subtitle']) }}</textarea>
                </div>
            </div>
            <div id="faq-items-list" class="legal-home-faq-items">
                @php
                    $faqItems = old('faq.items', $home['faq']['items'] ?? []);
                    if (! is_array($faqItems) || $faqItems === []) {
                        $faqItems = [['question' => '', 'answer' => '']];
                    }
                @endphp
                @foreach($faqItems as $i => $faq)
                    <div class="legal-home-subcard legal-home-faq-item-row" data-faq-row>
                        <div class="legal-home-faq-item-head">
                            <div class="legal-home-subcard-title">Question <span class="faq-row-num">{{ $i + 1 }}</span></div>
                            <button type="button" class="btn-faq-remove" data-faq-remove style="{{ count($faqItems) <= 1 ? 'display:none' : '' }}">Remove</button>
                        </div>
                        <div class="legal-home-grid">
                            <div class="form-group">
                                <label class="form-label">Question</label>
                                <input type="text" class="form-input faq-item-question" name="faq[items][{{ $i }}][question]" value="{{ old('faq.items.'.$i.'.question', $faq['question'] ?? '') }}" required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Answer</label>
                                <textarea class="form-input faq-item-answer" name="faq[items][{{ $i }}][answer]" rows="3" required>{{ old('faq.items.'.$i.'.answer', $faq['answer'] ?? '') }}</textarea>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="legal-home-faq-toolbar">
                <button type="button" class="btn-add-faq" id="faqAddBtn">Add FAQ</button>
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>

    <form method="post" action="{{ route('admin.legal-pages.home.section.update', ['section' => 'cta']) }}" class="legal-home-section-form">
        @csrf
        @method('PUT')
        <div class="legal-home-section-card card" id="section-cta">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                Bottom CTA
            </div>
            <div class="legal-home-grid">
                <div class="form-group">
                    <label class="form-label" for="cta_title">Title</label>
                    <input class="form-input" id="cta_title" name="cta[title]" value="{{ old('cta.title', $home['cta']['title']) }}" required>
                </div>
                <div class="form-group">
                    <label class="form-label" for="cta_sub">Subtitle</label>
                    <textarea class="form-input" id="cta_sub" name="cta[subtitle]" rows="2" required>{{ old('cta.subtitle', $home['cta']['subtitle']) }}</textarea>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="cta_con">Contact button</label>
                    <input class="form-input" id="cta_con" name="cta[contact_button]" value="{{ old('cta.contact_button', $home['cta']['contact_button']) }}" required>
                </div>
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="cta_av">Availability button</label>
                    <input class="form-input" id="cta_av" name="cta[availability_button]" value="{{ old('cta.availability_button', $home['cta']['availability_button']) }}" required>
                </div>
            </div>
            <div class="legal-home-section-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<style>
/* ─── Page header (match profile) ─────────────────────── */
.legal-home-page .page-header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.legal-home-page .header-title-row { display: flex; align-items: center; gap: 0.85rem; }
.legal-home-page .page-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.legal-home-page .page-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text,#111); letter-spacing: -0.3px; line-height: 1.2; }
.legal-home-page .page-subtitle { margin: 0.15rem 0 0; font-size: 0.845rem; color: var(--text-muted,#888); }

.legal-home-alert { margin-bottom: 1rem; }
.legal-home-error-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }

/* ─── Section cards (admin theme) ─────────────────────── */
.legal-home-section-card {
    border-radius: 14px;
    padding: 1.5rem 1.75rem 1.65rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 1px solid var(--border,#e8e8e8);
    background: var(--card-bg,#fff);
}
.legal-home-section-card.card { margin-bottom: 1.25rem; }

.legal-home-page .card-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted,#999);
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1.5px solid var(--border,#f0f0f0);
}
.legal-home-page .card-section-header svg { color: var(--accent); flex-shrink: 0; }

/* ─── Two-column grid (replaces Bootstrap on this page) ─ */
.legal-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
    margin-bottom: 0.5rem;
}
.legal-home-grid .form-group--full { grid-column: 1 / -1; }
.legal-home-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.legal-home-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.legal-home-grid--badges { margin-top: 0.25rem; margin-bottom: 0; }

@media (max-width: 900px) {
    .legal-home-grid--3,
    .legal-home-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .legal-home-grid,
    .legal-home-grid--3,
    .legal-home-grid--4 { grid-template-columns: 1fr; }
}

/* ─── Form controls (match profile) ───────────────────── */
.legal-home-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
}
.legal-home-page .form-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted,#888);
}
.legal-home-page .form-input {
    padding: 0.6rem 0.9rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px;
    font-size: 0.925rem;
    background: var(--card-bg,#fff);
    color: var(--text,#111);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.legal-home-page .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.legal-home-page textarea.form-input {
    min-height: 3.25rem;
    resize: vertical;
    line-height: 1.45;
}

/* ─── Nested blocks ───────────────────────────────────── */
.legal-home-subcard {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid var(--border,#eee);
    background: color-mix(in srgb, var(--sidebar-bg,#f5f6f8) 65%, #fff);
}
.legal-home-subcard--compact { margin-top: 0.75rem; }
.legal-home-subcard + .legal-home-subcard { margin-top: 0.75rem; }
.legal-home-subcard-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin-bottom: 0.85rem;
}
.legal-home-subcard .legal-home-grid { margin-bottom: 0; }
.legal-home-subcard .form-group:last-child { margin-bottom: 0; }
.legal-home-section-form { margin-bottom: 0; }
.legal-home-page [id^="section-"] { scroll-margin-top: 5.5rem; }
.legal-home-section-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1.5px solid var(--border,#f0f0f0);
}
.legal-home-page .legal-home-section-actions .btn-primary,
.legal-home-page .legal-home-section-actions button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.35rem;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    text-decoration: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}
.legal-home-page .legal-home-section-actions .btn-primary:hover,
.legal-home-page .legal-home-section-actions button[type="submit"]:hover {
    background: var(--accent-dark, #c01845);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.legal-home-page .legal-home-section-actions .btn-primary:focus-visible,
.legal-home-page .legal-home-section-actions button[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.legal-home-faq-items { margin-top: 0.25rem; }
.legal-home-faq-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.legal-home-faq-item-head .legal-home-subcard-title { margin-bottom: 0; }
.legal-home-faq-toolbar { margin-top: 0.35rem; margin-bottom: 0.25rem; }
.legal-home-page .btn-add-faq {
    padding: 0.5rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9px;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, #fff);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.legal-home-page .btn-add-faq:hover {
    background: color-mix(in srgb, var(--accent) 14%, #fff);
}
.legal-home-page .btn-faq-remove {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border, #ddd);
    background: #fff;
    color: var(--text-muted, #666);
    cursor: pointer;
}
.legal-home-page .btn-faq-remove:hover {
    border-color: #dc3545;
    color: #dc3545;
}

/* ─── Coverage areas grid ─────────────────────────────── */
.legal-home-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.25rem;
}
@media (max-width: 640px) {
    .legal-home-areas-grid { grid-template-columns: 1fr; }
}
.legal-home-area-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 10px;
    background: var(--card-bg, #fff);
}
.legal-home-area-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.legal-home-area-row-num {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}
</style>
@endpush

@push('scripts')
<script>
(function () {
    var list = document.getElementById('faq-items-list');
    var addBtn = document.getElementById('faqAddBtn');
    if (!list || !addBtn) return;

    function reindexFaqRows() {
        var rows = list.querySelectorAll('[data-faq-row]');
        rows.forEach(function (row, i) {
            var num = row.querySelector('.faq-row-num');
            if (num) num.textContent = String(i + 1);
            var q = row.querySelector('.faq-item-question');
            var a = row.querySelector('.faq-item-answer');
            if (q) q.name = 'faq[items][' + i + '][question]';
            if (a) a.name = 'faq[items][' + i + '][answer]';
            var rm = row.querySelector('[data-faq-remove]');
            if (rm) rm.style.display = rows.length <= 1 ? 'none' : '';
        });
    }

    addBtn.addEventListener('click', function () {
        var rows = list.querySelectorAll('[data-faq-row]');
        if (!rows.length) return;
        var clone = rows[rows.length - 1].cloneNode(true);
        clone.querySelectorAll('[id]').forEach(function (el) { el.removeAttribute('id'); });
        clone.querySelectorAll('input, textarea').forEach(function (el) { el.value = ''; });
        list.appendChild(clone);
        reindexFaqRows();
    });

    list.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-faq-remove]');
        if (!btn) return;
        var row = btn.closest('[data-faq-row]');
        if (!row) return;
        var rows = list.querySelectorAll('[data-faq-row]');
        if (rows.length <= 1) return;
        row.remove();
        reindexFaqRows();
    });

    reindexFaqRows();
})();

(function () {
    var list = document.getElementById('coverage-areas-list');
    var addBtn = document.getElementById('coverageAreaAddBtn');
    if (!list || !addBtn) return;

    function reindexAreaRows() {
        var rows = list.querySelectorAll('[data-area-row]');
        rows.forEach(function (row, i) {
            var num = row.querySelector('.area-row-num');
            if (num) num.textContent = String(i + 1);
            var input = row.querySelector('.coverage-area-name');
            if (input) input.name = 'coverage[areas][' + i + '][name]';
            var rm = row.querySelector('[data-area-remove]');
            if (rm) rm.style.display = rows.length <= 1 ? 'none' : '';
        });
    }

    addBtn.addEventListener('click', function () {
        var rows = list.querySelectorAll('[data-area-row]');
        if (!rows.length) return;
        var clone = rows[rows.length - 1].cloneNode(true);
        clone.querySelectorAll('[id]').forEach(function (el) { el.removeAttribute('id'); });
        clone.querySelectorAll('input').forEach(function (el) { el.value = ''; });
        list.appendChild(clone);
        reindexAreaRows();
        var newInput = list.querySelector('[data-area-row]:last-child .coverage-area-name');
        if (newInput) newInput.focus();
    });

    list.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-area-remove]');
        if (!btn) return;
        var row = btn.closest('[data-area-row]');
        if (!row) return;
        var rows = list.querySelectorAll('[data-area-row]');
        if (rows.length <= 1) return;
        row.remove();
        reindexAreaRows();
    });

    reindexAreaRows();
})();
</script>
@endpush