@php
        $siteTitle = \App\Models\InfoSection::pluck('site_title')->first();
        $description = Str::limit(strip_tags($member->description), 160);
        $slug = Str::slug($member->name);
        $canonical = route('team.detail', ['id' => $member->id, 'slug' => $slug]);
        $profileImage = Storage::disk('public')->url('team/' . $member->image);
    @endphp
    @section('title', $member->name.' - PYPA'){{-- Site Main Section --}}
@section('seo_section')
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ $description }}">
    <meta name="keywords" content="{{ $member->name }}, {{ $member->job_title }}, Professional Psychologist, {{ $siteTitle }} Team">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{ $canonical }}">

    {{-- Open Graph --}}
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="profile">
    <meta property="og:title" content="{{ $member->name }} - {{ $member->job_title }}">
    <meta property="og:description" content="{{ $description }}">
    <meta property="og:url" content="{{ $canonical }}">
    <meta property="og:site_name" content="{{ $siteTitle }}">
    <meta property="og:image" content="{{ $profileImage }}">
    <meta property="og:image:alt" content="{{ $member->name }}">

    {{-- Twitter --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $member->name }} | {{ $siteTitle }}">
    <meta name="twitter:description" content="{{ $description }}">
    <meta name="twitter:image" content="{{ $profileImage }}">

    {{-- JSON-LD Schema for MedicalBusiness / Person --}}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "{{ $member->name }}",
        "jobTitle": "{{ $member->job_title }}",
        "image": "{{ $profileImage }}",
        "url": "{{ $canonical }}",
        "worksFor": {
            "@type": "Organization",
            "name": "{{ $siteTitle }}"
        },
        "description": "{{ $description }}"
    }
    </script>
@endsection

@extends('frontend.layout.main')

@section('main-section')
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<style>
    .detail-image-box {
        background: #f9f9f9;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        position: sticky;
        top: 100px;
    }
    .detail-image-box img {
        width: 100%;
        height: auto;
        max-height: 500px;
        object-fit: contain;
        display: block;
    }
    .bio-card {
        background: #fff;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    }
    .job-badge {
        display: inline-block;
        background: rgba(26, 43, 86, 0.1);
        color: #1a2b56;
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 15px;
    }
    .bio-content {
        font-size: 16px;
        line-height: 1.8;
        color: #555;
    }
    .bio-content h1, .bio-content h2, .bio-content h3 {
        color: #1a2b56;
        margin-top: 25px;
        margin-bottom: 15px;
    }
    .back-btn {
        transition: all 0.3s;
    }
    .back-btn:hover {
        transform: translateX(-5px);
    }
</style>

<div class="sub-banner-section-outer">
    <x-frontend.preloader></x-frontend.preloader>
    <x-frontend.navbar></x-frontend.navbar>
</div>

<div class="container mt-5 mb-5 py-4">
    <div class="row">
        {{-- Profile Image Column --}}
        <div class="col-lg-4 mb-4" data-aos="fade-right">
            <div class="detail-image-box">
                <img src="{{ Storage::disk('public')->url('team/' . $member->image) }}" alt="{{ $member->name }}">
                <div class="p-4 text-center bg-white">
                    <h4 class="font-weight-bold mb-1">{{ $member->name }}</h4>
                    <p class="text-muted small mb-0">{{ $member->job_title }}</p>
                </div>
            </div>
        </div>

        {{-- Biography Column --}}
        <div class="col-lg-8" data-aos="fade-left">
            <div class="bio-card">
                <div class="job-badge text-uppercase">{{ $member->job_title }}</div>
                <h2 class="font-weight-bold mb-4" style="color: #1a2b56;">About {{ $member->name }}</h2>
                
                <div class="bio-content">
                    @if($member->description)
                        {!! $member->description !!}
                    @else
                        <p class="text-muted italic"></p>
                    @endif
                </div>

                <hr class="my-5">

                <div class="d-flex justify-content-between align-items-center">
                    <a href="{{ route('contactus') }}" class="btn style-two font-secondary fw-semibold position-relative z-1 round-10">
                        Book Consultation
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<x-frontend.footer></x-frontend.footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init({ duration: 1000, once: true });
</script>
@endsection