import type { SliderSlideProps } from "@/components/sliders/slider-slide";
import Button from "../ui/button";

const ACTION_AREA_HEIGHT = 112;
const CONTENT_MASK = `linear-gradient(to bottom, black 0, black calc(100% - ${ACTION_AREA_HEIGHT}px), transparent calc(100% - ${ACTION_AREA_HEIGHT}px), transparent 100%)`;

export function SliderSlideOne({ index }: SliderSlideProps) {
  return (
    <section
      aria-label={`Slide ${index + 1}`}
      className="flex h-full min-h-0 w-full shrink-0 flex-col"
    >
      <div
        className="min-h-0 flex-1 overflow-y-auto pb-28"
        style={{
          WebkitMaskImage: CONTENT_MASK,
          maskImage: CONTENT_MASK,
        }}
      >
        <div className="text-center">
          <p className="text-[#747474] text-xs font-semibold">Submit Process</p>
          <p className="text-[#111111] font-bold">
            {index + 1}/4 terms & conditions
          </p>
        </div>
        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
          <p className="text-[#F14B46] text-xs font-semibold text-center">
            Dear user, while welcoming you to the Habib Marij application,
            please read the following rules and regulations carefully before
            using the services of this platform. Your registration and use of
            this application constitutes full acceptance of these rules.
          </p>
        </div>
        <div className="bg-white rounded-xl mt-3">
          <div className="space-y-6 px-5 py-4">
            <div className="space-y-4">
              <p className="text-[#F14B46] text-[14px] font-bold">
                1. Eligibility and Membership Requirements
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">Legal Age:</span>{" "}
                <span className="font-normal">
                  Users must meet the minimum legal age for independent
                  registration.
                </span>
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">Identity Verification:</span>{" "}
                <span className="font-normal">
                  Mandatory submission of valid government-issued ID upon
                  registration.
                </span>
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">Single Status Commitment:</span>{" "}
                <span className="font-normal">
                  Users must provide proof of being single, or documents
                  confirming divorce or spouse&apos;s death upon request.
                </span>
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">Intent:</span>{" "}
                <span className="font-normal">
                  Commitment to monogamy and intention for permanent marriage
                  only (no simultaneous or temporary relationships).
                </span>
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">General Health:</span>{" "}
                <span className="font-normal">
                  Self-declaration regarding mental health, absence of
                  addiction, and no criminal record.
                </span>
              </p>
            </div>

            <div className="space-y-4">
              <p className="text-[#F14B46] text-[14px] font-bold">
                2. Privacy and Data Management
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">Content Security:</span>{" "}
                <span className="font-normal">
                  Technical prevention of screenshots from profiles and chat
                  environments.
                </span>
              </p>

              <p className="text-[#4D4D4D] text-[12px] leading-7">
                <span className="font-bold">Progressive Disclosure:</span>{" "}
                <span className="font-normal">
                  Sensitive information (face, contact details) revealed
                  step-by-step only with mutual consent.
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export function SliderSlideOneActions() {
  return (
    <div className="flex gap-3">
      <Button variant="outlined">Decline</Button>
      <Button variant="countdown" countdownSeconds={10}>
        Accept
      </Button>
    </div>
  );
}