import Link from "next/link";
import FAQAccordion from "./faqAccardion";

const faqItems = [
  {
    id: "faq-1",
    question: "How do I become a firefighter?",
    answer:
      "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel sit amet adipiscing sem neque.",
  },
  {
    id: "faq-2",
    question: "What equipment do firefighters use?",
    answer:
      "Firefighters use specialized equipment including protective gear, breathing apparatus, fire hoses, ladders, and various rescue tools. Each piece of equipment is designed to keep firefighters safe while they perform their duties. Our team is trained extensively on all equipment and safety protocols.",
  },
  {
    id: "faq-3",
    question: "Do firefighters only fight fires?",
    answer:
      "No, modern firefighters respond to a wide variety of emergencies including medical calls, vehicle accidents, hazardous material incidents, and rescue operations. They serve as first responders and are trained in emergency medical services to provide life-saving care to the community.",
  },
  {
    id: "faq-4",
    question: "What are the work hours for firefighters?",
    answer:
      "Firefighters typically work shifts that vary by department. Many operate on a schedule of 24 hours on duty followed by 48-72 hours off duty. This schedule allows for adequate rest and recovery while ensuring continuous emergency response coverage for the community.",
  },
  {
    id: "faq-5",
    question: "How long is firefighter training?",
    answer:
      "Initial firefighter training typically takes 12-18 weeks of full-time instruction at a fire academy. After this, firefighters continue receiving ongoing training throughout their careers. Our department invests heavily in continuous education to maintain the highest standards of service.",
  },
  {
    id: "faq-6",
    question: "What is required to apply for the firefighter position?",
    answer:
      "Candidates must be at least 18 years old, have a high school diploma or GED, possess a valid drivers license, and pass a background check and medical examination. Physical fitness is essential, and candidates must pass the Candidate Physical Ability Test (CPAT).",
  },
];

export function Togle() {
  return (
    <div className="min-h-screen bg-[#1e1d1c]">
      <main className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        {/* Header Section */}
        <div className="mb-16 flex items-start justify-between gap-8 lg:gap-12">
          <div className="flex items-center md:col-span-1">
            <h1
              className="bg-linear-to-br from-white via-white/50 to-black
  text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
            >
              About <br /> Work
            </h1>
          </div>

          {/* FAQ Section */}
          <div className="md:col-span-2">
            <FAQAccordion items={faqItems} />
          </div>
        </div>
        {/* ASK QUESTION */}
        <div className="space-y-8 w-full mt-10 ">
          <h1
            className="text-center bg-linear-to-br from-white via-white/50 to-black
  text-transparent bg-clip-text text-3xl font-bold uppercase leading-tight sm:text-4xl md:text-5xl lg:text-6xl"
          >
            Still Have Question?
          </h1>
          <p className="text-center text-white/80 text-lg">
            Nullam dictum felis eu pede mollis pretium integer tincidunt.
          </p>
          <div className="w-full flex items-center justify-center">
            <Link href={'/contact'} className="mx-auto shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
              ASK A QUESTION
            </Link>
          </div>
        </div>
      </main>
    </div>
  );
}
