@extends('layouts.base')

@section('title', 'Privacy Policy')

@section('content')

    <!-- Page Header -->
    <section class="bg-gradient-to-r from-primary-600 to-primary-800 py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl font-bold text-white">Privacy Policy</h1>
            <p class="mt-3 text-lg text-white/70">How we handle your data</p>
            <nav class="mt-4 flex justify-center">
                <ol class="flex items-center space-x-2 text-sm text-white/60">
                    <li><a href="/" class="hover:text-white transition-colors"><i data-lucide="home" class="w-4 h-4 inline"></i> Home</a></li>
                    <li>/</li>
                    <li class="text-white font-medium">Privacy Policy</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Privacy Content -->
    <section class="bg-white dark:bg-gray-900 py-16 lg:py-24">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8">
                <div class="prose dark:prose-invert max-w-none prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-600 dark:prose-p:text-gray-400 prose-a:text-primary-500">
                    {!! $terms->description !!}
                </div>
            </div>
        </div>
    </section>

@endsection
