"use client";

import { useRef, useState } from "react";
import { motion, useMotionValue, animate } from "motion/react";
import { Plus } from "lucide-react";

import "./nachi-faqs-style.css";

import { type FAQType, faqs } from "./data";

// Utility function to format question numbers with zero-padding
const formatQuestionNumber = (index: number): string => {
  return (index + 1).toString().padStart(3, "0");
};

export const NachiFAQs = () => {
  return (
    <div className="min-h-fit w-full flex flex-col items-center justify-center p-6 py-20 relative bg-[#0e0e0e]">
      <div className="max-w-[1320px] mx-auto w-full flex flex-col items-center relative">
        <div className="flex items-center justify-center gap-4">
          <div className="relative size-6 bg-[#2d1a13] grid place-items-center">
            <div className="relative size-4 bg-[#582f20] grid place-items-center">
              <div className="relative size-2 bg-[#f86629]" />
            </div>
          </div>

          <div className="relative px-5 py-1 border border-[#222222] overflow-hidden">
            <div className="absolute size-8 -left-[15px] -bottom-4 pattern rotate-45 bg-size-[4px_4px]" />
            <div className="absolute size-8 -right-[15px] -top-4 pattern rotate-45 bg-size-[4px_4px]" />
            <span className="text-[#f86629] text-sm">FAQs</span>
          </div>
        </div>

        <div className="relative mt-6">
          <h1 className="text-xl md:text-2xl lg:text-3xl xl:text-5xl font-medium tracking-wide text-[#e5e5e5] text-center">
            <span className="relative inline-block mr-4">
              <span className="absolute size-3 bg-[#444444] -top-px -right-px z-0" />
              <span className="absolute size-3 bg-[#444444] -top-px -left-px z-0" />
              <span className="absolute size-3 bg-[#444444] -bottom-px -right-px z-0" />
              <span className="absolute size-3 bg-[#444444] -bottom-px -left-px z-0" />
              <span className="relative inline-block px-1 py-2 bg-[#0e0e0e]">
                Frequently
              </span>
            </span>
            <span className="relative inline-block mr-4">Asked</span>
            <span className="inline-block px-1 py-2 bg-[#261913] mr-2">
              Questions{" "}
            </span>
          </h1>

          <p className="text-center max-w-[33ch] w-full mx-auto text-[#6c6c6c] mt-6">
            Your question not answered here? Email Us.
          </p>
        </div>

        <div className="relative w-full max-w-[1220px] my-10 mt-16">
          <div className="absolute w-px h-[calc(100%-90px)] top-1/2 -translate-y-1/2 bg-[#222222] left-10 flex flex-col justify-between">
            <Plus className="size-4 text-[#595959] -translate-x-1/2 -translate-y-6" />
            <Plus className="size-4 text-[#595959] -translate-x-1/2 translate-y-6" />
          </div>
          <div className="absolute w-px h-[calc(100%-90px)] top-1/2 -translate-y-1/2 bg-[#222222] right-10 flex flex-col justify-between">
            <Plus className="size-4 text-[#595959] -translate-x-1/2 -translate-y-6" />
            <Plus className="size-4 text-[#595959] -translate-x-1/2 translate-y-6" />
          </div>
          <div className="relative w-full max-w-[800px] mx-auto">
            <div className="grid grid-cols-1 gap-8">
              {faqs.map((faq, index) => (
                <FAQ key={faq.question} {...faq} index={index} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

function FAQ({ question, answer, index }: FAQType & { index: number }) {
  const [showAnswer, setShowAnswer] = useState(false);
  const contentRef = useRef<HTMLDivElement>(null);
  const height = useMotionValue(0);

  const toggleAnswer = () => {
    setShowAnswer(!showAnswer);

    if (contentRef.current) {
      const fullHeight = contentRef.current.scrollHeight;
      animate(height, showAnswer ? 0 : fullHeight, {
        duration: 0.2,
        ease: [0.25, 0.46, 0.45, 0.94],
      });
    }
  };

  return (
    <div className="relative">
      <span className="absolute size-3 bg-[#444444] -top-px -right-px z-0" />
      <span className="absolute size-3 bg-[#444444] -top-px -left-px z-0" />
      <span className="absolute size-3 bg-[#444444] -bottom-px -right-px z-0" />
      <span className="absolute size-3 bg-[#444444] -bottom-px -left-px z-0" />

      <div className="relative p-2 bg-[#0e0e0e] overflow-hidden">
        <div className="relative bg-[#181818] flex flex-col">
          <div
            className="flex items-start gap-5 cursor-pointer text-sm md:text-base p-4 transition-colors duration-200 hover:bg-[#262626]"
            onClick={toggleAnswer}
          >
            <span className="inline-block text-[#f86629] shrink-0">
              {formatQuestionNumber(index)}.
            </span>
            <span className="inline-block text-[#a1a1a1]">{question}</span>

            <Plus
              className="ml-auto size-4.5 text-[#a1a1a1] [transition:transform_0.2s_ease-out] [transform:rotate(calc(var(--rotate)_*_1deg))]"
              style={
                {
                  "--rotate": showAnswer ? "45" : "0",
                } as React.CSSProperties
              }
            />
          </div>

          <motion.div
            style={{
              height: height,
              overflow: "hidden",
              willChange: "height",
            }}
            animate={{
              opacity: showAnswer ? 1 : 0,
              transition: {
                duration: 0.2,
                ease: [0.25, 0.46, 0.45, 0.94],
              },
            }}
          >
            <div
              ref={contentRef}
              className="flex items-start gap-5 text-sm md:text-base px-4 py-3"
            >
              <span className="inline-block text-white shrink-0">Ans.</span>
              <span className="inline-block text-white">{answer}</span>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}
Nachi FAQs

Installation

Installation

FrequentlyAskedQuestions
