@extends('frontend.layouts.app')

<style>
    .page-content {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #495057;
    }
    
    .page-content p {
        margin-bottom: 1.25rem;
    }
    
    .page-content h2 {
        color: #d92332;
        margin: 2rem 0 1.25rem;
        font-weight: 600;
        position: relative;
        padding-bottom: 0.5rem;
    }
    
    .page-content h2:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 60px;
        height: 3px;
        background: rgba(217, 35, 50, 0.2);
    }
    
    .page-content h3 {
        color: #d92332;
        margin: 1.75rem 0 1rem;
        font-weight: 600;
    }
    
    .page-content ul, 
    .page-content ol {
        padding-left: 1.75rem;
        margin-bottom: 1.5rem;
    }
    
    .page-content ul {
        list-style-type: disc;
    }
    
    .page-content li {
        margin-bottom: 0.5rem;
    }
    
    .page-content a {
        color: #d92332;
        text-decoration: underline;
        transition: all 0.3s ease;
    }
    
    .page-content a:hover {
        color: #a51c27;
    }
    
    .page-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.375rem;
        margin: 1.5rem 0;
    }
    
    .blood-drop-icon {
        color: #d92332;
        margin-right: 0.5rem;
    }
</style>

@section('title', 'Digital Blood Hub - ' . $page->title)

@section('content')
<section class="py-5" style="background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);">
    <div class="container">
        <div class="text-center mb-5">
            <div class="mb-4">
                <i class="fas fa-tint blood-drop-icon fa-3x"></i>
            </div>
            <h1 class="display-5 fw-bold  mb-3">{{ $page->title }}</h1>
            <div class="w-25 mx-auto">
                <hr class="border-danger opacity-100" style="height: 3px;">
            </div>
        </div>

        <div class="card shadow-lg border-0 rounded-3 overflow-hidden">
            <div class="card-body p-4 p-md-5">
                <div class="page-content">
                    {!! $page->content !!}
                </div>
            </div>
            
            @if($page->slug === 'about-us' || $page->slug === 'how-it-works')
            <div class="card-footer bg-transparent border-0 text-center py-4">
                <a href="{{ route('register') }}" class="btn btn-danger btn-lg px-4 py-2 rounded-pill shadow-sm">
                    <i class="fas fa-hand-holding-medical me-2"></i> Join Our Community
                </a>
            </div>
            @endif
        </div>
    </div>
</section>
@endsection