FAQ

"use client";
import { useEffect, useRef, useState } from "react";

import { Square } from "lucide-react";
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/demos/ui/accordion";
import { Badge } from "@/demos/ui/badge";

const faqs = [
  {
    answer:
      "Every business is different, but most of our clients are fully set up in just a few weeks. We take care of the boring paperwork so you can focus on the exciting stuff.",
    question: "How long does it take to start a business with your help?",
  },
  {
    answer:
      "Not at all. We offer flexible packages designed for businesses at every stage. Whether you're bootstrapping or have investors, we'll find a plan that fits your budget.",
    question: "Do I need a big budget to work with you?",
  },
  {
    answer:
      "Absolutely. We work with aspiring entrepreneurs all the time. We'll help you explore opportunities, validate concepts, and shape a solid idea into a real business plan.",
    question: "Can you help me even if I don't have a business idea yet?",
  },
  {
    answer:
      "We don't just hand you a generic template. Every strategy is tailored to your goals, your industry, and your vision. Plus, we stay with you long after launch to make sure you succeed.",
    question: "What makes you different from other consultants?",
  },
  {
    answer:
      "We work across 8+ industries including tech, food & hospitality, real estate, healthcare, and more. Whatever your field, we bring relevant experience to the table.",
    question: "Do you only work with certain industries?",
  },
];

export default function Faq() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) setIsVisible(true);
      },
      { threshold: 0.1 },
    );

    if (sectionRef.current) observer.observe(sectionRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      className="relative bg-neutral-950 py-12 text-white sm:py-20"
      ref={sectionRef}
    >
      <div className="mx-auto max-w-full">
        <div className="px-4 sm:px-8 lg:px-16">
          <div
            className={`border-primary/20 border-b transition-all duration-700 ${
              isVisible
                ? "translate-y-0 opacity-100"
                : "translate-y-4 opacity-0"
            }`}
          >
            <Badge
              className="flex w-fit items-center rounded-none bg-primary/10 px-4 py-0.5 font-medium text-primary"
              size="lg"
            >
              <Square className="size-3 bg-primary" /> FREQUENTLY ASKED QUESTIONS
            </Badge>
          </div>

          <div className="mt-8 flex flex-col gap-12 lg:mt-10 lg:grid lg:grid-cols-[0.4fr_1fr] lg:items-start lg:gap-16">
            <h2
              className={`font-normal text-3xl transition-all delay-300 duration-700 sm:text-4xl lg:sticky lg:top-32 lg:text-5xl ${
                isVisible
                  ? "translate-y-0 opacity-100"
                  : "translate-y-4 opacity-0"
              }`}
            >
              We get asked
              <br />
              this all the time
            </h2>

            <Accordion defaultValue={[0]}>
              {faqs.map((faq, index) => (
                <AccordionItem
                  className={`mb-10 border-b-0 bg-black transition-all delay-500 duration-700 ${
                    isVisible
                      ? "translate-y-0 opacity-100"
                      : "translate-y-4 opacity-0"
                  }`}
                  key={faq.question}
                  value={index}
                >
                  <AccordionPanel className="bg-secondary/95 pt-0 pb-0">
                    <div className="relative mx-4 pt-5 sm:mx-10">
                      <div className="ml-auto flex w-fit items-end justify-end bg-black px-4 py-1 text-primary">
                        Answer
                      </div>
                      <p className="bg-black p-5 pb-10 text-base text-primary">
                        {faq.answer}
                      </p>
                    </div>
                  </AccordionPanel>

                  <AccordionTrigger
                    className="z-40 -mt-8 flex flex-col gap-0 pt-0 [&[data-panel-open]>div]:bg-primary [&[data-panel-open]>p]:bg-primary"
                    icon={<div />}
                  >
                    <div className="ml-4 flex w-fit items-end justify-end bg-secondary px-4 py-1 text-black sm:ml-10">
                      Question
                    </div>
                    <p className="w-full bg-secondary p-5 text-base text-black sm:text-lg">
                      {faq.question}
                    </p>
                  </AccordionTrigger>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </section>
  );
}