@extends('site.layouts.app')
@section('content')
  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="عن الدكتور">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <span>عن الدكتور</span>
    </div>
  </section>

  <!-- ABOUT BIO -->
  <section class="section">
    <div class="container">
      <div class="about-bio">
        <div class="about-bio-text fade-in-right">
          <h2>دكتور أحمد رشدي</h2>
          <p class="degree">{{ $about->about_text }}</p>
          <ul class="about-credentials">
            @foreach(explode("\n", $about->role) as $item)
              <li>{{ $item }}</li>
            @endforeach
          </ul>
          <p
            style="margin-top:30px;font-family:Georgia,serif;font-style:italic;font-size:28px;color:var(--text-secondary);">
            Dr. Ahmed Roshdy</p>
        </div>
        <div class="about-bio-image fade-in-left">
          <iframe width="560" height="315" src="{{ $about->youtube_video }}"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </section>

  <!-- VISION & STRATEGY -->
  <section class="vision-strategy">
    <div class="container">
      <div class="vs-grid">
        <div class="vs-card fade-in">
          <h3>رؤيتنا</h3>
          <p>{{ $about->vision }}</p>
        </div>
        <div class="vs-card fade-in">
          <h3>استراتيجيتنا</h3>
          <p>{{ $about->strategy }}</p>
        </div>
      </div>
    </div>
  </section>

  <!-- MISSION -->
  <section class="mission-section">
    <div class="container">
      <h3 class="fade-in">مهمتنا</h3>
      <ul class="mission-list fade-in">
        @foreach(explode("\n", $about->mission) as $item)
          <li>{{ $item }}</li>
        @endforeach
      </ul>
    </div>
  </section>

  <!-- ABOUT DR. BIO EXTENDED -->
  <section class="section" style="background:var(--bg-secondary);">
    <div class="container">
      <div class="vs-card fade-in" style="max-width:900px;margin:0 auto;">
        <h3>عن د. أحمد رشدي</h3>
        <p>{{ nl2br($about->doctor_summary) }}</p>
      </div>
    </div>
  </section>
@endsection