@extends('layouts.app')

@section('title', __('general.temtechnik_page_title'))

@section('meta_description', __('general.temtechnik_meta_description'))

@section('meta_keywords', 'temtechnik, tem technik, TemTechnik, texniki avadanlıq, sənaye məhsulları, maşınlar, alətlər, azərbaycan, bahco, bosch, texniki alətlər')

@push('head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "TemTechnik",
  "alternateName": ["temtechnik", "Tem Technik", "TemTechnik"],
  "url": "{{ url('/') }}",
  "logo": {
    "@type": "ImageObject",
    "url": "{{ asset('logos/İcon Orange(Narıncı).png') }}",
    "width": 512,
    "height": 512
  },
  "description": "{{ __('general.temtechnik_meta_description') }}",
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "AZ",
    "addressLocality": "Baku",
    "addressRegion": "Baku"
  },
  "contactPoint": [
    {
      "@type": "ContactPoint",
      "telephone": "+994124969869",
      "contactType": "customer service",
      "availableLanguage": ["az", "en", "ru"]
    },
    {
      "@type": "ContactPoint",
      "telephone": "+994771001696",
      "contactType": "customer service",
      "availableLanguage": ["az", "en", "ru"]
    }
  ]
}
</script>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <div class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <div class="text-center mb-12">
            <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-4">
                <span class="text-orange-500">Tem</span><span class="text-gray-700 dark:text-gray-300">Technik</span>
                <span class="text-sm md:text-lg text-gray-500 dark:text-gray-400 block mt-2">(temtechnik)</span>
            </h1>
            <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
                {{ __('general.temtechnik_hero_subtitle') }}
            </p>
        </div>

        <!-- Main Content -->
        <div class="grid md:grid-cols-2 gap-8 mb-12">
            <!-- About Section -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                    {{ __('general.temtechnik_about_title') }}
                </h2>
                <p class="text-gray-600 dark:text-gray-300 mb-4">
                    {{ __('general.temtechnik_about_description') }}
                </p>
                <p class="text-gray-600 dark:text-gray-300">
                    {{ __('general.temtechnik_about_description2') }}
                </p>
            </div>

            <!-- Services Section -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
                    {{ __('general.temtechnik_services_title') }}
                </h2>
                <ul class="space-y-2 text-gray-600 dark:text-gray-300">
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        {{ __('general.temtechnik_service_1') }}
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        {{ __('general.temtechnik_service_2') }}
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        {{ __('general.temtechnik_service_3') }}
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check text-green-500 mr-2"></i>
                        {{ __('general.temtechnik_service_4') }}
                    </li>
                </ul>
            </div>
        </div>

        <!-- Products Preview -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 text-center">
                {{ __('general.temtechnik_products_title') }}
            </h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="text-center">
                    <i class="fas fa-tools text-4xl text-orange-500 mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ __('general.temtechnik_product_1_title') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300">{{ __('general.temtechnik_product_1_desc') }}</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-bolt text-4xl text-orange-500 mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ __('general.temtechnik_product_2_title') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300">{{ __('general.temtechnik_product_2_desc') }}</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-industry text-4xl text-orange-500 mb-3"></i>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{{ __('general.temtechnik_product_3_title') }}</h3>
                    <p class="text-gray-600 dark:text-gray-300">{{ __('general.temtechnik_product_3_desc') }}</p>
                </div>
            </div>
        </div>

        <!-- Contact Section -->
        <div class="bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg shadow-lg p-6 text-white">
            <h2 class="text-2xl font-bold mb-4 text-center">
                {{ __('general.temtechnik_contact_title') }}
            </h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h3 class="text-lg font-semibold mb-2">{{ __('general.temtechnik_contact_info') }}</h3>
                    <p class="mb-2"><i class="fas fa-phone mr-2"></i> +994124969869</p>
                    <p class="mb-2"><i class="fas fa-phone mr-2"></i> +994771001696</p>
                    <p class="mb-2"><i class="fas fa-envelope mr-2"></i> info@temtechnik.com</p>
                    <p><i class="fas fa-map-marker-alt mr-2"></i> {{ __('general.baku') }}, {{ __('general.azerbaijan') }}</p>
                </div>
                <div class="text-center">
                    <a href="{{ route('products.index') }}" class="inline-block bg-white text-orange-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                        {{ __('general.temtechnik_view_products') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection