@extends('layouts.app')

@section('canonical', '/about')

@section('content')
    @php
        $head = $content['aboutHead'] ?? [];
        $about = $content['about'] ?? [];
    @endphp

    <section class="page-hero">
        <div class="container">
            <span class="hero-badge">🏫 আমাদের সম্পর্কে</span>
            <h1>{{ $head['title'] ?? 'আমাদের সম্পর্কে' }}</h1>
            <p>{{ $head['text'] ?? '' }}</p>
        </div>
    </section>

    <section class="section">
        <div class="container about-grid">
            <div class="about-visual">
                <img src="{{ $about['image'] ?? '' }}" alt="{{ $about['heading'] ?? '' }}" loading="lazy">
            </div>
            <div class="about-text">
                <span class="eyebrow">{{ $about['eyebrow'] ?? '' }}</span>
                <h2>{{ $about['heading'] ?? '' }}</h2>
                @foreach(($about['paragraphs'] ?? []) as $p)
                    <p>{{ $p }}</p>
                @endforeach

                @if(! empty($about['values']))
                    <ul class="value-list">
                        @foreach($about['values'] as $v)
                            <li>{{ $v }}</li>
                        @endforeach
                    </ul>
                @endif

                <div style="margin-top:26px;display:flex;flex-wrap:wrap;gap:12px">
                    <a class="btn btn-primary" href="/courses">কোর্স দেখুন →</a>
                    <a class="btn btn-outline" href="/contact">যোগাযোগ করুন</a>
                </div>
            </div>
        </div>
    </section>

    @include('partials.sections.why-us', ['content' => $content])
    @include('partials.sections.certificate', ['content' => $content])
    @include('partials.sections.mentors', ['content' => $content])
    @include('partials.sections.cta', ['content' => $content, 'site' => $site])
@endsection