<?php

use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('components.layouts.public')] class extends Component
{
    //
}; ?>

<div>
    {{-- Hero Section --}}
    <section class="bg-background py-10 sm:py-[60px] lg:py-20 -mx-4 sm:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8">
        <div class="container mx-auto px-4 text-center">
            {{-- Page Title --}}
            <h1 class="text-[2rem] sm:text-[2.5rem] lg:text-[3rem] font-bold text-text mb-2">
                {{ __('about.title') }}
            </h1>

            {{-- Tagline --}}
            <p class="text-xl sm:text-2xl text-text/80 max-w-[800px] mx-auto mb-4">
                {{ __('about.tagline') }}
            </p>

            {{-- Identity Statement --}}
            <p class="text-lg text-text/70 max-w-[700px] mx-auto">
                {{ __('about.identity') }}
            </p>
        </div>
    </section>

    {{-- Vision Section --}}
    <section class="bg-white py-8 sm:py-12 lg:py-[60px]">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
                {{ __('about.vision_title') }}
            </h2>
            <div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
            <blockquote class="max-w-[900px] mx-auto text-center text-lg text-text/90">
                <span class="text-4xl text-accent leading-none align-top">"</span>
                <span class="italic">{{ __('about.vision_text') }}</span>
                <span class="text-4xl text-accent leading-none align-bottom">"</span>
            </blockquote>
        </div>
    </section>

    {{-- Mission Section --}}
    <section class="bg-background py-8 sm:py-12 lg:py-[60px]">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
                {{ __('about.mission_title') }}
            </h2>
            <div class="w-20 h-1 bg-accent mx-auto mb-8"></div>
            <div class="bg-white rounded-lg shadow-sm p-6 sm:p-8 max-w-[900px] mx-auto mb-12">
                <p class="text-center text-lg text-text/90">
                    {{ __('about.mission_intro') }}
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {{-- Card 1: For Institution --}}
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="text-accent mb-4">
                        <flux:icon name="building-office" class="w-12 h-12" />
                    </div>
                    <h3 class="text-xl font-bold text-text mb-3">
                        {{ __('about.mission_institution_title') }}
                    </h3>
                    <p class="text-text/80">
                        {{ __('about.mission_institution_text') }}
                    </p>
                </div>

                {{-- Card 2: For Society --}}
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="text-accent mb-4">
                        <flux:icon name="user-group" class="w-12 h-12" />
                    </div>
                    <h3 class="text-xl font-bold text-text mb-3">
                        {{ __('about.mission_society_title') }}
                    </h3>
                    <p class="text-text/80">
                        {{ __('about.mission_society_text') }}
                    </p>
                </div>

                {{-- Card 3: For Diaspora --}}
                <div class="bg-white rounded-lg shadow-sm p-6 md:col-span-2 lg:col-span-1">
                    <div class="text-accent mb-4">
                        <flux:icon name="globe-alt" class="w-12 h-12" />
                    </div>
                    <h3 class="text-xl font-bold text-text mb-3">
                        {{ __('about.mission_diaspora_title') }}
                    </h3>
                    <p class="text-text/80">
                        {{ __('about.mission_diaspora_text') }}
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- Values Section --}}
    <section class="bg-white py-8 sm:py-12 lg:py-[60px]">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
                {{ __('about.values_title') }}
            </h2>
            <div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
            <p class="text-center text-text/70 max-w-xl mx-auto mb-12">
                {{ __('about.values_intro') }}
            </p>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6">
                {{-- Integrity --}}
                <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                    <div class="text-accent mb-3">
                        <flux:icon name="shield-check" class="w-10 h-10 mx-auto" />
                    </div>
                    <h4 class="font-semibold text-text">
                        {{ __('about.value_integrity') }}
                    </h4>
                </div>

                {{-- Justice --}}
                <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                    <div class="text-accent mb-3">
                        <flux:icon name="scale" class="w-10 h-10 mx-auto" />
                    </div>
                    <h4 class="font-semibold text-text">
                        {{ __('about.value_justice') }}
                    </h4>
                </div>

                {{-- Knowledge --}}
                <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                    <div class="text-accent mb-3">
                        <flux:icon name="academic-cap" class="w-10 h-10 mx-auto" />
                    </div>
                    <h4 class="font-semibold text-text">
                        {{ __('about.value_knowledge') }}
                    </h4>
                </div>

                {{-- Women's Empowerment --}}
                <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                    <div class="text-accent mb-3">
                        <flux:icon name="heart" class="w-10 h-10 mx-auto" />
                    </div>
                    <h4 class="font-semibold text-text">
                        {{ __('about.value_women') }}
                    </h4>
                </div>

                {{-- Professionalism --}}
                <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                    <div class="text-accent mb-3">
                        <flux:icon name="briefcase" class="w-10 h-10 mx-auto" />
                    </div>
                    <h4 class="font-semibold text-text">
                        {{ __('about.value_professionalism') }}
                    </h4>
                </div>

                {{-- Social Innovation --}}
                <div class="bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow">
                    <div class="text-accent mb-3">
                        <flux:icon name="light-bulb" class="w-10 h-10 mx-auto" />
                    </div>
                    <h4 class="font-semibold text-text">
                        {{ __('about.value_innovation') }}
                    </h4>
                </div>
            </div>
        </div>
    </section>

    {{-- Goals Section --}}
    <section class="bg-background py-8 sm:py-12 lg:py-[60px]">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
                {{ __('about.goals_title') }}
            </h2>
            <div class="w-20 h-1 bg-accent mx-auto mb-12"></div>

            <div class="bg-white rounded-lg shadow-sm p-6 sm:p-8 max-w-5xl mx-auto">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
                    @foreach(__('about.goals') as $index => $goal)
                        <div class="flex items-start gap-4">
                            <span class="flex-shrink-0 w-8 h-8 bg-accent text-white rounded-full flex items-center justify-center font-bold text-sm">
                                {{ $index + 1 }}
                            </span>
                            <p class="text-text/90 pt-1">{{ $goal }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Services Section --}}
    <section class="bg-white py-8 sm:py-12 lg:py-[60px]">
        <div class="container mx-auto px-4">
            <h2 class="text-2xl lg:text-3xl font-bold text-text text-center mb-2">
                {{ __('about.services_title') }}
            </h2>
            <div class="w-20 h-1 bg-accent mx-auto mb-4"></div>
            <p class="text-center text-text/70 max-w-3xl mx-auto mb-12">
                {{ __('about.services_intro') }}
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                {{-- Legal Consultations & Representation --}}
                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
                    <div class="text-accent mb-4">
                        <flux:icon name="scale" class="w-12 h-12 mx-auto" />
                    </div>
                    <h3 class="text-lg font-bold text-text mb-4">
                        {{ __('about.service_consultation_title') }}
                    </h3>
                    <ul class="text-sm text-text/80 space-y-2 text-start">
                        @foreach(__('about.service_consultation_items') as $item)
                            <li class="flex items-center gap-2">
                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
                                {{ $item }}
                            </li>
                        @endforeach
                    </ul>
                </div>

                {{-- Women's & Family Law --}}
                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
                    <div class="text-accent mb-4">
                        <flux:icon name="heart" class="w-12 h-12 mx-auto" />
                    </div>
                    <h3 class="text-lg font-bold text-text mb-4">
                        {{ __('about.service_family_title') }}
                    </h3>
                    <ul class="text-sm text-text/80 space-y-2 text-start">
                        @foreach(__('about.service_family_items') as $item)
                            <li class="flex items-center gap-2">
                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
                                {{ $item }}
                            </li>
                        @endforeach
                    </ul>
                </div>

                {{-- Civil & Commercial Disputes --}}
                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
                    <div class="text-accent mb-4">
                        <flux:icon name="building-office" class="w-12 h-12 mx-auto" />
                    </div>
                    <h3 class="text-lg font-bold text-text mb-4">
                        {{ __('about.service_civil_title') }}
                    </h3>
                    <ul class="text-sm text-text/80 space-y-2 text-start">
                        @foreach(__('about.service_civil_items') as $item)
                            <li class="flex items-center gap-2">
                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
                                {{ $item }}
                            </li>
                        @endforeach
                    </ul>
                </div>

                {{-- Business Legal Services --}}
                <div class="bg-background rounded-xl p-8 text-center shadow-sm">
                    <div class="text-accent mb-4">
                        <flux:icon name="briefcase" class="w-12 h-12 mx-auto" />
                    </div>
                    <h3 class="text-lg font-bold text-text mb-4">
                        {{ __('about.service_business_title') }}
                    </h3>
                    <ul class="text-sm text-text/80 space-y-2 text-start">
                        @foreach(__('about.service_business_items') as $item)
                            <li class="flex items-center gap-2">
                                <span class="w-1.5 h-1.5 bg-accent rounded-full flex-shrink-0"></span>
                                {{ $item }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="text-center">
                <flux:button variant="primary" href="{{ route('booking') }}">
                    {{ __('about.services_cta') }}
                </flux:button>
            </div>
        </div>
    </section>

</div>
