@extends('layouts.front')

@section('title', $page->title)
@section('meta_description', $page->meta['description'] ?? Str::limit(strip_tags($page->body), 150))

@section('breadcrumbs')
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 flex flex-wrap items-center gap-1">
  <a href="/" class="hover:text-primary">الرئيسية</a>
  <span>/</span>
  <span class="text-slate-700 dark:text-slate-200">{{ $page->title }}</span>
</nav>
@endsection

@section('content')
<article class="max-w-4xl mx-auto bg-white/80 dark:bg-slate-800/50 backdrop-blur-md rounded-3xl shadow-md p-8">

  {{-- 🏷️ عنوان الصفحة --}}
  <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white mb-6 border-r-4 border-primary pr-4">
    {{ $page->title }}
  </h1>

  {{-- 📄 محتوى الصفحة --}}
  <div class="prose prose-slate dark:prose-invert max-w-none leading-8">
    {!! $page->body !!}
  </div>

  {{-- 📢 إعلان (اختياري) --}}
  <div class="mt-10">
    @include('front.partials.ads.dynamic', ['position' => 'in_article'])
  </div>

  {{-- 📤 مشاركة الصفحة --}}
  <section class="mt-12 bg-white/70 dark:bg-slate-800/50 p-6 rounded-2xl shadow-sm backdrop-blur">
    <h2 class="text-lg font-bold border-r-4 border-primary pr-3 mb-4">شارك هذه الصفحة</h2>
    @php
      $url = urlencode(request()->fullUrl());
      $title = urlencode($page->title);
    @endphp

    <div class="flex flex-wrap justify-center gap-3 text-sm font-semibold">
      <a href="https://wa.me/?text={{ $title }}%20{{ $url }}"
         target="_blank"
         class="flex items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
        <i class="fab fa-whatsapp"></i> واتساب
      </a>

      <a href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
         target="_blank"
         class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
        <i class="fab fa-facebook-f"></i> فيسبوك
      </a>

      <a href="https://twitter.com/intent/tweet?text={{ $title }}&url={{ $url }}"
         target="_blank"
         class="flex items-center gap-2 bg-sky-500 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
        <i class="fab fa-x-twitter"></i> تويتر
      </a>

      <a href="https://t.me/share/url?url={{ $url }}&text={{ $title }}"
         target="_blank"
         class="flex items-center gap-2 bg-blue-400 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
        <i class="fab fa-telegram-plane"></i> تلغرام
      </a>

      <button onclick="navigator.clipboard.writeText('{{ request()->fullUrl() }}'); alert('تم نسخ الرابط!');"
              class="flex items-center gap-2 bg-slate-600 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
        <i class="fas fa-link"></i> نسخ الرابط
      </button>
    </div>
  </section>
</article>
@endsection