"use client";

import React, { useState } from 'react';

const faqData = [
  {
    q: "What chain link fence materials do I need for a complete installation?",
    a: "A complete chain link fence installation requires: chain link mesh, terminal posts (end, corner, gate), line posts, top rail, tension bars, tension bands, brace bands, rail ends, post caps, fence ties, and concrete for post setting. For gates, add gate frames, hinges, and latches. Optional additions include privacy slats, windscreen, and barbed wire for commercial use."
  },
  {
    q: "What's the difference between galvanized and vinyl coated chain link?",
    a: "Galvanized chain link has a zinc coating for corrosion resistance and a silver-grey finish — it's the standard for commercial and industrial use due to its strength and lower cost. Vinyl coated (typically black) has a galvanized core with a PVC exterior coating, offering a cleaner appearance preferred for residential, school, and park applications."
  },
  {
    q: "Do you supply chain link fence materials across Ontario?",
    a: "Yes. VG Fence Products delivers chain link fence materials across a 250km radius from our Kitchener–Waterloo base. We serve contractors and builders in Guelph, Hamilton, Brantford, Toronto/GTA, London, Windsor, Niagara, Barrie, and all communities in between. Contact us for scheduled job site delivery."
  },
  {
    q: "Can I get contractor pricing on bulk orders?",
    a: "Absolutely. We offer contractor pricing for fence contractors, general contractors, builders, and property managers who order regularly. Contact us to set up a contractor account. Bulk orders on chain link mesh, posts, and hardware receive preferential pricing."
  },
  {
    q: "What gauge of chain link is used for residential vs commercial?",
    a: "Residential chain link is typically 11 or 11.5 gauge wire, which is lighter and more cost-effective for home use. Commercial and security applications typically use 9 gauge, which is heavier and stronger. Lower gauge numbers indicate thicker wire — 9 gauge is significantly stronger than 11.5 gauge."
  },
  {
    q: "Do you deliver to job sites across Waterloo Region?",
    a: "Yes. We offer scheduled delivery to job sites in Kitchener, Waterloo, Cambridge, Ayr, Breslau, Elmira, St. Jacobs, New Hamburg, Baden, Wellesley and all surrounding communities. We can schedule delivery timing to suit your project timeline."
  }
];

const ChainLinkFAQ = () => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div className="faq reveal">
      {faqData.map((item, index) => (
        <div key={index} className={`faq-item ${openIndex === index ? 'open' : ''}`}>
          <div className="faq-q" onClick={() => toggleFaq(index)}>
            {item.q}
            <span className="faq-icon">+</span>
          </div>
          <div className="faq-a">
            {item.a}
          </div>
        </div>
      ))}
    </div>
  );
};

export default ChainLinkFAQ;