@extends('layouts.app')

@section('title', __('site.about_title').' — '.config('site.brand.name'))

@section('content')

    <section class="bg-brand-green-950 py-16 text-center text-white">
        <div class="mx-auto max-w-3xl px-4" data-reveal>
            <span class="section-eyebrow !bg-white/10 !text-brand-lime-400">{{ config('site.brand.name') }}</span>
            <h1 class="mt-4 text-3xl font-semibold sm:text-4xl sm:font-bold lg:text-5xl">{{ __('site.about_title') }}</h1>
        </div>
    </section>

    <section class="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
        <p class="text-lg leading-relaxed text-brand-ink/80" data-reveal>{{ __('site.about_intro') }}</p>
    </section>

    <section class="bg-white py-16">
        <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 px-4 sm:px-6 md:grid-cols-2 lg:px-8">
            <div class="card p-8" data-reveal>
                <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-green-100 text-2xl">🎯</div>
                <h2 class="text-xl font-bold text-brand-ink">{{ __('site.about_mission_title') }}</h2>
                <p class="mt-3 text-brand-ink/70 leading-relaxed">{{ __('site.about_mission_body') }}</p>
            </div>
            <div class="card p-8" data-reveal>
                <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-green-100 text-2xl">🌱</div>
                <h2 class="text-xl font-bold text-brand-ink">{{ __('site.about_vision_title') }}</h2>
                <p class="mt-3 text-brand-ink/70 leading-relaxed">{{ __('site.about_vision_body') }}</p>
            </div>
        </div>
    </section>

    <section class="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
        <div class="card overflow-hidden p-8 sm:p-10" data-reveal>
            <span class="section-eyebrow">{{ __('site.about_founder_title') }}</span>
            <p class="mt-4 text-lg leading-relaxed text-brand-ink/80">{{ __('site.about_founder_body') }}</p>
            <p class="mt-4 text-sm font-bold text-brand-green-800">— Gurulingayya K P</p>
        </div>
    </section>

    <section class="bg-brand-green-50 py-16">
        <div class="mx-auto max-w-6xl px-4 text-center sm:px-6 lg:px-8">
            <h2 class="text-xl font-semibold text-brand-ink sm:text-2xl sm:font-bold" data-reveal>{{ __('site.about_values_title') }}</h2>
            <div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5">
                @foreach ([1, 2, 3, 4, 5] as $i)
                    <div data-reveal class="card p-6">
                        <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-green-100 text-xl font-extrabold text-brand-green-800">
                            {{ $i }}
                        </div>
                        <h3 class="font-bold text-brand-ink">{{ __('site.why_'.$i.'_title') }}</h3>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="bg-brand-lime-500">
        <div class="mx-auto max-w-5xl px-4 py-16 text-center sm:px-6 lg:px-8" data-reveal>
            <h2 class="text-2xl font-semibold text-brand-green-950 sm:text-3xl sm:font-bold lg:text-4xl">{{ __('site.home_cta_title') }}</h2>
            <div class="mt-8">
                <a href="{{ route('products.index', ['locale' => app()->getLocale()]) }}" class="btn-primary">
                    {{ __('site.hero_cta_primary') }}
                </a>
            </div>
        </div>
    </section>

@endsection