@extends('layouts.app')

@php
    use App\Helpers\MarketContent;
    use App\Helpers\SeoHelper;

    $locale = app()->getLocale();
    $aboutContent = $aboutContent ?? MarketContent::about($locale);
    $pageSeo = $aboutContent['metadata'];
    $aboutText = static fn (string $path, mixed $default = '') => data_get($aboutContent, $path, $default);

    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };

    $aboutStats = $aboutContent['stats'];
    $aboutServices = $aboutContent['services'];
    $aboutValues = $aboutContent['values'];
    $aboutFaqs = $aboutContent['faqs'];
@endphp

@section('title', $pageSeo['title'])
@section('meta_description', $pageSeo['description'])
@section('meta_keywords', $pageSeo['keywords'])
@section('og_image', asset($pageSeo['image']))

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "@id": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}/#webpage",
  "url": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}",
  "name": "{{ $aboutText('schema.name') }}",
  "description": "{{ $aboutText('schema.description') }}",
  "isPartOf": {
    "@id": "{{ config('seo.site_url') }}/#website"
  },
  "about": {
    "@id": "{{ config('seo.site_url') }}/#organization"
  },
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "{{ __('messages.nav.home') }}",
        "item": "{{ $localizedRoute('home') }}"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "{{ $aboutText('schema.name') }}",
        "item": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}"
      }
    ]
  }
}
</script>
<script type="application/ld+json">
{!! SeoHelper::generateOrganizationSchema() !!}
</script>
<script type="application/ld+json">
{!! SeoHelper::generateLocalBusinessSchema() !!}
</script>
<script type="application/ld+json">
{!! SeoHelper::generateFaqSchema($aboutFaqs, \App\Helpers\SeoHelper::getCanonicalUrl()) !!}
</script>
@endpush

@push('styles')
<style>
    .about-hero-gradient {
        background: linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%);
    }
</style>
@endpush

@section('content')
<section class="relative overflow-hidden about-hero-gradient">
    <div class="site-container pt-12 pb-16 md:pt-16 md:pb-20">
        <div class="grid grid-cols-1 lg:grid-cols-[1.05fr_0.95fr] gap-10 lg:gap-20 items-start">
            <div class="min-w-0">
                <h1 class="page-hero__headline text-neutral-900 mb-6">
                    {{ $aboutText('hero.title_1') }}<br>
                    <span class="text-criazo-primary">{{ $aboutText('hero.title_2') }}</span>
                </h1>
                <p class="text-lg md:text-xl text-neutral-600 leading-[1.43] tracking-body max-w-2xl mb-8">
                    {{ $aboutText('hero.description') }}
                </p>
                <div class="flex flex-wrap gap-3">
                    <a href="{{ $localizedRoute('contact.index') }}"
                       class="inline-flex items-center px-6 py-3 bg-criazo-primary text-white rounded-full text-sm font-semibold hover:bg-criazo-hover smooth-transition shadow-lg">
                        {{ $aboutText('hero.primary_cta') }}
                    </a>
                    <a href="{{ $localizedRoute('portfolio.index') }}"
                       class="inline-flex items-center px-6 py-3 border border-neutral-300 text-neutral-900 rounded-full text-sm font-semibold hover:border-criazo-primary hover:text-criazo-primary smooth-transition">
                        {{ $aboutText('hero.secondary_cta') }}
                    </a>
                </div>
            </div>

            <div class="min-w-0 border-y border-neutral-200 py-6 lg:mt-2">
                <dl class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 xl:grid-cols-3 gap-0 sm:gap-6 lg:gap-0 xl:gap-6 divide-y sm:divide-y-0 lg:divide-y xl:divide-y-0 divide-neutral-200">
                    @foreach($aboutStats as $stat)
                    <div class="min-w-0 py-4 first:pt-0 last:pb-0 sm:py-0 lg:py-4 lg:first:pt-0 lg:last:pb-0 xl:py-0">
                        <div class="flex items-start gap-4 sm:block lg:flex xl:block">
                            <div class="min-w-0">
                                <dt class="text-xl md:text-2xl font-semibold text-criazo-primary leading-tight break-words">{{ $stat['value'] }}</dt>
                                <dd class="mt-2 text-sm md:text-base font-semibold leading-relaxed text-neutral-700">{{ $stat['label'] }}</dd>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </dl>
            </div>
        </div>
    </div>
</section>

<section class="py-20 md:py-24 bg-white">
    <div class="site-container">
        <section class="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-12 lg:gap-20 mb-24">
            <div>
                <h2 class="section-intro__title lg:sticky lg:top-28">{{ $aboutText('story.title') }}</h2>
            </div>
            <div class="space-y-6 text-lg text-neutral-600 leading-[1.43] tracking-body">
                <p>{!! $aboutText('story.paragraphs.0') !!}</p>
                <p>{!! $aboutText('story.paragraphs.1') !!}</p>
                <p>{!! $aboutText('story.paragraphs.2') !!}</p>
            </div>
        </section>

        <section class="mb-24">
            <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-10">
                <h2 class="section-intro__title">{{ $aboutText('services_heading') }}</h2>
                <a href="{{ $localizedRoute('services.index') }}" class="text-sm font-semibold text-criazo-primary hover:text-criazo-hover smooth-transition">
                    {{ __('messages.nav.services') }}
                </a>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($aboutServices as $service)
                <a href="{{ $localizedRoute('services.show', ['slug' => $service['slug']]) }}"
                   class="group rounded-2xl border border-neutral-200 bg-white p-6 hover:border-criazo-primary/60 hover:shadow-lg smooth-transition">
                    <h3 class="type-card-title mb-3 group-hover:text-criazo-primary smooth-transition">{{ $service['title'] }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $service['description'] }}</p>
                </a>
                @endforeach
            </div>
        </section>

        <section class="mb-24">
            <h2 class="section-intro__title mb-12">{{ $aboutText('trust.title') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                @foreach(data_get($aboutContent, 'trust.blocks', []) as $block)
                <div class="border-t border-neutral-200 pt-8">
                    <h3 class="type-heading-sm mb-4">{{ $block['title'] }}</h3>
                    <p class="text-neutral-600 mb-6 leading-relaxed">{{ $block['description'] }}</p>
                    <ul class="space-y-3 text-neutral-700">
                        @foreach($block['points'] as $point)
                        <li class="flex items-start gap-3"><span class="mt-2 h-2 w-2 rounded-full bg-criazo-primary flex-shrink-0" aria-hidden="true"></span><span>{{ $point }}</span></li>
                        @endforeach
                    </ul>
                </div>
                @endforeach
            </div>
        </section>

        <section class="mb-24 rounded-2xl bg-neutral-50 px-6 py-12 md:px-12 md:py-16">
            <div class="grid grid-cols-1 lg:grid-cols-[0.75fr_1.25fr] gap-10">
                <h2 class="section-intro__title">{{ $aboutText('mission.title') }}</h2>
                <p class="text-xl text-neutral-600 leading-[1.43] tracking-body">{{ $aboutText('mission.content') }}</p>
            </div>
        </section>

        <section class="mb-24">
            <h2 class="section-intro__title mb-12">{{ $aboutText('values_heading') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach($aboutValues as $value)
                <div class="border-t border-neutral-200 pt-6">
                    <h3 class="type-heading-sm mb-4">{{ $value['title'] }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $value['description'] }}</p>
                </div>
                @endforeach
            </div>
        </section>

        <section class="mb-24">
            <h2 class="section-intro__title mb-12">{{ $aboutText('faq_heading') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($aboutFaqs as $faq)
                <div class="rounded-2xl bg-neutral-50 p-6">
                    <h3 class="type-card-title mb-3">{{ $faq['question'] }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $faq['answer'] }}</p>
                </div>
                @endforeach
            </div>
        </section>

        <section class="text-center border-t border-neutral-200 pt-16">
            <h2 class="section-intro__title mb-6">{{ $aboutText('cta.title') }}</h2>
            <p class="text-xl text-neutral-600 mb-8">{{ $aboutText('cta.description') }}</p>
            <a href="{{ $localizedRoute('contact.index') }}"
               class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-xl">
                {{ $aboutText('cta.button') }}
                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
        </section>
    </div>
</section>

@include('components.explore-site-section')

@endsection