@extends('layouts.app')

@section('title', 'Hướng Dẫn Sử Dụng - Truyện Hay')
@section('description', 'Hướng dẫn chi tiết cách sử dụng website Truyện Hay để có trải nghiệm đọc truyện tốt nhất')

@section('content')
<div class="bg-gradient-to-br from-blue-500/10 via-cyan-500/5 to-background-dark border-b border-gray-800">
    <div class="container mx-auto px-4 lg:px-8 max-w-4xl py-16 text-center">
        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-blue-500/20 mb-6">
            <span class="material-symbols-outlined text-5xl text-blue-500">menu_book</span>
        </div>
        <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Hướng Dẫn Sử Dụng</h1>
        <p class="text-gray-400 text-lg">Tận hưởng trải nghiệm đọc truyện tuyệt vời cùng Truyện Hay</p>
    </div>
</div>

<div class="container mx-auto px-4 lg:px-8 max-w-4xl py-12">
    <div class="bg-surface-dark rounded-2xl border border-gray-800 overflow-hidden">
        <div class="p-8 md:p-12 prose prose-invert max-w-none">

            <div class="bg-blue-500/10 border-l-4 border-blue-500 rounded-r-lg p-6 mb-8">
                <p class="text-gray-300 text-sm leading-relaxed m-0">
                    Chào mừng bạn đến với <strong class="text-white">Truyện Hay</strong>! Hướng dẫn này sẽ giúp bạn tận dụng tối đa các tính năng của website để có trải nghiệm đọc truyện tuyệt vời nhất.
                </p>
            </div>

            <section class="mb-10">
                <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
                    <span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500/20 text-blue-500">1</span>
                    Bắt Đầu Với Truyện Hay
                </h2>
                <div class="pl-13 space-y-4 text-gray-300">
                    <div class="bg-gradient-to-r from-blue-500/10 to-cyan-500/5 border border-blue-500/20 rounded-xl p-5">
                        <h3 class="text-lg font-bold text-white mb-3 flex items-center gap-2">
                            <span class="material-symbols-outlined text-blue-500">person_add</span>
                            Đăng Ký Tài Khoản
                        </h3>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-400">
                            <li>Click vào nút <span class="text-white font-semibold">"Đăng Ký"</span> ở góc trên bên phải</li>
                            <li>Điền thông tin: Email, Tên người dùng, Mật khẩu</li>
                            <li>Xác nhận email (nếu có yêu cầu)</li>
                            <li>Hoàn tất! Bạn đã có tài khoản để lưu truyện yêu thích</li>
                        </ol>
                        <p class="text-xs text-gray-500 mt-3 italic">💡 Mẹo: Tạo tài khoản để theo dõi lịch sử đọc và nhận thông báo chương mới</p>
                    </div>

                    <div class="bg-gradient-to-r from-green-500/10 to-emerald-500/5 border border-green-500/20 rounded-xl p-5">
                        <h3 class="text-lg font-bold text-white mb-3 flex items-center gap-2">
                            <span class="material-symbols-outlined text-green-500">login</span>
                            Đăng Nhập
                        </h3>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-400">
                            <li>Click <span class="text-white font-semibold">"Đăng Nhập"</span> ở góc trên</li>
                            <li>Nhập Email và Mật khẩu</li>
                            <li>Chọn "Ghi nhớ đăng nhập" để không phải đăng nhập lại</li>
                            <li>Click <span class="text-white font-semibold">"Đăng Nhập"</span></li>
                        </ol>
                    </div>
                </div>
            </section>

            <section class="mb-10">
                <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
                    <span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500/20 text-blue-500">2</span>
                    Tìm Kiếm Truyện
                </h2>
                <div class="pl-13 space-y-4 text-gray-300">
                    <h3 class="font-semibold text-white">Có 4 cách để tìm truyện:</h3>

                    <div class="space-y-3">
                        <div class="flex items-start gap-3 p-4 bg-background-dark rounded-lg border border-gray-800">
                            <span class="material-symbols-outlined text-blue-500 text-2xl">search</span>
                            <div class="flex-1">
                                <h4 class="font-semibold text-white mb-1">1. Thanh tìm kiếm</h4>
                                <p class="text-sm text-gray-400">Nhập tên truyện, tác giả hoặc từ khóa vào ô tìm kiếm ở header</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3 p-4 bg-background-dark rounded-lg border border-gray-800">
                            <span class="material-symbols-outlined text-purple-500 text-2xl">category</span>
                            <div class="flex-1">
                                <h4 class="font-semibold text-white mb-1">2. Duyệt theo thể loại</h4>
                                <p class="text-sm text-gray-400">Click menu <span class="text-white font-semibold">"Thể loại"</span> để xem tất cả thể loại (Tiên Hiệp, Ngôn Tình, Đam Mỹ...)</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3 p-4 bg-background-dark rounded-lg border border-gray-800">
                            <span class="material-symbols-outlined text-orange-500 text-2xl">person</span>
                            <div class="flex-1">
                                <h4 class="font-semibold text-white mb-1">3. Tìm theo tác giả</h4>
                                <p class="text-sm text-gray-400">Vào <span class="text-white font-semibold">"Tác Giả"</span> để xem danh sách tác giả và truyện của họ</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-3 p-4 bg-background-dark rounded-lg border border-gray-800">
                            <span class="material-symbols-outlined text-green-500 text-2xl">tune</span>
                            <div class="flex-1">
                                <h4 class="font-semibold text-white mb-1">4. Bộ lọc nâng cao</h4>
                                <p class="text-sm text-gray-400">Vào <span class="text-white font-semibold">"Danh Sách Truyện"</span> để lọc theo thể loại, trạng thái, sắp xếp theo lượt xem, đánh giá...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-10">
                <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
                    <span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500/20 text-blue-500">3</span>
                    Đọc Truyện
                </h2>
                <div class="pl-13 space-y-4 text-gray-300">
                    <div class="bg-gradient-to-r from-blue-500/10 to-cyan-500/5 border border-blue-500/20 rounded-xl p-5">
                        <h3 class="text-lg font-bold text-white mb-3">Các bước đọc truyện:</h3>
                        <ol class="list-decimal list-inside space-y-2 text-sm text-gray-400">
                            <li>Click vào <span class="text-white font-semibold">ảnh bìa hoặc tên truyện</span> để mở trang chi tiết</li>
                            <li>Xem thông tin: Tóm tắt, thể loại, tác giả, đánh giá, số chương</li>
                            <li>Chọn chương muốn đọc từ danh sách bên dưới</li>
                            <li>Click <span class="text-white font-semibold">"Đọc Từ Đầu"</span> hoặc chọn chương bất kỳ</li>
                            <li>Sử dụng nút <span class="text-white font-semibold">Chương Trước/Sau</span> để di chuyển</li>
                        </ol>
                    </div>

                    <div class="mt-4">
                        <h3 class="font-semibold text-white mb-3">Tính năng khi đọc:</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            <div class="flex items-start gap-2 text-sm">
                                <span class="material-symbols-outlined text-blue-500 text-lg mt-0.5">text_increase</span>
                                <div>
                                    <div class="text-white font-semibold">Chỉnh cỡ chữ</div>
                                    <div class="text-gray-400 text-xs">Tăng/giảm kích thước chữ</div>
                                </div>
                            </div>
                            <div class="flex items-start gap-2 text-sm">
                                <span class="material-symbols-outlined text-blue-500 text-lg mt-0.5">dark_mode</span>
                                <div>
                                    <div class="text-white font-semibold">Chế độ đọc</div>
                                    <div class="text-gray-400 text-xs">Sáng/Tối phù hợp mắt</div>
                                </div>
                            </div>
                            <div class="flex items-start gap-2 text-sm">
                                <span class="material-symbols-outlined text-blue-500 text-lg mt-0.5">bookmark</span>
                                <div>
                                    <div class="text-white font-semibold">Đánh dấu</div>
                                    <div class="text-gray-400 text-xs">Lưu vị trí đọc</div>
                                </div>
                            </div>
                            <div class="flex items-start gap-2 text-sm">
                                <span class="material-symbols-outlined text-blue-500 text-lg mt-0.5">comment</span>
                                <div>
                                    <div class="text-white font-semibold">Bình luận</div>
                                    <div class="text-gray-400 text-xs">Chia sẻ cảm nhận</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-10">
                <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
                    <span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500/20 text-blue-500">4</span>
                    Quản Lý Tủ Truyện
                </h2>
                <div class="pl-13 space-y-4 text-gray-300">
                    <p class="text-sm"><span class="text-yellow-500">⚠️</span> Cần đăng nhập để sử dụng tính năng này</p>

                    <div class="space-y-3">
                        <div class="bg-background-dark rounded-lg border border-gray-800 p-4">
                            <h3 class="font-semibold text-white mb-2 flex items-center gap-2">
                                <span class="material-symbols-outlined text-pink-500">favorite</span>
                                Thêm vào yêu thích
                            </h3>
                            <p class="text-sm text-gray-400">Click icon <span class="text-pink-500">❤️</span> ở trang chi tiết truyện để lưu vào danh sách yêu thích</p>
                        </div>

                        <div class="bg-background-dark rounded-lg border border-gray-800 p-4">
                            <h3 class="font-semibold text-white mb-2 flex items-center gap-2">
                                <span class="material-symbols-outlined text-blue-500">history</span>
                                Lịch sử đọc
                            </h3>
                            <p class="text-sm text-gray-400">Hệ thống tự động lưu các truyện bạn đã đọc, xem lại ở mục "Lịch Sử"</p>
                        </div>

                        <div class="bg-background-dark rounded-lg border border-gray-800 p-4">
                            <h3 class="font-semibold text-white mb-2 flex items-center gap-2">
                                <span class="material-symbols-outlined text-green-500">notifications</span>
                                Theo dõi truyện
                            </h3>
                            <p class="text-sm text-gray-400">Nhận thông báo khi có chương mới của truyện yêu thích</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-10">
                <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
                    <span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500/20 text-blue-500">5</span>
                    Tương Tác Cộng Đồng
                </h2>
                <div class="pl-13 space-y-4 text-gray-300">
                    <div class="bg-gradient-to-r from-purple-500/10 to-pink-500/5 border border-purple-500/20 rounded-xl p-5">
                        <h3 class="text-lg font-bold text-white mb-3 flex items-center gap-2">
                            <span class="material-symbols-outlined text-purple-500">comment</span>
                            Bình Luận
                        </h3>
                        <ul class="list-disc list-inside space-y-2 text-sm text-gray-400">
                            <li>Viết bình luận ở cuối mỗi chương</li>
                            <li>Chia sẻ cảm nhận, thảo luận cùng độc giả khác</li>
                            <li>Like/Reply bình luận của người khác</li>
                            <li>Báo cáo bình luận vi phạm quy định</li>
                        </ul>
                        <p class="text-xs text-gray-500 mt-3 italic">⚠️ Hãy giữ bình luận văn minh, tôn trọng người khác</p>
                    </div>

                    <div class="bg-gradient-to-r from-yellow-500/10 to-orange-500/5 border border-yellow-500/20 rounded-xl p-5">
                        <h3 class="text-lg font-bold text-white mb-3 flex items-center gap-2">
                            <span class="material-symbols-outlined text-yellow-500">star</span>
                            Đánh Giá Truyện
                        </h3>
                        <ul class="list-disc list-inside space-y-2 text-sm text-gray-400">
                            <li>Cho điểm từ 1-5 sao ở trang chi tiết truyện</li>
                            <li>Giúp độc giả khác tìm truyện hay</li>
                            <li>Viết review chi tiết (nếu muốn)</li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="mb-10">
                <h2 class="text-2xl font-bold text-white mb-4 flex items-center gap-3">
                    <span class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500/20 text-blue-500">6</span>
                    Câu Hỏi Thường Gặp (FAQ)
                </h2>
                <div class="pl-13 space-y-3">
                    <details class="bg-background-dark rounded-lg border border-gray-800 overflow-hidden">
                        <summary class="px-5 py-4 cursor-pointer text-white font-semibold hover:bg-gray-800 transition-colors">
                            Truyện Hay có miễn phí không?
                        </summary>
                        <div class="px-5 pb-4 text-sm text-gray-400">
                            Có! Tất cả truyện trên Truyện Hay đều hoàn toàn miễn phí. Bạn không cần trả phí để đọc bất kỳ truyện nào.
                        </div>
                    </details>

                    <details class="bg-background-dark rounded-lg border border-gray-800 overflow-hidden">
                        <summary class="px-5 py-4 cursor-pointer text-white font-semibold hover:bg-gray-800 transition-colors">
                            Làm sao để nhận thông báo chương mới?
                        </summary>
                        <div class="px-5 pb-4 text-sm text-gray-400">
                            Đăng nhập và thêm truyện vào danh sách yêu thích. Bật thông báo trong cài đặt tài khoản để nhận tin khi có chương mới.
                        </div>
                    </details>

                    <details class="bg-background-dark rounded-lg border border-gray-800 overflow-hidden">
                        <summary class="px-5 py-4 cursor-pointer text-white font-semibold hover:bg-gray-800 transition-colors">
                            Tôi quên mật khẩu, phải làm sao?
                        </summary>
                        <div class="px-5 pb-4 text-sm text-gray-400">
                            Click "Quên mật khẩu?" ở trang đăng nhập, nhập email đã đăng ký. Chúng tôi sẽ gửi link khôi phục mật khẩu.
                        </div>
                    </details>

                    <details class="bg-background-dark rounded-lg border border-gray-800 overflow-hidden">
                        <summary class="px-5 py-4 cursor-pointer text-white font-semibold hover:bg-gray-800 transition-colors">
                            Tôi có thể đề xuất truyện mới không?
                        </summary>
                        <div class="px-5 pb-4 text-sm text-gray-400">
                            Có! Liên hệ qua email support@truyenhay.com với thông tin truyện bạn muốn đề xuất. Chúng tôi sẽ xem xét và cập nhật.
                        </div>
                    </details>

                    <details class="bg-background-dark rounded-lg border border-gray-800 overflow-hidden">
                        <summary class="px-5 py-4 cursor-pointer text-white font-semibold hover:bg-gray-800 transition-colors">
                            Làm sao báo cáo nội dung vi phạm?
                        </summary>
                        <div class="px-5 pb-4 text-sm text-gray-400">
                            Click icon "Báo cáo" ở trang truyện hoặc bình luận vi phạm, chọn lý do và gửi. Chúng tôi sẽ xử lý trong 24h.
                        </div>
                    </details>
                </div>
            </section>

            <div class="bg-gradient-to-r from-blue-500/10 to-cyan-500/10 border border-blue-500/20 rounded-xl p-6 mt-12">
                <h3 class="text-xl font-bold text-white mb-3 flex items-center gap-2">
                    <span class="material-symbols-outlined text-blue-500">support_agent</span>
                    Cần Hỗ Trợ Thêm?
                </h3>
                <p class="text-gray-300 mb-4">Nếu bạn gặp vấn đề hoặc có câu hỏi khác, đừng ngại liên hệ với chúng tôi:</p>
                <div class="space-y-2 text-gray-400">
                    <p class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-sm text-blue-500">mail</span>
                        Email: <a href="mailto:support@truyenhay.com" class="text-blue-500 hover:underline">support@truyenhay.com</a>
                    </p>
                    <p class="flex items-center gap-2">
                        <span class="material-symbols-outlined text-sm text-blue-500">schedule</span>
                        Thời gian phản hồi: <span class="text-white">Trong vòng 24 giờ</span>
                    </p>
                </div>
            </div>

        </div>
    </div>

    <div class="mt-8 text-center">
        <a href="{{ route('home') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg transition-all">
            <span class="material-symbols-outlined">arrow_back</span>
            Quay lại trang chủ
        </a>
    </div>
</div>
@endsection