@extends('layouts.web')

@section('content')

<style>
  /* Section background and padding */
  .inner-page {
/*    background-color: #f4f7fa; /* Light background */*/
    padding: 40px 0;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Title styling (H1, H2, H3) */
  .inner-page h1, .inner-page h2, .inner-page h3 {
    color: #7D26C2; /* Light blue color */
    margin-top: 30px; /* Add top margin */
    margin-bottom: 5px; /* Add bottom margin */
  }

  /* Paragraph styling */
  .inner-page p {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  }

  /* List styling */
  .inner-page ul, .inner-page ol {
    margin-left: 20px;
    font-size: 16px;
  }

  /* List item styling */
  .inner-page li {
    margin-bottom: 10px;
  }

  /* Image styling */
  .inner-page img {
    max-width: 100%;
    max-height: 600px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image */
  }

  /* Mobile-friendly adjustments */
  @media (max-width: 768px) {
    /* For smaller screens, reduce the padding and font size */
    .inner-page {
      padding: 20px 0;
    }

    .inner-page h1, .inner-page h2, .inner-page h3 {
      font-size: 1.5rem; /* Smaller headings */
      margin-top: 20px; /* Adjust top margin for mobile */
      margin-bottom: 3px; /* Adjust bottom margin for mobile */
    }

    .inner-page p {
      font-size: 14px; /* Smaller font size for paragraphs */
    }

    .inner-page ul, .inner-page ol {
      margin-left: 15px; /* Adjust list margin */
    }
  }

  /* Adjustments for very small screens (e.g., mobile phones in portrait mode) */
  @media (max-width: 480px) {
    .inner-page h1, .inner-page h2, .inner-page h3 {
      font-size: 1.2rem; /* Even smaller headings */
      margin-top: 15px; /* Adjust top margin for very small screens */
      margin-bottom: 2px; /* Adjust bottom margin for very small screens */
    }

    .inner-page p {
      font-size: 12px; /* Smaller font size for paragraphs */
    }

    .inner-page ul, .inner-page ol {
      margin-left: 10px; /* Even smaller list margin */
    }
  }
</style>

<div class="inner-page mt-14">
    <div class="container px-4  md:px-8 pt-10 pb-20">

        <!-- Page Header -->
        <div class="max-w-4xl mx-auto text-center relative z-10 pb-12 md:pb-12">
            <h1 class="font-sans text-5xl md:text-7xl font-bold text-slate-900 leading-[1.05] tracking-tight mb-6">
                {{ $page->title }}
            </h1>
        </div>

        <!-- Page Content -->
        <div class="max-w-4xl mx-auto">
            
            @if($page->content)
                <div class="prose prose-lg max-w-none">
                    
                    {!! $page->content !!}
               
                </div>
            @else
                <!-- No content message -->
                <div class="text-center py-20">
                    <svg class="w-20 h-20 text-slate-300 mx-auto mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <h3 class="text-2xl font-bold text-slate-400">No content available</h3>
                </div>
            @endif

            <!-- Last Updated detection -->
            @if(str_contains($page->content ?? '', 'Last Updated:'))
                <div class="mt-8 text-sm text-slate-500 border-t border-slate-200 pt-6">
                    <p class="flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        This document was last updated on the date mentioned above.
                    </p>
                </div>
            @endif
        </div>

        <!-- Back Button -->
        <div class="mt-16 text-center">
            <a href="{{ url()->previous() }}" 
               class="inline-flex items-center gap-2 text-slate-600 hover:text-[#7D26C2] transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                <span>Go Back</span>
            </a>
        </div>
    </div>
</div>

@endsection