"use client";
import Image from "next/image";
export default function PointsRuleModal({
  visible,
  handleCloseModal,
}: {
  visible: boolean;
  handleCloseModal: () => void;
}) {
  // 如果不显示，直接 return null
  if (!visible) return null;

  return (
    <div
      id="modal-overlay"
      onClick={handleCloseModal}
      className="fixed inset-0 bg-black/70 z-50 flex items-start justify-center overflow-y-auto"
    >
      {/* 弹窗内容区 */}
      <div className="bg-white w-full max-w-2xl max-h-[100vh] overflow-y-auto  p-6 pt-16 ">
        {/* 返回按钮 */}
        <button
          id="back-btn"
          onClick={handleCloseModal}
          className="fixed w-full bg-[#000] h-15.5 leading-15.5 justify-center text-xl  left-0 top-0  z-50 mb-4 flex items-center gap-1 text-white  transition-colors"
        >
            <Image src="/image/account/202605201502.png" width={22} style={{left:"8.2051vw",position:"absolute"}} height={22} alt="back" />
         POINTS RULES
        </button>

        <div className="space-y-6">
          {/* What Are Reward Points? */}
          <section className="space-y-2">
            <h3 className="text-lg font-bold text-black">
              What Are Reward Points?
            </h3>
            <p className="text-sm text-gray-700 leading-relaxed">
              We love to say thank you to our loyal customers for shopping with
              us. Reward Points are an added bonus and just one of the ways we
              like to say thanks. You can earn Points for every purchase you
              make online, as well as bonus Points for other actions such as
              referring a friend. Any Points you earn can be used towards your
              future purchases online.
            </p>
          </section>

          {/* How do I get Bonus Point? */}
          <section className="space-y-3">
            <h3 className="text-lg font-bold text-black">
              How do I get Bonus Point?
            </h3>
            <p className="text-sm text-gray-700">
              You can get bonus point from the following methods.
            </p>
            <ol className="list-decimal pl-5 space-y-2 text-sm text-gray-700">
              <li>
                <span className="font-bold">Buy and Save</span>
                <p className="pl-2">
                  You'll earn 1 point for every dollar spent on your purchase.
                </p>
              </li>
              <li>
                <span className="font-bold">Registration</span>
                <p className="pl-2">
                  You can get 200 bonus points for register to be Alipearl Hair
                  Hair New Member.
                </p>
              </li>
              <li>
                <span className="font-bold">Sign In</span>
                <p className="pl-2">
                  You can get 10 bonus points when you sign in every time and
                  the total amount you can get in one day is 10 bonus points
                  only.
                </p>
              </li>
              <li>
                <span className="font-bold">Reviewing Our Products</span>
                <p className="pl-2">
                  You can earn points from writing reviews on our products.
                  Submitting your review earn 50 points. Under this
                  circumstance, all you can get in one day is 50 bonus points
                  only.
                </p>
              </li>
              <li>
                <span className="font-bold">Referring A friend</span>
                <p className="pl-2">
                  Want to share the love with your friends and family? Invite
                  them to shop with us and as a thank you we'll award you 200
                  Reward Points when they place their first order. Head to the
                  My Invitations section of your account.
                </p>
              </li>
            </ol>
          </section>

          {/* Do I have to be registered to earn Points? */}
          <section className="space-y-2">
            <h3 className="text-lg font-bold text-black">
              Do I have to be registered to earn Points?
            </h3>
            <p className="text-sm text-gray-700 leading-relaxed">
              Yes you need to be registered to earn and spend Reward Points.
              Registering an account is easy, and can be done prior to placing
              your first order, or as part of the checkout process. Once you're
              registered, simply sign in to your account before placing any
              orders. Each time you make a purchase you'll then automatically
              earn Points, which will be available for you to use at checkout on
              future orders.
            </p>
          </section>

          {/* Do my Reward Points expire? */}
          <section className="space-y-2">
            <h3 className="text-lg font-bold text-black">
              Do my Reward Points expire?
            </h3>
            <p className="text-sm text-gray-700">
              Yes, any unused Reward Points expire after 6 months (180 days).
            </p>
          </section>

          {/* Is there a maximum amount of Reward Points I can redeem per order? */}
          <section className="space-y-2">
            <h3 className="text-lg font-bold text-black">
              Is there a maximum amount of Reward Points I can redeem per order?
            </h3>
            <p className="text-sm text-gray-700">
              Yes, the maximum reward points amount that you can redeem per
              order is 20000 points.
            </p>
          </section>

          {/* What are my Reward Points Worth? */}
          <section className="space-y-2">
            <h3 className="text-lg font-bold text-black">
              What are my Reward Points Worth?
            </h3>
            <p className="text-sm text-gray-700">
              100 Rewards Points = $1.25 which can be used towards any future
              purchases.
            </p>
          </section>

          {/* Terms of Use */}
          <section className="space-y-2">
            <h3 className="text-lg font-bold text-black">Terms of Use</h3>
            <p className="text-sm text-gray-700 leading-relaxed">
              Your participation in the Rewards Points programme and the
              administration of your Rewards Points balance is entirely at our
              discretion. We reserve the right to cancel your account or adjust
              your Reward Points balance without notice or explanation.
              <br />
              If you earn or spend Points for an order which is subsequently
              cancelled or amended for any reason, we reserve the right to
              reverse some or all of the Points earned at our discretion.
              <br />
              If you earn Points for referring additional customers, we reserve
              the right to review these new customer accounts, and reverse some
              or all of the Points earned at our discretion.
              <br />
              Reward Points are not legal tender and are in no way redeemable
              for cash or any other benefit.
              <br />
              Reward Points balances are not transferable under any
              circumstances.
              <br />
              Your use of the Reward Points programme indicates your acceptance
              of these terms of us.
            </p>
          </section>
        </div>
      </div>
    </div>
  );
}
