@extends('layout_inner_page')
@section('title')
  <title>{{ $custom_page->page_name }}</title>
@endsection

@section('front-content')

  @include('breadcrumb')

  <section class="custom-page-section">
    <div class="container">
      <div class="custom-page-wrapper">
        <!-- Page Header -->
        <div class="custom-page-header">
          <div class="header-icon">
            @if(str_contains(strtolower($custom_page->page_name), 'term'))
              <i class="fa-solid fa-file-contract"></i>
            @elseif(str_contains(strtolower($custom_page->page_name), 'privacy'))
              <i class="fa-solid fa-shield-halved"></i>
            @elseif(str_contains(strtolower($custom_page->page_name), 'refund') || str_contains(strtolower($custom_page->page_name), 'cancel'))
              <i class="fa-solid fa-rotate-left"></i>
            @elseif(str_contains(strtolower($custom_page->page_name), 'faq'))
              <i class="fa-solid fa-circle-question"></i>
            @elseif(str_contains(strtolower($custom_page->page_name), 'about'))
              <i class="fa-solid fa-building"></i>
            @else
              <i class="fa-solid fa-file-lines"></i>
            @endif
          </div>
          <h1 class="page-title">{{ $custom_page->page_name }}</h1>
          <p class="last-updated">Last Updated: {{ $custom_page->updated_at->format('F d, Y') }}</p>
        </div>

        <!-- Page Content -->
        <div class="custom-page-content">
          <div class="content-card">
            {!! clean($custom_page->description) !!}
          </div>
        </div>

        <!-- Back Button -->

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

@endsection

@push('style_section')
  <style>
    /* ===== MODERN CUSTOM PAGE STYLES ===== */
    .custom-page-section {

      min-height: 70vh;
      padding: 60px 0 80px;
    }

    .custom-page-wrapper {
      max-width: 900px;
      margin: 0 auto;
    }

    /* Page Header */
    .custom-page-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .header-icon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, ##f4841e 0%, #ff8a50 100%);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 25px;
      box-shadow: 0 10px 30px rgba(233, 108, 42, 0.3);
    }

    .header-icon i {
      font-size: 36px;
      color: #fff;
    }

    .page-title {
      font-size: 36px;
      font-weight: 700;
      color: #1a2d3a;
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .last-updated {
      font-size: 14px;
      color: #666;
      margin: 0;
    }

    /* Content Card */
    .content-card {
      background: #fff;
      border-radius: 20px;
      padding: 50px 60px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
    }

    .content-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, ##f4841e 0%, #ff8a50 50%, ##f4841e 100%);
    }

    /* Content Typography */
    .content-card h1,
    .content-card h2 {
      font-size: 24px;
      font-weight: 700;
      color: #1a2d3a;
      margin: 35px 0 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid #f0f0f0;
      position: relative;
    }

    .content-card h1::after,
    .content-card h2::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 60px;
      height: 2px;
      background: ##f4841e;
    }

    .content-card h1:first-child,
    .content-card h2:first-child {
      margin-top: 0;
    }

    .content-card h3 {
      font-size: 20px;
      font-weight: 600;
      color: #333;
      margin: 30px 0 15px;
    }

    .content-card h4 {
      font-size: 18px;
      font-weight: 600;
      color: #444;
      margin: 25px 0 12px;
    }

    .content-card p {
      font-size: 16px;
      line-height: 1.8;
      color: #555;
      margin-bottom: 18px;
    }

    .content-card ul,
    .content-card ol {
      padding-left: 25px;
      margin-bottom: 20px;
    }

    .content-card li {
      font-size: 16px;
      line-height: 1.8;
      color: #555;
      margin-bottom: 10px;
      position: relative;
    }

    .content-card ul li::marker {
      color: ##f4841e;
    }

    .content-card ol li::marker {
      color: ##f4841e;
      font-weight: 600;
    }

    .content-card a {
      color: ##f4841e;
      text-decoration: none;
      font-weight: 500;
      transition: 0.3s;
    }

    .content-card a:hover {
      color: #d15a1a;
      text-decoration: underline;
    }

    .content-card strong {
      color: #333;
      font-weight: 600;
    }

    .content-card blockquote {
      background: #f8f9fa;
      border-left: 4px solid ##f4841e;
      padding: 20px 25px;
      margin: 25px 0;
      border-radius: 0 10px 10px 0;
      font-style: italic;
      color: #555;
    }

    .content-card table {
      width: 100%;
      border-collapse: collapse;
      margin: 25px 0;
      border-radius: 10px;
      overflow: hidden;
    }

    .content-card table th,
    .content-card table td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }

    .content-card table th {
      background: #f8f9fa;
      font-weight: 600;
      color: #333;
    }

    .content-card table tr:hover {
      background: #fafafa;
    }

    /* Back Navigation */
    .back-navigation {
      text-align: center;
      margin-top: 40px;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 30px;
      background: #fff;
      color: #1a2d3a;
      border-radius: 50px;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
    }

    .back-btn:hover {
      background: ##f4841e;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(233, 108, 42, 0.25);
    }

    .back-btn i {
      font-size: 14px;
      transition: transform 0.3s;
    }

    .back-btn:hover i {
      transform: translateX(-3px);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .custom-page-section {
        padding: 40px 0 60px;
      }

      .content-card {
        padding: 30px 25px;
        border-radius: 15px;
      }

      .page-title {
        font-size: 28px;
      }

      .header-icon {
        width: 70px;
        height: 70px;
      }

      .header-icon i {
        font-size: 30px;
      }

      .content-card h1,
      .content-card h2 {
        font-size: 20px;
      }

      .content-card h3 {
        font-size: 18px;
      }

      .content-card p,
      .content-card li {
        font-size: 15px;
      }
    }

    @media (max-width: 480px) {
      .content-card {
        padding: 25px 20px;
      }

      .page-title {
        font-size: 24px;
      }

      .back-btn {
        padding: 12px 25px;
        font-size: 14px;
      }
    }
  </style>
@endpush