@extends('layouts.web')

@section('content')

<style>
    :root{
      --brand:#7D26C2;
      --brand-light:#9d53e6;
      --brand-lightest:#f5eeff;
      --brand-gradient:linear-gradient(135deg, #7D26C2, #9d53e6);
      --bg:#f8f5ff;
      --muted:#6c757d;
      --dark:#2c2c2c;
      --success:#20c997;
      --card-radius:20px;
      --shadow-sm:0 5px 15px rgba(125, 38, 194, 0.08);
      --shadow:0 10px 30px rgba(125, 38, 194, 0.12);
      --shadow-lg:0 15px 40px rgba(125, 38, 194, 0.15);
    }

    body{
      background: var(--bg);
      color: #333;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.7;
    }

    /* Brand elements */
    .brand-badge{
      background: var(--brand-gradient);
      color:#fff;
      padding:.5rem 1rem;
      border-radius:50px;
      font-size:.85rem;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      white-space:nowrap;
      box-shadow: var(--shadow-sm);
    }

    .brand-logo{
      width:42px;
      height:42px;
      border-radius:12px;
      background:#fff;
      display:grid;
      place-items:center;
      box-shadow:var(--shadow);
      overflow:hidden;
      border:2px solid white;
    }

    /* Desktop Navigation */
    .desktop-nav {
      display: none;
    }
    @media (min-width: 992px) {
      .desktop-nav {
        display: flex;
        align-items: center;
        gap: 2rem;
      }
      .nav-link {
        color: var(--dark);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s ease;
        position: relative;
      }
      .nav-link:hover {
        color: var(--brand);
      }
      .nav-link.active {
        color: var(--brand);
      }
      .nav-link.active::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--brand-gradient);
        border-radius: 3px;
      }
    }

    /* Article Hero */
    .article-hero{
      background: linear-gradient(rgba(125, 38, 194, 0.9), rgba(125, 38, 194, 0.7)), url('{{ $blog->feature_image ? asset($blog->feature_image) : "https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" }}');
      background-size: cover;
      background-position: center;
      border-radius: var(--card-radius);
      overflow:hidden;
      margin: 2rem 0 3rem;
      position: relative;
      color: white;
      padding: 4rem 2rem;
      min-height: 400px;
      display: flex;
      align-items: center;
    }
    
    .article-hero-content{
      position: relative;
      z-index: 2;
      max-width: 800px;
    }

    /* Article Content */
    .article-container{
      background: white;
      border-radius: var(--card-radius);
      padding: 3rem;
      box-shadow: var(--shadow);
      margin-bottom: 3rem;
      position: relative;
      transform: translateY(-50px);
    }
    
    .article-category{
      background: var(--brand-gradient);
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 1.5rem;
    }
    
    .article-meta{
      display: flex;
      align-items: center;
      gap: 2rem;
      margin: 2rem 0;
      padding: 1.5rem 0;
      border-top: 1px solid rgba(125, 38, 194, 0.1);
      border-bottom: 1px solid rgba(125, 38, 194, 0.1);
    }
    
    .author-info{
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .author-avatar{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid var(--brand-lightest);
    }
    
    .article-stats{
      display: flex;
      gap: 2rem;
      color: var(--muted);
    }
    
    .article-stats span{
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    /* Article Content Styling */
    .article-content{
      font-size: 1.1rem;
      line-height: 1.8;
      color: #444;
    }
    
    .article-content h2{
      color: var(--brand);
      margin: 2.5rem 0 1.5rem;
      font-weight: 700;
    }
    
    .article-content h3{
      color: var(--dark);
      margin: 2rem 0 1rem;
      font-weight: 600;
    }
    
    .article-content p{
      margin-bottom: 1.5rem;
    }
    
    .article-content ul, .article-content ol{
      margin-bottom: 1.5rem;
      padding-left: 1.5rem;
    }
    
    .article-content li{
      margin-bottom: 0.75rem;
    }
    
    .highlight-box{
      background: var(--brand-lightest);
      border-left: 4px solid var(--brand);
      padding: 2rem;
      border-radius: 0 var(--card-radius) var(--card-radius) 0;
      margin: 2rem 0;
    }
    
    .article-image{
      width: 100%;
      border-radius: var(--card-radius);
      margin: 2rem 0;
      box-shadow: var(--shadow);
    }
    
    /* Sidebar */
    .sidebar-card{
      background: white;
      border-radius: var(--card-radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-bottom: 2rem;
      position: sticky;
      top: 20px;
    }
    
    .sidebar-title{
      color: var(--brand);
      font-weight: 700;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--brand-lightest);
    }
    
    /* Share Buttons */
    .share-buttons{
      display: flex;
      gap: 0.75rem;
      margin-top: 2rem;
    }
    
    .share-btn{
      width: 45px;
      height: 45px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: white;
      text-decoration: none;
      transition: transform 0.3s ease;
    }
    
    .share-btn:hover{
      transform: translateY(-3px);
    }
    
    .share-facebook{ background: #1877F2; }
    .share-twitter{ background: #1DA1F2; }
    .share-linkedin{ background: #0A66C2; }
    .share-whatsapp{ background: #25D366; }

    /* Related Articles */
    .related-card{
      background: white;
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
      height: 100%;
    }
    
    .related-card:hover{
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }
    
    .related-image{
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .related-content{
      padding: 1.5rem;
    }
    
    .related-category{
      background: var(--brand-lightest);
      color: var(--brand);
      padding: 0.3rem 1rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 0.75rem;
    }
    
    /* Buttons */
    .btn-brand{
      background: var(--brand-gradient);
      color:#fff;
      border:0;
      border-radius: 12px;
      padding: 0.75rem 1.5rem;
      font-weight:700;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-sm);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .btn-brand:hover{ 
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      color:#fff; 
    }

    .btn-outline-brand {
      border: 2px solid var(--brand);
      color: var(--brand);
      border-radius: 12px;
      padding: 0.75rem 1.5rem;
      font-weight: 700;
      transition: all 0.3s ease;
    }
    .btn-outline-brand:hover {
      background: var(--brand);
      color: white;
    }

    /* Mobile Navigation */
    .bottom-nav{
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background:#fff;
      border-top: 2px solid rgba(125, 38, 194, 0.1);
      padding: 1rem 1rem 1.25rem;
      z-index: 1030;
      box-shadow: 0 -5px 20px rgba(125, 38, 194, 0.1);
    }
    .bottom-nav a{
      color: #9aa0a6;
      text-decoration:none;
      font-weight:700;
      font-size:.85rem;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      transition: color 0.3s ease;
    }
    .bottom-nav a.active{
      color: var(--brand);
    }
    .bottom-nav a .bi {
      font-size: 1.5rem;
    }

    /* Footer */
    .footer{
      background: white;
      border-top: 2px solid rgba(125, 38, 194, 0.1);
      padding: 4rem 0 2rem;
      margin-top: 4rem;
    }
    
    .footer-links{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-links li{
      margin-bottom: 0.75rem;
    }
    
    .footer-links a{
      color: var(--muted);
      text-decoration: none;
      transition: color 0.3s ease;
    }
    
    .footer-links a:hover{
      color: var(--brand);
    }
    
    .social-links{
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem;
    }
    
    .social-icon{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--brand-lightest);
      display: grid;
      place-items: center;
      color: var(--brand);
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .social-icon:hover{
      background: var(--brand-gradient);
      color: white;
      transform: translateY(-3px);
    }
    
    .copyright{
      text-align: center;
      padding-top: 2rem;
      margin-top: 2rem;
      border-top: 1px solid rgba(125, 38, 194, 0.1);
      color: var(--muted);
      font-size: 0.9rem;
    }

    /* Responsive */
    @media (min-width: 992px){
      .bottom-nav{ display:none; }
      body{ padding-bottom: 0; }
      .article-hero{
        padding: 5rem 3rem;
        min-height: 500px;
        margin: 3rem 0 4rem;
      }
      .article-container{
        padding: 4rem;
        transform: translateY(-80px);
      }
    }

    @media (max-width: 991.98px){
      body{ padding-bottom: 88px; }
      .article-hero{
        padding: 3rem 1.5rem;
        min-height: 400px;
        text-align: center;
      }
      .article-container{
        padding: 2rem;
        transform: translateY(-30px);
      }
      .article-meta{
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
      }
      .article-stats{
        flex-wrap: wrap;
        gap: 1rem;
      }
      .sidebar-card{
        position: static;
        margin-top: 2rem;
      }
    }

    /* Author Bio */
    .author-bio {
      background: white;
      border-radius: var(--card-radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-bottom: 2rem;
    }
</style>



<div class="container-fluid py-4 py-lg-5">
  


    <!-- Article Hero -->
    <div class="article-hero">
        <div class="article-hero-content">
            <span class="article-category">{{ ucfirst($blog->type) }}</span>
            <h1 class="fw-bold mb-4" style="font-size: 2.5rem;">{{ $blog->title }}</h1>
            <div class="d-flex align-items-center gap-4 flex-wrap">
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-calendar"></i>
                    <span>{{ $blog->created_at->format('F d, Y') }}</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <i class="bi bi-clock"></i>
                    <span>{{ ceil(str_word_count(strip_tags($blog->content)) / 200) }} min read</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <!-- Article Content -->
        <div class="col-lg-8">
            <div class="article-container">
                <div class="article-meta">
                    <div class="author-info">
                        <img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png?20150327203541" alt="Author" class="author-avatar">
                        <div>
                            <div class="fw-bold">AlephoraX communication Team</div>
                            <div class="text-muted">Legal Experts</div>
                        </div>
                    </div>
                </div>

                <div class="article-content">
                    {!! $blog->content !!}
                </div>

                <!-- Tags Section -->
                @if($blog->meta_keywords)
                <div class="mt-5 pt-4 border-top">
                    <h5 class="fw-bold mb-3">Tags:</h5>
                    <div class="d-flex flex-wrap gap-2">
                        @foreach(explode(',', $blog->meta_keywords) as $keyword)
                            <span class="badge bg-light text-dark p-2">{{ trim($keyword) }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                <!-- Share Section -->
                <div class="mt-5 pt-4 border-top">
                    <h5 class="fw-bold mb-3">Share this article:</h5>
                    <div class="share-buttons">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" class="share-btn share-facebook">
                            <i class="bi bi-facebook"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($blog->title) }}" target="_blank" class="share-btn share-twitter">
                            <i class="bi bi-twitter"></i>
                        </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->url()) }}" target="_blank" class="share-btn share-linkedin">
                            <i class="bi bi-linkedin"></i>
                        </a>
                        <a href="https://wa.me/?text={{ urlencode($blog->title . ' - ' . request()->url()) }}" target="_blank" class="share-btn share-whatsapp">
                            <i class="bi bi-whatsapp"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            
            <!-- Related Articles -->
            @if(isset($relatedPosts) && $relatedPosts->count() > 0)
            <div class="sidebar-card">
                <h4 class="sidebar-title">Related Articles</h4>
                
                @foreach($relatedPosts as $related)
                <a href="{{ route('blog.show', $related->slug) }}" class="text-decoration-none">
                    <div class="related-card mb-3">
                        <img src="{{ $related->feature_image ? asset($related->feature_image) : 'https://images.unsplash.com/photo-1589391886085-8b6b0ac72a1a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }}" 
                             alt="{{ $related->title }}" 
                             class="related-image">
                        <div class="related-content">
                            <span class="related-category">{{ ucfirst($related->type) }}</span>
                            <h6 class="fw-bold mb-2">{{ Str::limit($related->title, 50) }}</h6>
                            <div class="d-flex justify-content-between text-muted">
                                <small><i class="bi bi-calendar me-1"></i> {{ $related->created_at->format('M d, Y') }}</small>
                            </div>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</div>


@endsection