{{-- Admin → Settings → Appearance → Website template. One radio per template; "Preview" opens the live site in that look. --}}
@php
    $lfTplSaved = \App\Support\SiteTemplate::saved();
    $lfTplPicked = old(\App\Support\SiteTemplate::KEY, $lfTplSaved);
    $lfHero = \App\Support\HomepageBuilder::sections()->firstWhere('section_type', 'hero');
    $lfHeroStyle = $lfHero ? (\App\Support\HomepageBuilder::settings($lfHero)['style'] ?? 'auto') : 'auto';
    $lfHeroPinned = in_array($lfHeroStyle, \App\Support\SiteTemplate::HERO_STYLES, true);
@endphp
<div class="mb-4" id="lfTemplates">
    <div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
        <div>
            <label class="form-label mb-0 fs-6 fw-bold">{{ __('Website template') }}</label>
            <div class="form-text mt-0">{{ __('Changes the whole public site — header, hero, cards, footer and fonts. Your sections, copy and brand colours stay as they are.') }}</div>
        </div>
        <span class="badge lf-soft-primary rounded-pill">{{ __('Live now: :name', ['name' => \App\Support\SiteTemplate::get($lfTplSaved)['label']]) }}</span>
    </div>

    <div class="row g-3">
        @foreach(\App\Support\SiteTemplate::TEMPLATES as $key => $tpl)
            <div class="col-md-6 col-xl-3">
                <label class="lf-tpl-card {{ $lfTplPicked === $key ? 'is-active' : '' }}" data-template="{{ $key }}">
                    <input type="radio" name="{{ \App\Support\SiteTemplate::KEY }}" value="{{ $key }}" class="visually-hidden" @checked($lfTplPicked === $key)>
                    <span class="lf-tpl-shot lf-tpl-shot--{{ $key }}" aria-hidden="true">
                        @if($tpl['topbar'])<span class="lf-tpl-strip"></span>@endif
                        <span class="lf-tpl-nav"><i></i><i></i><i></i><i></i></span>
                        <span class="lf-tpl-hero"><b></b><b></b><b></b><u></u></span>
                        <span class="lf-tpl-cards"><i></i><i></i><i></i></span>
                        <span class="lf-tpl-foot"></span>
                    </span>
                    <span class="lf-tpl-body">
                        <span class="d-flex align-items-center justify-content-between gap-2">
                            <span class="fw-bold">{{ __($tpl['label']) }}</span>
                            <span class="lf-tpl-check"><i class="bi bi-check-lg"></i></span>
                        </span>
                        <span class="lf-tpl-tag">{{ __($tpl['tagline']) }}</span>
                        <span class="lf-tpl-desc">{{ __($tpl['description']) }}</span>
                        <span class="lf-tpl-best"><i class="bi bi-lightbulb me-1"></i>{{ __($tpl['best_for']) }}</span>
                    </span>
                    <span class="lf-tpl-actions">
                        <a href="{{ \App\Support\SiteTemplate::previewUrl($key) }}" target="_blank" rel="noopener" class="btn btn-sm btn-light" onclick="event.stopPropagation()">
                            <i class="bi bi-box-arrow-up-right me-1"></i>{{ __('Preview') }}
                        </a>
                        @if($lfTplSaved === $key)
                            <span class="small fw-semibold text-success"><i class="bi bi-check-circle-fill me-1"></i>{{ __('Live') }}</span>
                        @endif
                    </span>
                </label>
            </div>
        @endforeach
    </div>

    <div class="form-check mt-3">
        <input class="form-check-input" type="checkbox" name="site_template_apply_hero" id="site_template_apply_hero" value="1" @checked(! $lfHeroPinned)>
        <label class="form-check-label" for="site_template_apply_hero">
            {{ __('Use the template’s recommended hero layout') }}
            <span class="form-text d-block mt-0">
                @if($lfHeroPinned)
                    {{ __('The homepage hero is currently pinned to the ":style" layout. Tick this to let the template choose instead.', ['style' => ucfirst($lfHeroStyle)]) }}
                @else
                    {{ __('The hero already follows the template. You can pin a layout under Homepage → Hero → Layout.') }}
                @endif
            </span>
        </label>
    </div>
    <div class="form-text"><i class="bi bi-info-circle me-1"></i>{{ __('Preview opens the site in a new tab for you only; visitors keep seeing the live template until you save.') }}</div>
</div>
<hr class="my-4">

@push('scripts')
<style>
.lf-tpl-card { display: flex; flex-direction: column; height: 100%; border: 1.5px solid var(--lf-border); border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s, transform .15s; }
.lf-tpl-card:hover { border-color: rgba(var(--lf-primary-rgb), .5); transform: translateY(-2px); }
.lf-tpl-card.is-active { border-color: var(--lf-primary); box-shadow: 0 0 0 3px rgba(var(--lf-primary-rgb), .15); }
.lf-tpl-body { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem .5rem; }
.lf-tpl-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lf-primary); }
.lf-tpl-desc { font-size: .82rem; color: var(--lf-muted); line-height: 1.5; }
.lf-tpl-best { font-size: .74rem; color: var(--lf-muted); margin-top: .35rem; }
.lf-tpl-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; color: #fff; background: var(--lf-primary); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.lf-tpl-card.is-active .lf-tpl-check { opacity: 1; transform: none; }
.lf-tpl-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 1rem .9rem; margin-top: auto; }

/* Thumbnails are drawn in CSS so they always match the real templates and never go stale. */
.lf-tpl-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--lf-border); --tp-bg: #f7f8fc; --tp-ink: #0f172a; --tp-card: #fff; --tp-line: #e5e7eb; --tp-hero: linear-gradient(135deg, #4f46e5, #7c3aed); --tp-hero-ink: rgba(255,255,255,.9); --tp-nav: rgba(255,255,255,.85); --tp-foot: #0b1120; --tp-r: 6px; --tp-btn: #fff; background: var(--tp-bg); }
.lf-tpl-shot > span { position: absolute; left: 0; right: 0; display: block; }
.lf-tpl-strip { top: 0; height: 6%; background: #1e293b; }
.lf-tpl-nav { top: 0; height: 12%; background: var(--tp-nav); border-bottom: 1px solid var(--tp-line); display: flex !important; align-items: center; gap: 4%; padding: 0 6%; }
.lf-tpl-shot--academy .lf-tpl-nav { top: 6%; }
.lf-tpl-nav i { display: block; height: 3px; width: 8%; border-radius: 2px; background: var(--tp-ink); opacity: .55; }
.lf-tpl-nav i:first-child { width: 14%; height: 5px; opacity: .9; border-radius: 2px; background: var(--tp-hero); }
.lf-tpl-hero { top: 12%; height: 46%; background: var(--tp-hero); padding: 8% 6%; }
.lf-tpl-shot--academy .lf-tpl-hero { top: 18%; }
.lf-tpl-hero b { display: block; height: 6px; width: 46%; border-radius: 3px; background: var(--tp-hero-ink); margin-bottom: 5px; }
.lf-tpl-hero b:nth-child(2) { width: 36%; }
.lf-tpl-hero b:nth-child(3) { height: 3px; width: 40%; opacity: .6; margin-top: 8px; }
.lf-tpl-hero u { position: absolute; right: 6%; top: 18%; width: 30%; height: 64%; border-radius: var(--tp-r); background: var(--tp-card); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.lf-tpl-cards { top: 62%; height: 26%; display: flex !important; gap: 3%; padding: 3% 6% 0; }
.lf-tpl-cards i { flex: 1; display: block; border-radius: var(--tp-r); background: var(--tp-card); border: 1px solid var(--tp-line); box-shadow: 0 2px 6px rgba(15,23,42,.06); }
.lf-tpl-foot { bottom: 0; height: 10%; background: var(--tp-foot); }

.lf-tpl-shot--academy { --tp-bg: #faf8f3; --tp-hero: linear-gradient(180deg, #f1ecdf, #faf8f3); --tp-hero-ink: #1c1917; --tp-card: #fff; --tp-line: #e7e2d6; --tp-nav: #fff; --tp-foot: #f3efe4; --tp-r: 3px; }
.lf-tpl-shot--academy .lf-tpl-hero u { background: linear-gradient(135deg, #b45309, #78350f); box-shadow: none; }
.lf-tpl-shot--academy .lf-tpl-nav i:first-child { background: #1c1917; }
.lf-tpl-shot--academy .lf-tpl-foot { border-top: 1px solid #e7e2d6; }
.lf-tpl-shot--editorial { --tp-bg: #fff; --tp-hero: #fff; --tp-hero-ink: #09090b; --tp-card: #fff; --tp-line: #d4d4d8; --tp-nav: #fff; --tp-foot: #fff; --tp-r: 0; }
.lf-tpl-shot--editorial .lf-tpl-hero { border-bottom: 1px solid var(--tp-line); }
.lf-tpl-shot--editorial .lf-tpl-hero b { height: 9px; width: 52%; border-radius: 0; }
.lf-tpl-shot--editorial .lf-tpl-hero b:nth-child(2) { width: 30%; }
.lf-tpl-shot--editorial .lf-tpl-hero u { border: 1px solid #09090b; box-shadow: none; background: #fff; }
.lf-tpl-shot--editorial .lf-tpl-nav i:first-child { background: #09090b; }
.lf-tpl-shot--editorial .lf-tpl-cards i { box-shadow: none; }
.lf-tpl-shot--editorial .lf-tpl-foot { border-top: 1px solid #09090b; }
.lf-tpl-shot--nova { --tp-bg: #070b14; --tp-ink: #e6edf7; --tp-card: #0e1424; --tp-line: #1c2540; --tp-nav: rgba(7,11,20,.9); --tp-foot: #03060c; --tp-r: 5px;
    --tp-hero: radial-gradient(70% 90% at 50% 0%, rgba(124,58,237,.55), transparent 65%), #070b14; --tp-hero-ink: #fff; }
.lf-tpl-shot--nova .lf-tpl-hero u { background: #0e1424; border: 1px solid rgba(129,140,248,.6); box-shadow: 0 0 24px rgba(99,102,241,.45); }
.lf-tpl-shot--nova .lf-tpl-hero b:nth-child(2) { background: linear-gradient(90deg, #a78bfa, #22d3ee); }
.lf-tpl-shot--nova .lf-tpl-cards i { box-shadow: none; }
.lf-tpl-shot--nova .lf-tpl-nav i:first-child { background: linear-gradient(90deg, #6366f1, #22d3ee); }
[data-bs-theme="dark"] .lf-tpl-card { background: var(--lf-card); }
</style>
<script>
(function () {
    var cards = document.querySelectorAll('#lfTemplates .lf-tpl-card');
    cards.forEach(function (card) {
        card.addEventListener('click', function () {
            cards.forEach(function (c) { c.classList.toggle('is-active', c === card); });
            card.querySelector('input').checked = true;
        });
    });
})();
</script>
@endpush