@props([
    'settings',
])

@php
    $summary = $settings->about_summary ?: 'Assessoria para eventos em que cada escolha precisa fazer sentido para quem celebra e para quem recebe.';
    $principles = filled($settings->principles) ? $settings->principles : \App\Models\SiteSetting::defaultPrinciples();
@endphp

<section aria-labelledby="positioning-heading" class="home-chapter border-b border-amare-border py-24" data-chapter="positioning">
    <div class="container-amare grid gap-10 md:grid-cols-12" data-reveal-group>
        <div class="space-y-4 md:col-span-5" data-reveal data-reveal-from="left">
            <div class="flex items-center gap-4">
                <span class="h-px w-10 bg-amare-border" aria-hidden="true"></span>
                <p class="text-sm uppercase tracking-[0.12em] text-amare-text-muted">Assessoria boutique · São Paulo</p>
        </div>
            <h2 id="positioning-heading" class="text-headline font-medium text-amare-text">Presença que organiza o essencial.</h2>
        </div>
        <div class="space-y-8 md:col-span-6 md:col-start-7" data-reveal data-reveal-from="up">
            <p class="max-w-2xl text-xl leading-relaxed text-amare-text">{{ $summary }}</p>
            @if (filled($settings->about_image_path))
                <div class="overflow-hidden bg-amare-bg-deep" data-reveal-media>
                    <x-media.image
                        :path="$settings->about_image_path"
                        :alt="$settings->about_image_alt ?: $settings->brand_name"
                        sizes="(max-width: 768px) 100vw, 50vw"
                        class="img-editorial aspect-[4/3] w-full object-cover"
                    />
                </div>
            @endif
            <ul class="grid gap-3 border-t border-amare-border">
                @foreach ($principles as $principle)
                    <li class="border-b border-amare-border py-3 text-amare-text-muted">{{ $principle }}</li>
                @endforeach
            </ul>
            <p>
                <a href="{{ route('about') }}" class="btn btn-ghost min-h-0 px-0 text-sm font-semibold text-amare-accent hover:bg-transparent hover:text-amare-accent-deep">
                    <span class="border-b border-amare-accent pb-1">Conhecer a Amare</span>
                </a>
            </p>
        </div>
    </div>
</section>