@extends('layouts.app')

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

@section('content')
    <div class="min-h-[60vh] py-12 bg-gradient-to-br from-indigo-100 via-white to-indigo-200 dark:from-[#1a2238] dark:via-[#232e47] dark:to-[#16213e]">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white/80 dark:bg-white/10 backdrop-blur-md rounded-3xl shadow-2xl p-10 flex flex-col animate-fade-in border border-gray-200 dark:border-white/20">
                    <h1 class="text-3xl font-extrabold tracking-tight text-gray-800 dark:text-white mb-8">{{ __('general.contact') }}</h1>
                    @if(session('success'))
                        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 rounded-md" role="alert">
                            <p>{{ session('success') }}</p>
                        </div>
                    @endif
                    <form action="{{ route('contact.send') }}" method="POST" class="flex-1 flex flex-col justify-between space-y-6">
                        @csrf
                        <div class="space-y-5">
                            <div class="relative">
                                <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-white mb-1">{{ __('general.name') }}</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-primary"><i class="fas fa-user"></i></span>
                                    <input type="text" name="name" id="name" required class="pl-10 pr-4 py-2 w-full rounded-lg bg-white/80 dark:bg-white/20 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-300 border border-gray-200 dark:border-white/30 focus:ring-2 focus:ring-primary focus:border-primary transition shadow-inner outline-none" placeholder="{{ __('general.name') }}">
                                </div>
                            </div>
                            <div class="relative">
                                <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-white mb-1">{{ __('general.email') }}</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-primary"><i class="fas fa-envelope"></i></span>
                                    <input type="email" name="email" id="email" required class="pl-10 pr-4 py-2 w-full rounded-lg bg-white/80 dark:bg-white/20 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-300 border border-gray-200 dark:border-white/30 focus:ring-2 focus:ring-primary focus:border-primary transition shadow-inner outline-none" placeholder="{{ __('general.email') }}">
                                </div>
                            </div>
                            <div class="relative">
                                <label for="subject" class="block text-sm font-semibold text-gray-700 dark:text-white mb-1">{{ __('general.subject') }}</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-primary"><i class="fas fa-tag"></i></span>
                                    <input type="text" name="subject" id="subject" required class="pl-10 pr-4 py-2 w-full rounded-lg bg-white/80 dark:bg-white/20 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-300 border border-gray-200 dark:border-white/30 focus:ring-2 focus:ring-primary focus:border-primary transition shadow-inner outline-none" placeholder="{{ __('general.subject') }}">
                                </div>
                            </div>
                            <div class="relative">
                                <label for="message" class="block text-sm font-semibold text-gray-700 dark:text-white mb-1">{{ __('general.message') }}</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-4 text-primary"><i class="fas fa-comment-dots"></i></span>
                                    <textarea id="message" name="message" rows="4" required class="pl-10 pr-4 py-2 w-full rounded-lg bg-white/80 dark:bg-white/20 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-300 border border-gray-200 dark:border-white/30 focus:ring-2 focus:ring-primary focus:border-primary transition shadow-inner outline-none resize-none" placeholder="{{ __('general.message') }}"></textarea>
                                </div>
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="w-full flex justify-center py-3 px-4 rounded-lg shadow-lg text-base font-bold text-white bg-gradient-to-r from-primary to-cyan-500 hover:from-cyan-500 hover:to-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200 transform hover:scale-105">
                                {{ __('general.send_message') }}
                            </button>
                        </div>
                    </form>
                </div>
                <div class="flex flex-col gap-8">
                    <div class="bg-white/80 dark:bg-white/10 backdrop-blur-md rounded-3xl shadow-2xl p-10 flex flex-col justify-between animate-fade-in border border-gray-200 dark:border-white/20">
                        <div>
                            <h2 class="text-2xl font-extrabold text-gray-800 dark:text-white mb-4">{{ __('general.contact_information') }}</h2>
                            <div class="space-y-2 text-gray-700 dark:text-gray-200 text-sm mb-6">
                                <div><i class="fas fa-map-marker-alt text-black dark:text-primary mr-2"></i><strong>{{ __('general.address') }}:</strong> <a href="https://maps.google.com/?q=6 Təbriz küçəsi, Bakı" target="_blank" rel="noopener" class="footer-link-glow">{{ __('general.address_street') }}</a></div>
                                <div><i class="fas fa-envelope text-black dark:text-primary mr-2"></i><strong>Email:</strong> <a href="mailto:info@temtechnik.com" class="footer-link-glow">info@temtechnik.com</a></div>
                                <div><i class="fas fa-envelope text-black dark:text-primary mr-2"></i><strong>Sales:</strong> <a href="mailto:sales@temtechnik.com" class="footer-link-glow">sales@temtechnik.com</a></div>
                                <div><i class="fas fa-phone text-black dark:text-primary mr-2"></i><strong>Tel:</strong> <a href="tel:+994124969869" class="footer-link-glow">+994 12 496 98 69</a></div>
                                <div><i class="fas fa-phone text-black dark:text-primary mr-2"></i><strong>Tel:</strong> <a href="tel:+994771001696" class="footer-link-glow">+994 77 100 16 96</a></div>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">{{ __('general.follow_us') }}</h3>
                                <div class="flex space-x-6 items-center mt-2">
                                    <a href="https://www.instagram.com/tem.technik_azerbaijan/" target="_blank" rel="noopener" class="contact-social-glow hover:text-cyan-400 text-black dark:text-gray-200 transition-colors duration-200" aria-label="Instagram"><i class="fab fa-instagram fa-2x"></i></a>
                                    <a href="https://www.tiktok.com/@tem.technik?_t=ZS-8wNKMZBbOja&_r=1" target="_blank" rel="noopener" class="contact-social-glow hover:text-cyan-400 text-black dark:text-gray-200 transition-colors duration-200" aria-label="TikTok"><i class="fab fa-tiktok fa-2x"></i></a>
                                    <a href="https://wa.me/994771001696" target="_blank" rel="noopener" class="contact-social-glow hover:text-cyan-400 text-black dark:text-gray-200 transition-colors duration-200" aria-label="WhatsApp"><i class="fab fa-whatsapp fa-2x"></i></a>
                                    <a href="https://facebook.com" target="_blank" rel="noopener" class="contact-social-glow hover:text-cyan-400 text-black dark:text-gray-200 transition-colors duration-200" aria-label="Facebook"><i class="fab fa-facebook fa-2x"></i></a>
                                    <a href="https://linkedin.com" target="_blank" rel="noopener" class="contact-social-glow hover:text-cyan-400 text-black dark:text-gray-200 transition-colors duration-200" aria-label="LinkedIn"><i class="fab fa-linkedin fa-2x"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bg-white/80 dark:bg-white/10 backdrop-blur-md rounded-3xl shadow-2xl p-4 flex flex-col justify-center animate-fade-in border border-gray-200 dark:border-white/20">
                        <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-2xl overflow-hidden">
                            <iframe src="https://www.google.com/maps?q=40.385056720000556,49.850749900000004&output=embed" width="100%" height="100%" style="border:0; min-height:200px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: none; }
    }
    .animate-fade-in {
      animation: fade-in 0.8s cubic-bezier(.4,0,.2,1) both;
    }
    .contact-social-glow:hover {
      color: #f97316 !important;
      filter: drop-shadow(0 0 8px #f97316);
      transition: color 0.2s, filter 0.2s;
    }
    </style>
@endsection