/* Loops Knowledge Hub — "Recognising ADHD" — cluster landing page.
   Front door to the Recognising ADHD section: teaches core topics in brief and routes outward.
   Higher link density than article pages by design; "Read the full page" are text links,
   the single final CTA is the only button.
   Inline links point to existing pages; UK English, no em dashes, non-geo-specific. */

const RG_LINK = "text-brand-deep font-semibold hover:underline";
const RG_PAGELINK = "inline-flex items-center gap-1 text-[14.5px] font-semibold text-brand-deep hover:underline";

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

const RG_NAV_LINKS = [
  { label: "Adult symptoms", href: "#adult-symptoms" },
  { label: "Myths", href: "#myths" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const RgNav = () => {
  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">
            {RG_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">
              {RG_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="/#download" onClick={() => setOpen(false)}>Get Early Access</Button>
              <Button variant="secondary" size="md" href="/adhd/knowledge-hub/" onClick={() => setOpen(false)}>Back to Knowledge Hub</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

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

const RgHero = () => (
  <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">
        <a href="/adhd/knowledge-hub/" 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>
          ADHD Knowledge Hub
        </a>
        <p className="mt-6"><Kicker>Recognising ADHD</Kicker></p>
        <h1 className="mt-4 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          Why does all of this feel so familiar?
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          For the questions that come before any diagnosis. Maybe a video hit too close, a friend got diagnosed, or a lifetime of patterns finally lined up. This section is for exactly this stage: understanding what you're looking at, before anyone official weighs in.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: Topic index (6 cards) ---------------- */

const RG_INDEX = [
  { title: "Adult symptoms", body: "What ADHD actually looks like in a grown-up life, long after the classroom.", note: "Covered below", href: "#adult-symptoms" },
  { title: "Inattentive ADHD", body: "The quiet presentation: no bouncing, no disruption, decades of being missed.", note: "Covered below", href: "#inattentive" },
  { title: "Working memory", body: "The small mental workspace behind the lost threads and vanished intentions.", note: "Read the full page", href: "/adhd/working-memory-with-adhd/" },
  { title: "Masking", body: "The invisible work of looking fine, and what it costs.", note: "Read the full page", href: "/adhd/masking-and-compensation-with-adhd/" },
  { title: "Executive function", body: "The management layer of the brain, and why knowing was never the problem.", note: "Read the full page", href: "/adhd/executive-function-with-adhd/" },
  { title: "Myths and misconceptions", body: "The six beliefs that stop people asking the question at all.", note: "Covered below", href: "#myths" },
];

const RgIndex = () => (
  <Section id="index" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>In this section</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Start anywhere. It all connects.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {RG_INDEX.map((c) => (
          <a key={c.title} href={c.href} className="group focus-ring flex flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft transition-shadow hover:shadow-lift">
            <h3 className="text-[17px] font-semibold tracking-tight2 text-ink leading-snug group-hover:text-brand-deep transition-colors">{c.title}</h3>
            <p className="mt-2.5 flex-1 text-[15px] leading-[1.6] text-ink-2 text-pretty">{c.body}</p>
            <span className="mt-4 inline-flex items-center gap-1 text-[13px] font-semibold uppercase tracking-[0.06em] text-ink-3">
              {c.note}
              <svg width="13" height="13" 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>
            </span>
          </a>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 3: Adult symptoms ---------------- */

const RgAdultSymptoms = () => (
  <Section id="adult-symptoms" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Adult symptoms</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          ADHD grows up. The checklist didn't.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The official symptom lists were written with children in mind, which is part of why so many adults don't recognise themselves in them. ADHD doesn't disappear at eighteen. It changes costume. Hyperactivity turns inward and becomes restlessness, an engine that won't idle, a mind that channel-hops through conversations. Impulsivity becomes the interruption you regretted mid-sentence, the purchase, the resignation email sent at speed. Inattention becomes the missed deadline, the unread letter, the twelve open tabs of a task half-switched away from.
          </p>
          <p>
            In adult life the symptoms stop looking like symptoms and start looking like a personality: always late or defensively early, brilliant in a crisis and absent in the routine, <a href="/adhd/motivation-and-reward-with-adhd/" className={RG_LINK}>surrounded by systems that each worked for three weeks</a>. The clinical thread underneath is consistent: difficulty regulating attention, action and emotion, <a href="/adhd/could-this-be-adhd/" className={RG_LINK}>across settings, since early life</a>, at a genuine cost to things you care about.
          </p>
        </div>
      </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">
          Adult ADHD rarely looks like a disorder. It looks like a person who is "so capable" and permanently, privately at capacity.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Three presentations are recognised: predominantly hyperactive-impulsive, predominantly inattentive, and combined. The same person can also present differently across a lifetime, which is one of several reasons recognition so often arrives late.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Inattentive ADHD ---------------- */

const RgInattentive = () => (
  <Section id="inattentive" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Inattentive ADHD</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 quiet one that gets missed for decades.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Inattentive ADHD, what older material called ADD, comes without the visible hyperactivity. No bouncing, no disruption, nothing for a busy classroom to flag. Just a daydreamer, a slow starter, a bright child who "doesn't apply herself". The stereotype of ADHD as loud is precisely why the quiet presentation gets missed, often for decades, and it's a large part of why so many women and girls reach adulthood undiagnosed. Plenty of men and boys too.
          </p>
          <p>
            From the inside, inattentive ADHD is anything but quiet. It's a loud mind in a still body: <a href="/adhd/working-memory-with-adhd/" className={RG_LINK}>thoughts evaporating mid-sentence</a>, hours lost to fog or fascination, <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={RG_LINK}>tasks that won't start no matter how much they matter</a>, and a lifetime of watching less effort produce more result in other people. Because nothing about it disrupts anyone else, the struggle stays private, the coping becomes <a href="/adhd/masking-and-compensation-with-adhd/" className={RG_LINK}>masking</a>, and the record shows a person doing fine.
          </p>
          <p>
            If the loud version of ADHD never fit you but this paragraph did, that's worth taking seriously. The diagnostic criteria include this presentation fully. The public imagination just never caught up.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The three mechanisms ---------------- */

const RgMechanisms = () => (
  <Section id="mechanisms" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The machinery underneath</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Three concepts that make the rest of it make sense.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Most of what you just recognised traces back to three mechanisms, each with its own full page.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Executive function</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">The management layer of the brain: planning, starting, sequencing, monitoring.</span> ADHD is not a disorder of knowing what to do. It's a disorder of doing what you know, and that one distinction reframes almost everything on this page.
          </p>
          <p className="mt-4"><a href="/adhd/executive-function-with-adhd/" className={RG_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Working memory</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">The small, effortful workspace where intentions live between forming and acting.</span> ADHD makes it leaky, which is the real story behind the forgetting that was never indifference.
          </p>
          <p className="mt-4"><a href="/adhd/working-memory-with-adhd/" className={RG_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Masking</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">The learned, energy-intensive work of hiding the struggle and covering the gaps.</span> It's why the people who most suspect they have ADHD are so often the ones nobody would believe.
          </p>
          <p className="mt-4"><a href="/adhd/masking-and-compensation-with-adhd/" className={RG_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: Myths and misconceptions (6 cards) ---------------- */

const RG_MYTHS = [
  { myth: "ADHD is a childhood thing.", reality: (<>It persists into adulthood for most people who have it, changing shape rather than disappearing. Plenty of adults are recognising it for the first time in their thirties, forties and beyond.</>) },
  { myth: "Everyone's a little bit ADHD.", reality: (<>Everyone forgets things and procrastinates sometimes. ADHD is those patterns lifelong, across every setting, at a cost to things that matter, <a href="/adhd/executive-function-with-adhd/" className={RG_LINK}>even when you're trying hard</a>. Degree, persistence and cost are the whole diagnosis.</>) },
  { myth: "It's really just laziness.", reality: (<>Research is blunt on this: the struggle sits in <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={RG_LINK}>starting, sustaining and reward timing</a>, not in effort or values. Most people with ADHD work harder than their output shows, which is the exact opposite of laziness.</>) },
  { myth: "You did well at school, so it can't be ADHD.", reality: (<>Achievement doesn't rule ADHD out. It usually means <a href="/adhd/masking-and-compensation-with-adhd/" className={RG_LINK}>compensation was doing unpaid overtime</a>. The doing-well was the symptom, wearing a costume.</>) },
  { myth: "ADHD means you can't focus.", reality: (<>ADHD is attention that's hard to direct, not attention that's absent. The same brain that can't start the admin can <a href="/adhd/hyperfocus-with-adhd/" className={RG_LINK}>lock onto something fascinating for six hours</a>. Interest, not importance, holds the steering wheel.</>) },
  { myth: "It's over-diagnosed. It's a trend.", reality: (<>Diagnoses are rising, and the field's honest read is that this largely reflects historical under-recognition being corrected, especially in women and quiet presentations. Whether it's ever over-corrected in places is genuinely debated. Your individual pattern deserves assessment either way; trends don't have your history.</>) },
];

const RgMyths = () => (
  <Section id="myths" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Myths and misconceptions</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Six beliefs that stop people asking the question.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Each of these is common, confident, and wrong, and each one keeps someone from taking their own pattern seriously.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {RG_MYTHS.map((m, i) => (
          <article key={i} className="flex flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <p className="text-[16px] font-semibold tracking-tight2 text-ink leading-snug">&ldquo;{m.myth}&rdquo;</p>
            <p className="mt-3 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{m.reality}</p>
          </article>
        ))}
      </div>

      <div className="mt-10 max-w-prose rounded-card border border-line bg-base p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          If one of these myths has been living in your head in a family member's voice, it's worth noticing that none of them survives contact with the actual research.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Where to go next ---------------- */

const RgNext = () => (
  <Section id="next" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The journey from here</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Three pages, in the order people usually need them.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Could this be ADHD?</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">For weighing it properly: what else it could be, why it gets missed, and a sensible path from wondering to knowing.</span>
          </p>
          <p className="mt-4"><a href="/adhd/could-this-be-adhd/" className={RG_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Waiting for assessment</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">For the long gap between referral and answer, and everything that's still in your control during it.</span>
          </p>
          <p className="mt-4"><a href="/adhd/waiting-for-adhd-assessment/" className={RG_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Newly diagnosed</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">For the day the answer arrives, the strange weather after it, and where to actually begin.</span>
          </p>
          <p className="mt-4"><a href="/adhd/newly-diagnosed-with-adhd/" className={RG_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: The bottom line ---------------- */

const RgBottomLine = () => (
  <Section id="bottom-line" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The bottom line</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Familiarity is data.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            If this section keeps describing your life with uncomfortable precision, that's not suggestibility, and it's not jumping on a trend. Recognising a lifelong pattern is the first legitimate step of a process that, for a lot of adults, should have started decades ago.
          </p>
          <p>
            You don't have to conclude anything today. Read the mechanisms, notice what fits and what doesn't, and let the question be a question for as long as it needs to be. The next pages are ready when you are, and so is support that doesn't wait for certainty.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 9: Final CTA ---------------- */

const RgFinalCTA = () => (
  <Section id="start" className="bg-base">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>No certainty required</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            Support that starts before the answers do.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Loops is a daily coaching app built for ADHD brains, diagnosed or not. If the patterns on this page feel familiar, Loops works with them from day one.
          </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 to start. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function RgApp() {
  return (
    <main id="main">
      <RgNav />
      <RgHero />
      <RgAdultSymptoms />
      <RgInattentive />
      <RgMechanisms />
      <RgMyths />
      <RgNext />
      <RgBottomLine />
      <RgFinalCTA />
      <Footer />
    </main>
  );
}

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