import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Container } from "@/components/Container";

export const metadata: Metadata = {
  title: "Terms",
  description:
    "Terms of use for orthoglobe.org — informational and educational use only.",
};

export default function TermsPage() {
  return (
    <>
      <PageHeader
        eyebrow="Terms"
        title="Terms of Use"
        lede="A short interim notice covering acceptable use, medical disclaimer, and intellectual property. Our full terms are being drafted with counsel and will replace this notice before public launch."
      />
      <Container className="py-16">
        <div className="max-w-3xl space-y-8 text-[16px] leading-relaxed text-[var(--color-ink)]">
          <section className="space-y-3">
            <h2 className="text-[22px] font-semibold text-[var(--color-navy)]">
              Informational use only
            </h2>
            <p className="text-[var(--color-slate)]">
              orthoglobe.org is operated by the OrthoGlobe collaborative for
              educational and informational purposes for clinicians, researchers, and
              students. Nothing on this site constitutes medical advice, diagnosis, or
              treatment, and the content is not a substitute for clinical judgment or
              the advice of a qualified healthcare professional.
            </p>
          </section>

          <section className="space-y-3">
            <h2 className="text-[22px] font-semibold text-[var(--color-navy)]">
              Acceptable use
            </h2>
            <p className="text-[var(--color-slate)]">
              You may browse public pages freely. You agree not to attempt to disrupt
              the service, scrape at volume, reverse engineer protected areas, submit
              fraudulent membership applications, or use the site in any way that
              violates applicable law.
            </p>
          </section>

          <section className="space-y-3">
            <h2 className="text-[22px] font-semibold text-[var(--color-navy)]">
              Membership
            </h2>
            <p className="text-[var(--color-slate)]">
              Membership is granted at the discretion of OrthoGlobe administrators
              after manual review of each application. Approved members agree to
              represent themselves accurately and to keep their account credentials
              confidential. Accounts may be suspended for misuse.
            </p>
          </section>

          <section className="space-y-3">
            <h2 className="text-[22px] font-semibold text-[var(--color-navy)]">
              Intellectual property
            </h2>
            <p className="text-[var(--color-slate)]">
              Original OrthoGlobe content is © OrthoGlobe and its contributors.
              Third-party content (research abstracts, news article summaries,
              clinical images) remains the property of its respective rights holders
              and is shown under fair-dealing or applicable licences with attribution
              and links back to the source.
            </p>
          </section>

          <section className="space-y-3">
            <h2 className="text-[22px] font-semibold text-[var(--color-navy)]">
              No warranty
            </h2>
            <p className="text-[var(--color-slate)]">
              The site is provided &ldquo;as is&rdquo; without warranties of any kind.
              We make reasonable efforts to keep content accurate and current but do
              not guarantee the completeness, reliability, or fitness for any
              particular purpose of the information published here.
            </p>
          </section>

          <section className="space-y-3">
            <h2 className="text-[22px] font-semibold text-[var(--color-navy)]">
              Contact
            </h2>
            <p className="text-[var(--color-slate)]">
              Questions about these terms:{" "}
              <a
                href="mailto:hello@orthoglobe.org"
                className="text-[var(--color-blue)] underline underline-offset-2"
              >
                hello@orthoglobe.org
              </a>
            </p>
          </section>
        </div>
      </Container>
    </>
  );
}
