@extends('layouts.app')

@section('content')
    <div class="container mt-4">

        <h3>About Page Management</h3>

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <div class="card">

            <div class="card-body">

                <h5>Hero Title</h5>
                <p>{{ $about->hero_title ?? 'Not set yet' }}</p>

                <h5>Hero Description</h5>
                <p>{{ $about->hero_description ?? 'Not set yet' }}</p>

                <h5>Mission</h5>
                <p>{{ $about->mission ?? 'Not set yet' }}</p>

                <h5>Vision</h5>
                <p>{{ $about->vision ?? 'Not set yet' }}</p>

                <p class="about-description">
                    {!! $about->description !!}
                </p>

                <a href="{{ route('admin.about.edit') }}" class="btn btn-primary mt-3">
                    Edit About Page
                </a>

            </div>

        </div>
        <style>
            .about-description {
                max-width: 760px !important;
                margin: 0 auto;
                font-family: Georgia, serif;
                font-size: 20px;
                line-height: 1.9 !important;
                color: #222;
            }

            .about-description p {
                margin-bottom: 28px;
            }
            .about-description p:first-child {
                font-size: 24px;
                font-weight: 500;
            }
        </style>
    </div>
@endsection