@extends('layouts.platform')

@section('title', 'Platform Settings')
@section('header', 'Platform Settings')

@section('content')
    @if(session('status'))
        <div class="mb-6 flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
            <span class="flex-1">{{ session('status') }}</span>
            <button type="button" data-alert-dismiss class="-m-1 rounded-lg p-1.5 transition hover:bg-emerald-100/70" aria-label="Dismiss">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
    @endif

    @php
        $tokens = [
            ':appName' => config('app.name'),
            ':baseDomain' => $baseDomain,
        ];
        $render = function ($value) use ($tokens) {
            return is_string($value) ? strtr($value, $tokens) : $value;
        };

        $activeTab = in_array(request('tab'), ['hero', 'features', 'content', 'whatsapp', 'billing', 'payments', 'auth'], true)
            ? request('tab')
            : 'hero';

        $whatsappNumber = $settings['whatsapp.number'] ?? '';
        $whatsappPreview = preg_replace('/\D/', '', (string) $whatsappNumber) !== ''
            ? 'https://wa.me/' . preg_replace('/\D/', '', (string) $whatsappNumber)
                . '?text=' . rawurlencode((string) ($settings['whatsapp.message'] ?? ''))
            : 'Set a number above to preview the link.';

        // Resolved feature-section colours (falls back to the Pishon defaults).
        $fb = [];
        foreach ($featureColorDefaults as $colorKey => $colorDefault) {
            $fb[$colorKey] = \App\Services\Platform\PlatformSettings::hexColor($settings[$colorKey] ?? null, $colorDefault);
        }

        $featureColorFields = [
            'features_section_bg' => ['Section background', 'features.section_bg'],
            'features_heading_color' => ['Heading', 'features.heading_color'],
            'features_eyebrow_color' => ['Eyebrow / accent', 'features.eyebrow_color'],
            'features_subtitle_color' => ['Supporting text', 'features.subtitle_color'],
            'features_card_bg' => ['Card background', 'features.card_bg'],
            'features_card_title_color' => ['Card title', 'features.card_title_color'],
            'features_card_text_color' => ['Card body text', 'features.card_text_color'],
            'features_icon_bg' => ['Icon background', 'features.icon_bg'],
            'features_icon_color' => ['Icon / function colour', 'features.icon_color'],
            'features_border_color' => ['Border / divider', 'features.border_color'],
        ];
    @endphp

    {{-- Tab bar --}}
    <div class="mb-6 flex -mb-1 flex-nowrap items-center gap-2 overflow-x-auto pb-1" data-landing-tabs>
        @foreach([
            'hero' => 'Hero Orbit',
            'features' => 'Orbit Features',
            'content' => 'Content',
            'whatsapp' => 'WhatsApp',
            'billing' => 'Billing &amp; Trials',
            'payments' => 'Payments',
            'auth' => 'Authentication &amp; Email',
        ] as $tab => $label)
            <button type="button"
                    data-tab-target="{{ $tab }}"
                    data-tab-current="{{ $activeTab === $tab ? '1' : '' }}"
                    class="rounded-lg px-4 py-2 text-sm font-semibold transition-colors {{ $activeTab === $tab ? 'bg-primary-600 text-white shadow-sm' : 'bg-white text-gray-600 ring-1 ring-inset ring-gray-300 hover:bg-gray-50' }}">
                {!! $label !!}
            </button>
        @endforeach
    </div>

    {{-- Settings form: hero / content / whatsapp / billing are one unit so a
         single PUT never wipes a hidden section. The features tab carries its
         own separate CRUD forms and therefore lives outside this form. --}}
    <form method="POST" action="{{ route('platform.settings.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            {{-- ===================== HERO ORBIT ===================== --}}
            <div data-tab-panel="hero" class="card p-6 {{ $activeTab === 'hero' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">Hero Orbit</h2>
                        <p class="mt-0.5 text-sm text-gray-500">Copy, call-to-action buttons and the rotating "School Management Orbit" visual.</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="hero_enabled" name="hero_enabled" value="1"
                                   {{ ($settings['hero.enabled'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="hero_enabled" class="text-sm text-gray-700">Show hero section</label>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="hero_orbit_enabled" name="hero_orbit_enabled" value="1"
                                   {{ ($settings['hero.orbit_enabled'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="hero_orbit_enabled" class="text-sm text-gray-700">Show the rotating orbit</label>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="hero_animation_enabled" name="hero_animation_enabled" value="1"
                                   {{ ($settings['hero.animation_enabled'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="hero_animation_enabled" class="text-sm text-gray-700">Animate the orbit</label>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="label" for="hero_eyebrow">Hero eyebrow (badge)</label>
                            <input type="text" id="hero_eyebrow" name="hero_eyebrow" class="input" value="{{ old('hero_eyebrow', $render($settings['hero.eyebrow'] ?? '')) }}">
                        </div>
                        <div class="sm:col-span-2">
                            <label class="label" for="hero_headline">Hero headline</label>
                            <input type="text" id="hero_headline" name="hero_headline" class="input" value="{{ old('hero_headline', $render($settings['hero.headline'] ?? '')) }}">
                        </div>
                        <div>
                            <label class="label" for="hero_highlight">Highlighted phrase</label>
                            <input type="text" id="hero_highlight" name="hero_highlight" class="input" value="{{ old('hero_highlight', $render($settings['hero.highlight'] ?? '')) }}">
                            <p class="mt-1 text-xs text-gray-500">A phrase inside the headline to show in the brand colour, e.g. "Empowering Schools."</p>
                        </div>
                        <div>
                            <label class="label" for="hero_subtitle">Hero subtitle</label>
                            <textarea id="hero_subtitle" name="hero_subtitle" rows="2" class="textarea">{{ old('hero_subtitle', $render($settings['hero.subtitle'] ?? '')) }}</textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="label" for="hero_cta_primary">Primary button text</label>
                                <input type="text" id="hero_cta_primary" name="hero_cta_primary" class="input" value="{{ old('hero_cta_primary', $render($settings['hero.cta_primary'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="hero_cta_primary_url">Primary button URL</label>
                                <input type="text" id="hero_cta_primary_url" name="hero_cta_primary_url" class="input" placeholder="{{ route('platform.register') }}" value="{{ old('hero_cta_primary_url', $render($settings['hero.cta_primary_url'] ?? '')) }}">
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="label" for="hero_cta_secondary">Secondary button text</label>
                                <input type="text" id="hero_cta_secondary" name="hero_cta_secondary" class="input" value="{{ old('hero_cta_secondary', $render($settings['hero.cta_secondary'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="hero_cta_secondary_url">Secondary button URL</label>
                                <input type="text" id="hero_cta_secondary_url" name="hero_cta_secondary_url" class="input" placeholder="#pricing" value="{{ old('hero_cta_secondary_url', $render($settings['hero.cta_secondary_url'] ?? '')) }}">
                            </div>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <p class="section-label">Orbit animation</p>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="hero_animation_speed">Rotation speed (seconds per orbit)</label>
                                <input type="number" id="hero_animation_speed" name="hero_animation_speed" min="10" max="300" class="input" value="{{ old('hero_animation_speed', $settings['hero.animation_speed'] ?? 70) }}">
                                <p class="mt-1 text-xs text-gray-500">Lower spins faster. The outer rings move proportionally slower.</p>
                            </div>
                            <div>
                                <label class="label" for="hero_background">Background treatment</label>
                                <select id="hero_background" name="hero_background" class="select">
                                    @foreach(['aurora' => 'Aurora gradient', 'grid' => 'Subtle grid', 'minimal' => 'Minimal / light'] as $bg => $label)
                                        <option value="{{ $bg }}" {{ ($settings['hero.background'] ?? 'aurora') === $bg ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <p class="section-label">Orbit centre logo</p>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="hero_logo">Bundled asset</label>
                                <select id="hero_logo" name="hero_logo" class="select">
                                    @foreach($assetOptions as $assetValue => $assetLabel)
                                        <option value="{{ $assetValue }}" {{ ($settings['hero.logo'] ?? '') === $assetValue ? 'selected' : '' }}>{{ $assetLabel }}</option>
                                    @endforeach
                                </select>
                                <p class="mt-1 text-xs text-gray-500">Leave as the platform logo unless a custom mark is needed.</p>
                            </div>
                            <div>
                                <label class="label" for="hero_logo_file">Upload a custom logo (overrides selected)</label>
                                <input type="file" id="hero_logo_file" name="hero_logo_file" accept="image/*" class="input file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-primary-700">
                                <p class="mt-1 text-xs text-gray-500">PNG / JPG / WEBP / GIF, up to 2 MB. Stored on the public disk.</p>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <p class="section-label">Hero fallback image</p>
                        <p class="mt-1 text-xs text-gray-500">Used instead of the orbit when "Show the rotating orbit" is off.</p>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="hero_image">Bundled asset</label>
                                <select id="hero_image" name="hero_image" class="select">
                                    @foreach($assetOptions as $assetValue => $assetLabel)
                                        <option value="{{ $assetValue }}" {{ ($settings['hero.image'] ?? '') === $assetValue ? 'selected' : '' }}>{{ $assetLabel }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="label" for="hero_image_file">Upload a custom image (overrides selected)</label>
                                <input type="file" id="hero_image_file" name="hero_image_file" accept="image/*" class="input file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-primary-700">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===================== CONTENT ===================== --}}
            <div data-tab-panel="content" class="card p-6 {{ $activeTab === 'content' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">Content</h2>
                        <p class="mt-0.5 text-sm text-gray-500">Feature grid text, how-it-works steps, about, pricing, contact, social links, stats and the announcement banner.</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="features_grid_enabled" name="features_grid_enabled" value="1"
                                   {{ ($settings['features.grid_enabled'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="features_grid_enabled" class="text-sm text-gray-700">Show the features section on the landing page</label>
                        </div>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="features_headline">Features headline</label>
                                <input type="text" id="features_headline" name="features_headline" class="input" value="{{ old('features_headline', $render($settings['features.headline'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="features_subtitle">Features subtitle</label>
                                <input type="text" id="features_subtitle" name="features_subtitle" class="input" value="{{ old('features_subtitle', $render($settings['features.subtitle'] ?? '')) }}">
                            </div>
                        </div>
                        <div class="mt-4">
                            <label class="label" for="features_list">Fallback feature cards <span class="font-normal text-gray-400">(used only when no Orbit Features records exist)</span></label>
                            <textarea id="features_list" name="features_list" rows="6" class="textarea font-mono text-xs">{{ old('features_list', $featuresList) }}</textarea>
                            <p class="mt-1 text-xs text-gray-500">One per line, format <code class="text-gray-700">Title | Description</code>. Managed records on the "Orbit Features" tab take priority.</p>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <h3 class="text-sm font-semibold text-gray-900">How it works</h3>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div class="sm:col-span-2">
                                <label class="label" for="steps_headline">Section label</label>
                                <input type="text" id="steps_headline" name="steps_headline" class="input" value="{{ old('steps_headline', $render($settings['steps.headline'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="steps_step1">Step 1</label>
                                <input type="text" id="steps_step1" name="steps_step1" class="input" value="{{ old('steps_step1', $render($settings['steps.step1'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="steps_step2">Step 2</label>
                                <input type="text" id="steps_step2" name="steps_step2" class="input" value="{{ old('steps_step2', $render($settings['steps.step2'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="steps_step3">Step 3</label>
                                <input type="text" id="steps_step3" name="steps_step3" class="input" value="{{ old('steps_step3', $render($settings['steps.step3'] ?? '')) }}">
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="label" for="about_headline">About headline</label>
                            <input type="text" id="about_headline" name="about_headline" class="input" value="{{ old('about_headline', $render($settings['about.headline'] ?? '')) }}">
                        </div>
                        <div>
                            <label class="label" for="about_body">About body</label>
                            <textarea id="about_body" name="about_body" rows="3" class="textarea">{{ old('about_body', $render($settings['about.body'] ?? '')) }}</textarea>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <h3 class="text-sm font-semibold text-gray-900">Final call-to-action <span class="font-normal text-gray-400">(dark banner before the contact section)</span></h3>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="cta_headline">CTA headline</label>
                                <input type="text" id="cta_headline" name="cta_headline" class="input" value="{{ old('cta_headline', $render($settings['cta.headline'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="cta_subtitle">CTA subtitle</label>
                                <textarea id="cta_subtitle" name="cta_subtitle" rows="2" class="textarea">{{ old('cta_subtitle', $render($settings['cta.subtitle'] ?? '')) }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="pricing_enabled" name="pricing_enabled" value="1"
                                   {{ ($settings['pricing.enabled'] ?? '1') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="pricing_enabled" class="text-sm text-gray-700">Show the pricing section</label>
                        </div>
                        <p class="mt-2 text-xs text-gray-500">Cards, prices and trial days come from the live <a href="{{ route('platform.plans.index') }}" class="font-medium text-primary-600 hover:text-primary-700">Plans</a> — no prices are hardcoded here.</p>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="pricing_headline">Pricing headline</label>
                                <input type="text" id="pricing_headline" name="pricing_headline" class="input" value="{{ old('pricing_headline', $render($settings['pricing.headline'] ?? '')) }}">
                            </div>
                            <div>
                                <label class="label" for="pricing_subtitle">Pricing subtitle</label>
                                <input type="text" id="pricing_subtitle" name="pricing_subtitle" class="input" value="{{ old('pricing_subtitle', $render($settings['pricing.subtitle'] ?? '')) }}">
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                        <div>
                            <label class="label" for="contact_email">Contact email</label>
                            <input type="email" id="contact_email" name="contact_email" class="input" value="{{ old('contact_email', $render($settings['contact.email'] ?? '')) }}">
                        </div>
                        <div>
                            <label class="label" for="contact_phone">Contact phone</label>
                            <input type="text" id="contact_phone" name="contact_phone" class="input" value="{{ old('contact_phone', $settings['contact.phone'] ?? '') }}">
                        </div>
                        <div>
                            <label class="label" for="contact_address">Contact address</label>
                            <input type="text" id="contact_address" name="contact_address" class="input" value="{{ old('contact_address', $settings['contact.address'] ?? '') }}">
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <h3 class="text-sm font-semibold text-gray-900">Social links <span class="font-normal text-gray-400">(shown in the footer)</span></h3>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                            @foreach(['facebook', 'twitter', 'linkedin', 'instagram'] as $network)
                                <div>
                                    <label class="label" for="social_{{ $network }}">{{ ucfirst($network) }}</label>
                                    <input type="text" id="social_{{ $network }}" name="social_{{ $network }}" class="input" placeholder="https://…" value="{{ old('social_' . $network, $settings['social.' . $network] ?? '') }}">
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="stats_enabled" name="stats_enabled" value="1"
                                   {{ ($settings['stats.enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="stats_enabled" class="text-sm text-gray-700">Show statistics under the hero</label>
                        </div>
                        <div class="mt-3">
                            <label class="label" for="stats_items">Statistics</label>
                            <textarea id="stats_items" name="stats_items" rows="3" class="textarea font-mono text-xs">{{ old('stats_items', $statsItems) }}</textarea>
                            <p class="mt-1 text-xs text-gray-500">One per line, format <code class="text-gray-700">Value | Label</code> — e.g. <code class="text-gray-700">+40 | Schools on record</code>.</p>
                        </div>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 p-4">
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="banner_enabled" name="banner_enabled" value="1"
                                   {{ ($settings['banner.enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="banner_enabled" class="text-sm text-gray-700">Show the announcement banner on top of the landing page</label>
                        </div>
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
                            <div class="sm:col-span-3">
                                <label class="label" for="banner_text">Banner text</label>
                                <input type="text" id="banner_text" name="banner_text" class="input" value="{{ old('banner_text', $settings['banner.text'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="banner_link_text">Link text</label>
                                <input type="text" id="banner_link_text" name="banner_link_text" class="input" value="{{ old('banner_link_text', $settings['banner.link_text'] ?? '') }}">
                            </div>
                            <div class="sm:col-span-2">
                                <label class="label" for="banner_link_url">Link URL</label>
                                <input type="text" id="banner_link_url" name="banner_link_url" class="input" placeholder="https://… or #anchor" value="{{ old('banner_link_url', $settings['banner.link_url'] ?? '') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===================== WHATSAPP ===================== --}}
            <div data-tab-panel="whatsapp" class="card p-6 {{ $activeTab === 'whatsapp' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">WhatsApp Chat</h2>
                        <p class="mt-0.5 text-sm text-gray-500">A floating WhatsApp button on the public landing page. The link is built from the number and message — never hardcoded.</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="whatsapp_enabled" name="whatsapp_enabled" value="1"
                               {{ ($settings['whatsapp.enabled'] ?? '0') === '1' ? 'checked' : '' }}
                               class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                        <label for="whatsapp_enabled" class="text-sm text-gray-700">Enable the floating WhatsApp chat button</label>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <label class="label" for="whatsapp_number">WhatsApp number</label>
                            <input type="text" id="whatsapp_number" name="whatsapp_number" class="input" placeholder="e.g. 2348012345678" value="{{ old('whatsapp_number', $settings['whatsapp.number'] ?? '') }}">
                            <p class="mt-1 text-xs text-gray-500">Country code + number, no leading +. Only digits are kept.</p>
                        </div>
                        <div>
                            <label class="label" for="whatsapp_message">Pre-filled message</label>
                            <input type="text" id="whatsapp_message" name="whatsapp_message" class="input" value="{{ old('whatsapp_message', $settings['whatsapp.message'] ?? '') }}">
                        </div>
                        <div>
                            <label class="label" for="whatsapp_label">Button label</label>
                            <input type="text" id="whatsapp_label" name="whatsapp_label" class="input" value="{{ old('whatsapp_label', $settings['whatsapp.label'] ?? 'Chat with us') }}">
                        </div>
                        <div>
                            <label class="label" for="whatsapp_position">Position on screen</label>
                            <select id="whatsapp_position" name="whatsapp_position" class="select">
                                <option value="bottom-right" {{ ($settings['whatsapp.position'] ?? 'bottom-right') === 'bottom-right' ? 'selected' : '' }}>Bottom right</option>
                                <option value="bottom-left" {{ ($settings['whatsapp.position'] ?? 'bottom-right') === 'bottom-left' ? 'selected' : '' }}>Bottom left</option>
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label class="label" for="whatsapp_greeting">Greeting bubble text <span class="font-normal text-gray-400">(shown above the button)</span></label>
                            <textarea id="whatsapp_greeting" name="whatsapp_greeting" rows="2" class="textarea">{{ old('whatsapp_greeting', $settings['whatsapp.greeting'] ?? '') }}</textarea>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <input type="checkbox" id="whatsapp_show_label" name="whatsapp_show_label" value="1"
                               {{ ($settings['whatsapp.show_label'] ?? '1') === '1' ? 'checked' : '' }}
                               class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                        <label for="whatsapp_show_label" class="text-sm text-gray-700">Show the greeting bubble</label>
                    </div>

                    <div class="rounded-xl border border-gray-100 bg-gray-50/60 px-4 py-3">
                        <p class="text-xs text-gray-500">
                            <span class="font-semibold text-gray-700">Public link preview:</span>
                            <code class="break-all text-gray-700">{{ $whatsappPreview }}</code>
                        </p>
                    </div>
                </div>
            </div>

            {{-- ===================== BILLING & TRIALS ===================== --}}
            <div data-tab-panel="billing" class="card p-6 {{ $activeTab === 'billing' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">Billing &amp; Trials</h2>
                        <p class="mt-0.5 text-sm text-gray-500">Platform-wide trial configuration. Plan prices and per-plan trial overrides are managed under Plans.</p>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="sm:max-w-xs">
                        <label class="label" for="trial_duration_days">Default trial length (days)</label>
                        <input type="number" id="trial_duration_days" name="trial_duration_days" min="1" max="365" class="input" value="{{ old('trial_duration_days', $settings['trial.duration_days'] ?? 14) }}">
                        <p class="mt-1 text-xs text-gray-500">Applies to new trials. Existing schools keep the duration they were granted.</p>
                    </div>

                    <div class="border-t border-gray-100 pt-6">
                        <h3 class="text-sm font-semibold text-gray-900">Service charge (Pishon money)</h3>
                        <p class="mt-1 text-xs text-gray-500">Applied when quoting a plan. Empty values fall back to env defaults (currently {{ config('subscription.service_charge_rate') }}% + {{ config('subscription.gateway_fee_rate') }}% gateway + ₦{{ config('subscription.gateway_fee_fixed') }} fixed).</p>
                        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
                            <div>
                                <label class="label" for="billing_service_charge_rate">Pishon service charge (%)</label>
                                <input type="number" id="billing_service_charge_rate" name="billing_service_charge_rate" min="0" max="50" step="0.01" class="input" value="{{ old('billing_service_charge_rate', $settings['billing.service_charge_rate'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="billing_gateway_fee_rate">Gateway fee rate (%)</label>
                                <input type="number" id="billing_gateway_fee_rate" name="billing_gateway_fee_rate" min="0" max="50" step="0.01" class="input" value="{{ old('billing_gateway_fee_rate', $settings['billing.gateway_fee_rate'] ?? '') }}">
                                <p class="mt-1 text-xs text-gray-500">Pishon's own processing cost estimate.</p>
                            </div>
                            <div>
                                <label class="label" for="billing_gateway_fee_fixed">Gateway fee fixed (₦)</label>
                                <input type="number" id="billing_gateway_fee_fixed" name="billing_gateway_fee_fixed" min="0" max="100000" step="0.01" class="input" value="{{ old('billing_gateway_fee_fixed', $settings['billing.gateway_fee_fixed'] ?? '') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===================== PAYMENTS (Pishon money) ===================== --}}
            @php
                $paymentProviders = [
                    'paystack' => ['name' => 'Paystack', 'modeValue' => $settings['gateway.paystack.mode'] ?? 'test', 'publicValue' => $settings['gateway.paystack.public_key'] ?? '', 'secretStored' => filled($settings['gateway.paystack.secret_key'] ?? ''), 'webhookStored' => filled($settings['gateway.paystack.webhook_secret'] ?? '')],
                    'flutterwave' => ['name' => 'Flutterwave', 'modeValue' => $settings['gateway.flutterwave.mode'] ?? 'test', 'publicValue' => $settings['gateway.flutterwave.public_key'] ?? '', 'secretStored' => filled($settings['gateway.flutterwave.secret_key'] ?? ''), 'webhookStored' => filled($settings['gateway.flutterwave.webhook_secret'] ?? '')],
                ];
            @endphp
            <div data-tab-panel="payments" class="card p-6 {{ $activeTab === 'payments' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">Payments</h2>
                        <p class="mt-0.5 text-sm text-gray-500">Pishon's own gateway credentials. Schools in "Pishon gateway" mode use these keys (settled to the school's profile); platform subscription invoices are charged through them too. Values override the .env keys, which remain the fallback.</p>
                    </div>
                </div>

                <div class="space-y-8">
                    @foreach($paymentProviders as $provider => $gw)
                        <div class="rounded-xl border border-gray-200 p-5">
                            <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
                                <h3 class="text-sm font-semibold text-gray-900">{{ $gw['name'] }}</h3>
                                <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">
                                    {{ filled($gw['publicValue']) || $gw['secretStored'] || $gw['webhookStored'] ? 'Configured' : 'Using .env fallback' }}
                                </span>
                            </div>
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="label" for="gateway_{{ $provider }}_mode">Mode</label>
                                    <select id="gateway_{{ $provider }}_mode" name="gateway_{{ $provider }}_mode" class="input">
                                        <option value="test" {{ ($gw['modeValue'] ?? 'test') === 'test' ? 'selected' : '' }}>Test</option>
                                        <option value="live" {{ ($gw['modeValue'] ?? 'test') === 'live' ? 'selected' : '' }}>Live</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="label" for="gateway_{{ $provider }}_public_key">Public key</label>
                                    <input type="text" id="gateway_{{ $provider }}_public_key" name="gateway_{{ $provider }}_public_key" class="input" value="{{ old("gateway_{$provider}_public_key", $gw['publicValue']) }}" placeholder="{{ config("services.{$provider}.public_key") ? 'Env: '.substr(config("services.{$provider}.public_key"), 0, 10).'…' : 'No env key' }}">
                                </div>
                                <div>
                                    <label class="label" for="gateway_{{ $provider }}_secret_key">Secret key</label>
                                    <input type="password" id="gateway_{{ $provider }}_secret_key" name="gateway_{{ $provider }}_secret_key" class="input" value="" autocomplete="new-password" placeholder="{{ $gw['secretStored'] ? 'Stored — leave blank to keep' : (config("services.{$provider}.secret_key") ? 'Env: '.substr(config("services.{$provider}.secret_key"), 0, 10).'…' : 'No env key') }}">
                                </div>
                                <div>
                                    <label class="label" for="gateway_{{ $provider }}_webhook_secret">Webhook secret</label>
                                    <input type="password" id="gateway_{{ $provider }}_webhook_secret" name="gateway_{{ $provider }}_webhook_secret" class="input" value="" autocomplete="new-password" placeholder="{{ $gw['webhookStored'] ? 'Stored — leave blank to keep' : (config("services.{$provider}.webhook_secret") ? 'Env: '.substr(config("services.{$provider}.webhook_secret"), 0, 10).'…' : 'No env key') }}">
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-gray-500">Secret fields are encrypted at rest and never re-rendered. Leave them blank to keep the currently stored value.</p>
                        </div>
                    @endforeach
                    <p class="text-xs text-gray-500">Webhook URLs: <code class="rounded bg-gray-100 px-1.5 py-0.5">{{ url('/api/webhooks/payments/paystack') }}</code> (Paystack) · <code class="rounded bg-gray-100 px-1.5 py-0.5">{{ url('/api/webhooks/payments/flutterwave') }}</code> (Flutterwave).</p>
                </div>
            </div>

            {{-- ===================== AUTHENTICATION & EMAIL ===================== --}}
            @php
                $mailConfigured = app(\App\Services\Platform\PlatformSettings::class)->isEmailConfigured();
            @endphp
            <div data-tab-panel="auth" class="card p-6 {{ $activeTab === 'auth' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">Authentication &amp; Email</h2>
                        <p class="mt-0.5 text-sm text-gray-500">Central email sending (SMTP), email verification and platform sign-in with Google or Facebook. When email is configured, every verification, password-reset and notification email is sent from here. The platform login page shows social buttons whenever a provider is enabled below.</p>
                    </div>
                </div>

                <div class="space-y-8">
                    {{-- SMTP --}}
                    <div class="rounded-xl border border-gray-200 p-5">
                        <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900">SMTP email server</h3>
                                <p class="mt-0.5 text-xs text-gray-500">Used for all system emails &mdash; verification, password reset, receipts and notifications.</p>
                            </div>
                            @if($mailConfigured)
                                <span class="badge badge-green">Configured</span>
                            @else
                                <span class="badge badge-gray">Not configured</span>
                            @endif
                        </div>

                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="auth_mail_enabled" name="auth_mail_enabled" value="1"
                                   {{ ($settings['auth.mail_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="auth_mail_enabled" class="text-sm text-gray-700">Enable system emails (SMTP)</label>
                        </div>

                        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="auth_smtp_host">SMTP host</label>
                                <input type="text" id="auth_smtp_host" name="auth_smtp_host" class="input" placeholder="smtp.example.com" value="{{ old('auth_smtp_host', $settings['auth.smtp_host'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="auth_smtp_port">Port</label>
                                <input type="number" id="auth_smtp_port" name="auth_smtp_port" min="1" max="65535" class="input" value="{{ old('auth_smtp_port', $settings['auth.smtp_port'] ?? '587') }}">
                            </div>
                            <div>
                                <label class="label" for="auth_smtp_username">Username</label>
                                <input type="text" id="auth_smtp_username" name="auth_smtp_username" class="input" autocomplete="off" value="{{ old('auth_smtp_username', $settings['auth.smtp_username'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="auth_smtp_password">Password <span class="font-normal text-gray-400">(encrypted)</span></label>
                                <input type="password" id="auth_smtp_password" name="auth_smtp_password" class="input" autocomplete="new-password" placeholder="{{ $settings['auth.smtp_password'] ? '•••••••• (stored — leave blank to keep)' : '' }}" value="">
                            </div>
                            <div>
                                <label class="label" for="auth_smtp_encryption">Encryption</label>
                                <select id="auth_smtp_encryption" name="auth_smtp_encryption" class="select">
                                    <option value="tls" {{ ($settings['auth.smtp_encryption'] ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS (recommended)</option>
                                    <option value="ssl" {{ ($settings['auth.smtp_encryption'] ?? 'tls') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                    <option value="" {{ ($settings['auth.smtp_encryption'] ?? 'tls') === '' ? 'selected' : '' }}>None</option>
                                </select>
                            </div>
                            <div>
                                <label class="label" for="auth_from_email">From email address</label>
                                <input type="email" id="auth_from_email" name="auth_from_email" class="input" placeholder="no-reply@pishonedu.com" value="{{ old('auth_from_email', $settings['auth.from_email'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="auth_from_name">From name</label>
                                <input type="text" id="auth_from_name" name="auth_from_name" class="input" placeholder="Pishon" value="{{ old('auth_from_name', $settings['auth.from_name'] ?? '') }}">
                            </div>
                        </div>

                        <div class="mt-4 rounded-xl border border-gray-100 bg-gray-50/60 px-4 py-3">
                            <p class="text-xs text-gray-500">
                                <span class="font-semibold text-gray-700">Test connection</span> &mdash; use the <em>Send test email</em> box below the form to verify the server above works before saving.
                            </p>
                            @if($mailConfigured)
                                <p class="mt-1 text-xs font-medium text-emerald-600">Current SMTP configuration is live — this status reflects the saved settings.</p>
                            @endif
                        </div>
                    </div>

                    {{-- Email verification --}}
                    <div class="rounded-xl border border-gray-200 p-5">
                        <div class="mb-4">
                            <h3 class="text-sm font-semibold text-gray-900">Email verification</h3>
                            <p class="mt-0.5 text-xs text-gray-500">When enabled, new platform accounts must verify their email address before they can sign in. Existing verified users are unaffected.</p>
                        </div>
                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="auth_email_verification_enabled" name="auth_email_verification_enabled" value="1"
                                   {{ ($settings['auth.email_verification_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="auth_email_verification_enabled" class="text-sm text-gray-700">Require email verification for new platform accounts</label>
                        </div>
                    </div>

                    {{-- Google --}}
                    <div class="rounded-xl border border-gray-200 p-5">
                        <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900">Sign in with Google</h3>
                                <p class="mt-0.5 text-xs text-gray-500">Create credentials in the Google Cloud console and paste them here.</p>
                            </div>
                            @if(app(\App\Services\Platform\PlatformSettings::class)->isGoogleConfigured())
                                <span class="badge badge-green">Enabled</span>
                            @else
                                <span class="badge badge-gray">Disabled</span>
                            @endif
                        </div>

                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="auth_google_enabled" name="auth_google_enabled" value="1"
                                   {{ ($settings['auth.google_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="auth_google_enabled" class="text-sm text-gray-700">Allow sign in with Google</label>
                        </div>

                        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="auth_google_client_id">Client ID</label>
                                <input type="text" id="auth_google_client_id" name="auth_google_client_id" class="input" autocomplete="off" value="{{ old('auth_google_client_id', $settings['auth.google_client_id'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="auth_google_client_secret">Client secret <span class="font-normal text-gray-400">(encrypted)</span></label>
                                <input type="password" id="auth_google_client_secret" name="auth_google_client_secret" class="input" autocomplete="new-password" placeholder="{{ $settings['auth.google_client_secret'] ? '•••••••• (stored — leave blank to keep)' : '' }}" value="">
                            </div>
                        </div>

                        <div class="mt-3 rounded-xl border border-gray-100 bg-gray-50/60 px-4 py-3">
                            <p class="text-xs text-gray-500">
                                <span class="font-semibold text-gray-700">Authorised redirect URI (paste into Google):</span>
                                <code class="block break-all text-gray-700">{{ route('platform.social.callback', 'google') }}</code>
                            </p>
                        </div>
                    </div>

                    {{-- Facebook --}}
                    <div class="rounded-xl border border-gray-200 p-5">
                        <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h3 class="text-sm font-semibold text-gray-900">Sign in with Facebook</h3>
                                <p class="mt-0.5 text-xs text-gray-500">Create an app in the Meta Developer portal and paste its credentials here.</p>
                            </div>
                            @if(app(\App\Services\Platform\PlatformSettings::class)->isFacebookConfigured())
                                <span class="badge badge-green">Enabled</span>
                            @else
                                <span class="badge badge-gray">Disabled</span>
                            @endif
                        </div>

                        <div class="flex items-center gap-2">
                            <input type="checkbox" id="auth_facebook_enabled" name="auth_facebook_enabled" value="1"
                                   {{ ($settings['auth.facebook_enabled'] ?? '0') === '1' ? 'checked' : '' }}
                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                            <label for="auth_facebook_enabled" class="text-sm text-gray-700">Allow sign in with Facebook</label>
                        </div>

                        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <label class="label" for="auth_facebook_client_id">App ID</label>
                                <input type="text" id="auth_facebook_client_id" name="auth_facebook_client_id" class="input" autocomplete="off" value="{{ old('auth_facebook_client_id', $settings['auth.facebook_client_id'] ?? '') }}">
                            </div>
                            <div>
                                <label class="label" for="auth_facebook_client_secret">App secret <span class="font-normal text-gray-400">(encrypted)</span></label>
                                <input type="password" id="auth_facebook_client_secret" name="auth_facebook_client_secret" class="input" autocomplete="new-password" placeholder="{{ $settings['auth.facebook_client_secret'] ? '•••••••• (stored — leave blank to keep)' : '' }}" value="">
                            </div>
                        </div>

                        <div class="mt-3 rounded-xl border border-gray-100 bg-gray-50/60 px-4 py-3">
                            <p class="text-xs text-gray-500">
                                <span class="font-semibold text-gray-700">Valid OAuth redirect URI (paste into Meta):</span>
                                <code class="block break-all text-gray-700">{{ route('platform.social.callback', 'facebook') }}</code>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ===================== FEATURES SECTION COLOURS ===================== --}}
            <div data-tab-panel="features" class="card p-6 {{ $activeTab === 'features' ? '' : 'hidden' }}">
                <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                    <div>
                        <h2 class="card-title">Features Section Colours</h2>
                        <p class="mt-0.5 text-sm text-gray-500">
                            Brand the blue &ldquo;Everything a school needs&rdquo; section on the platform landing page. Defaults are sampled from the Pishon logo (#0171BC). This affects the platform landing page only &mdash; individual school sites keep their own branding.
                        </p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($featureColorFields as $input => [$fieldLabel, $colorKey])
                        @php
                            $def = $featureColorDefaults[$colorKey] ?? '#000000';
                            $val = $fb[$colorKey] ?? $def;
                        @endphp
                        <div>
                            <label class="label" for="{{ $input }}">{{ $fieldLabel }}</label>
                            <div class="flex items-center gap-3">
                                <input type="color" id="{{ $input }}" name="{{ $input }}" value="{{ $val }}"
                                       data-color-preview="{{ $input }}"
                                       class="h-10 w-14 cursor-pointer rounded-lg border border-gray-300 bg-white p-1 shadow-sm">
                                <div class="text-xs leading-tight">
                                    <p class="font-mono text-gray-700" data-color-value="{{ $input }}">{{ $val }}</p>
                                    <p class="text-gray-400">Default {{ $def }}</p>
                                </div>
                            </div>
                            @error($input) <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                    @endforeach
                </div>

                <div class="mt-6 flex items-start gap-2 border-t border-gray-100 pt-4">
                    <input type="checkbox" id="features_colors_reset" name="features_colors_reset" value="1"
                           class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                    <label for="features_colors_reset" class="text-sm text-gray-700">
                        Reset these colours to the Pishon defaults on save
                        <span class="mt-0.5 block text-xs text-gray-400">Leave unchecked to keep the colours above.</span>
                    </label>
                </div>

                {{-- Live preview --}}
                <div class="mt-6">
                    <p class="label">Preview</p>
                    <div class="rounded-2xl p-6 shadow-inner" data-fb-preview
                         style="background-color: {{ $fb['features.section_bg'] }};">
                        <p class="text-xs font-semibold uppercase tracking-widest"
                           data-fb-preview-el="eyebrow" style="color: {{ $fb['features.eyebrow_color'] }};">Features</p>
                        <p class="mt-2 font-display text-2xl font-bold"
                           data-fb-preview-el="heading" style="color: {{ $fb['features.heading_color'] }};">{{ $settings['features.headline'] ?? 'Everything a school needs' }}</p>
                        <p class="mt-1 text-sm"
                           data-fb-preview-el="subtitle" style="color: {{ $fb['features.subtitle_color'] }};">{{ $settings['features.subtitle'] ?? 'Each tenant gets a complete, self-contained school system.' }}</p>
                        <div class="mt-4 max-w-xs rounded-2xl p-4"
                             data-fb-preview-el="card"
                             style="background-color: {{ $fb['features.card_bg'] }}; border: 1px solid {{ $fb['features.border_color'] }};">
                            <span class="flex h-9 w-9 items-center justify-center rounded-xl"
                                  data-fb-preview-el="icon"
                                  style="background-color: {{ $fb['features.icon_bg'] }}; color: {{ $fb['features.icon_color'] }};">
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </span>
                            <p class="mt-2 text-sm font-semibold"
                               data-fb-preview-el="cardtitle" style="color: {{ $fb['features.card_title_color'] }};">Result Management</p>
                            <p class="text-xs"
                               data-fb-preview-el="cardtext" style="color: {{ $fb['features.card_text_color'] }};">Generate professional results and report cards.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-6 {{ in_array($activeTab, ['hero', 'content', 'whatsapp', 'billing', 'auth', 'features'], true) ? '' : 'hidden' }}" data-save-bar>
            <button type="submit" class="btn btn-primary">Save Settings</button>
            <a href="{{ route('home') }}" target="_blank" rel="noopener" class="ml-3 text-sm font-medium text-gray-500 hover:text-gray-900">View landing page &rarr;</a>
        </div>
    </form>

    {{-- ===================== SEND TEST EMAIL (separate form) ===================== --}}
    <div data-tab-panel="auth" class="space-y-6 {{ $activeTab === 'auth' ? '' : 'hidden' }}">
        <div class="card p-6">
            <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                <div>
                    <h2 class="card-title">Send test email</h2>
                    <p class="mt-0.5 text-sm text-gray-500">Validates the saved SMTP settings by sending a real message. Configure your SMTP values in the form above, hit Save Settings, then try the live server here.</p>
                </div>
            </div>

            <form method="POST" action="{{ route('platform.settings.test-email') }}" class="flex flex-wrap items-end gap-2">
                @csrf
                <div class="flex-1 sm:max-w-xs">
                    <label class="label" for="test_email_to">Recipient email</label>
                    <input type="email" id="test_email_to" name="to" class="input" placeholder="you@example.com" required value="{{ old('to', $settings['auth.from_email'] ?? '') }}">
                </div>
                <button type="submit" class="btn btn-secondary">Send test email</button>
            </form>

            @if(session('test_email_status'))
                <p class="mt-3 text-sm font-medium {{ session('test_email_ok', false) ? 'text-emerald-600' : 'text-rose-600' }}">{{ session('test_email_status') }}</p>
            @endif
        </div>
    </div>

    {{-- ===================== ORBIT FEATURES (separate forms) ===================== --}}
    <div data-tab-panel="features" class="space-y-6 {{ $activeTab === 'features' ? '' : 'hidden' }}">
        <div class="card p-6">
            <div class="card-header -mx-6 -mt-6 mb-6 rounded-t-2xl">
                <div>
                    <h2 class="card-title">Orbit Features</h2>
                    <p class="mt-0.5 text-sm text-gray-500">Database-driven chips for the hero orbit and the landing-page feature grid. Up to 22 appear in the orbit (ring 1 = 4, ring 2 = 8, ring 3 = 10); the rest appear only in the grid.</p>
                </div>
            </div>

            <details class="group rounded-xl border border-gray-200 bg-white" open>
                <summary class="flex cursor-pointer list-none items-center justify-between gap-2 rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 hover:bg-gray-50">
                    <span>
                        <svg class="mr-1.5 inline h-4 w-4 text-primary-600 transition-transform group-open:rotate-45" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                        Add a feature
                    </span>
                </summary>
                <form method="POST" action="{{ route('platform.settings.features.store') }}" enctype="multipart/form-data" class="border-t border-gray-100 p-4">
                    @csrf
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        <div class="lg:col-span-2">
                            <label class="label" for="new_title">Title</label>
                            <input type="text" id="new_title" name="title" class="input" value="{{ old('title') }}" placeholder="e.g. Result Management" required>
                        </div>
                        <div>
                            <label class="label" for="new_icon">Icon</label>
                            <select id="new_icon" name="icon" class="select">
                                <option value="">No icon (checkmark)</option>
                                @foreach($iconOptions as $iconKey => $iconLabel)
                                    <option value="{{ $iconKey }}" {{ old('icon') === $iconKey ? 'selected' : '' }}>{{ $iconLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="lg:col-span-2">
                            <label class="label" for="new_description">Description <span class="font-normal text-gray-400">(used in the grid and the orbit spotlight)</span></label>
                            <textarea id="new_description" name="description" rows="2" class="textarea">{{ old('description') }}</textarea>
                        </div>
                        <div>
                            <label class="label" for="new_link">Link <span class="font-normal text-gray-400">(optional)</span></label>
                            <input type="text" id="new_link" name="link" class="input" placeholder="#features / https://…" value="{{ old('link') }}">
                        </div>
                        <div>
                            <label class="label" for="new_sort_order">Sort order</label>
                            <input type="number" id="new_sort_order" name="sort_order" min="0" max="9999" class="input" value="{{ old('sort_order', $features->max('sort_order') + 1) }}">
                        </div>
                        <div>
                            <label class="label" for="new_image">Image <span class="font-normal text-gray-400">(optional)</span></label>
                            <input type="file" id="new_image" name="image" accept="image/*" class="input file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-primary-700">
                        </div>
                        <div class="flex flex-wrap items-end gap-4 pb-1">
                            <div class="flex items-center gap-2">
                                <input type="hidden" name="in_orbit" value="0">
                                <input type="checkbox" id="new_in_orbit" name="in_orbit" value="1" checked class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <label for="new_in_orbit" class="text-sm text-gray-700">Show in orbit</label>
                            </div>
                            <div class="flex items-center gap-2">
                                <input type="hidden" name="is_highlighted" value="0">
                                <input type="checkbox" id="new_is_highlighted" name="is_highlighted" value="1" class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <label for="new_is_highlighted" class="text-sm text-gray-700">Highlight</label>
                            </div>
                            <div class="flex items-center gap-2">
                                <input type="hidden" name="is_active" value="0">
                                <input type="checkbox" id="new_is_active" name="is_active" value="1" checked class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <label for="new_is_active" class="text-sm text-gray-700">Active</label>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary btn-sm">Add feature</button>
                    </div>
                </form>
            </details>

            <div class="mt-6 overflow-x-auto">
                @if($features->isEmpty())
                    <div class="empty-state">
                        <p class="text-sm font-medium text-gray-700">No feature records yet</p>
                        <p class="text-xs text-gray-500">Add one above, or run <code class="text-gray-700">php artisan db:seed --class=LandingContentSeeder</code> to restore the defaults.</p>
                    </div>
                @else
                    <table class="table-modern">
                        <thead>
                            <tr>
                                <th>Order</th>
                                <th>Feature</th>
                                <th>Orbit</th>
                                <th>Highlight</th>
                                <th>Status</th>
                                <th class="text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($features as $feature)
                                <tr>
                                    <td class="align-top">{{ $feature->sort_order }}</td>
                                    <td class="align-top">
                                        <div class="flex items-center gap-3">
                                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-primary-600 [&_svg]:h-6 [&_svg]:w-6">
                                                {!! $feature->iconSvg() !!}
                                            </span>
                                            <div>
                                                <p class="font-semibold text-gray-900">{{ $feature->title }}</p>
                                                <p class="line-clamp-2 max-w-md text-xs text-gray-500">{{ $feature->description }}</p>
                                                @if($feature->link)
                                                    <p class="mt-0.5 max-w-md truncate text-xs text-primary-600">{{ $feature->link }}</p>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="align-top">@if($feature->in_orbit)<span class="badge badge-blue">In orbit</span>@else<span class="badge badge-gray">Grid only</span>@endif</td>
                                    <td class="align-top">@if($feature->is_highlighted)<span class="badge badge-indigo">Highlight</span>@else<span class="badge badge-gray">—</span>@endif</td>
                                    <td class="align-top">@if($feature->is_active)<span class="badge badge-green">Active</span>@else<span class="badge badge-red">Inactive</span>@endif</td>
                                    <td class="align-top">
                                        <div class="flex items-center justify-end gap-2">
                                            <details class="group relative">
                                                <summary class="btn btn-secondary btn-sm cursor-pointer list-none">Edit</summary>
                                                <div class="fixed inset-x-0 top-0 z-50 flex min-h-screen items-start justify-center overflow-y-auto bg-gray-900/40 p-4 sm:p-8" onclick="event.target === this && this.closest('details').removeAttribute('open')">
                                                    <div class="w-full max-w-md">
                                                        <div class="card p-6" onclick="event.stopPropagation()">
                                                            <div class="mb-4 flex items-center justify-between">
                                                                <h3 class="card-title">Edit: {{ $feature->title }}</h3>
                                                                <button type="button" class="text-gray-400 hover:text-gray-600" onclick="this.closest('details').removeAttribute('open')" aria-label="Close">
                                                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                                                </button>
                                                            </div>
                                                            <form method="POST" action="{{ route('platform.settings.features.update', $feature) }}" enctype="multipart/form-data" class="space-y-4">
                                                                @csrf
                                                                @method('PUT')
                                                                <div>
                                                                    <label class="label" for="title_{{ $feature->id }}">Title</label>
                                                                    <input type="text" id="title_{{ $feature->id }}" name="title" class="input" value="{{ old('title', $feature->title) }}" required>
                                                                </div>
                                                                <div>
                                                                    <label class="label" for="description_{{ $feature->id }}">Description</label>
                                                                    <textarea id="description_{{ $feature->id }}" name="description" rows="2" class="textarea">{{ old('description', $feature->description) }}</textarea>
                                                                </div>
                                                                <div class="grid grid-cols-2 gap-4">
                                                                    <div>
                                                                        <label class="label" for="icon_{{ $feature->id }}">Icon</label>
                                                                        <select id="icon_{{ $feature->id }}" name="icon" class="select">
                                                                            <option value="">No icon (checkmark)</option>
                                                                            @foreach($iconOptions as $iconKey => $iconLabel)
                                                                                <option value="{{ $iconKey }}" {{ old('icon', $feature->icon) === $iconKey ? 'selected' : '' }}>{{ $iconLabel }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                    <div>
                                                                        <label class="label" for="sort_order_{{ $feature->id }}">Sort order</label>
                                                                        <input type="number" id="sort_order_{{ $feature->id }}" name="sort_order" min="0" max="9999" class="input" value="{{ old('sort_order', $feature->sort_order) }}">
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <label class="label" for="link_{{ $feature->id }}">Link</label>
                                                                    <input type="text" id="link_{{ $feature->id }}" name="link" class="input" placeholder="#features / https://…" value="{{ old('link', $feature->link) }}">
                                                                </div>
                                                                <div>
                                                                    <label class="label" for="image_{{ $feature->id }}">Image</label>
                                                                    <input type="file" id="image_{{ $feature->id }}" name="image" accept="image/*" class="input file:mr-3 file:rounded-lg file:border-0 file:bg-primary-50 file:px-3 file:py-1.5 file:text-sm file:font-semibold file:text-primary-700">
                                                                    @if($feature->image_url)
                                                                        <div class="mt-2 flex items-center gap-2">
                                                                            <img src="{{ $feature->image_url }}" alt="" class="h-10 w-10 rounded-lg object-cover ring-1 ring-gray-900/10">
                                                                            <label class="flex items-center gap-1.5 text-xs text-gray-500">
                                                                                <input type="checkbox" name="remove_image" value="1" class="h-3.5 w-3.5 rounded border-gray-300 text-rose-600 focus:ring-rose-500"> Remove image
                                                                            </label>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                                <div class="flex flex-wrap items-center gap-4">
                                                                    <div class="flex items-center gap-2">
                                                                        <input type="hidden" name="in_orbit" value="0">
                                                                        <input type="checkbox" id="in_orbit_{{ $feature->id }}" name="in_orbit" value="1" {{ $feature->in_orbit ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                                                        <label for="in_orbit_{{ $feature->id }}" class="text-sm text-gray-700">Show in orbit</label>
                                                                    </div>
                                                                    <div class="flex items-center gap-2">
                                                                        <input type="hidden" name="is_highlighted" value="0">
                                                                        <input type="checkbox" id="is_highlighted_{{ $feature->id }}" name="is_highlighted" value="1" {{ $feature->is_highlighted ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                                                        <label for="is_highlighted_{{ $feature->id }}" class="text-sm text-gray-700">Highlight</label>
                                                                    </div>
                                                                    <div class="flex items-center gap-2">
                                                                        <input type="hidden" name="is_active" value="0">
                                                                        <input type="checkbox" id="is_active_{{ $feature->id }}" name="is_active" value="1" {{ $feature->is_active ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                                                        <label for="is_active_{{ $feature->id }}" class="text-sm text-gray-700">Active</label>
                                                                    </div>
                                                                </div>
                                                                <div class="flex justify-end gap-2 border-t border-gray-100 pt-4">
                                                                    <button type="button" class="btn btn-secondary btn-sm" onclick="this.closest('details').removeAttribute('open')">Cancel</button>
                                                                    <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </details>

                                            <form method="POST" action="{{ route('platform.settings.features.destroy', $feature) }}"
                                                  onsubmit="return confirm('Delete &quot;{{ addslashes($feature->title) }}&quot;? This cannot be undone.');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script nonce="{{ $cspNonce ?? '' }}">
    (function () {
        var root = document.querySelector('[data-landing-tabs]');
        if (!root) return;

        var buttons = Array.prototype.slice.call(root.querySelectorAll('[data-tab-target]'));
        var panels = Array.prototype.slice.call(document.querySelectorAll('[data-tab-panel]'));
        var saveBar = document.querySelector('[data-save-bar]');
        var saveTabs = ['hero', 'content', 'whatsapp', 'billing', 'auth', 'features'];

        function current() {
            var el = root.querySelector('[data-tab-current="1"]');
            return el ? el.getAttribute('data-tab-target') : 'hero';
        }

        function select(name) {
            buttons.forEach(function (b) {
                var on = b.getAttribute('data-tab-target') === name;
                b.classList.toggle('bg-primary-600', on);
                b.classList.toggle('text-white', on);
                b.classList.toggle('shadow-sm', on);
                b.classList.toggle('bg-white', !on);
                b.classList.toggle('text-gray-600', !on);
                b.classList.toggle('ring-1', !on);
                b.classList.toggle('ring-inset', !on);
                b.classList.toggle('ring-gray-300', !on);
                b.classList.toggle('hover:bg-gray-50', !on);
                b.setAttribute('data-tab-current', on ? '1' : '');
                b.setAttribute('aria-selected', on ? 'true' : 'false');
            });
            panels.forEach(function (p) { p.classList.toggle('hidden', p.getAttribute('data-tab-panel') !== name); });
            if (saveBar) saveBar.classList.toggle('hidden', saveTabs.indexOf(name) === -1);

            try { history.replaceState(null, '', '?tab=' + name); } catch (e) {}
        }

        buttons.forEach(function (b) {
            b.addEventListener('click', function () { select(b.getAttribute('data-tab-target')); });
        });

        // Live preview for the feature-section colour pickers.
        var fbPreview = document.querySelector('[data-fb-preview]');
        if (fbPreview) {
            var fbMap = {
                features_section_bg: ['bg', 'backgroundColor'],
                features_heading_color: ['heading', 'color'],
                features_eyebrow_color: ['eyebrow', 'color'],
                features_subtitle_color: ['subtitle', 'color'],
                features_card_bg: ['card', 'backgroundColor'],
                features_card_title_color: ['cardtitle', 'color'],
                features_card_text_color: ['cardtext', 'color'],
                features_icon_bg: ['icon', 'backgroundColor'],
                features_icon_color: ['icon', 'color'],
                features_border_color: ['card', 'borderColor']
            };

            var applyPreview = function () {
                Object.keys(fbMap).forEach(function (field) {
                    var input = document.querySelector('[data-color-preview="' + field + '"]');
                    if (!input) return;
                    var pair = fbMap[field];
                    var target = pair[0] === 'bg' ? fbPreview : fbPreview.querySelector('[data-fb-preview-el="' + pair[0] + '"]');
                    if (target) target.style[pair[1]] = input.value;
                    var out = document.querySelector('[data-color-value="' + field + '"]');
                    if (out) out.textContent = input.value.toUpperCase();
                });
            };

            document.querySelectorAll('[data-color-preview]').forEach(function (input) {
                input.addEventListener('input', applyPreview);
            });
        }

        select(current());
    })();
    </script>
@endpush