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

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

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

const EF_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 EfNav = () => {
  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">
            {EF_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">
              {EF_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 EfHero = () => (
  <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]">
          Executive function with ADHD: the hard part was never knowing what to do
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          If you can plan something perfectly in your head and still not do it, you've already met executive dysfunction. Knowing and doing run on different systems. ADHD affects the doing one.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: What executive function is ---------------- */

const EfWhatItIs = () => (
  <Section id="what" 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]">
          The management layer of the brain.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Executive function isn't one skill. It's an umbrella term for the set of mental processes that turn intentions into actions: planning, prioritising, starting, sequencing steps, holding information in mind while you use it, resisting distraction, monitoring how it's going, and adjusting when it isn't.
          </p>
          <p>
            A useful way to picture it: executive function is the management layer of the brain. It doesn't hold your knowledge or your skills. It decides which of them get deployed, when, in what order, and for how long. When that layer is unreliable, everything downstream becomes unreliable too, even when ability and motivation are completely intact.
          </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">
          Russell Barkley, whose model of ADHD is among the most cited, frames it in one line: ADHD is not a disorder of knowing what to do. It's a disorder of doing what you know.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>That distinction sounds small. It changes everything about what help should look like.</p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 3: The name problem ---------------- */

const EfNameProblem = () => (
  <Section id="name" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>A common misunderstanding</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Why "attention deficit" is a misleading name.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD isn't a shortage of attention. Anyone who has watched someone with ADHD spend six unbroken hours on something fascinating knows the attention is there. What differs is how attention is regulated. In ADHD, attention tends to follow interest, novelty and urgency rather than importance. That's why focus can feel unpredictable rather than simply absent, and why <a href="/adhd/hyperfocus-with-adhd/" className={EF_LINK}>hyperfocus</a> sits inside the same condition as chronic distraction without any contradiction.
          </p>
          <p>
            That regulation is an executive job. So is the ability to start a task that doesn't feel rewarding yet, which depends heavily on <a href="/adhd/motivation-and-reward-with-adhd/" className={EF_LINK}>how ADHD brains process motivation and reward</a>. Executive dysfunction and reward differences aren't competing explanations for ADHD. They interact, and most everyday struggles involve both at once.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The intention-to-action gap ---------------- */

const EfGap = () => (
  <Section id="gap" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the gap</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Knowing precisely what to do, and still not doing it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Clinicians working with adults with ADHD describe something the psychologist J. Russell Ramsay calls the intention-to-action gap. People know exactly what they should do. They understand the consequences of not doing it. They may care about it more than anyone around them. And they still can't reliably make the action happen at the moment it needs to happen.
          </p>
          <p>
            This gap is where most productivity advice quietly fails. Advice targets the planning stage: clarify the goal, break it down, schedule it. But research tracking people in real time suggests many failures to start happen in a very short window right at the point of performance, when a believable "not now" thought arrives seconds before action. The plan was fine. The bridge between plan and behaviour is what wobbled.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: How it shows up (6 cards) ---------------- */

const EF_CARDS = [
  { t: "Starting", body: (<>The task is known, sized, and even easy. It still doesn't begin. This is task initiation failure, and it's the engine of most <a href="/adhd/stop-procrastinating-with-adhd/" className={EF_LINK}>ADHD procrastination</a>.</>) },
  { t: "Sequencing", body: (<>Faced with a full plate, everything feels equally loud and nothing sorts itself into an order. It's why <a href="/adhd/feel-less-overwhelmed-with-adhd/" className={EF_LINK}>overwhelm with ADHD</a> is a prioritisation bottleneck, not a workload problem.</>) },
  { t: "Holding the thread", body: (<>Plans evaporate between rooms and instructions fall out of mind mid-task. That's <a href="/adhd/working-memory-with-adhd/" className={EF_LINK}>working memory</a>, an executive process that runs less reliably in ADHD.</>) },
  { t: "Tracking time", body: (<>Deadlines feel abstract until they're suddenly on fire, and tasks take three times as long as estimated. This overlaps with <a href="/adhd/time-blindness-with-adhd/" className={EF_LINK}>time blindness</a>.</>) },
  { t: "Regulating responses", body: (<>Inhibition applies to feelings as well as impulses. That's part of why <a href="/adhd/emotional-dysregulation-with-adhd/" className={EF_LINK}>emotional dysregulation</a> is so common alongside ADHD.</>) },
  { t: "Keeping systems running", body: (<>Building a system takes one burst of effort. Maintaining it takes executive function every day, which is why <a href="/adhd/get-organised-with-adhd/" className={EF_LINK}>organisation</a> fails at the upkeep stage, not the setup stage.</>) },
];

const EfShowsUp = () => (
  <Section id="shows-up" 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]">
          What executive dysfunction looks like day to day.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          The abstract definition becomes much more recognisable as a list of ordinary moments.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {EF_CARDS.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[17px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
            <p className="mt-2.5 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.body}</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">
          None of this means every person with ADHD struggles with every item on this list. Executive function is a cluster, and people have genuinely different profiles within it. Some people never lose their keys and cannot start an email. Others start everything instantly and can't sequence any of it.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: The fluctuation problem ---------------- */

const EfFluctuation = () => (
  <Section id="fluctuation" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The part people misread</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It comes and goes. That isn't inconsistency of character.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The same task that was impossible on Tuesday takes four minutes on Saturday. It's tempting to read that as proof the difficulty was optional. It isn't.
          </p>
          <p>
            Executive capacity is sensitive to context: sleep, stress, interest, hormones, medication timing, and how much regulating you've already done that day. <a href="/adhd/sleep-better-with-adhd/" className={EF_LINK}>Poor sleep</a> reliably degrades it. <a href="/adhd/reduce-stress-with-adhd/" className={EF_LINK}>Chronic stress</a> does too, which creates a genuinely unfair loop: the more demanding life gets, the less capacity you have for the exact functions demanding periods require.
          </p>
          <p>
            Someone masking through a difficult job may spend most of their daily capacity before they get home, which is why competence at work and chaos at home so often coexist. There's more on that pattern in <a href="/adhd/masking-and-compensation-with-adhd/" className={EF_LINK}>masking and compensation</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: What helps (5 blocks + closing note) ---------------- */

const EfWhatHelps = () => (
  <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]">
          What tends to actually help.
        </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">Externalise, don't internalise</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">External structure outperforms internal effort. This is the most consistent finding across research and lived experience.</span> Information held in the world, in one visible trusted place, survives. Information held in your head doesn't.
          </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">Shrink the step, not the goal</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">Since initiation is the bottleneck, reduce the size of the very next action until starting costs almost nothing.</span> The goal can stay ambitious. The doorway needs to be small.
          </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">Design for the bad day</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 system that requires a good day to operate will collapse on the first bad one.</span> The systems that survive are the ones <a href="/adhd/build-routines-that-survive-bad-days/" className={EF_LINK}>built around variability rather than perfect conditions</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">Borrow regulation from outside</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">Deadlines, other people and structured check-ins all provide executive support from the environment.</span> <a href="/adhd/body-doubling-with-adhd/" className={EF_LINK}>Body doubling</a> works for many people for exactly this reason, though not for everyone.
          </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">Treat the foundations as treatment</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, movement and stress reduction aren't lifestyle extras here.</span> They directly raise or lower the capacity everything else depends on.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Medication helps many adults meaningfully, and NICE guidance supports it as a first-line option. It's worth being honest about its shape, though: evidence is strongest for improving core symptoms in the short term, and weaker for broader outcomes like quality of life and day-to-day follow-through. Medication can raise capacity. It doesn't decide what the capacity gets spent on, which is why structure still matters alongside it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const EfOpenQuestions = () => (
  <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>
            Executive function research is genuinely unsettled in places. Researchers still debate how many distinct executive processes there are and how cleanly they separate. Standard clinic tests of executive function correlate surprisingly weakly with real-world functioning, meaning someone can score normally in an assessment and still struggle profoundly at home.
          </p>
          <p>
            Most intervention research also measures symptom scores rather than the outcomes people care about, like whether the important thing got done this week. Those gaps are worth naming, because they explain why lived experience sometimes runs ahead of the published evidence.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const EfBottomLine = () => (
  <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]">
          You were never fighting a knowledge problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Executive function is the machinery that turns intention into action, and ADHD makes that machinery unreliable rather than absent. The knowledge was never missing. The willpower was never the issue.
          </p>
          <p>
            What helps is not more pressure on internal systems that fluctuate, but more support built into the world around them: smaller starting points, externalised memory and time, structure that survives bad days, and foundations treated as seriously as symptoms. Understanding this doesn't fix everything. It does stop you fighting the wrong problem.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const EfFinalCTA = () => (
  <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>External executive support</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 the doing part.
          </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 works as external executive support. It turns your goal into one small, obvious next step each day and gives you an easy way back in when a day goes wrong. You bring the intention. Loops helps with the doing.
          </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 EfApp() {
  return (
    <main id="main">
      <EfNav />
      <EfHero />
      <EfWhatItIs />
      <EfNameProblem />
      <EfGap />
      <EfShowsUp />
      <EfFluctuation />
      <EfWhatHelps />
      <EfOpenQuestions />
      <EfBottomLine />
      <EfFinalCTA />
      <Footer />
    </main>
  );
}

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