<button
  type="button"
  class="btn"
  data-sp-toggle="dialog"
  data-sp-target="#dialog-12"
>
  Review terms
</button>
<dialog
  id="dialog-12"
  class="dialog"
  aria-labelledby="dialog-12-title"
  aria-describedby="dialog-12-description"
>
  <div class="dialog-backdrop"></div>
  <div class="dialog-panel">
    <button
      type="button"
      class="btn btn-ghost btn-icon-xs absolute top-3 right-3"
      aria-label="Close"
      data-sp-dismiss="dialog"
    >
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
    </button>
    <div class="dialog-content grid gap-6">
      <div>
        <h2 id="dialog-12-title" class="text-lg font-semibold tracking-tight">
          Terms of Service
        </h2>
        <p
          id="dialog-12-description"
          class="text-sm/6 text-muted-foreground mt-2"
        >
          Please review our terms before continuing.
        </p>
      </div>
      <div
        class="max-h-64 overflow-y-auto rounded-md border bg-muted/50 p-4 text-sm/6 text-muted-foreground space-y-4"
      >
        <section>
          <h3 class="font-semibold text-foreground">1. Acceptance of Terms</h3>
          <p class="mt-1">
            By accessing or using this service, you agree to be bound by these
            Terms. If you do not agree to all of the terms, you may not use the
            service.
          </p>
        </section>
        <section>
          <h3 class="font-semibold text-foreground">2. Use of Service</h3>
          <p class="mt-1">
            You agree to use the service only for lawful purposes and in
            accordance with these Terms. You are responsible for all activity
            that occurs under your account.
          </p>
        </section>
        <section>
          <h3 class="font-semibold text-foreground">3. Privacy</h3>
          <p class="mt-1">
            Your use of the service is also governed by our Privacy Policy.
            Please review it to understand how we collect and use your
            information.
          </p>
        </section>
        <section>
          <h3 class="font-semibold text-foreground">4. Modifications</h3>
          <p class="mt-1">
            We may modify these Terms at any time. Continued use of the service
            after changes constitutes acceptance of the modified Terms.
          </p>
        </section>
        <section>
          <h3 class="font-semibold text-foreground">5. Termination</h3>
          <p class="mt-1">
            We reserve the right to suspend or terminate your access to the
            service at any time, for any reason, without notice.
          </p>
        </section>
      </div>
      <form class="grid gap-6">
        <label class="flex items-center gap-2 text-sm">
          <input
            type="checkbox"
            class="checkbox peer"
            required=""
            name="agree"
          />
          I agree to the Terms of Service
        </label>
        <div class="grid grid-cols-2 gap-2">
          <button type="button" class="btn" data-sp-dismiss="dialog">
            Cancel
          </button>
          <button
            type="submit"
            class="btn btn-primary peer-not-checked:opacity-50 peer-not-checked:pointer-events-none"
          >
            Continue
          </button>
        </div>
      </form>
    </div>
  </div>
</dialog>