marriage/src/components/sliders/slider-slide-one.tsx

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

const ACTION_AREA_HEIGHT = 78;
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"
        style={{
          paddingBottom: ACTION_AREA_HEIGHT,
          WebkitMaskImage: CONTENT_MASK,
          maskImage: CONTENT_MASK,
        }}
      >
        <div className="text-center">
          <p className="text-[#747474] group-10 font-semibold">Submit Process</p>
          <p className="text-[#111111] group-16 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] group-12 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-2xl mt-4 overflow-y-auto shadow-xs">
          <div className="space-y-6 px-5 py-5">
            <div className="space-y-3.5">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                1. Eligibility and Membership Requirements
              </h3>

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

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

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

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

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

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                2. Privacy and Data Management
              </h3>

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

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

type SliderSlideOneActionsProps = {
  onAccept: () => void;
};

export function SliderSlideOneActions({
  onAccept,
}: SliderSlideOneActionsProps) {
  return (
    <div className="flex gap-3 [&>a]:flex-1">
      <Button variant="outlined" arrowDirection="left" href="/intro">
        Back
      </Button>
      <Button
        variant="countdown"
        countdownSeconds={0}
        onClick={onAccept}
        className="flex-1"
      >
        Accept
      </Button>
    </div>
  );
}