@extends('layouts.customer')
@section('page-title', 'پشتیبانی و سوالات متداول')

@section('content')
    <div class="min-h-screen bg-gray-50">

        <div class="bg-white border-b border-gray-200">
            <div class="max-w-4xl mx-auto px-5 py-10 text-center">
                <h1 class="text-2xl font-bold text-gray-900">پشتیبانی تیوان</h1>
                <p class="mt-2 text-base text-gray-600">ما همیشه در دسترس شما هستیم</p>
                <p class="mt-1 text-sm text-gray-500">تلفن: <span class="font-semibold text-blue-700">021-28425000</span></p>
            </div>
        </div>

        <div class="max-w-4xl mx-auto px-5 py-10">

            <div class="grid sm:grid-cols-3 gap-5 mb-10">
                <div class="bg-white rounded-lg border border-gray-200 p-5 text-center hover:shadow-sm transition">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-phone text-lg text-blue-700"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900">تلفن</p>
                    <p class="text-base font-bold text-blue-700 mt-1">021-28425000</p>
                </div>
                
                <div class="bg-white rounded-lg border border-gray-200 p-5 text-center hover:shadow-sm transition">
                    <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-envelope text-lg text-emerald-700"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900">ایمیل</p>
                    <p class="text-sm font-bold text-emerald-700 mt-1">support@t1.energy</p>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 p-5 text-center hover:shadow-sm transition">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-clock text-lg text-purple-700"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900">۲۴ ساعته</p>
                    <p class="text-base font-bold text-purple-700 mt-1">همه روزه</p>
                </div>
            </div>

            <div class="bg-white rounded-lg border border-gray-200">
                <div class="px-6 py-5 border-b border-gray-200">
                    <h2 class="text-lg font-bold text-gray-900">سوالات متداول</h2>
                </div>

                <div class="divide-y divide-gray-200">
                    @php
                        $faqs = [
                            ['چگونه برق بخرم؟', 'منوی «خرید برق» → حجم → پرداخت → اعتبار فوراً اضافه میشه.'],
                            ['ساعات اوج مصرف کیه؟', '۱۹:۰۰ تا ۲۳:۰۰ — نرخ: ۲۸۵۰ ریال/kWh'],
                            ['قبض چطور تسویه میشه؟', 'خرید از تیوان = تسویه خودکار قبض.'],
                            ['وضعیت قرارداد کجاست؟', 'بخش «اطلاعات شما» → همه چیز اونجاست.'],
                            ['مشکل فنی داشتم چیکار کنم؟', 'تماس: 021-28425000 یا فرم زیر.'],
                        ];
                    @endphp

                    @foreach($faqs as $faq)
                        <details class="group">
                            <summary class="flex justify-between items-center px-6 py-4 cursor-pointer hover:bg-gray-50 transition">
                        <span class="text-sm font-medium text-gray-900 group-hover:text-blue-700">
                            {{ $faq[0] }}
                        </span>
                                <i class="fas fa-chevron-down text-xs text-gray-400 group-open:rotate-180 group-open:text-blue-700 transition"></i>
                            </summary>
                            <div class="px-6 pb-5">
                                <p class="text-sm text-gray-600 leading-relaxed">{{ $faq[1] }}</p>
                            </div>
                        </details>
                    @endforeach
                </div>
            </div>

            <div class="mt-10 bg-white rounded-lg border border-gray-200 p-6">
                <h2 class="text-lg font-bold text-gray-900 mb-5">ارسال پیام</h2>

                <form action="{{ route('customer.support.send') }}" method="POST" class="space-y-5">
                    @csrf

                    <div>
                        <input type="text" name="subject" placeholder="موضوع پیام"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm" required>
                    </div>

                    <div>
                    <textarea name="message" rows="4" placeholder="پیام شما..."
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm resize-none" required></textarea>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="bg-blue-700 text-white px-6 py-2.5 rounded-lg font-medium text-sm hover:bg-blue-800 transition">
                            ارسال پیام
                        </button>
                    </div>
                </form>

                <p class="text-xs text-gray-500 mt-4 text-center">
                    پاسخگویی: حداکثر ۲ ساعت کاری
                </p>
            </div>

        </div>

        <div class="bg-gray-900 text-white py-8 mt-16">
            <div class="max-w-4xl mx-auto px-5 text-center">
                <p class="text-sm font-medium">نیاز به کمک فوری دارید؟</p>
                <p class="text-2xl font-bold text-cyan-400 mt-2">021-28425000</p>
                <p class="text-xs text-gray-400 mt-1">پشتیبانی ۲۴ ساعته</p>
            </div>
        </div>
    </div>
@endsection