@extends('website.app')

@section('content')
    <!-- Page Hero -->
    <section class="page-hero">
        <div class="container">
            <div class="page-hero-content" data-aos="fade-up">
                <span
                    style="font-family: var(--font-heading); font-weight: 700; color: var(--secondary-color); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.1em; display: block; margin-bottom: 0.5rem;">{{ $blog->category }}</span>
                <h1>{{ $blog->title }}</h1>
                <ul class="breadcrumbs">
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li><a href="{{ url('/blogs') }}">Blogs</a></li>
                    <li>Read Post</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Blog detail template -->
    <section class="section-padding bg-white">
        <div class="container" style="max-width: 900px;">
            <!-- Featured Image block -->
            <div style="margin-bottom: 3.5rem;"
                data-aos="zoom-in">
                @if (!empty($blog->image))
                    <img src="{{ Storage::url($blog->image) }}" alt="{{ $blog->title }}"
                        style="width: 100%; height: 100%; object-fit: cover;border-radius: 14px;">
                @elseif (!empty($blog->image_fallback))
                    <img src="{{ asset('assets/images/uploads/' . $blog->image_fallback) }}"
                        style="width: 100%; height: 100%; object-fit: cover;border-radius: 14px;">
                @else
                    <span
                        style="font-family: var(--font-heading); font-weight: 900; font-size: 2.5rem; color: rgba(255,255,255,0.1); text-transform: uppercase; letter-spacing: 0.15em;">SWIFTEC
                        LUBRICANTS</span>
                @endif
            </div>

            <!-- Content Area -->
            <div class="blog-content-body" style="font-size: 1.1rem; line-height: 1.8; color: var(--text-medium);"
                data-aos="fade-up">
                {!! $blog->main_description !!}
            </div>

            <div style="margin-top: 5rem; display: flex; justify-content: space-between;" data-aos="fade-up" class="blog-detail-actions">
                <a href="{{ url('/blogs') }}" class="btn btn-outline">&larr; Back to all Blogs</a>
                <a href="{{ url('/distributor') }}" class="btn btn-primary">Become Distributor &rarr;</a>
            </div>

        </div>
    </section>
@endsection