@include('layouts.components.landing.styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<div class="container py-5">
  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <h1 class="display-6 fw-bold mb-1">{{ config('app.name') }} – Policy Center</h1>
      <p class="text-muted mb-0">
        <strong>Effective date:</strong>
        <span class="text-dark">{{ env('effective_date') ?? 'YYYY-MM-DD' }}</span>
      </p>
      <p class="small text-muted mt-2 mb-0">
        Welcome to the official policy center. Below are links to our main policies:
        Privacy Policy, Terms of Use, Refund & Verification Policy, Virtual Currency Policy (Coins & Diamonds),
        Membership Policy, and Reward Task Policy. Please review these documents before using the app or making any payment.
      </p>
    </div>

  </div>

  <div class="row g-3">
    <div class="col-md-6 col-lg-4">
      <a href="{{ url('/page/privacy-policy') }}" class="text-decoration-none text-dark">
        <div class="card h-100 shadow-sm policy-card-hover">
          <div class="card-body d-flex">
            <div class="flex-shrink-0 me-3">
              <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                <i class="bi bi-shield-lock-fill fs-4"></i>
              </div>
            </div>
            <div>
              <h5 class="card-title mb-1">Privacy Policy</h5>
              <p class="card-text small text-muted mb-0">How we collect, use, store and protect your personal data and payment proofs.</p>
            </div>
          </div>
          <div class="card-footer bg-white border-0">
            <small class="text-muted">Last updated: {{ $updated_at_privacy ?? 'YYYY-MM-DD' }}</small>
          </div>
        </div>
      </a>
    </div>

    <div class="col-md-6 col-lg-4">
      <a href="{{ url('/policy/terms') }}" class="text-decoration-none text-dark">
        <div class="card h-100 shadow-sm policy-card-hover">
          <div class="card-body d-flex">
            <div class="flex-shrink-0 me-3">
              <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                <i class="bi bi-file-earmark-text-fill fs-4"></i>
              </div>
            </div>
            <div>
              <h5 class="card-title mb-1">Terms of Use</h5>
              <p class="card-text small text-muted mb-0">Rules and responsibilities for using {{ config('app.name') }}.</p>
            </div>
          </div>
          <div class="card-footer bg-white border-0">
            <small class="text-muted">Last updated: {{ $updated_at_terms ?? 'YYYY-MM-DD' }}</small>
          </div>
        </div>
      </a>
    </div>

    <div class="col-md-6 col-lg-4">
      <a href="{{ url('/policy/refund') }}" class="text-decoration-none text-dark">
        <div class="card h-100 shadow-sm policy-card-hover">
          <div class="card-body d-flex">
            <div class="flex-shrink-0 me-3">
              <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                <i class="bi bi-cash-stack fs-4"></i>
              </div>
            </div>
            <div>
              <h5 class="card-title mb-1">Refund & Verification</h5>
              <p class="card-text small text-muted mb-0">Offline payment verification, timelines and refund conditions.</p>
            </div>
          </div>
          <div class="card-footer bg-white border-0">
            <small class="text-muted">Last updated: {{ $updated_at_refund ?? 'YYYY-MM-DD' }}</small>
          </div>
        </div>
      </a>
    </div>

    <div class="col-md-6 col-lg-4">
      <a href="{{ url('/policy/virtual-items') }}" class="text-decoration-none text-dark">
        <div class="card h-100 shadow-sm policy-card-hover">
          <div class="card-body d-flex">
            <div class="flex-shrink-0 me-3">
              <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                <i class="bi bi-coin fs-4"></i>
              </div>
            </div>
            <div>
              <h5 class="card-title mb-1">Virtual Currency</h5>
              <p class="card-text small text-muted mb-0">Rules for Coins (redeemable) and Diamonds (in-app premium).</p>
            </div>
          </div>
          <div class="card-footer bg-white border-0">
            <small class="text-muted">Last updated: {{ $updated_at_virtual ?? 'YYYY-MM-DD' }}</small>
          </div>
        </div>
      </a>
    </div>

    <div class="col-md-6 col-lg-4">
      <a href="{{ url('/policy/membership') }}" class="text-decoration-none text-dark">
        <div class="card h-100 shadow-sm policy-card-hover">
          <div class="card-body d-flex">
            <div class="flex-shrink-0 me-3">
              <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                <i class="bi bi-award-fill fs-4"></i>
              </div>
            </div>
            <div>
              <h5 class="card-title mb-1">Membership Policy</h5>
              <p class="card-text small text-muted mb-0">Purchase flow, start date, renewal and misuse rules.</p>
            </div>
          </div>
          <div class="card-footer bg-white border-0">
            <small class="text-muted">Last updated: {{ $updated_at_membership ?? 'YYYY-MM-DD' }}</small>
          </div>
        </div>
      </a>
    </div>

    <div class="col-md-6 col-lg-4">
      <a href="{{ url('/policy/rewards') }}" class="text-decoration-none text-dark">
        <div class="card h-100 shadow-sm policy-card-hover">
          <div class="card-body d-flex">
            <div class="flex-shrink-0 me-3">
              <div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px;">
                <i class="bi bi-gift-fill fs-4"></i>
              </div>
            </div>
            <div>
              <h5 class="card-title mb-1">Reward Task Policy</h5>
              <p class="card-text small text-muted mb-0">How tasks and redemptions work, verification, and prohibited actions.</p>
            </div>
          </div>
          <div class="card-footer bg-white border-0">
            <small class="text-muted">Last updated: {{ $updated_at_rewards ?? 'YYYY-MM-DD' }}</small>
          </div>
        </div>
      </a>
    </div>
  </div>

  <div class="row mt-5">
    <div class="col-md-8">
      <div class="p-4 border rounded-3 bg-light">
        <h6 class="mb-2">Contact & Questions</h6>
        <p class="small text-muted mb-1">For any policy-related questions or complaints, please contact our support team:</p>
        <p class="mb-0"><a href="mailto:{{ $supportMail }}" class="fw-semibold">{{ $supportMail }}</a></p>
      </div>
    </div>

    <div class="col-md-4 d-flex align-items-center justify-content-end">
      <div class="text-end small text-muted">
        <div>© {{ date('Y') }} {{ config('app.name') }}</div>
        <div>All rights reserved.</div>
      </div>
    </div>
  </div>
</div>

<style>
/* small interactive hover */
.policy-card-hover:hover {
  transform: translateY(-6px);
  transition: transform .18s ease;
}
.policy-card-hover { transition: transform .2s ease; }
.card .card-footer { font-size: .8rem; padding-top: .6rem; padding-bottom: .6rem; }
</style>

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