@extends('layouts.app')

@section('title', 'Founders — ' . config('gerg.name'))

@section('content')
    @include('partials.page-hero', ['title' => "Founder's Desk", 'subtitle' => 'Leadership that drives diversified growth across the group.', 'breadcrumb' => 'Founders'])

    <section class="py-16 lg:py-24">
        <div class="mx-auto max-w-7xl px-4 lg:px-8">
            @foreach (config('gerg.founders', []) as $founder)
                @php
                    $imagePath = $founder['image'] ?? null;
                    $hasImage = $imagePath && file_exists(public_path($imagePath));
                @endphp

                <article class="overflow-hidden rounded-3xl border border-gerg-100 bg-white shadow-lg shadow-slate-200/50">
                    <div class="grid gap-0 lg:grid-cols-[minmax(240px,300px)_1fr]">
                        <div class="flex items-center justify-center bg-gradient-to-br from-gerg-50 to-slate-50 p-8 lg:p-10">
                            @if ($hasImage)
                                <div class="relative">
                                    <div class="absolute -inset-1 bg-gradient-to-tr from-gerg-500 to-gerg-300 rounded-3xl blur opacity-50"></div>
                                    <img
                                        src="{{ asset($imagePath) }}"
                                        alt="{{ $founder['name'] }}, {{ $founder['role'] }}"
                                        class="relative h-72 w-60 object-cover rounded-2xl shadow-xl"
                                        width="240"
                                        height="288"
                                        loading="eager"
                                    >
                                </div>
                            @else
                                <div class="flex h-72 w-60 items-center justify-center rounded-2xl bg-gerg-100 text-gerg-500">
                                    <span class="font-display text-sm font-semibold">Photo</span>
                                </div>
                            @endif
                        </div>

                        <div class="flex flex-col justify-center p-8 lg:p-12">
                            <div class="inline-flex items-center gap-2 rounded-full bg-gerg-50 px-4 py-1.5 text-sm font-medium text-gerg-700">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                </svg>
                                {{ config('gerg.short_name') }} Leadership
                            </div>

                            <h2 class="mt-4 font-display text-3xl font-bold tracking-tight text-gerg-900 md:text-4xl">
                                {{ $founder['name'] }}
                            </h2>

                            @if (!empty($founder['title']))
                                <p class="mt-2 text-lg font-semibold text-gerg-600">
                                    {{ $founder['title'] }}
                                </p>
                            @endif

                            <div class="mt-8 space-y-5 text-base leading-relaxed text-slate-600">
                                @foreach ($founder['paragraphs'] ?? [] as $paragraph)
                                    <p class="text-lg">{{ $paragraph }}</p>
                                @endforeach

                                @if (!empty($founder['book']))
                                    @php $book = $founder['book']; @endphp
                                    <div class="mt-6 rounded-2xl bg-gradient-to-r from-gerg-50 to-gerg-100/50 p-6 border border-gerg-200">
                                        <div class="flex items-start gap-3">
                                            <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-gerg-500 text-white">
                                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                                                </svg>
                                            </div>
                                            <div>
                                                <h4 class="font-display text-lg font-semibold text-gerg-900">
                                                    Authored: <span class="text-gerg-600">"{{ $book['title'] }}"</span>
                                                </h4>
                                                <p class="mt-1 text-sm text-slate-600">
                                                    Published {{ $book['month'] ?? '' }} {{ $book['year'] ?? '' }}. Sales proceeds benefit <span class="font-semibold text-gerg-700">{{ $book['beneficiary'] }}</span> {{ $book['beneficiary_note'] ?? '' }}.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
@endsection