/* Loops Blog — "I find it easier to talk to ChatGPT than I ever found it to talk to a therapist"
   Authored editorial post by Matt Humphreys. Same blog template. Internal cross-links plus
   external sources opening in a new tab. UK English, no em dashes. */

const BAI_LINK = "text-brand-deep font-semibold hover:underline";

/* ---------------- Page nav ---------------- */

const BAI_NAV_LINKS = [
  { label: "For ADHD", href: "ADHD With Loops.html" },
  { label: "Knowledge Hub", href: "ADHD Knowledge Hub.html" },
  { label: "Blog", href: "Blog.html" },
  { label: "The AI coach", href: "AI Coach.html" },
];

const BaiNav = () => {
  const [open, setOpen] = React.useState(false);
  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);
  }, []);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && setOpen(false);
    document.body.style.overflow = "hidden";
    document.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; document.removeEventListener("keydown", onKey); };
  }, [open]);

  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="index.html" 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>
          <nav aria-label="Primary" className="hidden lg:flex items-center gap-1">
            {BAI_NAV_LINKS.map((l) => (
              <a key={l.href} href={l.href}
                className="focus-ring rounded-pill px-3.5 py-2 text-[14px] font-medium text-ink-2 hover:text-ink transition-colors">
                {l.label}
              </a>
            ))}
          </nav>
          <div className="hidden lg:flex items-center gap-2">
            <Button variant="primary" size="sm" href="index.html#download">Get Early Access</Button>
          </div>
          <button
            type="button"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            className="focus-ring lg:hidden inline-flex h-11 w-11 items-center justify-center rounded-pill border border-line bg-white"
            onClick={() => setOpen((o) => !o)}
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              {open
                ? <path d="M6 6l12 12M18 6L6 18" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" />
                : <><path d="M4 8h16" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /><path d="M4 16h16" stroke="#1c132d" strokeWidth="2" strokeLinecap="round" /></>}
            </svg>
          </button>
        </Container>
      </div>

      <div className={`lg:hidden fixed inset-x-0 top-[64px] z-40 transition-all duration-200 ${open ? "opacity-100 visible" : "hidden opacity-0 invisible pointer-events-none"}`} aria-hidden={!open}>
        <div className="nav-blur border-b border-line">
          <Container className="py-6">
            <nav aria-label="Mobile" className="flex flex-col gap-1">
              {BAI_NAV_LINKS.map((l) => (
                <a key={l.href} href={l.href} onClick={() => setOpen(false)}
                  className="focus-ring rounded-tile px-4 py-3.5 text-[16px] font-medium text-ink hover:bg-soft">
                  {l.label}
                </a>
              ))}
            </nav>
            <div className="mt-5 flex flex-col gap-2.5">
              <Button variant="primary" size="md" href="index.html#download" onClick={() => setOpen(false)}>Get Early Access</Button>
              <Button variant="secondary" size="md" href="Blog.html" onClick={() => setOpen(false)}>Back to the Blog</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

/* ---------------- Hero ---------------- */

const BaiHero = () => (
  <section id="top" aria-label="Hero" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-20 pb-10 lg:pb-14">
      <div className="max-w-3xl">
        <a href="Blog.html" className="focus-ring inline-flex items-center gap-1.5 rounded-pill text-[13.5px] font-semibold text-brand-deep hover:underline">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M19 12H5M11 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          Loops Blog
        </a>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          I find it easier to talk to ChatGPT than I ever found it to talk to a therapist.
        </h1>

        {/* Byline */}
        <div className="mt-7 flex flex-wrap items-center gap-x-4 gap-y-3">
          <div className="flex items-center gap-3">
            <img src="uploads/matt-humphreys.jpg" alt="Matt Humphreys" width="44" height="44" className="h-11 w-11 rounded-pill object-cover shadow-cta" />
            <div className="leading-tight">
              <div className="text-[15px] font-semibold text-ink">Matt Humphreys</div>
              <div className="text-[13px] text-ink-3">Loops</div>
            </div>
          </div>
          <span aria-hidden="true" className="hidden sm:block h-8 w-px bg-line"></span>
          <a href="#sources" className="focus-ring inline-flex items-center gap-2 rounded-pill border border-line bg-white px-4 py-2 text-[13.5px] font-semibold text-brand-deep shadow-soft hover:border-muted transition-colors">
            Skip to the sources
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>

        <p className="mt-8 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          I want to be honest about something, because I think a lot of you will recognise it.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Opening ---------------- */

const BaiOpening = () => (
  <Section id="opening" className="bg-base">
    <Container>
      <div className="max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          I talk to AI. Properly talk to it. Not just "write me an email" or "summarise this document". I mean late at night, when my head is full and won't empty, I open ChatGPT and I talk things through. What's on my mind. What I'm avoiding. What actually matters this week versus what just feels loud. I use it to prioritise when everything feels like a priority, which, if you have an ADHD brain like mine, is most days.
        </p>
        <p className="text-ink font-medium">And here's the thing I've stopped being embarrassed about. It helps.</p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Not the only one ---------------- */

const BAI_STATS = [
  { n: "1 in 3", d: "UK adults have used AI for emotional support, companionship or social interaction in the past year.", href: "https://www.aisi.gov.uk/blog/5-key-findings-from-our-first-frontier-ai-trends-report", src: "AI Security Institute" },
  { n: "64%", d: "of 25 to 34 year olds have used a chatbot to support their mental health or wellbeing.", href: "https://mentalhealth-uk.org/news-and-insights/over-one-in-three-using-ai-chatbots-for-mental-health-support-as-charity-calls-for-urgent-safeguards/", src: "Mental Health UK" },
  { n: "23%", d: "of under-30s have told an AI something they've never told another human being.", href: "https://yougov.com/en-us/articles/55093-one-in-five-american-adults-under-30-say-they-have-had-an-ongoing-personal-friendship-with-an-ai-chatbot", src: "YouGov" },
];

const BaiNotAlone = () => (
  <Section id="not-alone" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Apparently I'm not the only one</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It turns out it's not unusual at all.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          For a long time I assumed this was a slightly odd private habit. Then I started reading the research.
        </p>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {BAI_STATS.map((s) => (
          <article key={s.n} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="text-[32px] sm:text-[38px] font-bold tracking-tight3 text-brand-deep tnum leading-none">{s.n}</div>
            <p className="mt-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.d}</p>
            <a href={s.href} target="_blank" rel="noopener noreferrer" className="mt-3 inline-block text-[12.5px] font-semibold uppercase tracking-[0.08em] text-brand-deep hover:underline">{s.src}</a>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          That first one is a government body's figure, not a tech company's. But the stat that really stopped me was this one. In a <a href="https://www.futura-sciences.com/en/british-health-system-officially-validates-chatbot-to-replace-psychologists_34329/" target="_blank" rel="noopener noreferrer" className={BAI_LINK}>big European study of young people</a>, 51% said it was easy to talk to a chatbot about their mental health. Only 37% said the same about a psychologist.
        </p>
      </div>

      <figure className="mt-10 max-w-3xl rounded-card bg-muted p-8 sm:p-10 border-l-4 border-brand">
        <blockquote className="text-[20px] sm:text-[25px] font-semibold tracking-tight2 text-ink leading-[1.3] text-balance">
          A chatbot beat the professionals. On openness. The one thing the whole profession is built on.
        </blockquote>
      </figure>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        When I read that, I didn't think "how worrying". I thought, yes. That's exactly right. That's been my experience too.
      </p>
    </Container>
  </Section>
);

/* ---------------- Why it's easier ---------------- */

const BAI_EASIER = [
  { t: "There's no waiting room", b: "No six-week wait, no intake form, no explaining yourself from the beginning to a stranger while watching the clock. It's there at 11pm on a Tuesday, which is when my brain actually wants to talk, not at 2pm on a Thursday in three weeks' time." },
  { t: "There's no judgement", b: "Or more precisely, there's no fear of judgement, which is the thing that actually shuts people up. You can say the messy version. The unflattering version. The version you'd edit before saying it to a person you have to look in the eye." },
  { t: "You never feel like a burden", b: "I think that one's bigger than we admit." },
];

const BaiWhyEasier = () => (
  <Section id="why-easier" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Why it's easier</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          I've thought about this a lot, because the answer matters.
        </h2>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {BAI_EASIER.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.b}</p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- The therapy that didn't work ---------------- */

const BaiTherapy = () => (
  <Section id="therapy" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The therapy that didn't really work for me</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          I did it properly. It still didn't land.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Years ago, I did CBT for depression. The sessions, the worksheets, the thought records, challenging the cognitive distortions, all of it. And I want to be fair here, CBT genuinely helps a lot of people, and the evidence for it is real.
          </p>
          <p>
            But it never really worked for me. I'd sit there performing recovery, saying the things I knew were the right things to say, and leave feeling like I'd completed an admin task rather than moved anything. Maybe it was the fit. Maybe it was me. Maybe it was that opening up to a person across a room, on a schedule, has a cost that my particular brain was never willing to fully pay.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-3xl rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
        <p className="text-[16.5px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          What actually got me out of depression was something completely different. Perhaps I'll share that another day. The point, for now, is this. I know first-hand what it's like when the standard route doesn't land, and how badly you'll reach for anything that meets you where you actually are. Right now, for millions of people, the thing that meets them where they are is a chatbot.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Where I stop being relaxed ---------------- */

const BaiRisk = () => (
  <Section id="risk" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>And that's where I stop being relaxed about it</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Here's the other half of the data.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          It's the half that shaped what we built with Loops.
        </p>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 lg:grid-cols-3">
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <div className="text-[30px] sm:text-[34px] font-bold tracking-tight3 text-rose tnum leading-none">6 in 10</div>
          <p className="mt-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
            of those <a href="https://www.digitaltrends.com/computing/brits-are-now-trauma-dumping-on-ai-government-confirms/" target="_blank" rel="noopener noreferrer" className={BAI_LINK}>emotional conversations happen on general-purpose chatbots</a>. Tools built to answer anything, for anyone, that were never designed to hold someone who's struggling.
          </p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <div className="text-[30px] sm:text-[34px] font-bold tracking-tight3 text-rose tnum leading-none">11%</div>
          <p className="mt-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
            of people who used chatbots for mental wellbeing said <a href="https://mentalhealth-uk.org/news-and-insights/over-one-in-three-using-ai-chatbots-for-mental-health-support-as-charity-calls-for-urgent-safeguards/" target="_blank" rel="noopener noreferrer" className={BAI_LINK}>they'd received unsafe content about suicide</a>.
          </p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <div className="text-[30px] sm:text-[34px] font-bold tracking-tight3 text-rose tnum leading-none">97%</div>
          <p className="mt-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
            of <a href="https://www.apa.org/news/press/releases/2026/06/patients-chatbots-mental-health" target="_blank" rel="noopener noreferrer" className={BAI_LINK}>licensed psychologists surveyed by the APA worry chatbots can reinforce harmful beliefs</a>, and 89% worry they could inadvertently encourage self-harm.
          </p>
        </article>
      </div>

      <figure className="mt-10 max-w-3xl rounded-card bg-muted p-8 sm:p-10 border-l-4 border-amber">
        <blockquote className="text-[20px] sm:text-[25px] font-semibold tracking-tight2 text-ink leading-[1.3] text-balance">
          It really is easier to open up to AI. And most AI was never built to be opened up to.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- What we did ---------------- */

const BaiWhatWeDid = () => (
  <Section id="what-we-did" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>What we did about it with Loops</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Easy to talk to, and safe to talk to.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            I won't turn this post into a pitch, but I'll tell you the principle, because it comes directly from everything above.
          </p>
          <p>
            <a href="AI Coach.html" className={BAI_LINK}>The AI in Loops</a> coaches. We named it Dora. It helps you find ideas, prioritise, build momentum, <a href="Stop Procrastinating With ADHD.html" className={BAI_LINK}>get past a stuck moment</a>. The things I was using ChatGPT for at 11pm, except Dora already knows your goals and it talks in short cards <a href="Executive Function With ADHD.html" className={BAI_LINK}>an ADHD brain</a> can actually take in.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-3xl rounded-card border border-brand/25 bg-brand-soft/50 p-6 sm:p-7 shadow-soft">
        <p className="text-[16.5px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          And it knows where the line is. Dora will never diagnose. It doesn't roleplay as a therapist. There's a moment when knowledge is not enough and what someone needs is a trained human, and we've worked incredibly hard to know exactly where that moment is. If you're ever in real distress, Loops stops coaching entirely and does one thing. <span className="text-ink font-medium">Gets you to human help.</span>
        </p>
      </div>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink font-medium text-pretty">
        I don't think we should have to choose between the two.
      </p>

      <p className="mt-5 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        And none of this replaces actual humans. Some of the most useful conversations I've had about my own brain happened at <a href="https://adhdevents.org/" target="_blank" rel="noopener noreferrer" className={BAI_LINK}>ADHD events</a>, in rooms and calls full of people who didn't need anything explained. If talking is the thing that helps you, that's another place to do it.
      </p>

      <div className="mt-8 max-w-3xl rounded-card border border-rose/30 bg-rose-soft/60 p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          If you're struggling right now, please talk to someone.
        </p>
        <div className="mt-4">
          <Button variant="secondary" size="sm" href="Find Help - Support Resources.html">Find help now</Button>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Sources ---------------- */

const BAI_SOURCES = [
  { t: "AI Security Institute, Frontier AI Trends Report", d: "33% of UK adults used AI for emotional purposes in the past year; around 60% of that use is on general-purpose chatbots (Dec 2025)", href: "https://www.aisi.gov.uk/blog/5-key-findings-from-our-first-frontier-ai-trends-report" },
  { t: "Mental Health UK / Censuswide", d: "37% of UK adults have used a chatbot for mental health or wellbeing, rising to 64% among 25 to 34s; 11% report receiving harmful information around suicide (Nov 2025)", href: "https://mentalhealth-uk.org/news-and-insights/over-one-in-three-using-ai-chatbots-for-mental-health-support-as-charity-calls-for-urgent-safeguards/" },
  { t: "YouGov, on Pew Research Center data", d: "23% of US adults under 30 have confided in an AI chatbot something they'd told no one else (2026)", href: "https://yougov.com/en-us/articles/55093-one-in-five-american-adults-under-30-say-they-have-had-an-ongoing-personal-friendship-with-an-ai-chatbot" },
  { t: "Ipsos BVA for CNIL and Groupe VYV, reported by Futura-Sciences", d: "51% of young Europeans (11 to 25) find it easier to discuss mental health with a chatbot than with a psychologist (37%) (early 2026)", href: "https://www.futura-sciences.com/en/british-health-system-officially-validates-chatbot-to-replace-psychologists_34329/" },
  { t: "American Psychological Association, Chatbots and Mental Health Survey", d: "97% of licensed psychologists worry chatbots may reinforce harmful beliefs; 89% worry they may inadvertently encourage self-harm (June 2026)", href: "https://www.apa.org/news/press/releases/2026/06/patients-chatbots-mental-health" },
];

const BaiSources = () => (
  <Section id="sources" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from.
        </h2>
      </div>
      <ul className="mt-8 max-w-3xl flex flex-col gap-3">
        {BAI_SOURCES.map((s) => (
          <li key={s.href} className="rounded-card border border-line bg-white p-5 sm:p-6 shadow-soft">
            <a href={s.href} target="_blank" rel="noopener noreferrer" className="text-[16px] font-semibold text-brand-deep hover:underline">{s.t}</a>
            <p className="mt-2 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{s.d}</p>
          </li>
        ))}
      </ul>
    </Container>
  </Section>
);

/* ---------------- Author bio ---------------- */

const BaiAuthorBio = () => (
  <Section id="author" className="bg-soft">
    <Container>
      <div className="max-w-3xl rounded-card border border-line bg-white p-7 sm:p-9 shadow-soft">
        <div className="flex flex-col sm:flex-row sm:items-start gap-6">
          <img src="uploads/matt-humphreys.jpg" alt="Matt Humphreys" width="96" height="96" className="h-20 w-20 sm:h-24 sm:w-24 shrink-0 rounded-pill object-cover shadow-cta" />
          <div>
            <div className="text-[11px] font-bold uppercase tracking-[0.12em] text-brand-deep">Written by</div>
            <h2 className="mt-1.5 text-[22px] sm:text-[24px] font-semibold tracking-tight2 text-ink leading-tight">Matt Humphreys</h2>
            <div className="text-[14px] text-ink-3">Loops</div>
            <div className="mt-4 space-y-4 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
              <p>Matt has worked in design and marketing for 14 years and is fascinated by how AI will shape the future of both. Diagnosed with ADHD in his early thirties, he writes and researches the ideas that help him better understand his own brain.</p>
              <p>At Loops, Matt helps train the AI coach, speaks with users and shapes the app around how people with ADHD actually think and work. It's the kind of tool he wishes he'd had years before his diagnosis.</p>
              <p>Outside work, Matt lives with his wife, dog and cat, grows pine trees and dreams of one day owning a patch of land to plant them on.</p>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function BaiApp() {
  return (
    <main id="main">
      <BaiNav />
      <BaiHero />
      <BaiOpening />
      <BaiNotAlone />
      <BaiWhyEasier />
      <BaiTherapy />
      <BaiRisk />
      <BaiWhatWeDid />
      <BaiSources />
      <BaiAuthorBio />
      <Footer />
    </main>
  );
}

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