@extends('layouts.app')

@section('content')
    @include('partials.header')

    <div class="lg:ml-64">
        @include('partials.topbar')

        <section class="py-16 lg:py-24 bg-secondary/30 min-h-screen">
            <div class="max-w-2xl mx-auto px-4 sm:px-6">

                <!-- Header -->
                <div class="text-center mb-10 scroll-reveal">
                    <div class="mb-3 flex justify-center" style="filter: drop-shadow(0 0 20px rgba(245,197,24,0.3));">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>
                    </div>
                    <h2 class="text-3xl sm:text-4xl font-bold text-text mb-2">Liên hệ <span class="text-accent">hỗ trợ</span></h2>
                    <p class="text-text-muted text-sm">Chọn kênh liên hệ phù hợp với bạn</p>
                </div>

                <!-- Contact Cards -->
                <div class="grid sm:grid-cols-2 gap-4 mb-8">

                    <!-- Zalo -->
                    <a href="{{ $settings['contact_zalo'] ?? 'https://zalo.me/0941205106' }}" target="_blank" rel="noopener"
                       class="group bg-white rounded-2xl shadow-md p-6 text-center hover:shadow-xl hover:-translate-y-1 transition-all no-underline block">
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 transition-transform group-hover:scale-110" style="overflow: hidden;">
                            <img src="/ho-tro.png" alt="Zalo" class="w-full h-full object-cover">
                        </div>
                        <h3 class="text-base font-bold text-text mb-1">Zalo</h3>
                        <p class="text-xs text-text-muted mb-3">Nhắn tin trực tiếp qua Zalo</p>
                        <span class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold text-white transition-colors" style="background: #0068FF;">
                            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                            Chat Zalo
                        </span>
                    </a>

                    <!-- Facebook -->
                    <a href="{{ $settings['contact_facebook'] ?? 'https://facebook.com/zulynh05' }}" target="_blank" rel="noopener"
                       class="group bg-white rounded-2xl shadow-md p-6 text-center hover:shadow-xl hover:-translate-y-1 transition-all no-underline block">
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 transition-transform group-hover:scale-110" style="background: #e7f0fe;">
                            <svg class="w-8 h-8" viewBox="0 0 24 24" fill="#1877F2">
                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                            </svg>
                        </div>
                        <h3 class="text-base font-bold text-text mb-1">Facebook</h3>
                        <p class="text-xs text-text-muted mb-3">Nhắn tin qua Facebook Messenger</p>
                        <span class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-semibold text-white transition-colors" style="background: #1877F2;">
                            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                            Chat Facebook
                        </span>
                    </a>
                </div>

                <!-- Email Form -->
                <div class="bg-white rounded-2xl shadow-md p-6 mb-6" x-data="contactForm">
                    <h3 class="text-sm font-bold text-text mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                        Gửi email cho chúng tôi
                    </h3>

                    <form @submit.prevent="submitForm()" class="space-y-4">
                        @csrf
                        <div class="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-text mb-1.5">Họ tên</label>
                                <input type="text" x-model="form.name" placeholder="Nhập họ tên"
                                       class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-accent/30 transition-all"
                                       :class="errors.name && 'border-red-300'">
                                <p x-show="errors.name" x-text="errors.name" class="text-red-500 text-[11px] mt-1"></p>
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-text mb-1.5">Email</label>
                                <input type="email" x-model="form.email" placeholder="email@example.com"
                                       class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-accent/30 transition-all"
                                       :class="errors.email && 'border-red-300'">
                                <p x-show="errors.email" x-text="errors.email" class="text-red-500 text-[11px] mt-1"></p>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-text mb-1.5">Số điện thoại <span class="text-text-muted font-normal">(tùy chọn)</span></label>
                            <input type="tel" x-model="form.phone" placeholder="0xxx xxx xxx"
                                   class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-accent/30 transition-all">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-text mb-1.5">Nội dung</label>
                            <textarea x-model="form.message" rows="4" placeholder="Nhập nội dung cần hỗ trợ..."
                                      class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:ring-2 focus:ring-accent/30 transition-all resize-none"
                                      :class="errors.message && 'border-red-300'"></textarea>
                            <p x-show="errors.message" x-text="errors.message" class="text-red-500 text-[11px] mt-1"></p>
                        </div>
                        <button type="submit" :disabled="loading"
                                class="w-full py-3.5 bg-accent hover:bg-accent-dark text-white font-semibold text-sm rounded-xl shadow-lg shadow-accent/20 hover:-translate-y-0.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                            <svg x-show="loading" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                            <svg x-show="!loading" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                            <span x-text="loading ? 'Đang gửi...' : 'Gửi tin nhắn'"></span>
                        </button>
                    </form>
                </div>

                <!-- Info Card -->
                <div class="bg-white rounded-2xl shadow-md p-6 mb-6">
                    <h3 class="text-sm font-bold text-text mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        Thông tin hỗ trợ
                    </h3>
                    <div class="space-y-3">
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <svg class="w-4 h-4 text-text-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <div>
                                <p class="text-xs font-semibold text-text">Thời gian hỗ trợ</p>
                                <p class="text-[11px] text-text-muted">8:00 - 23:00 hàng ngày (kể cả cuối tuần)</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <svg class="w-4 h-4 text-text-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            <div>
                                <p class="text-xs font-semibold text-text">Phản hồi nhanh</p>
                                <p class="text-[11px] text-text-muted">Thường trả lời trong vòng 5-15 phút</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <svg class="w-4 h-4 text-text-muted shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                            <div>
                                <p class="text-xs font-semibold text-text">Hỗ trợ bảo hành</p>
                                <p class="text-[11px] text-text-muted">Bảo hành suốt thời gian sử dụng gói</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- FAQ Quick -->
                <div class="bg-white rounded-2xl shadow-md p-6">
                    <h3 class="text-sm font-bold text-text mb-4 flex items-center gap-2">
                        <svg class="w-4 h-4 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                        Trước khi liên hệ
                    </h3>
                    <div class="space-y-2.5">
                        @php
                        $tips = [
                            'Kiểm tra hướng dẫn sử dụng tại trang Hướng dẫn',
                            'Chuẩn bị sẵn username Locket hoặc mã đơn hàng',
                            'Chụp ảnh lỗi (nếu có) để hỗ trợ nhanh hơn',
                        ];
                        @endphp
                        @foreach($tips as $tip)
                        <div class="flex items-start gap-2.5 text-xs text-text-muted">
                            <svg class="w-4 h-4 text-green-500 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11l3 3L22 4"/></svg>
                            <span>{{ $tip }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </section>
    </div>
@endsection