import React from 'react';
import { motion } from 'framer-motion';
import { FAQItem } from '../src/data/seoData';

interface FAQProps {
    items: FAQItem[];
}

const FAQ: React.FC<FAQProps> = ({ items }) => {
    if (!items || items.length === 0) return null;

    return (
        <section className="py-24 px-6 bg-white dark:bg-black">
            <div className="max-w-3xl mx-auto">
                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    className="text-center mb-16"
                >
                    <h2 className="font-display text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">
                        Frequently Asked Questions
                    </h2>
                    <p className="text-gray-600 dark:text-gray-400">
                        Common questions about our IT services.
                    </p>
                </motion.div>

                <div className="space-y-6">
                    {items.map((faq, index) => (
                        <motion.div
                            key={index}
                            initial={{ opacity: 0, y: 10 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: index * 0.1 }}
                            className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10"
                        >
                            <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">{faq.question}</h3>
                            <p className="text-gray-600 dark:text-gray-300">{faq.answer}</p>
                        </motion.div>
                    ))}
                </div>
            </div>

            {/* JSON-LD for FAQ Page */}
            <script type="application/ld+json" dangerouslySetInnerHTML={{
                __html: JSON.stringify({
                    "@context": "https://schema.org",
                    "@type": "FAQPage",
                    "mainEntity": items.map(faq => ({
                        "@type": "Question",
                        "name": faq.question,
                        "acceptedAnswer": {
                            "@type": "Answer",
                            "text": faq.answer
                        }
                    }))
                })
            }} />
        </section>
    );
};

export default FAQ;