/* Loops Knowledge Hub — "Working Memory With ADHD" — editorial guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quote, single CTA at the end only.
   Inline links point to existing pages; UK English, no em dashes. */

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

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

const WM_NAV_LINKS = [
  { label: "What it is", href: "#what" },
  { label: "What helps", href: "#help" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const WmNav = () => {
  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">
            {WM_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">
              {WM_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 WmHero = () => (
  <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]">
          Working memory with ADHD: the small mental workspace behind so many big problems
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Lost threads, vanished intentions, rooms you walked into for reasons unknown. These moments feel like carelessness. They're actually the signature of working memory, one of the most consistently affected processes in ADHD.
        </p>
      </div>
    </Container>
  </section>
);

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

const WM_RECOGNITION = [
  "You walk into a room and the reason you came evaporates somewhere in the doorway.",
  "You lose the thread of your own sentence halfway through saying it.",
  "You read the same paragraph three times and retain none of it.",
  "You meant to send that message, and you meant it sincerely, for eleven days.",
  "You interrupt people, not from rudeness, but because you know the thought won't survive a thirty-second wait.",
  "You've captured notes in four apps and two notebooks, and none of them resurface when they matter.",
];

const WmRecognition = () => (
  <Section id="recognition" className="bg-soft">
    <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]">
          You're not forgetful in the way people think.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the moments people with ADHD describe most often when working memory is the mechanism underneath.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {WM_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-base p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          None of this is carelessness. It's a small, effortful mental workspace dropping things, and there are reliable ways to work around it.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 3: What working memory is ---------------- */

const WmWhatItIs = () => (
  <Section id="what" className="bg-base">
    <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]">
          Not your memory of the past. Your workspace for right now.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Working memory is the mental space where you hold information while you use it: the phone number between hearing it and dialling it, the instruction between receiving it and acting on it, the point you're building towards while you're mid-sentence.
          </p>
          <p>
            Two things about this workspace matter. First, it's small in everyone. Most people can hold only a handful of items at once. Second, it's effortful to maintain. Holding something in mind while doing something else is active work, not passive storage. ADHD affects both the reliability of what's held and the ease of holding it, which is why the workspace doesn't just feel small. It feels leaky.
          </p>
          <p>
            Working memory is one component of executive function, and it's the component most other executive processes lean on. Planning requires holding steps in mind. Prioritising requires holding options in mind. When the workspace drops things, everything built on top of it wobbles at the same time.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Remembering to remember ---------------- */

const WmProspective = () => (
  <Section id="prospective" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The hidden mechanism</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 plan didn't fail. It never arrived.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            There's a specific cousin of working memory that deserves its own mention: prospective memory, the ability to remember to act on an intention at the right future moment. Not "what did I plan?" but "did the plan surface when it mattered?"
          </p>
          <p>
            Research has found that everyday prospective memory partially explains the link between ADHD and procrastination. That's worth sitting with. Some portion of what looks like <a href="/adhd/stop-procrastinating-with-adhd/" className={WM_LINK}>avoiding a task</a> is actually the intention failing to arrive in consciousness at a usable moment. The person didn't decide not to do the thing. The thing never presented itself for a decision.
          </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">
          Forgetting a birthday, a bill, or a promise made warmly reads from the outside as not caring. From the inside, the caring was never in question. The retrieval was.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          That gap does real damage in <a href="/adhd/building-better-relationships/" className={WM_LINK}>relationships</a>, mostly because both people misread it as a statement about priorities.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: Why lists aren't enough ---------------- */

const WmLists = () => (
  <Section id="lists" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The retrieval problem</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Writing it down isn't the whole answer.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The standard advice is to write everything down, and it's half right. Capture genuinely helps. But the failure usually isn't at the writing-it-down stage. It's at the retrieving-it-when-it-matters stage. A list can't help if the brain doesn't prompt itself to look at the list.
          </p>
          <p>
            This is the quiet reason so many <a href="/adhd/get-organised-with-adhd/" className={WM_LINK}>organisation systems fail with ADHD</a>. Each capture felt responsible in the moment. None of them resurface on their own. The system becomes an archive of good intentions rather than a working prompt.
          </p>
          <p>
            What actually compensates for working memory is capture plus surfacing: one trusted place, checked by habit or brought to you by an active prompt, at the moment action is possible. The difference between a note you made and a note that finds you is the difference between the system working and not.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: Where it shows up most (4 blocks) ---------------- */

const WmShowsUp = () => (
  <Section id="shows-up" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The pattern in real life</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Four places the workspace gets overloaded.
        </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">Learning and study</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">Holding new material in mind while connecting it to what you already know is working memory's core job.</span> It's part of why <a href="/adhd/make-learning-a-habit-with-adhd/" className={WM_LINK}>sustaining learning is hard with ADHD</a>, and under <a href="/adhd/pass-exams-with-adhd/" className={WM_LINK}>exam conditions</a> the load doubles: research finds ADHD students often lose marks to careless errors rather than slower thinking, which is exactly what an overloaded workspace produces.
          </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">Conversations and meetings</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">Holding your point while someone else talks is a genuine load.</span> Verbal instructions with no written trail are effectively messages written on a fogged window.
          </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">Multi-step tasks</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">Any task with steps held only in your head sheds steps as it goes.</span> The task didn't feel hard. It just quietly lost pieces.
          </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">Interruptions</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">Picking a task back up means reconstructing where you were, and that reconstruction is expensive with ADHD.</span> It's one reason <a href="/adhd/finish-what-you-started-with-adhd/" className={WM_LINK}>finishing things is disproportionately hard</a>: every gap in a project charges a re-entry fee.
          </p>
        </div>
      </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">
          As with everything in ADHD, there's real variation here. Not everyone shows these difficulties to the same degree, and stress, sleep and overall load move the dial substantially day to day.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: What helps (6 blocks) ---------------- */

const WmWhatHelps = () => (
  <Section id="help" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Working with it</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Build a world where less needs holding.
        </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">One source of truth</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">Not the best app. One place, any place, that everything funnels into.</span> Checking it becomes a single habit rather than a search across five systems.
          </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">Prompts that arrive, rather than wait</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">Reminders that surface at the moment of action beat lists that rely on being visited.</span> Time-based and location-based prompts do the remembering-to-remember on your behalf.
          </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">Externalise mid-task, not just before it</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">Write the next step down while working, and leave a "you were here" note before stopping.</span> This lowers the re-entry fee that interruptions charge.
          </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">Ask for it in writing</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">Turning verbal instructions into written ones isn't an admission of weakness.</span> It's matching the format of information to the machinery that has to process it.
          </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">Reduce concurrent load</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">Two workspace-hungry tasks at once guarantees drops.</span> Single-tasking isn't a virtue here, it's an engineering constraint.
          </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">Protect 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">Sleep loss measurably shrinks working memory in everyone.</span> With ADHD, it shrinks from an already tighter starting point. There's more in the guide on <a href="/adhd/sleep-better-with-adhd/" className={WM_LINK}>sleep with ADHD</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: Open questions ---------------- */

const WmOpenQuestions = () => (
  <Section id="open" className="bg-soft">
    <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>
            Working memory training programmes deserve an honest flag: despite heavy marketing, evidence that training games produce lasting real-world improvement is weak. Gains tend to stay inside the trained task. The better-supported route is compensation, changing the environment so less has to be held in mind, rather than trying to enlarge the workspace itself.
          </p>
          <p>
            How much of the ADHD working memory difference reflects capacity versus attention wandering during the holding period is also still debated in the research, and the answer likely differs between people.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const WmBottomLine = () => (
  <Section id="bottom-line" className="bg-base">
    <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]">
          The forgetting was never indifference.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Working memory is the small, effortful workspace where intentions live between forming and acting, and ADHD makes it leakier than the world assumes. The lost threads were never carelessness.
          </p>
          <p>
            What helps isn't holding more in your head through sheer determination, but building a world where less needs to be held: one trusted place, prompts that come to you, written trails, and grace for the moments the workspace drops something anyway. It will still drop things. The goal is making the drops cheap.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 10: Final CTA ---------------- */

const WmFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <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>Off your mind, into one place</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]">
            Let something else do the holding.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Loops is a daily coaching app that does the remembering-to-remember for you. It holds your goal, surfaces small next steps at the right moment each day, and keeps a visible trail of progress so nothing important lives only in your head.
          </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">7-day free trial. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function WmApp() {
  return (
    <main id="main">
      <WmNav />
      <WmHero />
      <WmRecognition />
      <WmWhatItIs />
      <WmProspective />
      <WmLists />
      <WmShowsUp />
      <WmWhatHelps />
      <WmOpenQuestions />
      <WmBottomLine />
      <WmFinalCTA />
      <Footer />
    </main>
  );
}

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