import type { ReactNode } from 'react';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { ArrowRight } from 'lucide-react';
import ScrollReveal from '@/components/ScrollReveal';

interface FAQItem {
  q: string;
  a: ReactNode;
}

interface ProductFAQProps {
  productName: string;
  faqs: FAQItem[];
}

const ProductFAQEN = ({ productName, faqs }: ProductFAQProps) => (
  <section className="py-16 lg:py-24 bg-cream">
    <div className="container mx-auto px-4 lg:px-8">
      <ScrollReveal>
        <div className="grid lg:grid-cols-5 gap-12 lg:gap-16">
          <div className="lg:col-span-2 lg:sticky lg:top-24 lg:self-start">
            <p className="text-[10px] uppercase tracking-[0.25em] font-semibold text-primary/65 font-body mb-6">
              FAQ
            </p>
            <h2
              className="font-satoshi text-3xl sm:text-4xl font-black text-foreground !leading-[1.05] mb-3"
              style={{ letterSpacing: '-0.03em' }}
            >
              Your questions about {productName}
            </h2>
            <p className="text-foreground/70 text-base font-body leading-relaxed">
              Can't find your question? Get in touch or request a quote.
            </p>
            <div className="mt-6">
              <a
                href="/en"
                className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:gap-2.5 transition-all"
              >
                Request a quote <ArrowRight className="w-3.5 h-3.5" />
              </a>
            </div>
          </div>

          <div className="lg:col-span-3">
            <Accordion type="single" collapsible className="space-y-3">
              {faqs.map((faq, i) => (
                <AccordionItem
                  key={i}
                  value={`faq-${i}`}
                  className="border border-border bg-card rounded-xl px-6 data-[state=open]:shadow-sm"
                >
                  <AccordionTrigger className="text-left font-semibold text-foreground hover:no-underline py-5">
                    {faq.q}
                  </AccordionTrigger>
                  <AccordionContent className="text-foreground/75 leading-relaxed pb-5 font-body">
                    {faq.a}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </ScrollReveal>
    </div>
  </section>
);

export default ProductFAQEN;