/* Loops Knowledge Hub — "Assessment, Diagnosis & Getting Help" — cluster landing page.
   Front door to the Assessment section: explains routes in plain language and routes outward.
   NOTE: unlike other hub pages, this one is intentionally UK/NHS-specific (NHS pathways,
   Right to Choose is England-only, GP referral) because the geo-specifics ARE the content.
   Higher link density by design; "Read the full page" are text links; single final CTA button.
   UK English, no em dashes. */

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

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

const AD_NAV_LINKS = [
  { label: "What happens", href: "#assessments" },
  { label: "The routes", href: "#nhs" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const AdNav = () => {
  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">
            {AD_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">
              {AD_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 AdHero = () => (
  <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>Assessment, Diagnosis &amp; Getting Help</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]">
          Getting assessed can be slow and confusing. It doesn't have to be a mystery.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Here's what actually happens: what an assessment involves, the routes that exist, what they cost in time and money, and how to make the wait a little easier. Plain language, honest caveats, no jargon.
        </p>
        <p className="mt-6 text-[13px] font-medium uppercase tracking-[0.1em] text-ink-3">
          Last reviewed July 2026
        </p>
      </div>
    </Container>
  </section>
);

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

const AD_INDEX = [
  { title: "ADHD assessments", body: "What actually happens in the room, who can diagnose, and what they're looking for.", note: "Covered below", href: "#assessments" },
  { title: "NHS pathways", body: "The standard route, step by step, and where it slows down.", note: "Covered below", href: "#nhs" },
  { title: "Right to Choose", body: "The England-specific option that can significantly shorten the wait.", note: "Covered below", href: "#right-to-choose" },
  { title: "Private diagnosis", body: "Faster, at a price, with one crucial question to ask before you book.", note: "Covered below", href: "#private" },
  { title: "Waiting lists", body: "The long gap, and everything that's still in your control during it.", note: "Read the full page", href: "/adhd/waiting-for-adhd-assessment/" },
  { title: "Preparing for appointments", body: "What to bring, what to write down, and why you shouldn't arrive polished.", note: "Covered below", href: "#preparing" },
  { title: "After diagnosis", body: "The strange weather after the news, and where to actually begin.", note: "Read the full page", href: "/adhd/newly-diagnosed-with-adhd/" },
];

const AdIndex = () => (
  <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]">
          The whole journey, in one place.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {AD_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: ADHD assessments ---------------- */

const AdAssessments = () => (
  <Section id="assessments" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>ADHD assessments</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 actually happens in the room.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            An ADHD assessment is a structured conversation, not an exam. There's nothing to revise and nothing to pass. A specialist clinician, typically a psychiatrist or another appropriately qualified professional, takes a detailed history: what your difficulties look like now, what they looked like growing up, and how they play out across work, home and relationships.
          </p>
          <p>
            Expect rating scales and questionnaires, sometimes sent in advance, and often a request for input from someone who knew you as a child or knows you well now. School reports help if they exist. What the clinician is establishing is the diagnostic core: <a href="/adhd/could-this-be-adhd/" className={AD_LINK}>a lifelong pattern, present across settings, at genuine cost</a>, and not better explained by something else, which is why they'll also ask about mood, anxiety, sleep and physical health.
          </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 assessment is looking for a pattern across your whole life. Your job isn't to perform it. It's to describe it honestly.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Outcomes vary: a diagnosis, a different explanation with its own route to support, or sometimes a request for more information. A thorough assessment that concludes "not ADHD" should still tell you what it thinks is going on instead.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: NHS pathways ---------------- */

const AdNhs = () => (
  <Section id="nhs" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>NHS pathways</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 standard route, step by step.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The usual NHS journey starts with your GP. You describe the pattern, ideally with concrete examples, and ask for a referral to an adult ADHD service. The GP refers you to a specialist team, you join their list, and the assessment happens when you reach the front of it. If medication follows, it's started and adjusted by the specialist, with prescribing often transferred back to your GP later under a shared care agreement.
          </p>
          <p>
            The honest part: the middle step is where years can go. Waits vary enormously by region and by nation, demand has risen sharply, and services have adapted unevenly. None of that is in your control. What is: asking the GP what the realistic current wait is, whether more than one service exists locally, and getting the referral confirmed in writing. <a href="/adhd/waiting-for-adhd-assessment/" className={AD_LINK}>The waiting itself has its own page</a>, because it deserves one.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: Right to Choose ---------------- */

const AdRightToChoose = () => (
  <Section id="right-to-choose" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Right to Choose</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 option your GP might not mention.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            If you live in England, you have a legal right to choose which provider you're referred to for a first appointment, as long as that provider holds an NHS contract for the service. This is called Right to Choose, and for ADHD assessment it matters enormously: some NHS-contracted providers run waits measured in months where local services are quoting years. The assessment remains NHS-funded. You don't pay.
          </p>
          <p>
            How to use it: research providers currently accepting Right to Choose referrals for adult ADHD, then ask your GP to refer you to your chosen one by name. GPs vary in how familiar they are with the mechanism, so going in prepared, calmly, with the provider's referral details, makes the conversation easier. Two caveats, held honestly: this is England-only, with Scotland, Wales and Northern Ireland running different systems, and provider lists, waits and criteria change often enough that checking current information before choosing is essential rather than optional.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: Private diagnosis ---------------- */

const AdPrivate = () => (
  <Section id="private" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Private diagnosis</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Faster, at a price, with one question to ask first.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Going private trades money for time: assessments can happen in weeks, and costs vary widely enough that quoting figures here would date faster than this page. What you're paying for should be the same thing the NHS provides, a thorough, guideline-concordant assessment by an appropriately qualified clinician. A proper private diagnosis is a real diagnosis, not a lesser one, and it's worth saying that plainly because people quietly worry about it.
          </p>
          <p>
            The crucial question to ask before you book is about what happens after: if medication is recommended, will your NHS GP accept a shared care agreement with this provider? Some GP practices do, some decline, and a private prescription without shared care means paying privately for medication and reviews indefinitely. Asking your own GP practice about their shared care position before spending on an assessment is the single best piece of due diligence available. And choose providers as carefully as you'd choose any clinician: thoroughness varies, and a rushed assessment serves nobody, whoever pays for it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Preparing for appointments ---------------- */

const AdPreparing = () => (
  <Section id="preparing" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Preparing for appointments</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Bring evidence. Don't bring a performance.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Preparation genuinely changes assessments, because <a href="/adhd/working-memory-with-adhd/" className={AD_LINK}>the machinery being assessed is the same machinery that struggles to produce examples on demand</a>. Before any appointment, GP or specialist, write it down: concrete examples across your life, school and work patterns, the systems that didn't stick, what it costs you now. Screener scores, <a href="/adhd/could-this-be-adhd/" className={AD_LINK}>like the ASRS</a>, and anything from someone who knew you young all help. Bring the notes and use them without embarrassment; clinicians see prepared patients as helpful, not suspicious.
          </p>
          <p>
            Then the part that matters most, especially if you've spent <a href="/adhd/masking-and-compensation-with-adhd/" className={AD_LINK}>a lifetime masking</a>: don't arrive polished. The composed, coping version of you is the one that got missed for decades, and an assessment is one of the few rooms where the unedited version is exactly what's needed. Describe the worst days, the hidden costs, the things you've never said out loud. It isn't complaining. It's the data.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: After diagnosis ---------------- */

const AdAfter = () => (
  <Section id="after" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>After diagnosis</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 answer arrives. Then what?
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            However it lands, the assessment's conclusion is a beginning rather than an ending. A diagnosis opens options, medication, therapy, adjustments, and a re-read of your whole history that deserves its own space: <a href="/adhd/newly-diagnosed-with-adhd/" className={AD_LINK}>the newly diagnosed page</a> covers the grief, the relief, the treatment landscape and a sensible first season.
          </p>
          <p>
            If the answer is no, that's covered honestly too: <a href="/adhd/waiting-for-adhd-assessment/" className={AD_LINK}>what a "not ADHD" outcome does and doesn't mean, and when a second opinion is legitimate</a>. Either way, the difficulties that sent you here were real, and support doesn't expire based on which explanation fits them.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AdOpenQuestions = () => (
  <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 this page can't promise you.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Everything here describes how the system generally works, and the system is a moving target: waiting times shift, Right to Choose provider lists change, shared care policies vary practice by practice, and services reorganise faster than any page can track. Treat this as the map, not the timetable, and verify the current position for anything you're about to act on, ideally directly with the GP, provider or current NHS guidance.
          </p>
          <p>
            And a plain disclaimer, because it matters: this is general information, not medical advice. Your GP and the clinicians who assess you are the right people for decisions about your specific situation.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AdBottomLine = () => (
  <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]">
          Slow and confusing is the system, not the ceiling.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The route to an ADHD assessment has more paths than most people are told: the standard NHS referral, Right to Choose in England, and private assessment with its shared-care question asked in advance. None of them is wrong. They trade time, money and admin differently, and knowing all three exists is often the difference between years of waiting and months.
          </p>
          <p>
            Whichever route you take: get the referral in writing, prepare the evidence, arrive unpolished, and don't put life on hold while the system does its slow work. The wait is long. <a href="/adhd/waiting-for-adhd-assessment/" className={AD_LINK}>You don't have to be passive inside it</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AdFinalCTA = () => (
  <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>Before, during and after</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 for every stage of the queue.
          </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, before, during and after assessment. No diagnosis required, no waiting list to join.
          </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 AdApp() {
  return (
    <main id="main">
      <AdNav />
      <AdHero />
      <AdAssessments />
      <AdNhs />
      <AdRightToChoose />
      <AdPrivate />
      <AdPreparing />
      <AdAfter />
      <AdOpenQuestions />
      <AdBottomLine />
      <AdFinalCTA />
      <Footer />
    </main>
  );
}

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