@include('layouts.components.landing.styles')

@section('meta')
<meta name="robots" content="noindex,follow">
@endsection

<div class="container py-5">
  <div class="row">
    <div class="col-12 mb-3 d-flex justify-content-between align-items-start">
      <div>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb mb-1">
            <li class="breadcrumb-item"><a href="{{ url('/policy-center') }}">Policy Center</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
          </ol>
        </nav>

        <h1 class="h3 fw-bold mb-1">{{ $title  }}</h1>
        <div class="text-muted small">
            Effective date: <strong>{{ env('effective_date') }}</strong>
            &nbsp; • &nbsp; Last updated: {{ $updated_at }}
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-9">
      <div class="card shadow-sm mb-4">
        <div class="card-body">
          <div class="policy-content p-3">
            {!! $description !!}
          </div>
        </div>
      </div>

      <div class="text-muted small">
        <p class="mb-1">
          If you have questions about this policy, please contact us at
          <a href="mailto:{{ $supportMail }}">{{ $supportMail }}</a>.
        </p>
      </div>
    </div>

    <div class="col-lg-3">
      <div class="sticky-top" style="top: 90px;">
        <div class="card mb-3 shadow-sm">
          <div class="card-body p-3">
            <h6 class="mb-2">Quick links</h6>
            <ul class="list-unstyled small mb-0">
              <li><a href="{{ url('/page/privacy-policy') }}">Privacy Policy</a></li>
              <li><a href="{{ url('/page/terms-of-use') }}">Terms of Use</a></li>
              <li><a href="{{ url('/page/refund-and-verification-policy') }}">Refund & Verification</a></li>
              <li><a href="{{ url('/page/virtual-items-coins-diamonds-policy') }}">Virtual Currency</a></li>
              <li><a href="{{ url('/page/membership-policy') }}">Membership</a></li>
              <li><a href="{{ url('/page/reward-task-policy') }}">Reward Task Policy</a></li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

<style>
.policy-content h1 {
  font-size: 1.6rem !important; /* previously ~2.5rem */
  margin-top: 1.2rem;
  margin-bottom: .6rem;
  font-weight: 700;
}

.policy-content h2 {
  font-size: 1.35rem !important;
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-weight: 600;
}

.policy-content h3 {
  font-size: 1.2rem !important;
  margin-top: 1rem;
  margin-bottom: .4rem;
  font-weight: 600;
}

/* Normal paragraph text */
.policy-content p {
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 0.85rem;
}

/* List style adjustments */
.policy-content ul, 
.policy-content ol {
  margin-left: 1.2rem;
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: .9rem;
}

/* Improve spacing when headings come after paragraphs */
.policy-content h1 + p,
.policy-content h2 + p,
.policy-content h3 + p {
  margin-top: .2rem;
}
</style>