@extends('Common::site.layouts.landing')

@section('title', $page->title)

@section('styles')
<style>
    .page-hero {
        background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(24, 119, 242, 0.8)), url('{{ asset("site/images/app/playground.png") }}') center/cover;
        padding: 120px 0 80px;
        text-align: center;
        color: white;
        margin-bottom: 60px;
    }
    .page-hero-icon {
        width: 60px;
        height: 60px;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        margin-bottom: 20px;
    }
    .page-hero h1 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 15px;
    }
    .page-hero p {
        font-size: 1.1rem;
        opacity: 0.9;
        max-width: 600px;
        margin: 0 auto;
    }
    .page-content-wrapper {
        background: white;
        border: 2px dashed #3B82F6;
        border-radius: 12px;
        padding: 40px;
        margin-bottom: 80px;
    }
    .privacy-section {
        margin-bottom: 40px;
    }
    .privacy-section h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #E2E8F0;
    }
    .privacy-section h3::before {
        content: "\f12e"; /* Shield default */
        font-family: 'Line Awesome Free';
        font-weight: 900;
        color: var(--primary-blue);
        font-size: 1.5rem;
    }
    .privacy-section h3.icon-group::before {
        content: "\f0c0"; /* Users/Group */
    }
    .privacy-section h3.icon-shield::before {
        content: "\f3ed"; /* Shield */
    }
    .privacy-section p {
        color: var(--text-light);
        line-height: 1.8;
        margin-bottom: 15px;
    }
    .privacy-section ul {
        list-style: none;
        padding: 0;
    }
    .privacy-section ul li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 15px;
        color: var(--text-light);
        line-height: 1.6;
    }
    .privacy-section ul li::before {
        content: "\f058"; /* check circle */
        font-family: 'Line Awesome Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--primary-blue);
        font-size: 1.2rem;
    }
    html[dir="rtl"] .privacy-section ul li {
        padding-left: 0;
        padding-right: 30px;
    }
    html[dir="rtl"] .privacy-section ul li::before {
        left: auto;
        right: 0;
    }
    
    .privacy-card {
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 12px;
        padding: 25px;
        height: 100%;
        transition: 0.3s;
    }
    .privacy-card:hover {
        border-color: var(--primary-blue);
        box-shadow: 0 4px 15px rgba(24, 119, 242, 0.05);
    }
    .privacy-card h5 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 15px;
    }
    .privacy-card p {
        font-size: 0.95rem;
        margin-bottom: 0;
    }
</style>
@endsection

@section('content')

@php
    $title = $page->title;
    $content = $page->content;
@endphp

<!-- Page Hero -->
<section class="page-hero">
    <div class="container">
        <div class="page-hero-icon">
            <i class="las la-shield-alt"></i>
        </div>
        <h1>@lang($title)</h1>
        <p>@lang('Ensuring the security and privacy of your sports management experience at Move Up').</p>
    </div>
</section>

<!-- Page Content -->
<section class="mb-5 pb-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="page-content-wrapper">
                    {!! $content !!}
                </div>
            </div>
        </div>
    </div>
</section>

@endsection