/* Loops — Terms page. Footer-linked legal document.
   Simple content page in the established design system: minimal nav, header with
   last-updated line, sticky table of contents + prose column, shared Footer.
   UK English, no em dashes. Safeguarding block links to the Find Help directory. */

const TERMS_UPDATED = "1 July 2026";

/* ---------------- Content model ----------------
   Block types: p | ul | defs | callout | contact  */

const TERMS_SECTIONS = [
  {
    id: "what-this-is",
    title: "What this is",
    blocks: [
      { type: "p", text: "This is the agreement between you and Loops Work Limited (the company that makes Loops). We're based at 21C Forde Park, Devon, TQ12 1DD. Our company number is 17243893." },
      { type: "p", text: "When you use Loops, you're agreeing to these terms. If you don't agree, please don't use Loops." },
      { type: "p", text: "We'll update these terms sometimes. When we do, we'll tell you in the app and by email. The latest version is always at loops.work/terms." },
    ],
  },
  {
    id: "who-loops-is-for",
    title: "Who Loops is for",
    blocks: [
      { type: "p", text: "Loops is for adults aged 18 or over. We may add a service for younger people later, but not yet." },
      { type: "p", text: "Loops is not a medical service. It doesn't diagnose, treat, or replace professional care." },
      { type: "callout", text: "If you're in crisis right now, please contact the Samaritans on 116 123 or your local emergency services. Loops includes pointers to professional support, but it's not a substitute for therapy, a doctor, or a crisis line.", linkLabel: "Find help and crisis lines", href: "/support/find-help/" },
      { type: "p", text: "If you have a diagnosed mental health condition, eating disorder, or similar, please check with your healthcare provider before using Loops, especially if you're using it for something related to that condition." },
    ],
  },
  {
    id: "your-account",
    title: "Your account",
    blocks: [
      { type: "p", text: "You need an account to use most of Loops. We ask you to:" },
      { type: "ul", items: [
        "Give us accurate information when you sign up, and update it if it changes",
        "Keep your password private (you're responsible for what happens on your account)",
        "Tell us if you think someone else has used your account",
      ]},
      { type: "p", text: "We can close your account if you break these terms, if we think your account is being used in a way that harms you or others, or if the law requires us to." },
    ],
  },
  {
    id: "paying",
    title: "Paying for Loops",
    blocks: [
      { type: "p", text: "Loops has different plans. The current plans and prices are at loops.work/pricing." },
      { type: "defs", items: [
        { term: "Free", desc: "Free forever, with some features limited." },
        { term: "Full", desc: "£8 a month or £80 a year. The full coach and all the features." },
        { term: "Top-ups", desc: "You can buy extra credits if you need them. Top-up credits don't expire." },
        { term: "Cancelling", desc: "You can cancel any time, through your account settings or through your App Store account if you signed up that way. Your subscription stays active until the end of the month or year you've paid for. We don't give refunds for part of a billing period you've already paid for." },
        { term: "Annual plans", desc: "If you cancel an annual plan within the first 30 days, you get a full refund. After 30 days, the subscription runs to the end of the year." },
        { term: "Price changes", desc: "If we change prices, we'll give you at least 30 days' notice. You can cancel before the new price kicks in." },
        { term: "Failed payments", desc: "If a payment doesn't go through, we'll try again for three days. If it still doesn't work, your account drops back to Free. Your data stays. You can subscribe again whenever you want." },
      ]},
    ],
  },
  {
    id: "what-loops-does",
    title: "What Loops does",
    blocks: [
      { type: "p", text: "Loops gives you:" },
      { type: "ul", items: [
        "A daily ritual: commit, confirm, build a streak",
        "A space for your goals and how you're progressing",
        "A journal for your thoughts, wins, and reflections",
        "An AI coach who knows you and what you're working on",
      ]},
      { type: "p", text: "The exact features depend on your plan." },
      { type: "p", text: "The coach is built to coach, not to do things for you. It draws on what you've told us about yourself, your goals, your loops history, and your journal entries to give you advice that's actually relevant." },
      { type: "p", text: "The coach is good but not perfect. It can sometimes get things wrong. Use your own judgement, especially for important decisions about your health, money, or legal matters." },
    ],
  },
  {
    id: "how-you-can-use",
    title: "How you can use Loops",
    blocks: [
      { type: "p", text: "Use Loops for anything legal and personal. Career goals, fitness goals, money goals, relationship work, exam preparation, parenting, anything that matters to you." },
      { type: "p", text: "Things you can't do:" },
      { type: "ul", items: [
        "Use Loops to break the law",
        "Use Loops to harm yourself or anyone else",
        "Try to get into our systems, mess with how the coach works, or get around safety features",
        "Make content that's illegal, harmful, or takes other people's rights or work",
        "Sell access to Loops or use it commercially without our written permission",
        "Pretend to be someone else, or use Loops to trick people",
      ]},
    ],
  },
  {
    id: "your-stuff",
    title: "Your stuff and our stuff",
    blocks: [
      { type: "defs", items: [
        { term: "Your stuff", desc: "Everything you put into Loops is yours. Your goals, your loops, your journal entries, your conversations with the coach. We use this information to provide Loops to you. The privacy section below explains exactly how." },
        { term: "Our stuff", desc: "The Loops app, the brand, the coach design, the coaching content we provide, the artwork, the design. All ours." },
        { term: "Coach replies", desc: "What the coach says to you is for you to use however you want. The systems behind it stay ours." },
      ]},
    ],
  },
  {
    id: "privacy",
    title: "Privacy",
    blocks: [
      { type: "p", text: "How we handle your information is set out in our privacy policy." },
    ],
  },
  {
    id: "when-things-go-wrong",
    title: "When things go wrong",
    blocks: [
      { type: "p", text: "We do our best to make Loops work well and safely. But sometimes things go wrong. Here's what that means legally." },
      { type: "p", text: "If we cause you harm by being careless, by lying, or in ways the law says we can't escape from, we're responsible. That includes things like personal injury caused by our negligence." },
      { type: "p", text: "For everything else, our total responsibility to you in any twelve-month period is the greater of: how much you've paid us in that time, or £100." },
      { type: "p", text: "We're not responsible for: indirect or knock-on losses, lost profits, lost business, damage to your reputation, or lost data (as long as we've taken reasonable steps to back things up)." },
      { type: "p", text: "The coach is provided as it is. We don't promise it'll be right every time or available every minute of every day. Trust your own judgement." },
    ],
  },
  {
    id: "extra-care",
    title: "Children and people who need extra care",
    blocks: [
      { type: "p", text: "Loops is for adults. If we find out someone under 18 has signed up, we'll close their account and delete their data." },
      { type: "callout", text: "We take our responsibility seriously when someone using Loops might be vulnerable. The coach is built to notice signs of distress and point you to proper support. If you're worried about yourself or someone else, please reach out to a professional.", linkLabel: "Find help and crisis lines", href: "/support/find-help/" },
    ],
  },
  {
    id: "stopping",
    title: "Stopping",
    blocks: [
      { type: "p", text: "You can stop using Loops any time. Delete your account through your settings, and your data goes too (the privacy section explains exactly how)." },
      { type: "p", text: "We can close your access if you seriously break these terms, if the law requires it, or if we stop offering the service. If we stop offering Loops entirely, we'll give you reasonable notice and a chance to take your data with you." },
    ],
  },
  {
    id: "the-legal-bit",
    title: "The legal bit",
    blocks: [
      { type: "p", text: "These terms are governed by the law of England and Wales. If we have a dispute, it goes to the courts of England and Wales, but if you're a consumer you keep your right to use the courts of where you live." },
      { type: "p", text: "If something's wrong, please email us first at hello@loops.work. We'll get back to you within five working days and try to sort it out." },
    ],
  },
  {
    id: "contact",
    title: "Contact us",
    blocks: [
      { type: "contact" },
    ],
  },
];

/* ---------------- Nav ---------------- */

const TermsNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className="sticky top-0 z-50">
      <div className={`nav-blur transition-colors duration-300 ${scrolled ? "border-b border-line/80" : "border-b border-transparent"}`}>
        <Container className="flex h-[64px] items-center justify-between gap-6">
          <a href="/" aria-label="Loops home" className="focus-ring inline-flex items-center rounded-pill">
            <img src="/assets/loops-logo-beta.png" alt="Loops" className="h-7 w-auto" width="100" height="28" />
          </a>
          <div className="flex items-center gap-3">
            <a href="/adhd/knowledge-hub/" className="hidden sm:inline focus-ring rounded-pill px-3 py-2 text-[13.5px] font-medium text-ink-2 hover:text-ink transition-colors">Knowledge Hub</a>
            <Button variant="primary" size="md" href="/#download">Get Early Access</Button>
          </div>
        </Container>
      </div>
    </header>
  );
};

/* ---------------- Header ---------------- */

const TermsHeader = () => (
  <section id="top" aria-label="Header" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-18 pb-10 lg:pb-12">
      <div className="max-w-prose">
        <Kicker>Legal</Kicker>
        <h1 className="mt-5 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[42px] lg:text-[48px]">
          Terms of using Loops
        </h1>
        <p className="mt-6 text-[18px] sm:text-[19px] leading-[1.6] text-ink-2 text-pretty">
          The plain-English agreement between you and Loops Work Limited. We've kept it as clear as we can, so you know exactly where you stand.
        </p>
        <p className="mt-5 text-[13.5px] font-medium uppercase tracking-[0.1em] text-ink-3">
          Last updated {TERMS_UPDATED}
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Block renderers ---------------- */

const TermsBlock = ({ block }) => {
  if (block.type === "p") {
    return <p className="text-[16.5px] leading-[1.72] text-ink-2 text-pretty">{block.text}</p>;
  }
  if (block.type === "ul") {
    return (
      <ul className="flex flex-col gap-2.5">
        {block.items.map((it, i) => (
          <li key={i} className="flex gap-3 text-[16.5px] leading-[1.65] text-ink-2 text-pretty">
            <span aria-hidden="true" className="mt-[10px] h-1.5 w-1.5 shrink-0 rounded-full bg-brand"></span>
            <span>{it}</span>
          </li>
        ))}
      </ul>
    );
  }
  if (block.type === "defs") {
    return (
      <dl className="flex flex-col gap-4">
        {block.items.map((it, i) => (
          <div key={i} className="rounded-tile border border-line bg-white p-4 sm:p-5 shadow-soft">
            <dt className="text-[15.5px] font-semibold tracking-tight2 text-ink">{it.term}</dt>
            <dd className="mt-1.5 text-[15.5px] leading-[1.65] text-ink-2 text-pretty">{it.desc}</dd>
          </div>
        ))}
      </dl>
    );
  }
  if (block.type === "callout") {
    return (
      <div className="rounded-card border border-rose/30 bg-rose-soft/50 p-5 sm:p-6">
        <p className="text-[15.5px] leading-[1.65] text-ink-2 text-pretty">{block.text}</p>
        {block.href ? (
          <a href={block.href} className="focus-ring mt-4 inline-flex items-center gap-2 rounded-pill bg-white px-4 py-2.5 text-[14px] font-semibold text-brand-deep shadow-soft transition-colors hover:bg-brand-soft">
            {block.linkLabel}
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        ) : null}
      </div>
    );
  }
  if (block.type === "contact") {
    return (
      <div className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
        <p className="text-[16.5px] font-semibold tracking-tight2 text-ink">Loops Work Limited</p>
        <p className="mt-2 text-[15.5px] leading-[1.65] text-ink-2">21C Forde Park, Devon, TQ12 1DD, United Kingdom</p>
        <p className="mt-3 text-[15.5px] leading-[1.65] text-ink-2">
          Email: <a href="mailto:hello@loops.work" className="font-semibold text-brand-deep hover:underline">hello@loops.work</a>
        </p>
        <p className="mt-1 text-[15.5px] leading-[1.65] text-ink-2">Company number: 17243893</p>
      </div>
    );
  }
  return null;
};

const TermsSection = ({ section }) => (
  <section id={section.id} className="scroll-mt-24 border-t border-line pt-9 sm:pt-11 first:border-t-0 first:pt-0">
    <h2 className="text-[22px] sm:text-[26px] font-semibold tracking-tight2 text-ink leading-tight">{section.title}</h2>
    <div className="mt-5 flex flex-col gap-4">
      {section.blocks.map((b, i) => <TermsBlock key={i} block={b} />)}
    </div>
  </section>
);

/* ---------------- Table of contents ---------------- */

const TermsToc = () => (
  <nav aria-label="On this page" className="lg:sticky lg:top-24">
    <p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-3">On this page</p>
    <ul className="mt-4 flex flex-col gap-0.5">
      {TERMS_SECTIONS.map((s) => (
        <li key={s.id}>
          <a href={`#${s.id}`} className="focus-ring block rounded-tile px-3 py-2 -mx-3 text-[14px] leading-snug text-ink-2 hover:text-ink hover:bg-soft transition-colors">
            {s.title}
          </a>
        </li>
      ))}
    </ul>
  </nav>
);

/* ---------------- Body ---------------- */

const TermsBody = () => (
  <Section id="terms" className="bg-base">
    <Container>
      <div className="grid gap-10 lg:gap-16 lg:grid-cols-12">
        <div className="lg:col-span-4 xl:col-span-3">
          <TermsToc />
        </div>
        <div className="lg:col-span-8 xl:col-span-8 xl:col-start-5">
          <div className="max-w-prose flex flex-col gap-10 sm:gap-12">
            {TERMS_SECTIONS.map((s) => <TermsSection key={s.id} section={s} />)}
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- App ---------------- */

function TermsApp() {
  return (
    <main id="main">
      <TermsNav />
      <TermsHeader />
      <TermsBody />
      <Footer />
    </main>
  );
}

const termsRoot = ReactDOM.createRoot(document.getElementById("root"));
termsRoot.render(<TermsApp />);
