@extends('layouts.public')

@section('content')
    @php
        $principles = filled($siteSettings->principles)
            ? $siteSettings->principles
            : \App\Models\SiteSetting::defaultPrinciples();
        $city = $siteSettings->city ?: 'São Paulo - SP';
    @endphp

    <div class="flex min-h-[calc(100dvh-14rem)] flex-col border-b border-amare-border bg-amare-bg" data-motion="page-open">
        <div class="container-amare grid flex-1 content-start gap-12 py-16 md:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)] md:py-24">
            <div class="space-y-6">
                <p class="text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">A Amare</p>
                <h1 class="text-4xl font-medium tracking-tight text-amare-text md:text-5xl">Humana no cuidado. Precisa na entrega.</h1>
                <p class="text-lg text-amare-muted">{{ $siteSettings->about_summary }}</p>
                <p class="text-amare-muted">
                    A {{ $siteSettings->brand_name }} atua em {{ $city }} com foco em planejamento completo,
                    presença no dia do evento e uma condução serena do início ao fim.
                </p>
            </div>

            <ul class="space-y-4 border-t border-amare-border pt-6" aria-label="Princípios da Amare">
                @foreach ($principles as $index => $principle)
                    <li class="grid grid-cols-[3rem_minmax(0,1fr)] gap-4 border-b border-amare-border pb-4 text-amare-text">
                        <span class="text-sm font-semibold uppercase tracking-[0.14em] text-amare-accent">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                        <span>{{ $principle }}</span>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@endsection