@extends('layouts.front')

@section('content')
<section class="my-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <article>
                    <h2 class="section-heading">{{$blog->title}}</h2>
                    <p class="small">{{'Posted in:'}} <a href="{{url('blogs')}}">{{'Blogs'}}</a></p>
                    @if(is_null($blog->featured_image))
                    <img src="{{url('storage/blog-images/placeholder.webp')}}" class="featured-image" alt="{{ env('APP_NAME') }}" decoding="async" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px">
                    @else
                    <img src="{{url('storage/'.$blog->featured_image)}}" class="featured-image" alt="{{ env('APP_NAME') }}" decoding="async" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px">
                    @endif
                    {!!$blog->content!!}
                </article>
            </div>
            <div class="col-lg-3">
                <aside class="position-sticky" style="top:1.5rem">
                    <!-- Sidebar Card Container -->
                    <div class="firu-sidebar-card" style="border: 1px solid #e5e7eb; padding: 24px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
                        <h5>
                            Stop Guessing KRA Audit Triggers
                        </h5>

                        <p style="font-size: 14px; color: #4b5563; margin-bottom: 20px; line-height: 1.5;">
                            Get instant, unlimited access to over 5,000+ Kenyan tax case summaries, legal precedents and real-time compliance alerts.
                        </p>

                        <!-- Pricing Feature List -->
                        <ul style="list-style: none; padding: 0; margin: 0 0 24px 0; font-size: 13.5px; color: #374151;">
                            <li style="margin-bottom: 10px; display: flex; align-items: center;">
                                <svg style="width: 18px; height: 18px; color: #059669; margin-right: 8px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Full copy-paste functionality enabled
                            </li>
                            <li style="margin-bottom: 10px; display: flex; align-items: center;">
                                <svg style="width: 18px; height: 18px; color: #059669; margin-right: 8px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Real-time update & audit alerts
                            </li>
                            <li style="margin-bottom: 0; display: flex; align-items: center;">
                                <svg style="width: 18px; height: 18px; color: #059669; margin-right: 8px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Priority email & platform support
                            </li>
                        </ul>

                        <!-- Price Point -->
                        <!-- <div style="margin-bottom: 20px; border-top: 1px solid #f3f4f6; padding-top: 16px;">
                            <span style="font-size: 24px; font-weight: 800; color: #111827;">KES 25,849</span>
                            <span style="font-size: 14px; color: #6b7280;"> / month</span>
                        </div> -->

                        <!-- Action Button -->
                        <a href="{{url('plans')}}" class="btn-cta fill w-100">
                            Unlock Premium Access
                        </a>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</section>
@endsection