@extends('layouts.app')

@section('title', 'Landing Page CMS')

@section('content')
<form action="{{ route('platform.landing.update') }}" method="POST" enctype="multipart/form-data" class="mx-auto max-w-7xl" x-data="{ tab: 'brand' }">
    @csrf
    @method('PUT')

    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
            <div class="flex items-center gap-2 text-[10px] font-extrabold uppercase tracking-[0.15em] text-orange-600">
                <span class="h-2 w-2 rounded-full bg-orange-500"></span> Public website
            </div>
            <h1 class="mt-2 text-2xl font-black tracking-tight text-slate-900 dark:text-white">Landing Page CMS</h1>
            <p class="mt-1 max-w-2xl text-xs leading-5 text-slate-500">Edit the complete GOVIX landing page, brand colors, calls to action and imagery. Saving publishes the changes immediately.</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('home') }}" target="_blank" rel="noopener" class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-xs font-bold text-slate-700 shadow-sm hover:border-orange-300 hover:text-orange-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
                Preview website <span aria-hidden="true">↗</span>
            </a>
            <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-orange-600 px-5 py-2.5 text-xs font-extrabold text-white shadow-lg shadow-orange-600/20 transition hover:-translate-y-0.5 hover:bg-orange-700">
                Save & publish <span aria-hidden="true">✓</span>
            </button>
        </div>
    </div>

    @if(session('status'))
        <div class="mb-5 flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs font-bold text-emerald-700">
            <span class="grid h-7 w-7 place-items-center rounded-full bg-emerald-100">✓</span>{{ session('status') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-5 rounded-2xl border border-rose-200 bg-rose-50 px-5 py-4 text-xs text-rose-700">
            <p class="font-extrabold">The page was not published. Please review the highlighted fields.</p>
            <ul class="mt-2 list-inside list-disc space-y-1 text-[11px]">
                @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
            </ul>
        </div>
    @endif

    <div class="sticky top-16 z-20 mb-6 overflow-x-auto rounded-2xl border border-slate-200 bg-white/95 p-2 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-800/95">
        <div class="flex min-w-max gap-1 text-[11px] font-extrabold">
            @foreach([
                'brand' => 'Brand, SEO & Hero',
                'overview' => 'Trust & Overview',
                'workflow' => 'Workflow',
                'features' => 'Feature Grid',
                'conversion' => 'Benefits & CTA',
                'footer' => 'Footer & Media',
            ] as $key => $label)
                <button type="button" @click="tab = '{{ $key }}'" :class="tab === '{{ $key }}' ? 'bg-slate-900 text-white shadow-sm dark:bg-orange-600' : 'text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700'" class="rounded-xl px-4 py-2.5 transition">{{ $label }}</button>
            @endforeach
        </div>
    </div>

    <section x-show="tab === 'brand'" class="space-y-6">
        <div class="grid gap-6 xl:grid-cols-2">
            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Search & social preview</h2>
                <p class="mt-1 text-[10px] text-slate-400">Controls browser titles, search snippets and shared links.</p>
                <div class="mt-5 space-y-4">
                    <x-cms.input name="meta.title" label="SEO title" :value="$content['meta']['title']" />
                    <x-cms.textarea name="meta.description" label="SEO description" :value="$content['meta']['description']" rows="3" />
                </div>
            </div>
            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Brand identity</h2>
                <p class="mt-1 text-[10px] text-slate-400">The text logo is used automatically until a logo image is uploaded.</p>
                <div class="mt-5 grid gap-4 sm:grid-cols-2">
                    <x-cms.input name="brand.name" label="Brand name" :value="$content['brand']['name']" />
                    <x-cms.input name="brand.descriptor" label="Brand descriptor" :value="$content['brand']['descriptor']" />
                    <x-cms.input name="theme.primary" label="Primary orange" type="color" :value="$content['theme']['primary']" class="h-11 p-1.5" />
                    <x-cms.input name="theme.navy" label="Primary navy" type="color" :value="$content['theme']['navy']" class="h-11 p-1.5" />
                    <x-cms.input name="theme.accent" label="Accent color" type="color" :value="$content['theme']['accent']" class="h-11 p-1.5 sm:col-span-2" />
                </div>
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Navigation labels</h2>
            <div class="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                <x-cms.input name="nav.features" label="Features" :value="$content['nav']['features']" />
                <x-cms.input name="nav.workflow" label="Workflow" :value="$content['nav']['workflow']" />
                <x-cms.input name="nav.advantages" label="Advantages" :value="$content['nav']['advantages']" />
                <x-cms.input name="nav.contact" label="Contact" :value="$content['nav']['contact']" />
                <x-cms.input name="nav.login" label="Login" :value="$content['nav']['login']" />
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <div class="flex items-start justify-between gap-4"><div><h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Hero content</h2><p class="mt-1 text-[10px] text-slate-400">The first screen and its two main calls to action.</p></div><span class="rounded-lg bg-orange-50 px-2 py-1 text-[9px] font-black text-orange-600">ABOVE THE FOLD</span></div>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <x-cms.input name="hero.eyebrow" label="Eyebrow" :value="$content['hero']['eyebrow']" class="lg:col-span-2" />
                <x-cms.input name="hero.title" label="Heading line 1" :value="$content['hero']['title']" />
                <x-cms.input name="hero.highlight" label="Highlighted heading" :value="$content['hero']['highlight']" />
                <x-cms.textarea name="hero.description" label="Description" :value="$content['hero']['description']" rows="4" class="lg:col-span-2" />
                <x-cms.input name="hero.primary_label" label="Primary button label" :value="$content['hero']['primary_label']" />
                <x-cms.input name="hero.primary_url" label="Primary button link" :value="$content['hero']['primary_url']" help="Use an anchor such as #contact, a /path, or a full URL." />
                <x-cms.input name="hero.secondary_label" label="Secondary button label" :value="$content['hero']['secondary_label']" />
                <x-cms.input name="hero.secondary_url" label="Secondary button link" :value="$content['hero']['secondary_url']" />
            </div>
            <div class="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-900/60">
                <p class="mb-4 text-[10px] font-black uppercase tracking-wider text-orange-600">Hero image overlay</p>
                <div class="grid gap-4 lg:grid-cols-2">
                    <x-cms.input name="hero.image_eyebrow" label="Image eyebrow" :value="$content['hero']['image_eyebrow']" />
                    <x-cms.input name="hero.image_title" label="Image title" :value="$content['hero']['image_title']" />
                    <x-cms.input name="hero.image_metric" label="Metric" :value="$content['hero']['image_metric']" />
                    <x-cms.input name="hero.image_metric_label" label="Metric label" :value="$content['hero']['image_metric_label']" />
                    <x-cms.input name="hero.status_title" label="Floating card title" :value="$content['hero']['status_title']" />
                    <x-cms.input name="hero.status_description" label="Floating card description" :value="$content['hero']['status_description']" />
                </div>
            </div>
            <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                @foreach($content['hero']['highlights'] as $index => $highlight)
                    <x-cms.input name="hero.highlights.{{ $index }}.label" label="Proof point {{ $index + 1 }}" :value="$highlight['label']" />
                @endforeach
            </div>
        </div>
    </section>

    <section x-show="tab === 'overview'" x-cloak class="space-y-6">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Service ecosystem strip</h2>
            <div class="mt-5">
                <x-cms.input name="partners.heading" label="Section heading" :value="$content['partners']['heading']" />
            </div>
            <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($content['partners']['items'] as $index => $partner)
                    <x-cms.input name="partners.items.{{ $index }}.name" label="Name {{ $index + 1 }}" :value="$partner['name']" />
                @endforeach
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Core capability overview</h2>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <x-cms.input name="core.eyebrow" label="Eyebrow" :value="$content['core']['eyebrow']" />
                <x-cms.input name="core.title" label="Section title" :value="$content['core']['title']" />
                <x-cms.textarea name="core.description" label="Section description" :value="$content['core']['description']" rows="3" class="lg:col-span-2" />
            </div>
            <div class="mt-6 grid gap-4 lg:grid-cols-2">
                @foreach($content['core']['items'] as $index => $item)
                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-700 dark:bg-slate-900/60">
                        <div class="mb-3 flex items-center gap-3"><span class="grid h-9 w-9 place-items-center rounded-xl bg-orange-100 text-xs font-black text-orange-600">{{ $index + 1 }}</span><p class="text-xs font-extrabold text-slate-800 dark:text-white">Capability card</p></div>
                        <div class="grid gap-3 sm:grid-cols-[0.7fr_1.3fr]">
                            <label class="block"><span class="mb-1.5 block text-[11px] font-bold text-slate-700 dark:text-slate-200">Icon</span><select name="core[items][{{ $index }}][icon]" class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2.5 text-xs dark:border-slate-700 dark:bg-slate-900">@foreach($icons as $key => $label)<option value="{{ $key }}" @selected(old("core.items.$index.icon", $item['icon']) === $key)>{{ $label }}</option>@endforeach</select></label>
                            <x-cms.input name="core.items.{{ $index }}.title" label="Title" :value="$item['title']" />
                        </div>
                        <div class="mt-3"><x-cms.textarea name="core.items.{{ $index }}.description" label="Description" :value="$item['description']" rows="3" /></div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section x-show="tab === 'workflow'" x-cloak class="space-y-6">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Workflow story</h2>
            <p class="mt-1 text-[10px] text-slate-400">Explain how GOVIX moves a customer from intake to completion.</p>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <x-cms.input name="workflow.eyebrow" label="Eyebrow" :value="$content['workflow']['eyebrow']" />
                <x-cms.input name="workflow.title" label="Section title" :value="$content['workflow']['title']" />
                <x-cms.textarea name="workflow.description" label="Description" :value="$content['workflow']['description']" rows="4" class="lg:col-span-2" />
                <x-cms.input name="workflow.image_eyebrow" label="Image overlay eyebrow" :value="$content['workflow']['image_eyebrow']" />
                <x-cms.input name="workflow.image_title" label="Image overlay title" :value="$content['workflow']['image_title']" />
            </div>
            <div class="mt-6 grid gap-3 sm:grid-cols-2">
                @foreach($content['workflow']['bullets'] as $index => $bullet)
                    <x-cms.input name="workflow.bullets.{{ $index }}.text" label="Workflow step {{ $index + 1 }}" :value="$bullet['text']" />
                @endforeach
            </div>
        </div>
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <x-cms.image-upload name="media[workflow_upload]" label="Workflow image" :current="$content['media']['workflow']" help="A wide team or operations image works best." />
        </div>
    </section>

    <section x-show="tab === 'features'" x-cloak class="space-y-6">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Feature grid introduction</h2>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <x-cms.input name="features.eyebrow" label="Eyebrow" :value="$content['features']['eyebrow']" />
                <x-cms.input name="features.title" label="Section title" :value="$content['features']['title']" />
                <x-cms.textarea name="features.description" label="Description" :value="$content['features']['description']" rows="3" class="lg:col-span-2" />
            </div>
        </div>
        <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
            @foreach($content['features']['items'] as $index => $item)
                <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-800">
                    <div class="mb-4 flex items-center justify-between"><p class="text-xs font-extrabold text-slate-900 dark:text-white">Feature {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</p><span class="grid h-7 w-7 place-items-center rounded-lg bg-orange-50 text-[10px] font-black text-orange-600">{{ $index + 1 }}</span></div>
                    <div class="space-y-3">
                        <label class="block"><span class="mb-1.5 block text-[11px] font-bold text-slate-700 dark:text-slate-200">Icon</span><select name="features[items][{{ $index }}][icon]" class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2.5 text-xs dark:border-slate-700 dark:bg-slate-900">@foreach($icons as $key => $label)<option value="{{ $key }}" @selected(old("features.items.$index.icon", $item['icon']) === $key)>{{ $label }}</option>@endforeach</select></label>
                        <x-cms.input name="features.items.{{ $index }}.title" label="Title" :value="$item['title']" />
                        <x-cms.textarea name="features.items.{{ $index }}.description" label="Description" :value="$item['description']" rows="3" />
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section x-show="tab === 'conversion'" x-cloak class="space-y-6">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Business benefits</h2>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <x-cms.input name="advantages.eyebrow" label="Eyebrow" :value="$content['advantages']['eyebrow']" />
                <x-cms.input name="advantages.title" label="Section title" :value="$content['advantages']['title']" />
                <x-cms.textarea name="advantages.description" label="Description" :value="$content['advantages']['description']" rows="4" class="lg:col-span-2" />
                <x-cms.input name="advantages.image_title" label="Image overlay title" :value="$content['advantages']['image_title']" />
                <x-cms.input name="advantages.image_description" label="Image overlay description" :value="$content['advantages']['image_description']" />
            </div>
            <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($content['advantages']['bullets'] as $index => $bullet)
                    <x-cms.input name="advantages.bullets.{{ $index }}.text" label="Benefit {{ $index + 1 }}" :value="$bullet['text']" />
                @endforeach
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-slate-950 p-6 text-white shadow-sm">
            <div class="flex items-start justify-between gap-4"><div><h2 class="text-sm font-extrabold">Conversion banner</h2><p class="mt-1 text-[10px] text-slate-400">The dark call-to-action near the bottom of the public page.</p></div><span class="rounded-lg bg-orange-500/15 px-2 py-1 text-[9px] font-black text-orange-400">CTA</span></div>
            <div class="mt-5 grid gap-4 lg:grid-cols-2 [&_label>span:first-child]:text-slate-300 [&_input]:border-slate-700 [&_input]:bg-slate-900 [&_input]:text-white [&_textarea]:border-slate-700 [&_textarea]:bg-slate-900 [&_textarea]:text-white">
                <x-cms.input name="cta.eyebrow" label="Eyebrow" :value="$content['cta']['eyebrow']" />
                <x-cms.input name="cta.title" label="CTA title" :value="$content['cta']['title']" />
                <x-cms.textarea name="cta.description" label="CTA description" :value="$content['cta']['description']" rows="3" class="lg:col-span-2" />
                <x-cms.input name="cta.button_label" label="Button label" :value="$content['cta']['button_label']" />
                <x-cms.input name="cta.button_url" label="Button link" :value="$content['cta']['button_url']" />
                <x-cms.input name="cta.phone_label" label="Phone label" :value="$content['cta']['phone_label']" />
                <x-cms.input name="cta.phone" label="Phone number" :value="$content['cta']['phone']" />
            </div>
            <div class="mt-6 grid gap-4 lg:grid-cols-3">
                @foreach($content['cta']['points'] as $index => $point)
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4 [&_label>span:first-child]:text-slate-300 [&_input]:border-slate-700 [&_input]:bg-slate-900 [&_input]:text-white [&_textarea]:border-slate-700 [&_textarea]:bg-slate-900 [&_textarea]:text-white">
                        <p class="mb-3 text-[10px] font-black tracking-wider text-orange-400">PROOF POINT {{ $index + 1 }}</p>
                        <div class="space-y-3"><x-cms.input name="cta.points.{{ $index }}.title" label="Title" :value="$point['title']" /><x-cms.textarea name="cta.points.{{ $index }}.description" label="Description" :value="$point['description']" rows="2" /></div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section x-show="tab === 'footer'" x-cloak class="space-y-6">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800">
            <h2 class="text-sm font-extrabold text-slate-900 dark:text-white">Footer content & links</h2>
            <div class="mt-5 grid gap-4 lg:grid-cols-2">
                <x-cms.textarea name="footer.description" label="Brand description" :value="$content['footer']['description']" rows="3" class="lg:col-span-2" />
                <x-cms.input name="footer.copyright" label="Copyright" :value="$content['footer']['copyright']" />
                <x-cms.input name="footer.email" label="Contact email" type="email" :value="$content['footer']['email']" />
                <x-cms.input name="footer.privacy_label" label="Privacy link label" :value="$content['footer']['privacy_label']" />
                <x-cms.input name="footer.privacy_url" label="Privacy link URL" :value="$content['footer']['privacy_url']" />
                <x-cms.input name="footer.terms_label" label="Terms link label" :value="$content['footer']['terms_label']" />
                <x-cms.input name="footer.terms_url" label="Terms link URL" :value="$content['footer']['terms_url']" />
                <x-cms.input name="footer.instagram_url" label="Instagram URL (optional)" :value="$content['footer']['instagram_url']" />
                <x-cms.input name="footer.instagram_label" label="Instagram label" :value="$content['footer']['instagram_label']" />
                <x-cms.input name="footer.linkedin_url" label="LinkedIn URL (optional)" :value="$content['footer']['linkedin_url']" />
                <x-cms.input name="footer.linkedin_label" label="LinkedIn label" :value="$content['footer']['linkedin_label']" />
            </div>
        </div>

        <div class="grid gap-6 xl:grid-cols-2">
            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"><x-cms.image-upload name="media[logo_upload]" label="Brand logo" :current="$content['brand']['logo_path']" help="Transparent horizontal logos work best." /></div>
            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"><x-cms.image-upload name="media[hero_upload]" label="Hero image" :current="$content['media']['hero']" help="Recommended: 3:2 or wider, at least 1600px." /></div>
            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-800"><x-cms.image-upload name="media[advantages_upload]" label="Benefits image" :current="$content['media']['advantages']" help="Recommended: 3:2, clean subject framing." /></div>
            <div class="rounded-3xl border border-slate-200 bg-gradient-to-br from-orange-50 to-white p-6 shadow-sm dark:from-slate-800 dark:to-slate-900">
                <p class="text-sm font-extrabold text-slate-900 dark:text-white">Publishing note</p>
                <p class="mt-2 text-xs leading-5 text-slate-500">Images are versioned when uploaded, so current files are never overwritten. All text is safely escaped on the public page, and action links are restricted to anchors, local paths, HTTPS, email and telephone links.</p>
                <a href="{{ route('home') }}" target="_blank" rel="noopener" class="mt-5 inline-flex items-center gap-2 text-xs font-extrabold text-orange-600 hover:text-orange-700">Open the public page <span>↗</span></a>
            </div>
        </div>
    </section>

    <div class="mt-8 flex items-center justify-between rounded-2xl border border-slate-200 bg-white p-4 shadow-sm dark:border-slate-700 dark:bg-slate-800">
        <p class="text-[10px] text-slate-400">Only Platform Super Admin users can publish landing-page changes.</p>
        <button type="submit" class="rounded-xl bg-orange-600 px-5 py-2.5 text-xs font-extrabold text-white shadow-lg shadow-orange-600/20 hover:bg-orange-700">Save & publish</button>
    </div>
</form>
@endsection