@extends('layouts.site')

@php
    $care = $c['maintenance'] ?? [];
    $meta = $c['meta'] ?? [];
    $plans = $care['plans'] ?? [];
    $featuredIndex = collect($plans)->search(fn ($plan) => ! empty($plan['featured']));
    $featuredIndex = $featuredIndex === false ? 0 : $featuredIndex;
    $featuredPlan = $plans[$featuredIndex] ?? [];
    $pageKey = 'maintenance';
@endphp

@section('pageTitle', ($care['title'] ?? 'Care plans').' — '.($meta['siteName'] ?? ''))
@section('metaDescription', $care['description'] ?? ($meta['description'] ?? ''))

@section('content')
    <section class="page-hero page-hero--light" aria-labelledby="care-title" @sectionTone($care['style'] ?? [])>
        <div class="page-hero__grid page-hero__grid--light" aria-hidden="true"></div>
        <div class="container page-hero__inner">
            <div class="page-hero__content reveal">
                <p class="eyebrow" data-edit="maintenance.eyebrow">{{ $care['eyebrow'] ?? '' }}</p>
                <h1 id="care-title" class="page-hero__title">
                    <x-editable path="maintenance.title">{{ $care['title'] ?? '' }}</x-editable>
                </h1>
                <p class="page-hero__desc">
                    <x-editable path="maintenance.description">{{ $care['description'] ?? '' }}</x-editable>
                </p>

                <div class="page-hero__actions">
                    @if(!empty($care['primaryCta']['label']))
                        <a class="btn btn--ink" href="{{ $care['primaryCta']['href'] ?? '#plans' }}" data-edit-href="maintenance.primaryCta.href">
                            <x-editable path="maintenance.primaryCta.label">{{ $care['primaryCta']['label'] }}</x-editable>
                            <span class="btn__arrow" aria-hidden="true">&rarr;</span>
                        </a>
                    @endif
                    @if(!empty($care['secondaryCta']['label']))
                        <a class="btn btn--outline" href="{{ \App\Support\PageLink::resolve($care['secondaryCta']['href'] ?? '#contact', $pageKey) }}" data-edit-href="maintenance.secondaryCta.href">
                            <x-editable path="maintenance.secondaryCta.label">{{ $care['secondaryCta']['label'] }}</x-editable>
                        </a>
                    @endif
                </div>
            </div>

            @if($featuredPlan)
                <aside class="care-glance reveal" aria-label="Plan at a glance">
                    <p class="care-glance__eyebrow" data-edit="maintenance.glanceLabel">{{ $care['glanceLabel'] ?? 'At a glance' }}</p>
                    <p class="care-glance__name" data-edit="maintenance.plans.{{ $featuredIndex }}.name">{{ $featuredPlan['name'] ?? '' }}</p>
                    <p class="care-glance__price">
                        <strong data-edit="maintenance.plans.{{ $featuredIndex }}.price">{{ $featuredPlan['price'] ?? '' }}</strong>
                        <small>{{ $featuredPlan['period'] ?? '/month' }}</small>
                    </p>
                    @if(!empty($featuredPlan['features']))
                        <ul class="care-glance__list">
                            @foreach(array_slice($featuredPlan['features'], 0, 3) as $feature)
                                <li><span aria-hidden="true">&#10003;</span>{{ $feature }}</li>
                            @endforeach
                        </ul>
                    @endif
                    <div class="care-glance__promises">
                        @foreach(array_slice($care['promises'] ?? [], 0, 2) as $promise)
                            <div>
                                <span data-edit="maintenance.promises.{{ $loop->index }}.label">{{ $promise['label'] ?? '' }}</span>
                                <strong data-edit="maintenance.promises.{{ $loop->index }}.value">{{ $promise['value'] ?? '' }}</strong>
                            </div>
                        @endforeach
                    </div>
                </aside>
            @endif
        </div>
    </section>

    @if(!empty($care['includes']))
        <section class="care section" id="coverage" aria-labelledby="coverage-title">
            <div class="container">
                <div class="section-head section-head--split reveal">
                    <div>
                        <p class="eyebrow" data-edit="maintenance.coverageEyebrow">{{ $care['coverageEyebrow'] ?? 'WHAT IS COVERED' }}</p>
                        <h2 id="coverage-title">
                            <x-editable path="maintenance.coverageTitle">{{ $care['coverageTitle'] ?? 'Everything that keeps a site healthy.' }}</x-editable>
                        </h2>
                    </div>
                    <p class="section-head__desc">
                        <x-editable path="maintenance.coverageDescription">{{ $care['coverageDescription'] ?? '' }}</x-editable>
                    </p>
                </div>

                <div class="care__grid">
                    @foreach($care['includes'] as $include)
                        <article class="care-card reveal">
                            <span class="care-card__icon" aria-hidden="true" data-edit="maintenance.includes.{{ $loop->index }}.icon">{{ $include['icon'] ?? '' }}</span>
                            <h3><x-editable path="maintenance.includes.{{ $loop->index }}.title">{{ $include['title'] ?? '' }}</x-editable></h3>
                            <p><x-editable path="maintenance.includes.{{ $loop->index }}.description">{{ $include['description'] ?? '' }}</x-editable></p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if(!empty($care['promises']))
        <section class="promises" aria-label="Service promises">
            <div class="container promises__grid">
                @foreach($care['promises'] as $promise)
                    <div class="promises__item">
                        <span data-edit="maintenance.promises.{{ $loop->index }}.label">{{ $promise['label'] ?? '' }}</span>
                        <strong data-edit="maintenance.promises.{{ $loop->index }}.value">{{ $promise['value'] ?? '' }}</strong>
                    </div>
                @endforeach
            </div>
        </section>
    @endif

    @if($plans)
        <section class="pricing care-plans section" id="plans" aria-labelledby="plans-title">
            <div class="container">
                <div class="section-head section-head--center reveal">
                    <p class="eyebrow" data-edit="maintenance.plansEyebrow">{{ $care['plansEyebrow'] ?? 'CARE PLANS' }}</p>
                    <h2 id="plans-title"><x-editable path="maintenance.plansTitle">{{ $care['plansTitle'] ?? '' }}</x-editable></h2>
                    <p class="section-head__desc"><x-editable path="maintenance.plansDescription">{{ $care['plansDescription'] ?? '' }}</x-editable></p>
                </div>

                <div class="pricing__grid">
                    @foreach($plans as $plan)
                        <article class="price-card {{ !empty($plan['featured']) ? 'price-card--featured' : '' }} reveal">
                            <div class="price-card__head">
                                <h3><x-editable path="maintenance.plans.{{ $loop->index }}.name">{{ $plan['name'] ?? '' }}</x-editable></h3>
                                @if(!empty($plan['featured']))
                                    <span class="price-card__tag" data-edit="maintenance.featuredLabel">{{ $care['featuredLabel'] ?? 'Most chosen' }}</span>
                                @endif
                            </div>
                            <p class="price-card__desc"><x-editable path="maintenance.plans.{{ $loop->index }}.description">{{ $plan['description'] ?? '' }}</x-editable></p>
                            <p class="price-card__price">
                                <span data-edit="maintenance.plans.{{ $loop->index }}.price">{{ $plan['price'] ?? '' }}</span>
                                <small data-edit="maintenance.plans.{{ $loop->index }}.period">{{ $plan['period'] ?? '' }}</small>
                            </p>
                            @if(!empty($plan['features']))
                                <ul class="list list--tight">
                                    @foreach($plan['features'] as $feature)
                                        <li><span class="list__mark" aria-hidden="true">&#10003;</span><x-editable path="maintenance.plans.{{ $loop->parent->index }}.features.{{ $loop->index }}">{{ $feature }}</x-editable></li>
                                    @endforeach
                                </ul>
                            @endif
                            <a class="btn {{ !empty($plan['featured']) ? 'btn--accent' : 'btn--outline' }}" href="{{ \App\Support\PageLink::resolve($plan['ctaHref'] ?? '#contact', $pageKey) }}" data-edit-href="maintenance.plans.{{ $loop->index }}.ctaHref">
                                <x-editable path="maintenance.plans.{{ $loop->index }}.cta">{{ $plan['cta'] ?? 'Choose this plan' }}</x-editable>
                                <span class="btn__arrow" aria-hidden="true">&rarr;</span>
                            </a>
                        </article>
                    @endforeach
                </div>

                @if(!empty($care['note']))
                    <p class="pricing__note"><x-editable path="maintenance.note">{{ $care['note'] }}</x-editable></p>
                @endif
            </div>
        </section>
    @endif

    @if(!empty($care['steps']))
        <section class="process care-steps section" id="how-care-works" aria-labelledby="care-steps-title">
            <div class="container">
                <div class="section-head section-head--split reveal">
                    <div>
                        <p class="eyebrow" data-edit="maintenance.stepsEyebrow">{{ $care['stepsEyebrow'] ?? 'HOW SUPPORT WORKS' }}</p>
                        <h2 id="care-steps-title"><x-editable path="maintenance.stepsTitle">{{ $care['stepsTitle'] ?? '' }}</x-editable></h2>
                    </div>
                    <p class="section-head__desc">
                        <x-editable path="maintenance.stepsDescription">{{ $care['stepsDescription'] ?? '' }}</x-editable>
                    </p>
                </div>

                <ol class="process__list">
                    @foreach($care['steps'] as $step)
                        <li class="process__step reveal">
                            <span class="process__number">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            <h3><x-editable path="maintenance.steps.{{ $loop->index }}.title">{{ $step['title'] ?? '' }}</x-editable></h3>
                            <p><x-editable path="maintenance.steps.{{ $loop->index }}.description">{{ $step['description'] ?? '' }}</x-editable></p>
                            <span class="process__duration" data-edit="maintenance.steps.{{ $loop->index }}.duration">{{ $step['duration'] ?? '' }}</span>
                        </li>
                    @endforeach
                </ol>
            </div>
        </section>
    @endif

    @if(!empty($care['faqs']))
        <section class="faq care-faq section" id="care-faq" aria-labelledby="care-faq-title">
            <div class="container faq__layout">
                <div class="faq__intro reveal">
                    <p class="eyebrow" data-edit="maintenance.faqEyebrow">{{ $care['faqEyebrow'] ?? 'CARE FAQ' }}</p>
                    <h2 id="care-faq-title"><x-editable path="maintenance.faqTitle">{{ $care['faqTitle'] ?? '' }}</x-editable></h2>
                    <p class="section-head__desc"><x-editable path="maintenance.faqDescription">{{ $care['faqDescription'] ?? '' }}</x-editable></p>

                    <div class="faq__support">
                        <p class="faq__support-title"><x-editable path="maintenance.supportTitle">{{ $care['supportTitle'] ?? '' }}</x-editable></p>
                        <p class="faq__support-text"><x-editable path="maintenance.supportText">{{ $care['supportText'] ?? '' }}</x-editable></p>
                        <div class="faq__support-actions">
                            <a class="btn btn--ink btn--sm" href="{{ \App\Support\PageLink::resolve($care['supportCtaHref'] ?? '#contact', $pageKey) }}" data-edit-href="maintenance.supportCtaHref">
                                <x-editable path="maintenance.supportCta">{{ $care['supportCta'] ?? 'Ask about my site' }}</x-editable>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="faq__list reveal">
                    @foreach($care['faqs'] as $faq)
                        <details class="faq-item" @if($loop->first) open @endif>
                            <summary>
                                <span><x-editable path="maintenance.faqs.{{ $loop->index }}.question">{{ $faq['question'] ?? '' }}</x-editable></span>
                                <span class="faq-item__icon" aria-hidden="true"></span>
                            </summary>
                            <div class="faq-item__answer">
                                <p><x-editable path="maintenance.faqs.{{ $loop->index }}.answer">{{ $faq['answer'] ?? '' }}</x-editable></p>
                            </div>
                        </details>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @include('site.cta', ['cta' => $c['cta'] ?? []])
@endsection