@extends('layouts.app')

@section('content')
    @php($about = config('site.about'))
    @php($team = config('site.team'))
    {{-- Members still holding a [placeholder] are not shown; the whole section stays hidden until a real person is added. --}}
    @php($members = collect($team['members'])->reject(fn ($m) => str_starts_with($m['name'], '[')))

    <x-page-hero title="About Us" :subtitle="$about['tagline'] ?? config('site.company.tagline')" :breadcrumbs="[['label' => 'About Us']]" />

    <section class="section">
        <div class="container-page max-w-3xl space-y-4 text-lg">
            @foreach ($about['intro'] as $paragraph)
                <p>{{ $paragraph }}</p>
            @endforeach
        </div>
    </section>

    {{-- Core strengths --}}
    <section id="core-strengths" class="section bg-slate-50">
        <div class="container-page">
            <x-section-heading :title="$about['strengths']['title']" />
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($about['strengths']['items'] as $item)
                    <x-card :title="$item['title']">
                        <x-slot:icon>
                            <span class="flex h-12 w-12 items-center justify-center rounded-lg bg-brand-50 text-brand-700"><x-icon :name="$item['icon']" class="h-7 w-7" /></span>
                        </x-slot:icon>
                        {{ $item['text'] }}
                    </x-card>
                @endforeach
            </div>
        </div>
    </section>

    {{-- The company's own vision --}}
    <section id="our-vision" class="section bg-brand-50">
        <div class="container-page max-w-3xl text-center">
            <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">{{ $about['company_vision']['title'] }}</h2>
            <p class="mt-4 text-lg text-slate-700">{{ $about['company_vision']['text'] }}</p>
        </div>
    </section>

    {{-- Commitment --}}
    <section class="section">
        <div class="container-page">
            <x-section-heading :title="$about['commitment']['title']" :subtitle="$about['commitment']['text']" />
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ($about['commitment']['points'] as $point)
                    <x-card :title="$point['title']">{{ $point['text'] }}</x-card>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Team --}}
    @if ($members->isNotEmpty())
        <section class="section bg-slate-50">
            <div class="container-page">
                <x-section-heading :title="$team['title']" :subtitle="$team['subtitle']" />
                <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($members as $member)
                        <x-card :image="$member['photo']" :title="$member['name']" :eyebrow="$member['role']">
                            {{ $member['bio'] }}
                        </x-card>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection