@extends('layouts.public')

@php
$practiceName = \App\Models\SiteSetting::get('practice_name', 'Shavhani Attorneys');
$tagline = \App\Models\SiteSetting::get('tagline', 'Think Is Practical');
$philosophy = \App\Models\SiteSetting::get('firm_philosophy', \App\Models\SiteSetting::get('nutrition_philosophy', ''));
@endphp

@section('title', 'About - ' . $practiceName)
@section('meta_description', 'About Shavhani Attorneys — practical legal representation across civil, personal injury, labour, family, and commercial law.')

@push('schema')
<script type="application/ld+json">
{!! json_encode(app(\App\Services\SchemaService::class)->generateAttorney()) !!}
</script>
@endpush

@section('content')
<x-page-hero
    :title="'About ' . $practiceName"
    :subtitle="$tagline . ' — trusted legal counsel focused on practical outcomes.'"
    image="images/about/law-library.jpg"
/>

<section class="section-spacing bg-white">
    <div class="firm-container">
        <div class="grid lg:grid-cols-12 gap-12 items-start">
            <div class="lg:col-span-5">
                <img src="{{ asset('images/about/law-library.jpg') }}"
                     alt="Law library at {{ $practiceName }}"
                     class="w-full h-72 lg:h-96 object-cover border-l-4 border-firm-red-500"
                     loading="lazy">
                <div class="firm-card bg-firm-surface mt-5">
                    <x-logo size="md" />
                    <div class="mt-6 flex flex-wrap gap-2">
                        @foreach(['Practical', 'Diligent', 'Client-focused'] as $badge)
                        <span class="px-3 py-1 text-xs font-semibold bg-white border border-slate-200 text-firm-ink uppercase tracking-wide">{{ $badge }}</span>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="lg:col-span-7 space-y-6">
                <h2 class="font-serif text-3xl font-bold text-firm-ink">Who we are</h2>
                <div class="prose-firm text-lg">
                    <p>{{ $practiceName }} is a law firm committed to providing accessible, practical legal services. We represent clients in matters ranging from civil litigation and personal injury claims to labour disputes, family law, and deceased estates.</p>
                    <p>Our philosophy is simple: legal advice should be clear, honest, and actionable. We take time to understand your situation, explain your options without unnecessary jargon, and pursue the strategy that best serves your interests.</p>
                </div>
                @if($philosophy)
                <blockquote class="firm-card-accent bg-firm-surface italic">{{ $philosophy }}</blockquote>
                @endif
            </div>
        </div>
    </div>
</section>

<section class="section-spacing bg-firm-surface border-y border-slate-200">
    <div class="firm-container">
        <x-section-heading title="How we work" subtitle="A straightforward process built around your matter and your goals." />
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @foreach([
                ['title' => 'Listen first', 'text' => 'We start by understanding your matter, your goals, and your constraints.'],
                ['title' => 'Clear advice', 'text' => 'Straightforward guidance on merits, risks, and likely outcomes.'],
                ['title' => 'Thorough preparation', 'text' => 'Every matter is prepared with attention to detail and compliance.'],
                ['title' => 'Dedicated representation', 'text' => 'We advocate for you in negotiations, tribunals, and court.'],
            ] as $step)
            <article class="firm-card">
                <h3 class="font-serif text-lg font-bold text-firm-ink mb-2">{{ $step['title'] }}</h3>
                <p class="text-slate-600 text-sm leading-relaxed">{{ $step['text'] }}</p>
            </article>
            @endforeach
        </div>
        <div class="text-center mt-10">
            <a href="{{ route('book.index') }}" class="btn-primary">Request a Consultation</a>
        </div>
    </div>
</section>
@endsection