nshop-front-m/src/app/(public)/(cms)/help-faqs/_components/Faqs.tsx

"use client";
import { useState } from "react";
import HeadBack from "@/components/head/HeadBack";
type FaqItem = {
  q: React.ReactNode;
  a: React.ReactNode;
};

type FaqSection = {
  title: string;
  items: FaqItem[];
};

type FaqGroup = {
  groupTitle: string;
  sections: FaqSection[];
};

const faqData: FaqGroup[] = [
  {
    groupTitle: "Question Before Purchase",
    sections: [
      {
        title: "1. About Order",
        items: [
          {
            q: "How do I pay for an order?",
            a: (
              <div className="space-y-2">
                <p>
                  To pay for your order on www.asteriahair.com, follow the steps
                  below:
                </p>
                <p>
                  (1) Select the hair items you would like to order and click
                  the "Buy Now" button.
                </p>
                <p>
                  (2) Fill in the address information and choose the shipping
                  method and payment method on the checkout page, then click the
                  "Place Order" button.
                </p>
                <p>(3) Go to the payment platform to complete the payment.</p>
              </div>
            ),
          },
          {
            q: "How do I use my coupon code? Can I use two coupon codes in one order?",
            a: (
              <div className="space-y-2">
                <p>
                  The purchasing process on our website is: Buy Now &gt Checkout
                  &gt Confirm &gt Payment.
                </p>
                <p>
                  When you are in the process of Checkout or Confirm, you can
                  apply the coupon code if you have one, and please note that
                  only one coupon code is allowed for one order.
                </p>
              </div>
            ),
          },
          {
            q: "I have bought something but seen it at a different price on your website.",
            a: (
              <p>
                As an online business we act much faster in adjusting our prices
                in response to trends, stock and demand from customers. It's our
                general view not to refund the difference.
              </p>
            ),
          },
          {
            q: "Is there any hidden charges to my order?",
            a: (
              <p>
                Basically, the final amount you will pay is just the price of
                the product plus shipping(if you choose a paid shipping).
                Sometimes, because of the exchange rate of currency, when the
                payment finally cleared through the bank, the total amount will
                be a little different to the price of the product, but its only
                less than 0.5% of the total price.
              </p>
            ),
          },
          {
            q: "Do I have to pay the customs duties & taxes?",
            a: (
              <p>
                Orders shipped outside of the United States may be subject to
                import taxes, customs duties and fees levied by the destination
                country. The recipient of an international shipment may be
                subject to such import taxes, customs duties and fees.
                Additional charges for customs clearance must be fulfilled by
                the recipient. Customs policies vary widely, the customs duty is
                determined by the custom of your country, and it is uncertain to
                know how much about it, you should contact your local customs
                office for more information.
              </p>
            ),
          },
        ],
      },
      {
        title: "2. About Products",
        items: [
          {
            q: "Is your hair 100% human hair?",
            a: <p>Yes, we only sell high quality 100% human virgin hair.</p>,
          },
          {
            q: "Can I ask for small/large cap?",
            a: (
              <div className="space-y-2">
                <p>
                  Our Stock Size is Medium cap which is 22.5 inches, and we have
                  the combs and elastic band or adjustable straps inside to help
                  fit the head. Kindly Reminder:
                </p>
                <p>
                  For full Lace Wig and 360 Lace Wig: The size of our full lace
                  wigs and 360 lace wigs could not be changed.
                </p>
                <p>
                  For U-part Wig and Headband Wig: The cap size of U-part wigs
                  and headband wigs could not be changed, but the U-part wig’s
                  top is empty so you can adjust the wig according to your head
                  size, and the headband wig’s cap can be available with
                  adjustable strap, elastic velcro snapping design wig with 5
                  Clips, which can fit all head sizes perfectly, cap can be
                  available with adjustable strap.
                </p>
                <p>For lace front / lace closure wig:</p>
                <p>
                  (1) Small Size is 21.5 inches, Large Size is 23.5 inches, you
                  should know your own size and make a suitable decision.
                </p>
                <p>
                  (2) If you change to those special cap sizes, you may need to
                  wait about another extra 5-10 days. Would you like to wait? If
                  you can wait and you want to ask for the small/big cap, please
                  remember to leave the comments about it when you check out or
                  send emails to us. Customer service email:{" "}
                  <a
                    href="mailto:server@asteriahair.com"
                    className="text-blue-600 underline"
                  >
                    server@asteriahair.com
                  </a>
                  .
                </p>
                <p>
                  (3) Custom-sized hairnets are subject to an additional charge
                  of approximately $10.
                </p>
              </div>
            ),
          },
          {
            q: "Does your wig come in bleached?",
            a: (
              <p>
                Yes, The lace of our wigs are slightly bleached under the
                condition that the hair would not shed, if you need more
                bleaching, we advise to find a professional hairstylist to help.
              </p>
            ),
          },
          {
            q: "Is your wig pre plucked?",
            a: (
              <p>
                Yes, all of our wigs come slightly pre plucked, you can
                customize it to your liking once you receive it.
              </p>
            ),
          },
          {
            q: "Can your hair be dyed / bleached?",
            a: (
              <div className="space-y-2">
                <p>
                  Yes. Our hairs are 100% human virgin hair and all our natural
                  color hair can be dyed or bleached to #27, as a general rule
                  it is easier to darken the hair than to lighter the hair. We
                  do suggest getting a professional opinion by an experienced
                  colorist and having your hairdresser dye the hair as you will
                  get the results you want, coloring them yourself always poses
                  a high risk of not coming out the shade you want.
                </p>
                <p>
                  We would advise for a one clip weft to be tested prior to
                  coloring or restyling the full set to make sure the resulting
                  shade is what you anticipate.
                </p>
                <p>
                  Note: Any dyeing and bleaching is done at the customer's own
                  discretion and we cannot be held accountable if the results do
                  not come out as intended.
                </p>
              </div>
            ),
          },
          {
            q: "How many hair bundles can make a full head?",
            a: (
              <p>
                Normally the weight of 1 bundle is 95g-105g,we suggest you to
                take 3-4 bundles for a full head,Especially for the length from
                20inch to 30inch,4 bundles are necessary.
              </p>
            ),
          },
        ],
      },
      {
        title: "3. About Payment",
        items: [
          {
            q: "What types of payment do you accept?",
            a: (
              <p>
                We accept the following payment methods: Paypal, Credit Cards
                (Visa Card, MasterCard, and American Express), Klarna, Western
                Union, Moneygram. If you have any payment problems, please
                contact with us:{" "}
                <a
                  href="mailto:server@asteriahair.com"
                  className="text-blue-600 underline"
                >
                  server@asteriahair.com
                </a>
                .
              </p>
            ),
          },
          {
            q: "Do you accept payment by installment?",
            a: <p>Yes, Now we support PayPal Pay later and Klarna payment.</p>,
          },
          {
            q: "When I pay via PayPal, do I have to have a PayPal account? Can I use credit cards?",
            a: (
              <p>
                It is not necessary to have a PayPal account to order, you can
                pay with Credit/Debit Card directly. When you check out, please
                click paypal button, then you can choose the "Pay with Credit
                Card" on pop-up payment page.
              </p>
            ),
          },
          {
            q: "Why is my card declined?",
            a: (
              <p>
                Sometimes when your card is expired, insufficient balance or
                poor credit which may have a record of Chargeback or others will
                lead to card declined when paying. So we suggest customers not
                take a dispute for no reasons, because your credit record will
                be affected, and your next shopping will be declined. When your
                card is declined, you can call your bank for the problem. Or you
                can try another card. If you still have problems, please send an
                email to us :{" "}
                <a
                  href="mailto:server@asteriahair.com"
                  className="text-blue-600 underline"
                >
                  server@asteriahair.com
                </a>
                .
              </p>
            ),
          },
          {
            q: "Why did my payment fail?",
            a: (
              <div className="space-y-2">
                <p>
                  If your payment for an order has failed, please check it is
                  not due to the following situations:
                </p>
                <p>
                  (1) Card security code failed, Please note that an incorrect
                  card security code could cause payment failure. Card security
                  code is the short numeric code on the back of your credit
                  card. Please verify that you have entered the correct card
                  security code and try again.
                </p>
                <p>
                  (2) Insufficient fund, If you meet the insufficient fund error
                  log when you make payment by credit card, please make sure
                  that you have sufficient funds in your account and that
                  payment for your order does not exceed your credit limit.
                </p>
                <p>
                  (3) Please also make sure you have used a Visa or MasterCard
                  personal credit card to finish payment, because at present
                  debit card or business card is unable to be supported.
                </p>
                <p>
                  (4) Exceed limit, Please make sure the order amount does not
                  exceed your credit limit,or the payment is unable to go
                  through smoothly.
                </p>
              </div>
            ),
          },
          {
            q: "If I pay on your website, Is my information safe?",
            a: (
              <p>
                We are sure that our website is legal, which has been certified
                by the card organization. So please don’t worry about that. Your
                payment information is kept by your bank or card organization,
                but not saved by us. We only use your shipping info for
                delivery. Your information is safe and we will keep your
                information confidential.
              </p>
            ),
          },
          {
            q: "Can you send me an invoice?",
            a: (
              <p>
                Yes, we can send you the invoice via Paypal Or Klarna if you
                need, just feel free to contact us via email:{" "}
                <a
                  href="mailto:server@asteriahair.com"
                  className="text-blue-600 underline"
                >
                  server@asteriahair.com
                </a>
                .
              </p>
            ),
          },
        ],
      },
      {
        title: "4. About Shipment",
        items: [
          {
            q: "How long will my hair be shipped after I place an order?",
            a: (
              <p>
                Generally, your package will be shipped within 24 hours after
                order confirm (except Weekends and Holiday). However, we may
                need to wait for 2 or 3 days for the stock at times, thus the
                delivery will be delayed for 2 or 3 days.
              </p>
            ),
          },
          {
            q: "Which express do you use? How long can I receive my order?",
            a: (
              <p>
                We use DHL, FedEx , USPS, GES, TNT, DPEX or UPS. Generally, the
                package will be delivered within 3-7 business days to most
                countries once shipped out. The time you receive your order will
                depend on many factors, such as the shipping method and the
                location of the shipping address. Please be aware of that bad
                weathers, pandemic may cause the shipping delays sometimes. Once
                your order has shipped out, you will receive the tracking number
                by email.
              </p>
            ),
          },
          {
            q: "Can you provide the Overnight / Expedite shipping service?",
            a: (
              <p>
                1-2 day expedite shipping is available for USA orders if the
                hair you want is in stock in our US warehouse. Please contact us
                to confirm it before you order. Our Customer service email:{" "}
                <a
                  href="mailto:server@asteriahair.com"
                  className="text-blue-600 underline"
                >
                  server@asteriahair.com
                </a>
                .
              </p>
            ),
          },
          {
            q: "Can I receive my order on Saturday or Sunday?",
            a: (
              <p>
                Most express companies are weekend off. If the package has been
                arrived your city, you can go to the local sites to pick it up.
              </p>
            ),
          },
          {
            q: "I am in a remote area, can you ship it?",
            a: (
              <p>
                Generally, we can ship to most of the countries and regions
                worldwide, but individual places may be charged remote fees. If
                the zip code in the area can not be found on the express
                delivery system, we will not be able to ship it, you need to
                provide a new address.
              </p>
            ),
          },
          {
            q: "Can I use Po.box as the shipping address?",
            a: (
              <p>
                We don't accept PO.box (including FPO or APO) as the shipping
                address, because the Express(DHL/FedEx/UPS/USPS/GES/TNT) can't
                deliver and we only accept the physical address as shipping
                address.
              </p>
            ),
          },
        ],
      },
      {
        title: "5. About Account",
        items: [
          {
            q: "How to register a member?",
            a: (
              <div className="space-y-1">
                <p>(1) Open the Web page, click on the "sign up".</p>
                <p>
                  (2) You need fill out your mailbox address、password and
                  telephone number.
                </p>
                <p>
                  (3) Click “Create An Account” the specified page appears, you
                  need to improve your information.
                </p>
              </div>
            ),
          },
          {
            q: "How to reset my password?",
            a: (
              <p>
                Go to sign in page and click forget password. We will quickly
                email you a link to reset your password, if you don't get the
                email, please check your spam email at first. If still no email,
                please feel free to contact customer service, we can help reset
                your password.
              </p>
            ),
          },
          {
            q: "How can I check my reward points?",
            a: (
              <p>
                Please be aware of that you need to be registered to earn and
                spend Reward Points. Sign in your account and you can check your
                reward points at “Points” Section. For more details, please
                check our reward points page.
              </p>
            ),
          },
        ],
      },
    ],
  },
  {
    groupTitle: "Question After Purchase",
    sections: [
      {
        title: "1. About Track Order",
        items: [
          {
            q: "How to track my order?",
            a: (
              <div className="space-y-2">
                <p>
                  Method 1: Log into “MY ACCOUNT” to view the status of your
                  order Track your shipment by using the tracking number
                  provided to you once your items have been shipped. You cannot
                  track your order before it has been shipped. If you don’t know
                  what your tracking number is or if you’re having difficulty
                  tracking your package, please feel free to contact our
                  customer service department for assistance.
                </p>
                <p>
                  Method 2: You can use your order number or shipment number to
                  track your order though our Track Order page.
                </p>
              </div>
            ),
          },
          {
            q: "Why haven't I received my order yet?",
            a: (
              <p>
                Once the package has been shipped out, we will email you the
                tracking number, you can check the status. If not, please feel
                free to contact our customer service:{" "}
                <a
                  href="mailto:server@asteriahair.com"
                  className="text-blue-600 underline"
                >
                  server@asteriahair.com
                </a>
                , we will help you to check it.
              </p>
            ),
          },
          {
            q: "Why is the shipment of my order always at the pending status?",
            a: (
              <p>
                If it shows abnormality or pending in short time, that maybe
                normal transport state. If it lasts a long time( over 1 day),
                you can call the DHL/FedEx/UPS/USPS/TNT to ask about what is
                going on about it. Or you can send us the Email to{" "}
                <a
                  href="mailto:server@asteriahair.com"
                  className="text-blue-600 underline"
                >
                  server@asteriahair.com
                </a>
                , we will help you out.
              </p>
            ),
          },
          {
            q: "If I'm not at home, how can I sign for my package? Can I have a delivery service without signature",
            a: (
              <p>
                If you are not at home, you can ask your family and neighbors to
                sign for it for you, or you can contact the local express
                customer service and reschedule with them to deliver your
                package, or you can choose to pick up the package yourself. In
                order for you to successfully receive the package, we recommend
                that you sign for it yourself, after you applied the service
                without signature, if the package is lost or stolen, we do not
                take any responsibility.
              </p>
            ),
          },
          {
            q: "Why the shipment status shows that I have signed. But I did not receive the parcel yet.",
            a: (
              <p>
                Once that happens, it means someone has signed the package for
                you. It may be your neighbor or family and friends, It is also
                possible that the courier drop your package around your house.
                Please confirm it first. If not, please contact the express
                company first to tell them your situation and let them help you
                find the package, and please ask them as many details as
                possible, whch is important to find the package later.
              </p>
            ),
          },
        ],
      },
      {
        title: "2. About Return / Refunds",
        items: [
          {
            q: "What is your return & exchange policy?",
            a: (
              <p>
                We offer 30 days no reason return if the hair is in its original
                state. For more details please check our return policy /
                exchange policy page.
              </p>
            ),
          },
          {
            q: "When will I get a refund after returning the package?",
            a: (
              <p>
                A full refund will be provided to the original method of payment
                after we have received, inspected and confirmed. All customers
                must contact us after sending the package back and provide us
                with the tracking information in order for us to process the
                refund. Some financial institutions can take up to 3 business
                days to process the refund. Please allow a few business days for
                your financial institution to reflect the refund on your
                statement prior to contacting us.
              </p>
            ),
          },
          {
            q: "If I refuse to accept the package, can I get a full refund?",
            a: (
              <p>
                We do not accept the refusal without any reasons. If you refuse
                to sign the package and lead to the return, you will need to pay
                for the return shipping and the shipping fee we paid the first
                time. Any expenses incurred during the return of the parcel will
                also be deducted from your payment. So we suggest that customers
                contact us within 24 hours via email before shipping if they
                have any problems (such as place the wrong order/ want to cancel
                /want to exchange), so that we can help you to solve it timely.
              </p>
            ),
          },
        ],
      },
    ],
  },
];
export default function Faqs() {
  const [openSections, setOpenSections] = useState<string[]>([]);
  const [openItems, setOpenItems] = useState<string[]>([]);

  const toggleSection = (g: number, s: number) => {
    const k = `${g}-${s}`;
    setOpenSections((p) =>
      p.includes(k) ? p.filter((x) => x !== k) : [...p, k],
    );
  };

  const toggleItem = (g: number, s: number, i: number) => {
    const k = `${g}-${s}-${i}`;
    setOpenItems((p) => (p.includes(k) ? p.filter((x) => x !== k) : [...p, k]));
  };

  return (
    <>
      <HeadBack />
      <div className="max-w-4xl mx-auto px-4 py-12">
        {faqData.map((group, groupIdx) => (
          <div key={groupIdx} className="mb-14">
            <h2 className="text-2xl font-bold mb-6 text-gray-800">
              {group.groupTitle}
            </h2>

            <div className="space-y-4">
              {group.sections.map((sec, secIdx) => {
                const secKey = `${groupIdx}-${secIdx}`;
                const secOpen = openSections.includes(secKey);

                return (
                  <div
                    key={secKey}
                    className="border border-gray-200 rounded-lg overflow-hidden"
                  >
                    <button
                      onClick={() => toggleSection(groupIdx, secIdx)}
                      className="w-full flex justify-between items-center px-5 py-3 bg-gray-50 text-left font-semibold text-gray-800"
                    >
                      {sec.title}
                      <span className="text-xl">{secOpen ? "−" : "+"}</span>
                    </button>

                    {secOpen && (
                      <div className="divide-y divide-gray-100">
                        {sec.items.map((item, itemIdx) => {
                          const itemKey = `${groupIdx}-${secIdx}-${itemIdx}`;
                          const itemOpen = openItems.includes(itemKey);

                          return (
                            <div key={itemKey} className="px-5 py-4">
                              <button
                                onClick={() =>
                                  toggleItem(groupIdx, secIdx, itemIdx)
                                }
                                className="w-full flex justify-between items-center text-left font-medium text-gray-700"
                              >
                                <span>{item.q}</span>
                                <span className="text-xl ml-2">
                                  {itemOpen ? "−" : "+"}
                                </span>
                              </button>

                              {itemOpen && (
                                <div className="mt-3 text-gray-600 text-sm md:text-base">
                                  {item.a}
                                </div>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </>
  );
}