Faq 5

"use client";

import { Icons } from "@/components/icons";
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/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() {
  return (
    <section className="relative w-full bg-neutral-950 py-12 text-white sm:py-20">
      <div className="mx-auto max-w-full">
        <div className="px-4 sm:px-8 lg:px-16">
          <div className="border-[#e3fd79]/20 border-b">
            <Badge
              className="flex w-fit items-center rounded-none bg-[#e3fd79]/10 px-4 py-0.5 font-medium text-[#e3fd79]"
              size="lg"
            >
              <Icons.square className="size-3" /> FREQUENTLY ASKED QUESTIONS
            </Badge>
          </div>

          <div className="mt-8 flex flex-col gap-8 lg:mt-10 lg:grid lg:grid-cols-[0.4fr_1fr] lg:items-start lg:gap-16">
            <h2 className="font-medium text-3xl sm:text-4xl lg:sticky lg:top-32 lg:text-5xl">
              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"
                  key={faq.question}
                  value={index}
                >
                  <AccordionPanel className="bg-[#edebbd]/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-[#e3fd79]">
                        Answer
                      </div>
                      <p className="bg-black p-5 pb-10 text-[#e3fd79] text-base">
                        {faq.answer}
                      </p>
                    </div>
                  </AccordionPanel>

                  <AccordionTrigger
                    className="z-0 -mt-8 flex flex-col gap-0 pt-0 [&[data-panel-open]>div]:bg-[#e3fd79] [&[data-panel-open]>p]:bg-[#e3fd79]"
                    icon={<div />}
                  >
                    <div className="ml-4 flex w-fit items-end justify-end bg-[#edebbd] px-4 py-1 text-black transition-colors duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] sm:ml-10">
                      Question
                    </div>
                    <p className="w-full bg-[#edebbd] p-5 text-base text-black transition-colors duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] sm:text-lg">
                      {faq.question}
                    </p>
                  </AccordionTrigger>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
      </div>
    </section>
  );
}