"use client";

import { useState } from "react";
import { Plus, Minus } from "lucide-react";
import { siteContent } from "@/data/content";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";

export function FAQ() {
  const { faq } = siteContent;
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  function toggle(index: number) {
    setOpenIndex(openIndex === index ? null : index);
  }

  return (
    <section id="faq" className="section-glow relative section-padding bg-neutral-100 dark:bg-[#080808]">
      <div className="section-divider absolute top-0 left-0 right-0" />
      <div className="section-container">
        <Reveal>
          <SectionHeading centered>{faq.title}</SectionHeading>
        </Reveal>

        <div className="mx-auto mt-14 grid max-w-5xl gap-x-10 lg:grid-cols-2">
          {[0, 1].map((col) => {
            const half = Math.ceil(faq.items.length / 2);
            const items = col === 0 ? faq.items.slice(0, half) : faq.items.slice(half);
            const offset = col === 0 ? 0 : half;
            return (
              <div key={col}>
                {items.map((item, i) => {
                  const idx = offset + i;
                  return (
                    <Reveal key={idx}>
                      <div
                        className={`border-b border-neutral-200 dark:border-white/[0.06] ${
                          i === 0 ? "border-t" : ""
                        }`}
                      >
                        <button
                          onClick={() => toggle(idx)}
                          className="flex w-full items-center justify-between gap-4 py-5 text-left transition-colors"
                        >
                          <span className="text-sm font-medium text-neutral-900 dark:text-white sm:text-base">
                            {item.question}
                          </span>
                          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-neutral-100 transition-all duration-300 dark:bg-white/[0.06]">
                            {openIndex === idx ? (
                              <Minus size={14} className="text-[#c9a96e]" />
                            ) : (
                              <Plus size={14} className="text-neutral-400 dark:text-neutral-500" />
                            )}
                          </span>
                        </button>
                        <div
                          className={`grid transition-all duration-300 ease-out ${
                            openIndex === idx ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                          }`}
                        >
                          <div className="overflow-hidden">
                            <div className="pb-5 pr-10 text-sm leading-relaxed text-neutral-600 dark:text-neutral-400 whitespace-pre-line">
                              {item.answer}
                            </div>
                          </div>
                        </div>
                      </div>
                    </Reveal>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}