"use client";

import { useState } from "react";
import { ChevronDown, Phone, Mail } from "lucide-react";
import Reveal from "./Reveal";

const faqs = [
  {
    q: "Do I need to sign up to use a tool?",
    a: "No. Every tool is open the moment you land on it — no account, no email, no password.",
  },
  {
    q: "Are the tools actually free?",
    a: "Yes, the core library stays free. The Plus and Team plans add speed and convenience, not access.",
  },
  {
    q: "What happens to files I upload?",
    a: "Where possible, processing happens in your browser. Anything that must touch a server is removed shortly after.",
  },
  {
    q: "How often are new tools added?",
    a: "New tools ship regularly based on requests — you can suggest one from the contact page.",
  },
];

export default function FAQ() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <section id="faq" className="scroll-mt-24 bg-brand-softer px-4 py-24">
      <div className="mx-auto max-w-4xl">
        <Reveal className="text-center">
          <h2 className="text-3xl font-bold sm:text-4xl">Everything You Need To Know</h2>
        </Reveal>

        <div className="mt-12 grid gap-6 sm:grid-cols-[1.4fr,1fr]">
          <Reveal delay={1}>
            <div className="divide-y divide-heading/10 rounded-3xl bg-white p-2 shadow-sm">
              {faqs.map((f, i) => (
                <div key={f.q} className="p-4">
                  <button
                    className="flex w-full items-center justify-between gap-4 text-left"
                    onClick={() => setOpen(open === i ? null : i)}
                    aria-expanded={open === i}
                  >
                    <span className="text-sm font-semibold text-heading">{f.q}</span>
                    <ChevronDown
                      size={16}
                      className={`shrink-0 text-brand transition-transform ${open === i ? "rotate-180" : ""}`}
                    />
                  </button>
                  <div
                    className={`grid transition-all duration-300 ${
                      open === i ? "mt-3 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                    }`}
                  >
                    <p className="overflow-hidden text-[13px] leading-relaxed text-heading/60">{f.a}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={2}>
            <div className="flex h-full flex-col items-center justify-center gap-4 rounded-3xl bg-white p-8 text-center shadow-sm">
              <span className="grid h-12 w-12 place-items-center rounded-2xl bg-brand-gradient text-white">
                <Mail size={18} />
              </span>
              <p className="text-sm font-semibold text-heading">
                Have more questions? <br /> Reach out any time
              </p>
              <a
                href="tel:+10000000000"
                className="btn-glow flex items-center gap-2 rounded-full bg-brand-gradient px-5 py-2.5 text-sm font-semibold text-white"
              >
                <Phone size={14} /> Contact Support
              </a>
              <p className="text-xs text-heading/40">or email hello@swifttoolhub.com</p>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}