'use client';

import Breadcrumb from "@/components/Common/Breadcrumb";
import { CheckCircle2, XCircle, Clock, HelpCircle, Phone, Mail, Shield } from 'lucide-react';
import { CONTACT_INFO } from '@/config/contact';
import ModernBackground from '@/components/Common/ModernBackground';

export default function RefundPolicyClient() {
    const policyData = [
        {
            icon: CheckCircle2,
            title: "Điều kiện áp dụng",
            color: "text-green-500",
            bgColor: "bg-green-50",
            borderColor: "border-green-200",
            items: [
                "Áp dụng cho các gói dịch vụ còn trong thời hạn cam kết",
                "Khách hàng đã thực hiện đầy đủ nghĩa vụ thanh toán theo thỏa thuận",
                "Không vi phạm các điều khoản sử dụng dịch vụ",
            ],
        },
        {
            icon: XCircle,
            title: "Trường hợp không áp dụng",
            color: "text-red-500",
            bgColor: "bg-red-50",
            borderColor: "border-red-200",
            items: [
                "Yêu cầu hoàn tiền sau khi dự án đã bàn giao đầy đủ",
                "Các chi phí phát sinh từ bên thứ ba (nếu có) đã được thanh toán",
                "Vi phạm thỏa thuận hoặc yêu cầu ngoài phạm vi dịch vụ đã đăng ký",
            ],
        },
    ];

    const processSteps = [
        {
            step: "01",
            title: "Gửi yêu cầu",
            description: "Gửi yêu cầu qua email hỗ trợ hoặc biểu mẫu liên hệ trên website",
        },
        {
            step: "02",
            title: "Phản hồi",
            description: "Chúng tôi phản hồi trong vòng 1-3 ngày làm việc",
        },
        {
            step: "03",
            title: "Xử lý hoàn tiền",
            description: "Thời gian xử lý: 5-7 ngày làm việc kể từ khi xác nhận",
        },
    ];

    const faqs = [
        {
            question: "Tôi cần cung cấp gì khi yêu cầu hoàn tiền?",
            answer: "Bạn cần cung cấp lý do hoàn tiền, thông tin liên hệ và các tài liệu liên quan đến hợp đồng dịch vụ.",
        },
        {
            question: "Hoàn tiền được chuyển bằng phương thức nào?",
            answer: "Chúng tôi hoàn tiền bằng cùng phương thức bạn đã thanh toán (chuyển khoản ngân hàng, ví điện tử,...).",
        },
        {
            question: "Tôi có thể theo dõi tình trạng xử lý không?",
            answer: "Có. Sau khi tiếp nhận, chúng tôi sẽ cập nhật tiến độ qua email hoặc điện thoại mà bạn đã đăng ký.",
        },
    ];

    return (
        <div className="relative w-full bg-gradient-to-br from-white via-red-50/30 to-orange-50/20 overflow-x-hidden">
            <ModernBackground />
            <Breadcrumb
                pageName="Chính sách hoàn tiền"
                description="Cam kết bảo vệ quyền lợi khách hàng với chính sách hoàn tiền minh bạch và rõ ràng."
            />

            <section className="relative py-20 md:py-20 lg:py-24">
                <div className="container">
                    {/* Intro Section */}
                    <div className="max-w-4xl mx-auto text-center mb-16">
                        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-50 mb-6">
                            <Shield className="w-8 h-8 text-red-500" />
                        </div>
                        <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
                            Cam kết bảo vệ quyền lợi khách hàng
                        </h2>
                        <p className="text-body-color text-lg">
                            Chúng tôi cam kết mang lại trải nghiệm tốt nhất cho khách hàng. Mục tiêu của chúng tôi là bảo vệ quyền lợi và đảm bảo sự minh bạch trong mọi quy trình.
                        </p>
                    </div>

                    {/* Policy Cards */}
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
                        {policyData.map((policy, index) => (
                            <div key={index} className={`bg-white rounded-2xl p-8 border-2 ${policy.borderColor} shadow-two hover:shadow-lg transition-all duration-300`}>
                                <div className={`inline-flex items-center justify-center w-12 h-12 rounded-xl ${policy.bgColor} mb-4`}>
                                    <policy.icon className={`w-6 h-6 ${policy.color}`} />
                                </div>
                                <h3 className="text-2xl font-bold text-black mb-4">{policy.title}</h3>
                                <ul className="space-y-3">
                                    {policy.items.map((item, idx) => (
                                        <li key={idx} className="flex items-start gap-3">
                                            <CheckCircle2 className={`w-5 h-5 ${policy.color} flex-shrink-0 mt-0.5`} />
                                            <span className="text-body-color">{item}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        ))}
                    </div>

                    {/* Process Timeline */}
                    <div className="bg-white rounded-2xl p-8 md:p-10 border border-stroke shadow-two mb-16">
                        <div className="flex items-center gap-3 mb-8">
                            <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-red-50">
                                <Clock className="w-6 h-6 text-red-500" />
                            </div>
                            <h3 className="text-2xl md:text-3xl font-bold text-black">Quy trình xử lý</h3>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            {processSteps.map((step, index) => (
                                <div key={index} className="relative">
                                    <div className="flex items-start gap-4">
                                        <div className="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 text-white flex items-center justify-center font-bold text-lg">
                                            {step.step}
                                        </div>
                                        <div className="flex-1">
                                            <h4 className="text-lg font-bold text-black mb-2">{step.title}</h4>
                                            <p className="text-body-color text-sm">{step.description}</p>
                                        </div>
                                    </div>
                                    {index < processSteps.length - 1 && (
                                        <div className="hidden md:block absolute top-6 left-full w-full h-0.5 bg-red-200 -ml-4" style={{ width: 'calc(100% - 3rem)' }} />
                                    )}
                                </div>
                            ))}
                        </div>

                        <div className="mt-8 rounded-xl border border-yellow-200 bg-yellow-50 p-4 flex gap-3">
                            <HelpCircle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
                            <p className="text-sm text-yellow-800">
                                <strong>Lưu ý:</strong> Thời gian hoàn tiền thực tế có thể phụ thuộc vào ngân hàng hoặc cổng thanh toán bạn sử dụng.
                            </p>
                        </div>
                    </div>

                    {/* FAQs */}
                    <div className="bg-white rounded-2xl p-8 md:p-10 border border-stroke shadow-two mb-16">
                        <div className="flex items-center gap-3 mb-8">
                            <div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-red-50">
                                <HelpCircle className="w-6 h-6 text-red-500" />
                            </div>
                            <h3 className="text-2xl md:text-3xl font-bold text-black">Câu hỏi thường gặp</h3>
                        </div>

                        <div className="space-y-6">
                            {faqs.map((faq, index) => (
                                <div key={index} className="border-l-4 border-red-500 pl-6 py-2">
                                    <h4 className="text-lg font-bold text-black mb-2">{faq.question}</h4>
                                    <p className="text-body-color">{faq.answer}</p>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Contact Section */}
                    <div className="bg-gradient-to-r from-red-500 to-red-600 rounded-2xl p-8 md:p-10 text-white text-center">
                        <h3 className="text-2xl md:text-3xl font-bold mb-4">Cần hỗ trợ thêm?</h3>
                        <p className="text-white/90 mb-8 max-w-2xl mx-auto">
                            Nếu bạn có bất kỳ thắc mắc nào về chính sách hoàn tiền, đội ngũ của chúng tôi luôn sẵn sàng hỗ trợ bạn.
                        </p>
                        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a
                                href={CONTACT_INFO.phone.href}
                                className="inline-flex items-center gap-2 bg-white text-red-500 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors"
                            >
                                <Phone className="w-5 h-5" />
                                {CONTACT_INFO.phone.display}
                            </a>
                            <a
                                href={CONTACT_INFO.email.href}
                                className="inline-flex items-center gap-2 bg-white/10 text-white border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white/20 transition-colors"
                            >
                                <Mail className="w-5 h-5" />
                                Email hỗ trợ
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}
