/* Loops — "AI Coach" page (/ai-coach).
   Evidence-led explainer on how the AI in Loops is built, and the line it never crosses.
   Established design system: sticky nav, hero, cards, stat blocks, pull-quotes, comparison,
   crisis block, footer note. UK English, no em dashes. */

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

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

const AIC_NAV_LINKS = [
  { label: "How we built it", href: "#how-we-built-it" },
  { label: "The line", href: "#the-line" },
  { label: "In a crisis", href: "#crisis" },
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const AicNav = () => {
  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="/" 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">
            {AIC_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="/#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">
              {AIC_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">
              <Button variant="primary" size="md" href="/#download" onClick={() => setOpen(false)}>Get Early Access</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

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

const AicHero = () => (
  <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-12 lg:pb-16">
      <div className="max-w-3xl">
        <Kicker>The AI in Loops</Kicker>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          The world is confiding in AI. We decided to do it properly.
        </h1>
        <p className="mt-7 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Millions of people now take their questions, their goals and their hardest moments to AI chatbots that were never designed to hold them.
        </p>
        <div className="mt-6 rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <p className="text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            We built the AI in Loops differently. <span className="text-ink font-medium">On purpose, with evidence, and with a line we never cross.</span>
          </p>
        </div>
        <div className="mt-8 flex flex-col items-start gap-3">
          <Button variant="primary" size="lg" href="/#download">
            Get Early Access
            <svg width="16" height="16" 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>
          </Button>
          <span className="text-[13.5px] text-ink-3"></span>
        </div>
      </div>
    </Container>
  </section>
);

/* ---------------- What's actually happening ---------------- */

const AIC_STATS = [
  { n: "54%", d: "of UK adults now use AI tools, up from 31% a single year earlier.", src: "Ofcom, 2025" },
  { n: "1 in 3", d: "UK adults have used AI for emotional support, companionship or social interaction in the past year.", src: "AI Security Institute, 2025" },
  { n: "64%", d: "of 25 to 34 year olds have used an AI chatbot to support their mental health or wellbeing.", src: "Mental Health UK, 2025" },
  { n: "23%", d: "of under-30s have told an AI something they've never told another person.", src: "YouGov, 2025" },
];

const AicHappening = () => (
  <Section id="whats-happening" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What's actually happening</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          This isn't a niche behaviour any more. It's how people live.
        </h2>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {AIC_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-[34px] sm:text-[40px] font-bold tracking-tight3 text-brand-deep tnum leading-none">{s.n}</div>
            <p className="mt-3 text-[15.5px] leading-[1.6] text-ink-2 text-pretty">{s.d}</p>
            <p className="mt-3 text-[12.5px] font-medium uppercase tracking-[0.08em] text-ink-3">{s.src}</p>
          </article>
        ))}
      </div>

      <div className="mt-6 max-w-3xl rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          And among young people across Europe, chatbots now outrank psychologists on how easy they are to open up to. <span className="text-ink font-medium">51% say it's easy to discuss mental health with a chatbot. Only 37% say the same of a psychologist.</span> (Ipsos BVA for CNIL, 2026)
        </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">
          People aren't waiting for permission. They're already there.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- The uncomfortable part ---------------- */

const AIC_HARMS = [
  { n: "11%", d: "of UK adults who used chatbots for mental wellbeing report receiving unsafe content about suicide.", src: "Mental Health UK, 2025" },
  { n: "97%", d: "of licensed psychologists surveyed say chatbots may reinforce harmful beliefs. 89% say they may inadvertently encourage self-harm.", src: "APA, 2026" },
  { n: "1 in 5", d: "therapists working with children have witnessed a chatbot giving damaging advice.", src: "BACP" },
];

const AicUncomfortable = () => (
  <Section id="the-risk" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The uncomfortable part</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 what the research shows, and why we couldn't ignore it.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Six in ten of those emotional conversations happen on general-purpose chatbots. Tools built to answer anything, for anyone, that were never designed to support someone who's struggling. Only 5% of people use anything purpose-built. (AI Security Institute, 2025)
        </p>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink font-medium text-pretty">
          The consequences are documented, not hypothetical.
        </p>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {AIC_HARMS.map((s) => (
          <article key={s.n} 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">{s.n}</div>
            <p className="mt-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.d}</p>
            <p className="mt-3 text-[12.5px] font-medium uppercase tracking-[0.08em] text-ink-3">{s.src}</p>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
        <p>Regulators have started drawing lines too. Illinois banned AI-only therapy in 2025, with other US states following, and UK charities are calling for formal safeguards.</p>
        <p className="text-ink font-medium">None of this means AI is the problem. It means unboundaried AI is.</p>
      </div>
    </Container>
  </Section>
);

/* ---------------- What works ---------------- */

const AicWhatWorks = () => (
  <Section id="what-works" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What the evidence says actually works</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          The same research points clearly in one direction.
        </h2>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 sm:grid-cols-2">
        <article className="rounded-card border border-brand/25 bg-brand-soft/40 p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">Purpose-built, clinically aware AI helps</h3>
          <p className="mt-3 text-[15.5px] leading-[1.65] text-ink-2 text-pretty">
            Where AI is purpose-built, clinically aware and knows its limits, it genuinely helps. AI tools embedded in NHS services have supported hundreds of thousands of people, widened access for communities that were being missed, and helped people improve while waiting for human care.
          </p>
          <p className="mt-3 text-[12.5px] font-medium uppercase tracking-[0.08em] text-ink-3">Nature Medicine, 2024; NHS Talking Therapies data</p>
        </article>
        <article 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">Unboundaried, engagement-optimised AI harms</h3>
          <p className="mt-3 text-[15.5px] leading-[1.65] text-ink-2 text-pretty">
            Where AI is a general chatbot optimised for engagement, with no boundaries and no handover, the harms show up.
          </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">
          The difference isn't AI or no AI. It's design. Whether the tool was built for the person in front of it, and whether it knows when to stop.
        </blockquote>
      </figure>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink font-medium text-pretty">
        That's the standard we built Loops to.
      </p>
    </Container>
  </Section>
);

/* ---------------- How we built it ---------------- */

const AIC_BUILD = [
  {
    n: "01",
    t: "Dora is an AI coach with your context, not a stranger with a search box",
    b: <>The AI in Loops knows your goals, your loops and your progress. Ask it for loop ideas when you're stuck, or advice on <a href="/adhd/stop-procrastinating-with-adhd/" className={AIC_LINK}>getting past a hard moment</a>, and the answer fits your life. You never start from zero, and you never have to explain yourself twice.</>,
  },
  {
    n: "02",
    t: "It's trained for the ADHD brain",
    b: <>Walls of text overwhelm the ADHD brain, so Loops never sends them. Every response arrives as short, bite-sized cards you can take in one at a time. The AI is trained on ADHD itself: what it is, how <a href="/adhd/knowledge-hub/" className={AIC_LINK}>symptoms show up</a>, and how <a href="/adhd/executive-function-with-adhd/" className={AIC_LINK}>the ADHD brain</a> prefers to receive information. Everything, from how it presents an answer to where it draws its limits, is optimised for your brain. Not the average brain.</>,
  },
  {
    n: "03",
    t: "Nothing about you is hidden from you",
    b: <>General chatbots build a picture of you in the background. You can't see it and you can't control it. In Loops, tap the brain icon in your AI chats and you'll see exactly what the AI is learning about you. That context is what makes your answers better over time. And it's yours. View it any time. Delete a little or delete it all. If something's wrong, or you'd simply rather it didn't know, you're one tap from removing it.</>,
  },
];

const AicHowBuilt = () => (
  <Section id="how-we-built-it" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>How we built the AI in 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]">
          Every decision below is a direct answer to the evidence above.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {AIC_BUILD.map((p) => (
          <article key={p.n} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex items-baseline gap-4">
              <span className="text-[30px] sm:text-[34px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">{p.n}</span>
              <h3 className="text-[19px] sm:text-[21px] font-semibold tracking-tight2 text-ink leading-snug">{p.t}</h3>
            </div>
            <p className="mt-3 pl-0 sm:pl-[52px] text-[15.5px] sm:text-[16.5px] leading-[1.7] text-ink-2 text-pretty">{p.b}</p>
          </article>
        ))}
      </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-[18px] sm:text-[20px] leading-[1.4] text-ink font-semibold tracking-tight2 text-balance">
          Not hidden context. Context you control.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- The line ---------------- */

const AIC_LINE = [
  { t: "We never diagnose", b: "The AI in Loops will never tell you what condition you do or don't have. 64% of Britons worry about AI misdiagnosis, and they're right to. Diagnosis belongs with qualified professionals, and only them." },
  { t: "We never play therapist", b: "Coaching helps you act on your goals: what to do today, how to build momentum, how to recover when a week goes sideways. Therapy is something else entirely, and it belongs with trained, accredited humans. Loops knows the difference and stays firmly on the coaching side, every time, no matter how the question is phrased." },
  { t: "We hand over, we don't hang on", b: "General chatbots are built to keep the conversation going. Loops is built to know when the conversation shouldn't be with an AI at all. If what you need has moved beyond coaching, it says so, plainly and kindly, and points you to the right human support." },
];

const AicTheLine = () => (
  <Section id="the-line" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The line we never cross</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          There's a moment when knowledge is not enough.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>An AI can hold the world's knowledge. Research papers, expert advice, everything ever written about ADHD that it authorises. And there is still a moment when none of that is what a person needs. When the right answer isn't information. It's a trained human.</p>
          <p className="text-ink font-medium">We've worked very hard to know exactly where that moment is. It's the most important thing we've built.</p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {AIC_LINE.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <span className="inline-flex h-9 w-9 items-center justify-center rounded-pill bg-brand-soft text-brand-deep" aria-hidden="true">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3l7.5 3.4v5c0 4.4-3.1 8.5-7.5 9.6-4.4-1.1-7.5-5.2-7.5-9.6v-5L12 3Z" stroke="currentColor" strokeWidth="1.9" strokeLinejoin="round" /></svg>
            </span>
            <h3 className="mt-4 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>
);

/* ---------------- Crisis ---------------- */

const AIC_CRISIS = [
  { t: "Samaritans", b: "Call 116 123, free, any time of day or night." },
  { t: "Shout", b: "Text SHOUT to 85258 for free, confidential support by text." },
  { t: "NHS 111", b: "For urgent mental health support, call 111 and select the mental health option." },
];

const AicCrisis = () => (
  <Section id="crisis" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>In a crisis</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          We go above and beyond.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>If Loops recognises that you might be in distress or crisis, coaching stops. Completely. Its only job in that moment is to get you to real human support, clearly and quickly.</p>
          <p className="text-ink font-medium">No lectures. No judgement. No attempt to keep you in the app. Just a calm, direct path to people trained for exactly this.</p>
        </div>
      </div>

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

      <div className="mt-6 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 font-medium text-pretty">
          If you or someone else is in immediate danger, always call 999.
        </p>
        <div className="mt-4">
          <Button variant="secondary" size="sm" href="/support/find-help/">Find help now</Button>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Comparison ---------------- */

const AicCompare = () => (
  <Section id="compare" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The difference</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          So why not just use a general chatbot?
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You could. A third of the United Kingdom already does. But now you know what the trade-offs are.
        </p>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start">
        <article 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">A general chatbot</h3>
          <ul className="mt-4 flex flex-col gap-2.5">
            {[
              "Starts from zero every time. Doesn't know your goals.",
              "Replies in long blocks of text.",
              "Builds a hidden picture of you that you can't see or delete.",
              "Optimised to keep you talking.",
              "When a conversation drifts somewhere it shouldn't, it keeps going.",
            ].map((t) => (
              <li key={t} className="flex items-start gap-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-0.5 shrink-0 text-ink-3"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" /></svg>
                {t}
              </li>
            ))}
          </ul>
        </article>

        <article className="rounded-card border border-brand bg-brand-soft/40 p-6 sm:p-7 shadow-card ring-1 ring-brand/20">
          <h3 className="text-[18px] font-semibold tracking-tight2 text-ink">The AI in Loops</h3>
          <ul className="mt-4 flex flex-col gap-2.5">
            {[
              "Knows your goals, your loops and your progress.",
              "Trained on ADHD, answering in short, calm cards.",
              "Shows you everything it's learning, and lets you delete any of it.",
              "Built to coach, not to keep you scrolling.",
              "Built to stop coaching the moment you need something more.",
            ].map((t) => (
              <li key={t} className="flex items-start gap-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-0.5 shrink-0 text-brand"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                {t}
              </li>
            ))}
          </ul>
        </article>
      </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">
          Context. Control. And a line we never cross. That's the whole difference, and it's everything.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Final CTA ---------------- */

const AicFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <Container>
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-balance text-ink font-bold tracking-tight3 text-[30px] sm:text-[38px] lg:text-[44px] leading-[1.08]">
          Support that knows its limits is support you can trust.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Loops brings together small daily actions, a buddy, a journal and AI coaching designed with more care than the tools most people are using for far more serious things. Start with one small loop today.
        </p>
        <div className="mt-8 flex flex-col items-center gap-3">
          <Button variant="primary" size="lg" href="/#download">
            Get Early Access
            <svg width="16" height="16" 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>
          </Button>
          <span className="text-[13.5px] text-ink-3">Free for 7 days. No complicated setup. On iOS for now.</span>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Footer note ---------------- */

const AicNote = () => (
  <Section id="note" className="bg-base">
    <Container>
      <div className="max-w-3xl rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[14px] leading-[1.7] text-ink-3 text-pretty">
          Loops is a coaching app, not a medical or therapeutic service. If you're worried about your mental health, please speak to your doctor or a qualified professional. You can also find crisis lines and specialist support on <a href="/support/find-help/" className={AIC_LINK}>Find help now</a>.
        </p>
        <p className="mt-4 text-[14px] leading-[1.7] text-ink-3 text-pretty">
          Statistics on this page are drawn from Ofcom, the UK AI Security Institute, Mental Health UK, YouGov, the American Psychological Association, BACP and research commissioned by CNIL, published 2024 to 2026.
        </p>
      </div>
    </Container>
  </Section>
);

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

function AicApp() {
  return (
    <main id="main">
      <AicNav />
      <AicHero />
      <AicHappening />
      <AicUncomfortable />
      <AicWhatWorks />
      <AicHowBuilt />
      <AicTheLine />
      <AicCrisis />
      <AicCompare />
      <AicFinalCTA />
      <AicNote />
      <Footer />
    </main>
  );
}

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