@php
    if ($settings->redirect_url != null or !empty($settings->redirect_url)) {
        header("Location: $settings->redirect_url", true, 301);
        exit();
    }
@endphp
@extends('layouts.base')
@section('title', 'Privacy Policy')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
    :root {
        --forest-green: #2d8659;
        --champagne: #e0a84e;
        --dark-green: #1e5a3d;
        --light-green: #3fa572;
        --cream: #fdfbf7;
        --charcoal: #2a2a2a;
    }
    
    .page-hero {
        font-family: 'DM Sans', sans-serif;
        background: linear-gradient(165deg, var(--dark-green) 0%, var(--forest-green) 35%, #2a6f4f 100%);
        min-height: 50vh;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 8rem 0 6rem;
    }
    
    .page-hero::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 100%;
        background: radial-gradient(circle at 80% 30%, rgba(224, 168, 78, 0.15), transparent 60%);
        pointer-events: none;
    }
    
    .page-hero-pattern {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.03;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, 0.1) 35px, rgba(255, 255, 255, 0.1) 70px);
    }
    
    .page-hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
    }
    
    .page-hero-title {
        font-family: 'Crimson Text', serif;
        font-size: 3.5rem;
        font-weight: 700;
        color: white;
        margin-bottom: 1rem;
        letter-spacing: -0.01em;
    }
    
    .page-hero-subtitle {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 400;
    }
    
    .policy-section {
        padding: 6rem 0;
        background: white;
    }
    
    .content-card {
        background: white;
        border-radius: 20px;
        padding: 4rem;
        box-shadow: 0 8px 30px rgba(45, 134, 89, 0.08);
        border: 1px solid rgba(45, 134, 89, 0.1);
    }
    
    .content-card h1, .content-card h2, .content-card h3 {
        font-family: 'Crimson Text', serif;
        font-weight: 700;
        color: var(--charcoal);
        margin-bottom: 1.5rem;
    }
    
    .content-card h1 {
        font-size: 2.5rem;
    }
    
    .content-card h2 {
        font-size: 2rem;
        margin-top: 2.5rem;
    }
    
    .content-card h3 {
        font-size: 1.6rem;
        margin-top: 2rem;
    }
    
    .content-card p, .content-card li {
        font-family: 'DM Sans', sans-serif;
        font-size: 1.05rem;
        color: #555;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }
    
    .content-card ul, .content-card ol {
        padding-left: 2rem;
    }
    
    @media (max-width: 768px) {
        .page-hero-title {
            font-size: 2.5rem;
        }
        .page-hero {
            padding: 6rem 0 4rem;
        }
        .content-card {
            padding: 2rem;
        }
    }
</style>
@endpush

@inject('content', 'App\Http\Controllers\FrontController')

@section('content')

    <!-- Page Hero -->
    <div class="page-hero">
        <div class="page-hero-pattern"></div>
        <div class="container">
            <div class="page-hero-content">
                <h1 class="page-hero-title">Terms & Privacy Policy</h1>
                <p class="page-hero-subtitle">{{ $settings->site_name }}</p>
            </div>
        </div>
    </div>

    <!-- Policy Section -->
    <section class="policy-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="content-card">
                        {!! $terms->description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection