@extends('layouts.app')

@section('title', __('layout.navigation.about'))

@php($about = trans('about'))

@section('content')
<section class="section">
    <div class="container">
        <div class="section-header">
            <h1 class="section-title">{{ $about['hero']['title'] }}</h1>
            <p class="section-subtitle">{{ $about['hero']['subtitle'] }}</p>
        </div>
        <div class="grid-3">
            @foreach($about['pillars'] as $pillar)
                <div class="card">
                    <h3 style="font-size:1.05rem;margin-bottom:.5rem;">{{ $pillar['title'] }}</h3>
                    <p style="font-size:.9rem;color:#FFFFFF;">
                        {{ $pillar['text'] }}
                    </p>
                </div>
            @endforeach
        </div>

        <div class="section" style="padding-top:2.5rem;">
            <div class="section-header" style="margin-bottom:1.5rem;">
                <h2 class="section-title">{{ $about['values_title'] }}</h2>
            </div>
            <div class="card" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;">
                @foreach($about['values'] as $value)
                    <div>
                        <h4 style="font-size:.95rem;">{{ $value['title'] }}</h4>
                        <p style="font-size:.85rem;color:#FFFFFF;">{{ $value['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="section" style="padding-top:2.5rem;">
            <div class="section-header" style="margin-bottom:1.5rem;">
                <h2 class="section-title">{{ $about['strategic']['title'] }}</h2>
                <p class="section-subtitle">{{ $about['strategic']['subtitle'] }}</p>
            </div>
            <div class="grid-3">
                @foreach($about['strategic']['items'] as $item)
                    <div class="card">
                        <div class="badge-soft">{{ $item['badge'] }}</div>
                        <h3 style="margin-top:1rem;font-size:1.05rem;">{{ $item['title'] }}</h3>
                        <p style="font-size:.85rem;color:#FFFFFF;">
                            {{ $item['text'] }}
                        </p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endsection