@extends('frontend.layout')

@section('title', 'Privacy Policy — ' . config('app.name'))
{{-- See terms.blade.php — same rationale for hiding the chrome. --}}
@section('hide_chrome', '1')

@php
    // The CMS column `pages.content` can hold either a structured
    // array (subtitle / sections[] / bottom_text) OR a raw HTML
    // string (admin pasted a complete Privacy Policy markup). Render
    // both shapes — string → prose wrapper, array → card grid.
    $rawHtml  = is_string($content) && trim($content) !== '' ? $content : null;
    $c        = is_array($content) ? $content : [];
    $sections = $c['sections'] ?? [];
@endphp

@section('content')
<main class="flex-1 py-32">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">

            {{-- Header --}}
            <div x-data="{ shown: false }" x-init="setTimeout(() => shown = true, 0)"
                 class="space-y-6 mb-16 text-center md:text-left transition-all duration-700 transform"
                 :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'">
                <h1 class="text-4xl md:text-6xl font-bold tracking-tight">Privacy <span class="text-brand italic">Policy</span></h1>
                <p class="text-xl text-muted leading-relaxed max-w-2xl">{{ $c['subtitle'] ?? 'Your privacy is important to us. This policy explains how we collect, use, and protect your data.' }}</p>
                <div class="flex flex-wrap gap-3 justify-center md:justify-start">
                    <div class="flex items-center gap-2 px-3 py-1 bg-surface-2/50 border border-border/50 rounded-full text-[10px] font-bold uppercase tracking-widest text-muted">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
                        Last Updated: {{ $c['last_updated'] ?? '' }}
                    </div>
                    <div class="flex items-center gap-2 px-3 py-1 bg-success/10 border border-success/20 rounded-full text-[10px] font-bold uppercase tracking-widest text-success">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg>
                        GDPR Compliant
                    </div>
                </div>
            </div>

            {{-- Body: either the admin's raw HTML, OR the structured card grid --}}
            @if($rawHtml)
                {{-- Admin pasted a complete HTML template (e.g. <section>...<h2>...) --
                     render as raw HTML inside a styled prose wrapper. --}}
                <div class="prose prose-invert max-w-none
                            prose-headings:text-ink prose-headings:tracking-tight
                            prose-h1:text-3xl prose-h2:text-2xl prose-h3:text-xl
                            prose-p:text-muted prose-p:leading-relaxed
                            prose-a:text-brand prose-strong:text-ink
                            prose-li:text-muted prose-ul:my-4 prose-ol:my-4">
                    {!! $rawHtml !!}
                </div>
            @else
                {{-- Structured JSON: render the card grid --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    @foreach($sections as $index => $section)
                    @if(!empty($section['title']))
                    <div x-data="{ shown: false }" x-intersect="shown = true"
                         style="transition-delay: {{ $index * 100 }}ms"
                         class="p-6 md:p-8 rounded-2xl bg-surface-2 border border-border/50 shadow-sm hover:shadow-xl hover:border-brand/20 transition-all group duration-500 transform"
                         :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5'">
                        <div class="h-10 w-10 rounded-xl bg-brand/10 border border-brand/20 flex items-center justify-center text-brand mb-5 group-hover:scale-110 transition-transform">
                            <span class="text-sm font-bold">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                        </div>
                        <h3 class="text-lg font-bold text-ink mb-3">{{ $section['title'] }}</h3>
                        <p class="text-sm text-muted leading-relaxed">{{ $section['content'] ?? '' }}</p>
                    </div>
                    @endif
                    @endforeach
                </div>
            @endif

            {{-- Bottom text --}}
            @if(!empty($c['bottom_text']))
            <div x-data="{ shown: false }" x-intersect="shown = true"
                 class="mt-16 p-8 md:p-12 rounded-2xl bg-surface-2/50 border border-border/50 text-sm leading-relaxed text-muted transition-all duration-700 transform"
                 :class="shown ? 'opacity-100' : 'opacity-0'">
                <p>{{ $c['bottom_text'] }}</p>
            </div>
            @endif

            {{-- Bottom CTA --}}
            <div class="mt-8 p-8 rounded-2xl bg-surface-2/50 border border-border/50 text-center">
                <p class="text-sm text-muted">
                    {{ __('Questions about your data?') }} <a href="{{ route('contact') }}" class="text-brand font-bold hover:underline">{{ __('Contact our privacy team') }}</a>
                </p>
            </div>
        </div>
    </div>
</main>
@endsection