"use client";

import { useState } from "react";
import Link from "next/link";
import { ArrowRight, ChevronDown, MessageCircleQuestion } from "lucide-react";
import { faqs } from "@/lib/home-content";
import ScrollReveal from "@/components/ScrollReveal";
import SectionBackdrop from "@/components/ui/SectionBackdrop";
import SectionHeader, { Highlight } from "@/components/ui/SectionHeader";

export default function Faq() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <section
      id="faq"
      className="relative scroll-mt-24 overflow-x-clip py-20 sm:py-24 lg:py-28"
    >
      <SectionBackdrop glow="left" tinted />

      <div className="container">
        <div className="grid grid-cols-[minmax(0,1fr)] gap-12 lg:grid-cols-[minmax(0,38fr)_minmax(0,62fr)] lg:gap-16">
          <div>
            <SectionHeader
              align="left"
              eyebrow="FAQ"
              title={
                <>
                  Questions, <Highlight>answered.</Highlight>
                </>
              }
              description="The things teams ask us most before starting a product."
            />
            <ScrollReveal delay={150} className="mt-8">
              <div className="flex max-w-sm items-start gap-3.5 rounded-2xl border border-slate-200 bg-white p-4 shadow-card">
                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-accent/10 text-accent">
                  <MessageCircleQuestion
                    className="h-4.5 w-4.5"
                    strokeWidth={1.75}
                    aria-hidden
                  />
                </span>
                <p className="text-sm leading-relaxed text-ink-300">
                  Still have a question?{" "}
                  <Link
                    href="/#contact"
                    className="font-semibold text-accent-600 hover:text-accent"
                  >
                    Contact us
                  </Link>{" "}
                  and our team will get back to you.
                </p>
              </div>
            </ScrollReveal>
          </div>

          <ul className="space-y-3.5">
            {faqs.map((f, i) => {
              const open = openIndex === i;
              return (
                <li key={f.question}>
                  <ScrollReveal delay={i * 80}>
                    <div
                      className={`overflow-hidden rounded-2xl border bg-white transition-all duration-300 shadow-card ${
                        open
                          ? "border-accent/30"
                          : "border-slate-200 hover:border-accent-200"
                      }`}
                    >
                      <h3>
                        <button
                          type="button"
                          id={`faq-q-${i}`}
                          aria-expanded={open}
                          aria-controls={`faq-a-${i}`}
                          onClick={() => setOpenIndex(open ? null : i)}
                          className="flex min-h-14 w-full cursor-pointer items-center justify-between gap-4 rounded-2xl px-5 py-4 text-left font-display text-base font-semibold tracking-tight text-[#0F172A] sm:px-6 sm:text-[1.05rem]"
                        >
                          {f.question}
                          <span
                            className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors duration-300 ${
                              open
                                ? "bg-accent text-white"
                                : "bg-accent/10 text-accent"
                            }`}
                          >
                            <ChevronDown
                              className={`h-4 w-4 transition-transform duration-300 ${open ? "rotate-180" : ""}`}
                              aria-hidden
                            />
                          </span>
                        </button>
                      </h3>
                      <div
                        id={`faq-a-${i}`}
                        role="region"
                        aria-labelledby={`faq-q-${i}`}
                        inert={!open}
                        className={`grid transition-[grid-template-rows,opacity] duration-500 ease-in-out ${
                          open
                            ? "grid-rows-[1fr] opacity-100"
                            : "grid-rows-[0fr] opacity-0"
                        }`}
                      >
                        <div className="min-h-0 overflow-hidden">
                          <div className="px-5 pb-5 sm:px-6">
                            <p className="text-[0.95rem] leading-[1.75] text-ink-300">
                              {f.answer}
                            </p>
                            {f.link && (
                              <Link
                                href={f.link.href}
                                className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-accent-600 transition-colors hover:text-accent"
                              >
                                {f.link.label}
                                <ArrowRight
                                  className="h-3.5 w-3.5"
                                  aria-hidden
                                />
                              </Link>
                            )}
                          </div>
                        </div>
                      </div>
                    </div>
                  </ScrollReveal>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
}