frontend/src/components/TermsModal.tsx

import {XMarkIcon} from "@heroicons/react/24/outline";

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function TOSModalComponent({isOpen, onClose}: ModalProps) {
  if (!isOpen) return null;

  return (
    <div className="modal modal-open">
      <div className="modal-box max-w-4xl bg-gray-800 text-white border border-gray-600">
        <div className="flex justify-between items-center mb-6">
          <h3 className="font-bold text-xl text-blue-300">
            Omnilingual ASR Demo Supplemental Terms of Service
          </h3>
          <button
            className="btn btn-sm btn-circle btn-ghost text-gray-300 hover:text-white hover:bg-gray-700"
            onClick={onClose}
            aria-label="Close modal"
          >
            <XMarkIcon className="w-5 h-5" />
          </button>
        </div>

        <div className="space-y-4 max-h-96 overflow-y-auto">
          <div className="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500">
            <div className="text-gray-200 leading-relaxed space-y-4">
              <p>
                These Omnilingual ASR Demo Supplemental Terms of Service (these
                "Supplemental Terms") govern your use of the Omnilingual ASR
                demonstration experience hosted on Hugging Face (the "Demo").
                The Demo showcases Meta's Omnilingual ASR research model for
                transcribing audio and video files.
              </p>
              <p>
                By using the Demo, you agree to be bound by these Supplemental
                Terms, as well as Hugging Face's applicable terms and policies,
                including Hugging Face's Terms of Service and Privacy Policy. If
                you access any Meta service in connection with the Demo, Meta's
                Terms of Service and Privacy Policy may also apply to that
                separate access; however, as described below, Meta does not
                receive your Demo data.
              </p>

              <ol className="list-decimal list-outside ml-6 space-y-4">
                <li>
                  <strong>What the Demo Does</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      The Demo uses an automatic speech recognition model
                      developed by Meta to generate text transcriptions and
                      related metadata (e.g., timestamps) from audio or video
                      files you choose to provide ("Transcripts," and together
                      with any related metadata, "Outputs").
                    </li>
                    <li>
                      The audio and/or video files and any associated
                      information you provide (collectively, "Inputs") are
                      processed solely to provide you with Outputs via the Demo.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Hosting; No Data to Meta</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      The Demo is hosted exclusively on Hugging Face
                      infrastructure. Meta does not operate the Demo's hosting
                      environment, and no Inputs, Outputs, or related usage data
                      from or about users of the Demo are transmitted to Meta.
                    </li>
                    <li>
                      Hugging Face (and, where applicable, the Hugging Face
                      Space owner) determines the means and purposes of
                      processing of any personal data you provide via the Demo.
                      Please review Hugging Face's Terms of Service and Privacy
                      Policy, which govern your use of the Demo and the handling
                      of your data on the platform.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Your Rights and Restrictions</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      Subject to your compliance with these Supplemental Terms
                      and any applicable Hugging Face terms, Meta grants you a
                      limited, non-exclusive, non-transferable,
                      non-sublicensable license to access and use the Demo and
                      to access the Outputs made available through the Demo.
                    </li>
                    <li>
                      You may not use the Demo or Outputs for unlawful,
                      infringing, deceptive, harmful, or discriminatory
                      purposes, to violate others' rights (including privacy,
                      publicity, or intellectual property), or to cause or
                      attempt to cause harm.
                    </li>
                    <li>
                      You are responsible for ensuring you have all necessary
                      rights, permissions, and lawful bases to upload and
                      process Inputs, including any third-party content or
                      personal data contained in the Inputs. Do not upload
                      sensitive personal data unless you have a lawful basis and
                      it is permitted under applicable law.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Inputs and Outputs; Licenses</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      As between you and Meta, you retain any rights you have in
                      your Inputs and Outputs. Because Meta does not receive
                      your Inputs or Outputs from the Demo, you do not grant
                      Meta any license to those materials via this Demo.
                    </li>
                    <li>
                      Your relationship regarding content licenses with Hugging
                      Face (and/or the Space owner) is governed by Hugging Face
                      terms. Meta makes no representations regarding how Hugging
                      Face handles or stores Inputs or Outputs.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Feedback</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      If you choose to provide feedback to Meta outside the Demo
                      (for example, by emailing Meta or submitting feedback
                      through a Meta-managed channel), you grant Meta and its
                      affiliates a perpetual, irrevocable, non-exclusive,
                      sublicensable, transferable, royalty-free license to use
                      that feedback for any purpose. Do not include personal
                      data or confidential information in feedback.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Third-Party Platform Terms</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      Your use of the Demo is also subject to Hugging Face's
                      Terms of Service and Privacy Policy. Any data collection,
                      retention, storage, caching, logging, or sharing related
                      to your use of the Demo is handled by Hugging Face (and/or
                      the Space owner) under those terms and policies. Meta is
                      not responsible for and has no control over Hugging Face's
                      processing.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Age; Availability</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      You represent that you are at least the age of majority in
                      your jurisdiction. The Demo is made available for research
                      and demonstration purposes and may be modified, suspended,
                      or discontinued at any time without notice.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Model and Demo Limitations</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      The Demo and Outputs may be inaccurate, incomplete,
                      untimely, or inappropriate for your use case. Do not rely
                      on the Demo or Outputs for medical, legal, safety, or
                      other high-risk purposes. You are solely responsible for
                      your use of the Demo and Outputs.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Intellectual Property</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      Except for the limited rights expressly granted here, Meta
                      and its licensors retain all right, title, and interest in
                      and to the Demo, the Omnilingual ASR model, and all
                      related intellectual property.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Termination</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      These Supplemental Terms are effective until terminated.
                      Meta may terminate or suspend your access to the Demo or
                      terminate these Supplemental Terms at any time for any
                      reason. Upon termination, your rights under these
                      Supplemental Terms will immediately cease.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Disclaimers</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      The Demo and Outputs are provided "AS IS" and "AS
                      AVAILABLE." To the fullest extent permitted by law, Meta
                      and its affiliates disclaim all warranties, express or
                      implied, including warranties of merchantability, fitness
                      for a particular purpose, non-infringement, accuracy, and
                      quiet enjoyment. Meta does not warrant that the Demo will
                      be uninterrupted, secure, error-free, or that Outputs will
                      be accurate or reliable.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Limitation of Liability</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      To the fullest extent permitted by law, in no event will
                      Meta or its affiliates, or their respective directors,
                      officers, employees, licensors, agents, or assigns be
                      liable for any indirect, incidental, consequential,
                      special, punitive, or exemplary damages, or lost profits,
                      arising out of or relating to the Demo or these
                      Supplemental Terms, even if advised of the possibility of
                      such damages. Without limiting the foregoing, the maximum
                      aggregate liability of Meta and its affiliates for all
                      claims arising out of or relating to the Demo or these
                      Supplemental Terms is fifty dollars (US $50).
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Indemnity</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      You will indemnify and hold harmless Meta and its
                      affiliates, and their respective directors, officers,
                      employees, licensors, agents, and assigns from and against
                      any claims, liabilities, damages, losses, and expenses
                      (including reasonable attorneys' fees) arising out of or
                      related to: (a) your Inputs or your use of the Demo or
                      Outputs; (b) your violation of these Supplemental Terms or
                      any applicable law; or (c) your infringement or violation
                      of any third-party rights.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Governing Law; Venue</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      These Supplemental Terms and any claim, cause of action,
                      or dispute arising out of or relating to them or the Demo
                      will be governed by the laws of the State of California,
                      without regard to conflict of law principles. You agree
                      that all such claims will be brought exclusively in the
                      U.S. District Court for the Northern District of
                      California or the state courts located in San Mateo
                      County, California, and you consent to the personal
                      jurisdiction of those courts.
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Miscellaneous</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      If any provision of these Supplemental Terms is found
                      invalid or unenforceable, that provision will be enforced
                      to the maximum extent permissible and the remaining
                      provisions will remain in full force and effect. You may
                      not assign these Supplemental Terms without Meta's prior
                      written consent; any attempted assignment without consent
                      is void. Meta may assign these Supplemental Terms without
                      restriction. No waiver of any term will be deemed a
                      further or continuing waiver of such term or any other
                      term. These Supplemental Terms constitute the entire
                      agreement between you and Meta regarding the Demo and
                      supersede all prior or contemporaneous understandings
                      regarding the Demo.
                    </li>
                  </ul>
                </li>
              </ol>

              <div className="mt-4">
                <strong>Contact</strong>
                <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                  <li>
                    For questions about these Supplemental Terms, contact Meta
                    at asr_demo_support@meta.com. Note: Do not include personal
                    data or any Demo Inputs or Outputs in your communications,
                    as Meta does not receive or process Demo data.
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function AUPModalComponent({isOpen, onClose}: ModalProps) {
  if (!isOpen) return null;

  return (
    <div className="modal modal-open">
      <div className="modal-box max-w-4xl bg-gray-800 text-white border border-gray-600">
        <div className="flex justify-between items-center mb-6">
          <h3 className="font-bold text-xl text-blue-300">
            Omnilingual ASR Demo Acceptable Use Policy
          </h3>
          <button
            className="btn btn-sm btn-circle btn-ghost text-gray-300 hover:text-white hover:bg-gray-700"
            onClick={onClose}
            aria-label="Close modal"
          >
            <XMarkIcon className="w-5 h-5" />
          </button>
        </div>

        <div className="space-y-4 max-h-96 overflow-y-auto">
          <div className="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500">
            <div className="text-gray-200 leading-relaxed space-y-4">
              <p>
                Meta is committed to promoting safe and responsible use of its
                research tools, including the Omnilingual ASR Demo (the "Demo").
                By accessing or using the Demo, you agree to comply with this
                Acceptable Use Policy ("Policy") in addition to any applicable
                Hugging Face terms and policies. The most recent version of this
                Policy will be made available on the Demo's Hugging Face page.
              </p>

              <h4 className="font-semibold text-blue-200 mt-4">
                Prohibited Uses
              </h4>
              <p>
                To ensure the Demo is used safely and fairly, you agree that you
                will not use, or allow others to use, the Demo or any outputs
                from the Demo to:
              </p>

              <ol className="list-decimal list-outside ml-6 space-y-4">
                <li>
                  <strong>Violate the Law or Others' Rights</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-2">
                    <li>
                      Engage in, promote, generate, contribute to, encourage,
                      plan, incite, or further illegal or unlawful activity or
                      content, including but not limited to:
                      <ul className="list-[circle] list-outside ml-6 mt-1 space-y-1">
                        <li>Violence or terrorism</li>
                        <li>
                          Exploitation or harm to children, including the
                          solicitation, creation, acquisition, or dissemination
                          of child exploitative content or failure to report
                          Child Sexual Abuse Material
                        </li>
                        <li>
                          Human trafficking, exploitation, and sexual violence
                        </li>
                        <li>
                          The illegal distribution of information or materials
                          to minors, including obscene materials, or failure to
                          employ legally required age-gating in connection with
                          such information or materials
                        </li>
                        <li>Sexual solicitation</li>
                        <li>Any other criminal activity</li>
                      </ul>
                    </li>
                    <li>
                      Engage in, promote, incite, or facilitate the harassment,
                      abuse, threatening, or bullying of individuals or groups
                    </li>
                    <li>
                      Engage in, promote, incite, or facilitate discrimination
                      or other unlawful or harmful conduct in the provision of
                      employment, credit, housing, or other essential goods and
                      services
                    </li>
                    <li>
                      Collect, process, disclose, generate, or infer health,
                      demographic, biometric, or other sensitive personal or
                      private information about individuals without all rights
                      and consents required by applicable laws
                    </li>
                    <li>
                      Infringe, misappropriate, or otherwise violate any
                      third-party rights, including intellectual property,
                      privacy, or publicity rights
                    </li>
                    <li>
                      Create, generate, or facilitate the creation of malicious
                      code, malware, computer viruses, or do anything else that
                      could disable, overburden, interfere with, or impair the
                      proper working, integrity, operation, or appearance of a
                      website or computer system
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Endanger Safety or Security</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-2">
                    <li>
                      Engage in, promote, incite, facilitate, or assist in the
                      planning or development of activities that present a risk
                      of death or bodily harm to individuals, including use of
                      the Demo related to:
                      <ul className="list-[circle] list-outside ml-6 mt-1 space-y-1">
                        <li>
                          Military, warfare, nuclear industries or applications,
                          espionage, or activities subject to the International
                          Traffic in Arms Regulations (ITAR)
                        </li>
                        <li>
                          Guns and illegal weapons (including weapon
                          development)
                        </li>
                        <li>
                          Illegal drugs and regulated/controlled substances
                        </li>
                        <li>
                          Operation of critical infrastructure, transportation
                          technologies, or heavy machinery
                        </li>
                        <li>
                          Self-harm or harm to others, including suicide,
                          cutting, and eating disorders
                        </li>
                        <li>
                          Any content intended to incite or promote violence,
                          abuse, or infliction of bodily harm
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Deceive or Mislead Others</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      Generate, promote, or further fraud, scams, phishing,
                      multi-level marketing or pyramid schemes, or any other
                      fraudulent activities
                    </li>
                    <li>
                      Generate, promote, or further defamatory content,
                      including the creation of defamatory statements or other
                      content
                    </li>
                    <li>Generate, promote, or further distribute spam</li>
                    <li>
                      Impersonate another individual by depiction of their voice
                      or likeness without consent, authorization, or legal
                      right, including non-consensual sexual imagery
                    </li>
                    <li>
                      Represent that the use of the Demo or its outputs are
                      human-generated, or use outputs in a manner intended to
                      convince another person that they are communicating with a
                      human
                    </li>
                    <li>
                      Generate or facilitate false online engagement, including
                      fake reviews or other means of fake online engagement
                    </li>
                    <li>
                      Engage in or facilitate any form of academic dishonesty,
                      including plagiarism
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>High-Risk or Sensitive Use Cases</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-1">
                    <li>
                      Fail to appropriately disclose to end users any known
                      dangers of your AI system
                    </li>
                    <li>
                      Engage in automated government decision-making in
                      high-risk contexts, including law enforcement, criminal
                      justice, immigration, or asylum, without a qualified
                      person reviewing the outputs
                    </li>
                    <li>
                      Use the Demo or its outputs for any decision-making
                      related to health, financial, safety, or legal matters
                    </li>
                  </ul>
                </li>

                <li>
                  <strong>Adult Content</strong>
                  <ul className="list-disc list-outside ml-6 mt-2 space-y-2">
                    <li>
                      Create, develop, access, or disseminate adult content,
                      including:
                      <ul className="list-[circle] list-outside ml-6 mt-1 space-y-1">
                        <li>Erotic, sexual, or romantic chats</li>
                        <li>Sexual solicitation</li>
                        <li>Pornography</li>
                        <li>
                          Content that describes or promotes sexual or adult
                          services
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ol>

              <div className="mt-4">
                <h4 className="font-semibold text-blue-200">
                  Reporting Violations
                </h4>
                <p className="mt-2">
                  If you become aware of any violation of this Policy, software
                  "bug," or other problem that could lead to a violation of this
                  Policy, please report it to: asr_demo_support@meta.com. Do not
                  include personal data or any Demo Inputs or Outputs in your
                  communications, as Meta does not receive or process Demo data.
                </p>
              </div>

              <div className="mt-4">
                <h4 className="font-semibold text-blue-200">Enforcement</h4>
                <p className="mt-2">
                  Meta reserves the right to investigate and take appropriate
                  action regarding any suspected or actual violation of this
                  Policy, including suspending or terminating access to the
                  Demo.
                </p>
              </div>

              <div className="mt-4">
                <h4 className="font-semibold text-blue-200">Contact</h4>
                <p className="mt-2">
                  For questions about this Policy, contact
                  asr_demo_support@meta.com.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function ModelReadmeModalComponent({isOpen, onClose}: ModalProps) {
  if (!isOpen) return null;

  return (
    <div className="modal modal-open">
      <div className="modal-box max-w-4xl bg-gray-800 text-white border border-gray-600">
        <div className="flex justify-between items-center mb-6">
          <h3 className="font-bold text-xl text-blue-300">Model Readme</h3>
          <button
            className="btn btn-sm btn-circle btn-ghost text-gray-300 hover:text-white hover:bg-gray-700"
            onClick={onClose}
            aria-label="Close modal"
          >
            <XMarkIcon className="w-5 h-5" />
          </button>
        </div>

        <div className="space-y-4 max-h-96 overflow-y-auto">
          <div className="bg-gray-700 p-4 rounded-lg border-l-4 border-blue-500">
            <div className="text-gray-200 leading-relaxed space-y-4">
              <div>
                <h4 className="font-semibold text-blue-200">Intended Use</h4>
                <p className="mt-2">
                  The Omnilingual ASR model is designed to transcribe audio and
                  video files into text, supporting a wide range of languages.
                  Users are encouraged to explore the model's capabilities in a
                  responsible manner, consistent with applicable laws and
                  ethical guidelines.
                </p>
              </div>

              <div>
                <h4 className="font-semibold text-blue-200">Out-of-scope</h4>
                <p className="mt-2">
                  The Omnilingual ASR model is intended for commercial and
                  research use in multiple languages. The following uses are
                  considered out of scope for the Omnilingual ASR model and are
                  strongly discouraged:
                </p>
                <ul className="list-disc list-outside ml-6 mt-2 space-y-2">
                  <li>
                    Uses that violate laws or infringe the rights of others,
                    including generating, promoting, or disseminating content
                    that is illegal, harassing, discriminatory, or otherwise
                    harmful.
                  </li>
                  <li>
                    Processing, generating, or inferring sensitive personal
                    information (such as health, demographic, biometric, or
                    private data) without appropriate rights and consents
                    required by law.
                  </li>
                  <li>
                    Use in high-risk or sensitive contexts, including but not
                    limited to:
                    <ul className="list-[circle] list-outside ml-6 mt-1 space-y-1">
                      <li>
                        Medical, legal, financial, or safety-critical
                        decision-making
                      </li>
                      <li>
                        Law enforcement, criminal justice, immigration, or
                        asylum processes
                      </li>
                      <li>
                        Operation of critical infrastructure or heavy machinery
                      </li>
                    </ul>
                  </li>
                  <li>
                    Generation or dissemination of adult content, including
                    erotic, sexual, or pornographic material.
                  </li>
                  <li>
                    Uses intended to deceive, mislead, impersonate others, or
                    facilitate fraud, scams, or disinformation.
                  </li>
                  <li>
                    Uses to create, promote, or distribute spam, malware, or
                    malicious code.
                  </li>
                </ul>
              </div>

              <div>
                <h4 className="font-semibold text-blue-200">Disclaimer</h4>
                <p className="mt-2">
                  This model and its outputs may be inaccurate, incomplete, or
                  inappropriate for certain use cases. Users are solely
                  responsible for their own use of the model, including
                  compliance with applicable laws and regulations. The model
                  should not be relied upon for any high-risk or sensitive
                  applications.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}