/* Loops Knowledge Hub — "Newly Diagnosed With ADHD" — sensitive guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quotes, single CTA at the end only.
   Extra-calm: no urgency devices; doctor + crisis signposts kept as quiet body copy.
   Treatment blocks visually even-handed (none styled as more recommended).
   Inline links point to existing pages; UK English, no em dashes, "doctor" not GP, non-geo-specific. */

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

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

const ND_NAV_LINKS = [
  { label: "The feelings", href: "#feelings" },
  { label: "Where to begin", href: "#begin" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const NdNav = () => {
  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">
            {ND_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">
              {ND_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 NdHero = () => (
  <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>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          I was just diagnosed.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          You have the diagnosis. Now you're wondering where to actually begin. The appointment answered one question and quietly opened twenty more, and nobody hands you a map on the way out. This page is the map.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: The basics ---------------- */

const NdBasics = () => (
  <Section id="basics" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The basics</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A diagnosis is an explanation. It isn't an instruction manual.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Whether the assessment took months of <a href="/adhd/waiting-for-adhd-assessment/" className={ND_LINK}>waiting</a> or moved quickly, the moment itself tends to be strangely brief. A conversation, a conclusion, perhaps a prescription discussion, and then you're outside with a new fact about yourself and no obvious next step.
          </p>
          <p>
            Here's the honest shape of what you now have. The diagnosis explains the pattern: why <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={ND_LINK}>starting doesn't follow from knowing</a>, why <a href="/adhd/motivation-and-reward-with-adhd/" className={ND_LINK}>systems kept dying at week three</a>, why <a href="/adhd/emotional-dysregulation-with-adhd/" className={ND_LINK}>feelings arrive at full volume</a>, why it all cost so much to hide. What it doesn't do is change any of that by itself. Explanation and transformation are different events, and the space between them is exactly where the next few months of your life happen.
          </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">
          The diagnosis rewrites your past. What happens next is what decides whether it changes your future.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 3: Recognition (6 cards) ---------------- */

const ND_RECOGNITION = [
  "Relief and grief arriving together, sometimes in the same hour, and neither one cancelling the other out.",
  "Replaying your entire life with new subtitles. The school reports, the lost jobs, the friendships that faded. It all reads differently now.",
  "Anger, at no one in particular, about how long this took and how much it cost before anyone noticed.",
  "The urge to tell everyone. Or absolutely no one. Sometimes both in the same day.",
  "A surge of \"new me\" energy: fix the sleep, the admin, the career and the kitchen drawers, all this week.",
  "The doubt somehow surviving the diagnosis. \"What if they got it wrong? What if I fooled them?\"",
];

const NdRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</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 strange weather after the news.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the experiences people describe most often in the weeks after a diagnosis.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {ND_RECOGNITION.map((t, i) => (
          <article key={i} className="flex gap-4 rounded-card border border-line bg-white p-6 shadow-soft">
            <span aria-hidden="true" className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-[12px] font-bold text-brand-deep tnum">{i + 1}</span>
            <p className="text-[15px] leading-[1.6] text-ink text-pretty">{t}</p>
          </article>
        ))}
      </div>

      <div className="mt-10 max-w-prose 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">
          Every one of these is a normal response to genuinely big news. The re-read of your own history is not self-indulgence. It's the work, and it has a pace of its own.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The emotional re-read ---------------- */

const NdReRead = () => (
  <Section id="feelings" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the feelings</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Grief and relief are both correct.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The grief that often follows a diagnosis, especially a late one, is real and double-edged: relief at finally having an explanation, and mourning for the years spent believing the struggle was a personal defect. If you <a href="/adhd/masking-and-compensation-with-adhd/" className={ND_LINK}>masked and compensated your way here</a>, there may be decades of working double for the same result to re-read. That grief deserves room. It's an accurate response to genuinely lost ease.
          </p>
          <p>
            The anger is legitimate too, and worth aiming carefully: at stereotypes that hid you, at systems that missed you, not at the younger you who was coping with an unnamed thing using the only tools available. And the persistent doubt, the "what if I fooled them" thought, is common enough after diagnosis that it has its own quiet irony: it's usually the <a href="/adhd/shame-spiral-with-adhd/" className={ND_LINK}>old shame machinery</a> making one last argument. A clinician assessed a lifetime of evidence. The verdict doesn't need your imposter syndrome's approval.
          </p>
          <p>
            One caveat, said plainly: if the re-read tips into persistent low mood rather than waves of feeling, that's <a href="/support/find-help/" className={ND_LINK}>worth raising with your doctor</a>. Depression and anxiety commonly travel with ADHD, and treating them is part of this journey, not a detour from it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The reframe ---------------- */

const NdReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Something worth knowing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          Beware the overhaul. It's the oldest trap in the book.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The post-diagnosis energy surge is real, and it's worth understanding what it's made of. A diagnosis is novel, and <a href="/adhd/motivation-and-reward-with-adhd/" className={ND_LINK}>ADHD motivation funds novelty generously</a>. That's why the urge to rebuild your entire life this fortnight feels so compelling. It's also why, unmanaged, it ends the way new systems have always ended: <a href="/adhd/all-or-nothing-thinking-with-adhd/" className={ND_LINK}>the cliff around week three</a>, followed by the bitter conclusion that even the diagnosis didn't fix you.
          </p>
          <p>
            The diagnosis was never going to fix you, because you were never broken. What it offers is better aim. So spend the surge wisely: not on an overhaul, but on one domain, one system, one small daily step that will still be standing when the novelty fades. <a href="/adhd/build-routines-that-survive-bad-days/" className={ND_LINK}>Routines built for bad days</a> beat transformations built on momentum, every time.
          </p>
        </div>
      </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-[22px] sm:text-[28px] font-semibold tracking-tight2 text-ink leading-[1.25] text-balance">
          You don't need a new life by Friday. You need one thing that survives week three.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 6: The treatment landscape (5 even-handed blocks) ---------------- */

const NdTreatment = () => (
  <Section id="treatment" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Your options, honestly</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          What's on the table, and what each thing actually does.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          None of these is mandatory, most combine well, and the honest evidence picture is worth more to you than cheerleading.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        <div className="rounded-card border border-line bg-white 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">Medication</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">Clinical guidelines recommend stimulant medication as a first-line option, and the evidence for short-term symptom improvement is moderate to high.</span> Two honest caveats: finding the right medication and dose takes time and follow-up, and evidence is weaker for broader outcomes like quality of life. Medication raises capacity. It doesn't decide what the capacity gets spent on.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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">Therapy</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">CBT is the most well-supported psychological approach for adult ADHD, with evidence it improves core and emotional symptoms, especially alongside medication.</span> The known limit: the outcomes people care about most, day-to-day follow-through and self-esteem, are measured far less often in trials than symptom scores are.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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">Structure and coaching</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">Daily external structure targets the gap treatment often leaves: the space between knowing and doing.</span> Coaching-style support shows encouraging early results, though the evidence base is younger than for medication or CBT. What it asks of you is small and daily rather than large and occasional.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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">The foundations</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"><a href="/adhd/sleep-better-with-adhd/" className={ND_LINK}>Sleep</a>, exercise and <a href="/adhd/reduce-stress-with-adhd/" className={ND_LINK}>stress reduction</a> directly move ADHD symptoms, not just general wellbeing.</span> A 2025 randomised trial found structured exercise added to usual care produced clinically meaningful improvement over 12 weeks. These are treatment, not garnish.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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">Psychoeducation</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">Understanding your own mechanisms, <a href="/adhd/executive-function-with-adhd/" className={ND_LINK}>executive function</a>, <a href="/adhd/working-memory-with-adhd/" className={ND_LINK}>working memory</a>, reward and emotion, changes how you design your days and how you talk to yourself about the hard ones.</span> It's free, it starts today, and it makes every other treatment work better.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Telling people ---------------- */

const NdTelling = () => (
  <Section id="telling" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Disclosure</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Who to tell, and when, is genuinely your call.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            There's often pressure, internal or external, to announce the diagnosis or to guard it completely. Neither is a rule. Disclosure is a decision made context by context, and <a href="/adhd/masking-and-compensation-with-adhd/" className={ND_LINK}>you're allowed to make it slowly</a>.
          </p>
          <p>
            With partners and close friends, most people find that explaining the mechanisms lands better than the label alone: "my brain doesn't surface intentions at the right moment" starts a better conversation than a diagnosis name someone half-knows from headlines. At work, it's a genuinely complex call involving real trade-offs, and partial disclosure, naming what helps without naming the condition, works well for many people. Take your time. The diagnosis is yours, and so is the timetable.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: Where to begin (5 blocks) ---------------- */

const NdBegin = () => (
  <Section id="begin" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Practical steps</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A sensible first season, not a perfect first week.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        <div className="rounded-card border border-line bg-white 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">Keep the medical thread alive</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">Book the follow-up, keep notes on what changes and what doesn't, and treat titration as an experiment you're a partner in.</span> If medication is on your path, the tuning period rewards patience and records.
          </p>
        </div>
        <div className="rounded-card border border-line bg-base 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">Pick one domain</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">Sleep, mornings, work admin, one relationship pattern. One.</span> The overhaul urge will argue for all of them; week three is listening.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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">Build one small daily structure</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">A single trusted place for tasks, one prompt that comes to you, one step small enough to happen on a bad day.</span> Structure that survives variability beats structure that impresses on day one.
          </p>
        </div>
        <div className="rounded-card border border-line bg-base 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">Find your people</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">Other late-diagnosed adults are the fastest source of "oh, that's a thing?" you will ever meet.</span> Community turns a private history into a shared pattern, and it reliably softens the grief.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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">Re-read the past gently</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 point of the new subtitles isn't building a case against your younger self.</span> It's retiring one: years of "lazy" and "careless" deserve re-filing under "unsupported", and self-compassion here is functional, not soft. The research is direct that reducing shame improves persistence and restarts.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 9: Open questions ---------------- */

const NdOpenQuestions = () => (
  <Section id="open" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Honest limits</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          What we still don't know.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Long-term evidence is thinner than anyone would like. Medication trials are strongest over months rather than decades, and a major 2025 analysis found medication improved symptoms without clearly improving quality of life, which is precisely why structure and skills matter alongside it. Research on newly diagnosed adults specifically, what support works best in the first year, what sequence of treatments serves people best, is younger still.
          </p>
          <p>
            The lived-experience picture, meanwhile, is remarkably consistent: the people who do best tend to combine some form of treatment with daily structure, community and a kinder story about themselves. The trials are still catching up to that combination.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const NdBottomLine = () => (
  <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]">
          Begin small. Begin kind. Begin anyway.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            A diagnosis hands you three things: an explanation for the past, access to options for the future, and a surge of energy that will not last at its current strength. Spend them well. Let the re-read of your history happen at its own pace, with the grief and the relief both allowed in. Choose treatments like a partner, not a passenger, with honest expectations about what each one does.
          </p>
          <p>
            And resist the overhaul. The life you want gets built the way everything durable gets built with ADHD: one domain, one structure, one small daily step that's still standing when the novelty fades. You've spent years working against your brain without knowing it. Beginning to work with it doesn't need to happen by Friday.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 11: Final CTA ---------------- */

const NdFinalCTA = () => (
  <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>One domain, one small step</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]">
            One small step into the after.
          </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 exactly this stage: turning a new understanding of your brain into small, doable actions a day. No overhaul required, and the way back in after a bad day is always part of the design.
          </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 NdApp() {
  return (
    <main id="main">
      <NdNav />
      <NdHero />
      <NdBasics />
      <NdRecognition />
      <NdReRead />
      <NdReframe />
      <NdTreatment />
      <NdTelling />
      <NdBegin />
      <NdOpenQuestions />
      <NdBottomLine />
      <NdFinalCTA />
      <Footer />
    </main>
  );
}

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