import Link from "next/link";
import FAQAccordion from "./faqAccardion";
import { faqItems } from "@/lib/demoData";
import { useTranslations } from "next-intl";

export function Togle() {
  const t = useTranslations();
    const faqItems = [
      {
        id: "faq-1",
        question: t("faq.question1.question"),
        answer: t("faq.question1.answer"),
      },
      {
        id: "faq-2",
        question: t("faq.question2.question"),
        answer: t("faq.question2.answer"),
      },
      {
        id: "faq-3",
        question: t("faq.question3.question"),
        answer: t("faq.question3.answer"),
      },
      {
        id: "faq-4",
        question: t("faq.question4.question"),
        answer: t("faq.question4.answer"),
      },
      {
        id: "faq-5",
        question: t("faq.question5.question"),
        answer: t("faq.question5.answer"),
      },
    ];
  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"
            >
              {t("faq.banner.topic")}
            </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"
          >
            {t("faq.ask.question")}
          </h1>
          <p className="text-center text-white/80 text-lg">
            {t("faq.ask.subtitle")}
          </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"
            >
              {t("faq.ask.btn")}
            </Link>
          </div>
        </div>
      </main>
    </div>
  );
}