@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.page_title_about'))

@section('content')
@push('head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ url('/') }}"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ __('general.about_us') }}",
      "item": "{{ url()->current() }}"
    }
  ]
}
</script>
@endpush
<div class="bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen py-12">
    <div class="max-w-4xl mx-auto space-y-24">
        <section id="about" class="scroll-mt-32">
            <h1 class="text-4xl font-extrabold text-center text-primary drop-shadow-lg mb-8">{{ __('general.about_us') }}</h1>
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 border border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_#FFA500] hover:border-orange-400">
                <p class="text-lg text-gray-900 dark:text-white text-center">{{ __('general.aboutus_intro') }}</p>
            </div>
        </section>
        <section id="mission-vision" class="scroll-mt-32">
            <h2 class="text-3xl font-bold text-center text-primary mb-8">{{ __('general.mission_vision') }}</h2>
            <div class="flex flex-col md:flex-row gap-8">
                <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 border border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_#FFA500] hover:border-orange-400">
                    <h3 class="text-xl font-semibold text-primary mb-4">{{ __('general.aboutus_mission_title') ?? 'Our Mission' }}</h3>
                    <p class="text-gray-900 dark:text-white">{{ __('general.aboutus_mission') }}</p>
                </div>
                <div class="flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 border border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_#FFA500] hover:border-orange-400">
                    <h3 class="text-xl font-semibold text-primary mb-4">{{ __('general.aboutus_vision_title') ?? 'Our Vision' }}</h3>
                    <p class="text-gray-900 dark:text-white">{{ __('general.aboutus_vision') }}</p>
                </div>
            </div>
        </section>
        <section id="terms" class="scroll-mt-32">
            <h2 class="text-3xl font-bold text-center text-primary mb-8">{{ __('general.terms_conditions') }}</h2>
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 border border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_#FFA500] hover:border-orange-400 text-gray-900 dark:text-gray-100">
                <p class="mb-4">{{ __('general.aboutus_terms_intro') }}</p>
                <h3 class="text-xl font-semibold mt-6">{{ __('general.aboutus_terms_interpretation_title') }}</h3>
                <p>{{ __('general.aboutus_terms_interpretation') }}</p>
                <h3 class="text-xl font-semibold mt-6">{{ __('general.aboutus_terms_acknowledgment_title') }}</h3>
                <p>{{ __('general.aboutus_terms_acknowledgment') }}</p>
                <p>{{ __('general.aboutus_terms_conditioned') }}</p>
                <p>{{ __('general.aboutus_terms_agree') }}</p>
            </div>
        </section>
        <section id="faq" class="scroll-mt-32">
            <h2 class="text-3xl font-bold text-center text-primary mb-8">{{ __('general.faq') }}</h2>
            <div class="space-y-4">
                <div x-data="{ open: false }" class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-primary/20 dark:border-primary/30">
                    <h3>
                        <button type="button" @click="open = !open" class="flex items-center justify-between w-full p-6 font-semibold text-left text-gray-900 dark:text-white">
                            <span>{{ __('general.aboutus_faq1_q') }}</span>
                            <svg :class="{'rotate-180': open, 'rotate-0': !open}" class="w-6 h-6 text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                    </h3>
                    <div x-show="open" class="p-6 pt-0">
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.aboutus_faq1_a') }}</p>
                    </div>
                </div>
                <div x-data="{ open: false }" class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-primary/20 dark:border-primary/30">
                    <h3>
                        <button type="button" @click="open = !open" class="flex items-center justify-between w-full p-6 font-semibold text-left text-gray-900 dark:text-white">
                            <span>{{ __('general.aboutus_faq2_q') }}</span>
                            <svg :class="{'rotate-180': open, 'rotate-0': !open}" class="w-6 h-6 text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                    </h3>
                    <div x-show="open" class="p-6 pt-0">
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.aboutus_faq2_a') }}</p>
                    </div>
                </div>
                <div x-data="{ open: false }" class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-primary/20 dark:border-primary/30">
                    <h3>
                        <button type="button" @click="open = !open" class="flex items-center justify-between w-full p-6 font-semibold text-left text-gray-900 dark:text-white">
                            <span>{{ __('general.aboutus_faq3_q') }}</span>
                            <svg :class="{'rotate-180': open, 'rotate-0': !open}" class="w-6 h-6 text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                    </h3>
                    <div x-show="open" class="p-6 pt-0">
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.aboutus_faq3_a') }}</p>
                    </div>
                </div>
                <div x-data="{ open: false }" class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-primary/20 dark:border-primary/30">
                    <h3>
                        <button type="button" @click="open = !open" class="flex items-center justify-between w-full p-6 font-semibold text-left text-gray-900 dark:text-white">
                            <span>{{ __('general.aboutus_faq4_q') }}</span>
                            <svg :class="{'rotate-180': open, 'rotate-0': !open}" class="w-6 h-6 text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                    </h3>
                    <div x-show="open" class="p-6 pt-0">
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.aboutus_faq4_a') }}</p>
                    </div>
                </div>
                <div x-data="{ open: false }" class="bg-gray-50 dark:bg-gray-900 rounded-lg border border-primary/20 dark:border-primary/30">
                    <h3>
                        <button type="button" @click="open = !open" class="flex items-center justify-between w-full p-6 font-semibold text-left text-gray-900 dark:text-white">
                            <span>{{ __('general.aboutus_faq5_q') }}</span>
                            <svg :class="{'rotate-180': open, 'rotate-0': !open}" class="w-6 h-6 text-primary transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </button>
                    </h3>
                    <div x-show="open" class="p-6 pt-0">
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.aboutus_faq5_a') }}</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="services" class="scroll-mt-32">
            <h2 class="text-3xl font-bold text-center text-primary mb-8">{{ __('general.services') }}</h2>
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 border border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_20px_#FFA500] hover:border-orange-400 text-gray-900 dark:text-gray-100">
                <p class="mb-4">{{ __('general.aboutus_services_intro') }}</p>
                <ul class="list-disc pl-6">
                    <li>{{ __('general.aboutus_services_1') }}</li>
                    <li>{{ __('general.aboutus_services_2') }}</li>
                    <li>{{ __('general.aboutus_services_3') }}</li>
                    <li>{{ __('general.aboutus_services_4') }}</li>
                    <li>{{ __('general.aboutus_services_5') }}</li>
                </ul>
            </div>
        </section>
    </div>
</div>
@endsection