'use client';

import { useState } from "react";
import Link from "next/link";

const faqData = [
  {
    question: "How do projects start?",
    answer: (
      <>
        Begin with our{" "}
        <Link href="/start_project" className="ux-link">
          project intake form
        </Link>
        . We respond within one business day with next steps.
      </>
    ),
  },
  {
    question: "What does pricing look like?",
    answer:
      "Engagements are scoped per project. Typical builds start in the $25K range.",
  },
  {
    question: "Do you work with international clients?",
    answer:
      "Yes. We operate across US, EU, and APAC time zones.",
  },
  {
    question: "Can I see your process?",
    answer: (
      <>
        Check our{" "}
        <Link href="/process" className="ux-link">
          Absorb → Amplify → Activate
        </Link>{" "}
        workflow.
      </>
    ),
  },
];

export default function FAQ() {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);

  const toggle = (index: number) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <>
      {/* HERO */}
      <section className="ux-project-hero">
        <div className="container text-center">
          <h1 className="ux-project-title" data-aos="fade-up" data-aos-duration="1000">Frequently Asked Questions</h1>
          <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
            Everything you need to know before working with us.
          </p>
        </div>
      </section>

      {/* ACCORDION */}
      <section className="ux-about-section">
        <div className="container">
          <div className="faq-wrapper">

            {faqData.map((item, index) => (
              <div
                key={index}
                className={`faq-item ${activeIndex === index ? "active" : ""}`}
                data-aos="fade-up"
                data-aos-delay={100 + index * 120}
                data-aos-duration="900"
              >
                <button
                  className="faq-question"
                  onClick={() => toggle(index)}
                >
                  <span>{item.question}</span>
                  <span className="faq-icon">
                    {activeIndex === index ? "−" : "+"}
                  </span>
                </button>

                <div
                  className="faq-answer"
                  style={{
                    maxHeight: activeIndex === index ? "200px" : "0px",
                  }}
                >
                  <p>{item.answer}</p>
                </div>
              </div>
            ))}

          </div>
        </div>
      </section>
    </>
  );
}