'use client';

import * as Accordion from '@radix-ui/react-accordion';
import { Icon } from './icons';
import { SectionHead } from './category-grid';

const faqs = [
    {
        q: 'How fast is delivery in Kampala and upcountry?',
        a: 'Same-day or next-day delivery for orders confirmed before 1pm Mon–Sat in Kampala. Upcountry delivery (Jinja, Mbarara, Gulu, Mbale) typically takes 2–4 days.',
    },
    {
        q: 'Do you provide installation and commissioning?',
        a: 'Yes. We provide professional installation in Kampala and within 50 km radius. Upcountry installation can be arranged on request — included in the quote.',
    },
    {
        q: 'What payment methods do you accept?',
        a: 'Bank transfer, Mobile Money (MTN/Airtel) and cash on delivery for in-stock items. For verified businesses we offer net-30 credit terms after a credit application.',
    },
    {
        q: 'What warranty does each unit come with?',
        a: 'All our equipment includes manufacturer warranty (typically 6–12 months depending on the brand). Specific warranty terms are confirmed in writing on every quote.',
    },
    {
        q: 'Are spare parts available locally?',
        a: 'Yes — we maintain a comprehensive stock of genuine spare parts for all equipment we sell. This is one of the key reasons our customers choose Jamali Tech over informal importers.',
    },
    {
        q: 'How does the WhatsApp quotation flow work?',
        a: 'Send us a message with the product or use case. A technician sizes the right unit and replies with a clear quote, delivery window and warranty terms — usually within hours.',
    },
];

export function FaqSection() {
    return (
        <section className="section-pad bg-ink-950 relative">
            <div className="container-jt max-w-4xl">
                <SectionHead eyebrow="Frequently asked" title="Questions, answered" sub="Everything contractors and businesses ask before placing an order." />

                <Accordion.Root type="single" collapsible className="mt-12 space-y-3">
                    {faqs.map((f, i) => (
                        <Accordion.Item
                            key={i}
                            value={`f-${i}`}
                            className="glass rounded-xl overflow-hidden border-white/5"
                        >
                            <Accordion.Header>
                                <Accordion.Trigger className="group w-full flex items-center justify-between gap-4 px-6 py-5 text-left text-base lg:text-lg font-semibold text-white hover:bg-white/[0.02] transition-colors">
                                    <span>{f.q}</span>
                                    <span className="shrink-0 w-9 h-9 rounded-full bg-orange-600/15 text-orange-500 flex items-center justify-center group-data-[state=open]:bg-orange-600 group-data-[state=open]:text-white transition-colors">
                                        <Icon.Plus className="w-4 h-4 group-data-[state=open]:hidden" />
                                        <Icon.Minus className="w-4 h-4 hidden group-data-[state=open]:block" />
                                    </span>
                                </Accordion.Trigger>
                            </Accordion.Header>
                            <Accordion.Content className="overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
                                <div className="px-6 pb-6 pt-0 text-steel-300 text-sm lg:text-base leading-relaxed border-t border-white/5">
                                    <p className="pt-4">{f.a}</p>
                                </div>
                            </Accordion.Content>
                        </Accordion.Item>
                    ))}
                </Accordion.Root>
            </div>

            {/* FAQ JSON-LD */}
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: JSON.stringify({
                        '@context': 'https://schema.org',
                        '@type': 'FAQPage',
                        mainEntity: faqs.map((f) => ({
                            '@type': 'Question',
                            name: f.q,
                            acceptedAnswer: { '@type': 'Answer', text: f.a },
                        })),
                    }),
                }}
            />
        </section>
    );
}