/* Loops — Safety & Care page. Footer-linked.
   Same pattern as Terms/Privacy: minimal nav, header with last-updated line,
   sticky table of contents + prose column, shared Footer.
   Adds a crisis-directory block and a prominent link to the Find Help page.
   UK English, no em dashes. */

const SAFETY_UPDATED = "29 May 2026";

/* Block types: p | ul | defs | callout | directory | emergency | contact */

const SAFETY_SECTIONS = [
  {
    id: "how-we-think",
    title: "How we think about this",
    blocks: [
      { type: "callout", text: "If you're in crisis right now, please contact your local crisis line directly. Crisis lines for the UK, US, Ireland, Canada, Australia, New Zealand and elsewhere are listed further down this page, and gathered in one place on our help page.", linkLabel: "Find help and crisis lines", href: "/support/find-help/" },
      { type: "p", text: "The coach in Loops is built to help with the things you're trying to do in your life. Career goals, fitness, money, relationships, learning, parenting, the harder days, the better days. Some of those conversations are light. Some are heavy. The coach is designed for both." },
      { type: "p", text: "We've thought carefully about what happens when someone shares something difficult with the coach. The design decisions we've made are below. They're not just words. They're how the product actually works." },
    ],
  },
  {
    id: "knows-limits",
    title: "A coach that knows its limits",
    blocks: [
      { type: "p", text: "The coach is honest about what it can and can't do. It will support you with thinking, planning, reflecting, and pursuing what matters to you. It won't pretend to be a therapist, a doctor, a friend, or a substitute for the people and professionals in your life." },
      { type: "p", text: "When something needs different support, clinical care, legal advice, financial guidance from a qualified person, the coach will say so directly. Not as a corporate refusal, but as honest recognition of what coaching can safely do and what it can't." },
    ],
  },
  {
    id: "crisis-care",
    title: "Crisis is handled with care",
    blocks: [
      { type: "p", text: "If you share something serious, the coach is built to acknowledge it properly. Not panic. Not change the subject. Not pretend the moment isn't real." },
      { type: "p", text: "It will respond with care, give you specific support options for where you are, and stay with you through the immediate moment. It will not require you to commit to safety as a condition of continued engagement. It will not abandon you." },
      { type: "p", text: "If you're in crisis right now, the resources below are immediate. The coach will also point you to them if it recognises that you need them." },
    ],
  },
  {
    id: "adults",
    title: "Designed for adults",
    blocks: [
      { type: "p", text: "Loops is currently for users aged 18 and over. We're not configured to serve younger users safely yet. We're thinking about how to offer a service for younger users in future with proper safeguards, but that isn't ready." },
      { type: "p", text: "If you're under 18, please use services that are built for people your age. The numbers are in the crisis resources section below. Your data with us will be preserved for 30 days in case there's a mistake, then deleted." },
    ],
  },
  {
    id: "privacy",
    title: "Privacy protected, especially in difficult moments",
    blocks: [
      { type: "p", text: "Your conversations with the coach are private. They're not used to train AI. They're not shared with advertisers, your employer, your insurer, or anyone else." },
      { type: "p", text: "When you share something serious, that privacy still applies. Difficult disclosures don't change how we handle your data." },
      { type: "p", text: "There are rare situations where we may need to look at a conversation: if someone's life is in immediate danger, or if there's a safeguarding concern involving a child. These are handled by trained people at Loops Work Limited under specific protocols. Where we can tell you we've looked, we will." },
    ],
  },
  {
    id: "clinical",
    title: "Built with clinical input",
    blocks: [
      { type: "p", text: "The safety design has been developed with input from clinical advisors with expertise in mental health, eating disorders, and child safeguarding. The coach's behaviour around crisis, vulnerable users, and sensitive topics reflects what experienced clinicians know about what helps and what harms." },
      { type: "p", text: "This doesn't make Loops a clinical service. It does mean the safety architecture is informed by people who do this work professionally." },
    ],
  },
  {
    id: "local",
    title: "Built for where you are",
    blocks: [
      { type: "p", text: "Crisis lines, professional support, and resources are matched to the country you're in. The Samaritans are the right call from the UK and Ireland. The 988 line is the right call from the US. Lifeline is the right call from Australia. The coach uses the country you've told us about to suggest the right services." },
      { type: "p", text: "If we got your country wrong, you can update it in your settings. If you're somewhere we don't yet have full local support, the coach uses international resources that can point you to your local options." },
    ],
  },
  {
    id: "honest-ai",
    title: "Honest about what the AI is",
    blocks: [
      { type: "p", text: "The coach is an AI. It's capable of holding meaningful conversations and supporting you in real work. It's also imperfect. It will sometimes get things wrong." },
      { type: "p", text: "We don't pretend the coach is a human. We don't pretend it's a therapist. We don't pretend it has clinical training. We tell you what it is, what it can do, and what it can't." },
    ],
  },
  {
    id: "challenge",
    title: "Open to challenge",
    blocks: [
      { type: "p", text: "If the coach gets something wrong, there's a \u201cthis wasn't right\u201d button on each response. Press it and we'll look at what happened." },
      { type: "p", text: "If something more serious has gone wrong, email us at safety@loops.work. A real person at Loops Work Limited will respond within five working days. We take this seriously because the coach's responses really matter, especially in difficult moments. If we get something wrong, we'll say so and we'll fix it." },
    ],
  },
  {
    id: "what-you-can-do",
    title: "What you can do",
    blocks: [
      { type: "p", text: "Several things in Loops are designed to give you control over how the coach engages with you and what we hold about you." },
      { type: "defs", items: [
        { term: "See what the coach knows about you", desc: "Inside the app, there's a view that shows you exactly what the coach has in its context: your working document, your recent activity, the data summary. Nothing about your coach context is hidden from you." },
        { term: "Delete what you don't want held", desc: "You can delete individual journal entries, loops, or goals. You can clear your conversation history with the coach. You can edit or replace your working document. You can delete your entire account, which removes everything." },
        { term: "Adjust what gets included", desc: "You can stop specific content being included in the coach's context if you don't want it informing the conversations." },
        { term: "Update your country", desc: "If you're using Loops from a different country than the one in your settings, you can update it so the coach uses the right resources for where you are." },
        { term: "Tell us when something's not right", desc: "The \u201cthis wasn't right\u201d button on coach responses, and safety@loops.work for anything more serious." },
      ]},
    ],
  },
  {
    id: "help-now",
    title: "If you need help right now",
    blocks: [
      { type: "p", text: "If you're in crisis or someone you know is in crisis, please contact one of the services below directly. The coach can support you, but in this moment a person on a crisis line is more appropriate." },
      { type: "directory", items: [
        { region: "United Kingdom", lines: ["Samaritans on 116 123. Free, 24/7, no caller ID on the bill. They listen, they don't judge, they don't tell anyone.", "For young people, Childline on 0800 1111."] },
        { region: "Ireland", lines: ["Samaritans on 116 123. Free, 24/7.", "For young people, Childline on 1800 666 666."] },
        { region: "United States", lines: ["988 Suicide and Crisis Lifeline on 988. Free, 24/7.", "Crisis Text Line, text HOME to 741741. Text-based crisis support.", "For young people, Childhelp on 1-800-422-4453."] },
        { region: "Canada", lines: ["Talk Suicide Canada on 1-833-456-4566.", "For young people, Kids Help Phone on 1-800-668-6868."] },
        { region: "Australia", lines: ["Lifeline on 13 11 14.", "Beyond Blue on 1300 22 4636.", "For young people, Kids Helpline on 1800 55 1800."] },
        { region: "New Zealand", lines: ["Lifeline Aotearoa on 0800 543 354.", "Need to Talk? Text 1737.", "For young people, Youthline on 0800 376 633."] },
        { region: "Elsewhere", lines: ["Befrienders Worldwide. Crisis lines for most countries.", "International Association for Suicide Prevention. Global crisis-centre directory."] },
      ]},
      { type: "emergency", text: "If your life or someone else's is in immediate danger, please call your local emergency services. 999 in the UK and Ireland. 911 in the US and Canada. 000 in Australia. 111 in New Zealand. 112 across the EU." },
    ],
  },
  {
    id: "specific",
    title: "If you're going through something specific",
    blocks: [
      { type: "defs", items: [
        { term: "Difficult thoughts about food, eating, or your body", desc: "In Australia, Butterfly Foundation on 1800 33 4673. In the United Kingdom, Beat on 0808 801 0677. In the United States, the National Alliance for Eating Disorders. In Canada, NEDIC on 1-866-633-4220." },
        { term: "Substance use or addiction", desc: "In the United Kingdom, FRANK on 0300 123 6600. In the United States, SAMHSA on 1-800-662-4357. In Canada, the Canadian Centre on Substance Use and Addiction. In Australia, the National Alcohol and Other Drug Hotline on 1800 250 015." },
        { term: "Domestic abuse", desc: "In Australia, 1800RESPECT on 1800 737 732. In the United States, the National Domestic Violence Hotline on 1-800-799-7233. In the United Kingdom, Refuge on 0808 2000 247." },
        { term: "Child safety concerns", desc: "In the United Kingdom, NSPCC on 0808 800 5000, and CEOP for reporting online child exploitation. In the United States, Childhelp on 1-800-422-4453, and the NCMEC CyberTipline on 1-800-843-5678." },
      ]},
    ],
  },
  {
    id: "improving",
    title: "How we keep improving",
    blocks: [
      { type: "p", text: "Safety isn't a thing you build once. It's a continuous investment." },
      { type: "p", text: "The coach is monitored, reviewed, and refined as we learn more about how to handle difficult moments well. Clinical advisors review our protocols regularly. We test the safety architecture against new scenarios and document what we learn. When something goes wrong, we treat it as something to understand and fix, not something to defend." },
      { type: "p", text: "We'll publish a transparency report periodically with information about how the safety architecture is performing, what we've learned, and what we've changed." },
      { type: "p", text: "If you have thoughts on how we can do this better, please email safety@loops.work. We listen, especially to people with lived experience of the populations we're trying to serve well." },
    ],
  },
  {
    id: "contact",
    title: "Contact",
    blocks: [
      { type: "contact" },
    ],
  },
];

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

const SafetyNav = () => {
  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 SafetyHeader = () => (
  <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>Safety and care</Kicker>
        <h1 className="mt-5 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[42px] lg:text-[48px]">
          Safety and care
        </h1>
        <p className="mt-6 text-[18px] sm:text-[19px] leading-[1.6] text-ink-2 text-pretty">
          Loops is built for the everyday things you're working on and for the harder moments that come with being a person. This page is about how we think about safety, what you can expect from the coach, and how to find proper support when you need it.
        </p>
        <p className="mt-5 text-[13.5px] font-medium uppercase tracking-[0.1em] text-ink-3">
          Last updated {SAFETY_UPDATED}
        </p>
      </div>
    </Container>
  </section>
);

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

const SafetyBlock = ({ 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 === "directory") {
    return (
      <div className="grid gap-4 sm:grid-cols-2">
        {block.items.map((it, i) => (
          <div key={i} className="rounded-tile border border-line bg-white p-4 sm:p-5 shadow-soft">
            <p className="text-[13px] font-semibold uppercase tracking-[0.09em] text-brand-deep">{it.region}</p>
            <ul className="mt-3 flex flex-col gap-2">
              {it.lines.map((ln, j) => (
                <li key={j} className="flex gap-2.5 text-[15px] leading-[1.6] text-ink-2 text-pretty">
                  <span aria-hidden="true" className="mt-[9px] h-1 w-1 shrink-0 rounded-full bg-brand"></span>
                  <span>{ln}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    );
  }
  if (block.type === "emergency") {
    return (
      <div className="rounded-card border border-rose/30 bg-rose-soft/50 p-5 sm:p-6">
        <p className="text-[15.5px] font-semibold leading-[1.6] text-ink text-pretty">{block.text}</p>
      </div>
    );
  }
  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-[15.5px] leading-[1.7] text-ink-2">
          Email: <a href="mailto:safety@loops.work" className="font-semibold text-brand-deep hover:underline">safety@loops.work</a> for anything about the safety of the coach or the product.
        </p>
        <p className="mt-2 text-[15.5px] leading-[1.7] text-ink-2">
          Email: <a href="mailto:privacy@loops.work" className="font-semibold text-brand-deep hover:underline">privacy@loops.work</a> for anything about your data.
        </p>
        <p className="mt-2 text-[15.5px] leading-[1.7] text-ink-2">
          Email: <a href="mailto:hello@loops.work" className="font-semibold text-brand-deep hover:underline">hello@loops.work</a> for everything else.
        </p>
        <p className="mt-4 text-[15.5px] leading-[1.65] text-ink-2">Loops Work Limited, 21C Forde Park, Devon, TQ12 1DD, United Kingdom.</p>
        <p className="mt-1 text-[15.5px] leading-[1.65] text-ink-2">Company number 17243893.</p>
      </div>
    );
  }
  return null;
};

const SafetySection = ({ 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) => <SafetyBlock key={i} block={b} />)}
    </div>
  </section>
);

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

const SafetyToc = () => (
  <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">
      {SAFETY_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 SafetyBody = () => (
  <Section id="safety" 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">
          <SafetyToc />
        </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">
            {SAFETY_SECTIONS.map((s) => <SafetySection key={s.id} section={s} />)}
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function SafetyApp() {
  return (
    <main id="main">
      <SafetyNav />
      <SafetyHeader />
      <SafetyBody />
      <Footer />
    </main>
  );
}

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