'use client';

import { useState } from 'react';

const faqDataMedia = [
    {
        question: 'Tại sao nên chụp ảnh chuyên nghiệp cho thương hiệu?',
        answer: 'Hình ảnh chất lượng cao giúp tăng độ tin cậy và tính chuyên nghiệp của thương hiệu trong mắt khách hàng. Ảnh đẹp còn góp phần nâng cao hiệu quả truyền thông, đặc biệt là trên các nền tảng mạng xã hội và website, nơi hình ảnh là yếu tố đầu tiên thu hút người xem.',
    },
    {
        question: 'Quay video sản phẩm có cần thiết không?',
        answer: 'Video sản phẩm giúp khách hàng hiểu rõ hơn về công dụng, tính năng và trải nghiệm thực tế của sản phẩm. Đây là hình thức nội dung trực quan, tăng tỷ lệ chuyển đổi và giúp khách hàng ra quyết định mua hàng nhanh chóng hơn.',
    },
    {
        question: 'Chỉnh sửa video có quan trọng không?',
        answer: 'Hậu kỳ là bước quan trọng để nâng tầm chất lượng video. Một video được dựng chỉn chu, có hiệu ứng, âm thanh và nhịp điệu hợp lý sẽ giữ chân người xem lâu hơn, truyền tải thông điệp rõ ràng và tạo cảm xúc mạnh mẽ hơn.',
    },
    {
        question: 'Livestream có phù hợp với doanh nghiệp nhỏ không?',
        answer: 'Livestream không chỉ dành cho thương hiệu lớn. Các doanh nghiệp nhỏ có thể tận dụng livestream để giới thiệu sản phẩm, tương tác trực tiếp với khách hàng và tạo niềm tin mạnh mẽ. Đây là công cụ bán hàng hiệu quả với chi phí thấp nhưng mang lại kết quả rõ rệt.',
    },
    {
        question: 'Chi phí cho một buổi chụp ảnh hoặc quay video là bao nhiêu?',
        answer: 'Chi phí phụ thuộc vào yêu cầu cụ thể: địa điểm, số lượng ảnh/video, ekip, đạo cụ và thời lượng làm việc. Chúng tôi cung cấp nhiều gói dịch vụ từ cơ bản đến nâng cao, linh hoạt theo ngân sách của từng khách hàng.',
    },
];

export default function VideoFAQSection() {
    const [activeIndex, setActiveIndex] = useState<number | null>(null);

    const toggle = (index: number) => {
        setActiveIndex(activeIndex === index ? null : index);
    };

    return (
        <section className="py-12 px-4"
            style={{
                backgroundImage: "url('/images/hero/shape.svg')",
                backgroundSize: "cover",
                backgroundPosition: "center",
            }}>
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-10">Câu hỏi thường gặp</h2>
            <div className="max-w-3xl mx-auto space-y-4">
                {faqDataMedia.map((item, index) => (
                    <div key={index} className="border-b">
                        <button
                            onClick={() => toggle(index)}
                            className="w-full flex items-center justify-between text-left py-4 font-medium text-lg hover:text-red-500 transition"
                        >
                            <span>{item.question}</span>
                            <span className="text-xl">{activeIndex === index ? '-' : '+'}</span>
                        </button>

                        {activeIndex === index && (
                            <div className="origin-top overflow-hidden text-gray-600 pb-4 pr-4">
                                {item.answer}
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </section>
    );
}
