/* Loops Knowledge Hub — "Motivation and Reward 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 MOT_LINK = "text-brand-deep font-semibold hover:underline";

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

const MOT_NAV_LINKS = [
  { label: "The wiring", href: "#wiring" },
  { label: "What helps", href: "#help" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const MotNav = () => {
  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">
            {MOT_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">
              {MOT_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 MotHero = () => (
  <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]">
          Motivation and reward with ADHD: why interest beats importance
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          You can't make yourself spend twenty minutes on a task with real consequences. The same evening, you spend six absorbed hours on something that matters to nobody. Both are the same brain. Neither is a character flaw.
        </p>
      </div>
    </Container>
  </section>
);

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

const MOT_RECOGNITION = [
  "The important task sits untouched for weeks. The unimportant one just swallowed a whole weekend.",
  "Every new project arrives with rocket fuel. Around week three, the fuel is simply gone.",
  "You do your best work in adrenalised final-hour sprints, and you're tired of living that way.",
  "A drawer of abandoned hobbies quietly suggests you can't commit to anything.",
  "Long-term goals feel theoretical, however much you care about them on paper.",
  "People tell you to just care more. You already care. Caring was never the missing piece.",
];

const MotRecognition = () => (
  <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]">
          The pattern that confuses everyone, including you.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the experiences people with ADHD describe most often when the reward system is the mechanism underneath.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {MOT_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 laziness. It's a reward system with specific, well-documented triggers, and it can be worked with once you know what they are.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 3: Interest-based attention ---------------- */

const MotWiring = () => (
  <Section id="wiring" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The wiring</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Attention follows interest, novelty, urgency and challenge. Not importance.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            In most accounts of how ADHD motivation works, effort follows four things reliably: interest, novelty, urgency and challenge. What it doesn't reliably follow is importance. A task being important, even calendar-urgent important, generates surprisingly little pull on its own.
          </p>
          <p>
            This is why the harder someone with ADHD tries to run their life on importance, the more baffling their own behaviour becomes. The system was never listening to importance. It was listening for something that feels rewarding now, which is a different question entirely. Focus feeling unpredictable is largely this mechanism viewed from the inside, and <a href="/adhd/hyperfocus-with-adhd/" className={MOT_LINK}>hyperfocus</a> is what happens when a task hits all the triggers at once.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The timing mismatch ---------------- */

const MotTiming = () => (
  <Section id="timing" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the 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 dopamine timing mismatch.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The most reframing finding in this area concerns timing rather than quantity. Research on delay sensitivity shows that ADHD brains discount delayed rewards more steeply than most: if a payoff feels distant, abstract or emotionally flat, the task loses its motivational pull very quickly. A large 2026 study of 640 adults found the ADHD-procrastination relationship was significantly explained by sensitivity to delay and the perceived low value of a task in the moment, not by how important the task objectively was.
          </p>
          <p>
            Neuroimaging adds a striking layer: delay cues in ADHD are linked to increased activation in brain regions associated with threat and effortful control. Waiting doesn't just feel boring. For an ADHD brain, it can register as genuinely aversive. That's a physiological finding, not a metaphor.
          </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-[27px] font-semibold tracking-tight2 text-ink leading-[1.25] text-balance">
          Most meaningful goals pay off at the end, and often only at the end. Mattering-later is precisely the signal that gets discounted.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          This mechanism sits underneath <a href="/adhd/stop-procrastinating-with-adhd/" className={MOT_LINK}>procrastination</a>, <a href="/adhd/finish-what-you-started-with-adhd/" className={MOT_LINK}>abandoned projects</a>, and most of the places where ADHD and long-term goals collide.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The novelty cliff ---------------- */

const MotNovelty = () => (
  <Section id="novelty" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Why starting is easy and staying isn't</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Novelty, and the cliff where it ends.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            New things produce a real dopamine response in ADHD brains, often a strong one. This is why starting is frequently the easy part: the new project, the new plan, the new routine all arrive with built-in fuel. Then, somewhere around the point where the thing becomes familiar, usually within a few weeks, the response fades. The task didn't change. The neurochemistry under it did.
          </p>
          <p>
            People experience this as suddenly hitting sand. The project that was effortless becomes effortful overnight, and because nobody warned them the fuel was temporary, they read the change as proof they didn't really want it. Whole cycles of <a href="/adhd/build-a-side-project-with-adhd/" className={MOT_LINK}>starting side projects and watching them stall</a> run on this single mechanism.
          </p>
          <p>
            The fade is predictable, which is oddly good news. If you know the cliff is coming at roughly week three, you can build for it instead of being ambushed by it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: Urgency ---------------- */

const MotUrgency = () => (
  <Section id="urgency" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The other fuel</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Urgency works. Then it sends an invoice.
        </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 second trigger that works with near-total reliability: urgency. A deadline tomorrow generates the focus that a deadline next month couldn't. Many adults with ADHD have quietly built their entire working life on this.
          </p>
          <p>
            The honest thing to say is that it genuinely works, in the moment. The dishonest thing would be to leave out the invoice: chronic background dread, work quality capped by whatever the last minute allows, and a physiological cost. Each crisis sprint is followed by a crash, and <a href="/adhd/recover-from-adhd-burnout/" className={MOT_LINK}>repeated crash cycles are one of the documented roads into ADHD burnout</a>. It also trains a life where <a href="/adhd/feel-less-overwhelmed-with-adhd/" className={MOT_LINK}>everything has to become urgent before it becomes possible</a>, which is exhausting to live inside.
          </p>
          <p>
            Urgency is best treated as a tool you understand rather than a lifestyle you default to: useful in real deadlines, expensive as an operating system.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: The reframe ---------------- */

const MotReframe = () => (
  <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]">
          This is where "lazy" goes to die.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            It's worth saying plainly: steep delay discounting, novelty response and urgency dependence are measurable properties of how a nervous system processes reward. None of them are moral qualities. The person who can't start their tax return and the person who built an entire model railway in nine days are often the same person, and the difference between those two weeks was never effort or character. It was whether the task happened to speak the reward system's language.
          </p>
          <p className="text-ink font-medium">
            That reframe matters practically, not just emotionally. <a href="/adhd/shame-spiral-with-adhd/" className={MOT_LINK}>Years of reading this pattern as laziness feeds a shame spiral</a> that makes every subsequent start harder. How that emotional layer interacts with motivation is covered more fully in <a href="/adhd/emotional-dysregulation-with-adhd/" className={MOT_LINK}>emotional dysregulation</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: What helps (6 stacked blocks) ---------------- */

const MotWhatHelps = () => (
  <Section id="help" className="bg-soft">
    <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]">
          Engineering beats willpower.
        </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">Move the reward closer</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 distance is the problem, shrink it.</span> Visible progress markers, small immediate rewards, and a reason the task matters this week rather than this year all let today's action pay something today.
          </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">Make the next step tiny</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">Starting friction is highest when reward is lowest.</span> A step small enough to finish in minutes generates its own completion reward and often carries you further than planned.
          </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">Work with interest, not against 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">Where tasks can be made more novel, social, challenging or game-like, do it without apology.</span> Changing the where, the how or the format re-triggers novelty legitimately. This is design, not trickery.
          </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">Borrow urgency safely</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 accountability creates mild, non-catastrophic urgency.</span> A check-in, a co-working session, or <a href="/adhd/body-doubling-with-adhd/" className={MOT_LINK}>body doubling</a> helps many people for exactly this reason.
          </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">Plan for the novelty cliff</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">Expect week three.</span> Pre-decide what the smallest acceptable version of continuing looks like, so the fade meets a lowered bar instead of a binary choice between all and nothing.
          </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">Don't rely on caring more</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">If caring were sufficient, it would have worked by now.</span> Effort spent manufacturing feelings of importance is better spent restructuring the task so it needs less of them.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MotOpenQuestions = () => (
  <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>
            The reward-processing account of ADHD is well supported but not complete. Findings on exactly which dopamine pathways differ, and how much they vary between individuals, are still being refined, and delay discounting explains some of the picture rather than all of it. Executive factors, emotion and context all contribute, and the balance differs from person to person.
          </p>
          <p>
            Interest-based motivation as a formal framework also rests more on clinical observation than on large trials so far, even though it matches lived experience closely enough that it has become the community's common language.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MotBottomLine = () => (
  <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]">
          Your motivation isn't broken. It's specific.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The ADHD reward system responds to interest, novelty, urgency and challenge, discounts distant rewards steeply, funds beginnings generously, and withdraws funding when things become familiar. Running a life on importance alone fights this wiring and loses.
          </p>
          <p>
            What works is engineering: rewards moved closer, steps made smaller, interest treated as a legitimate design material, urgency borrowed in safe doses, and a plan waiting at the novelty cliff. The goal doesn't have to shrink. The distance between you and it does.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MotFinalCTA = () => (
  <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>Reward the step, not the distance</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]">
            Make today's step pay off today.
          </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 around how ADHD motivation actually works. It turns distant goals into small steps that rewards you now, keeps progress visible, and expects the novelty fade rather than punishing you for it.
          </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 MotApp() {
  return (
    <main id="main">
      <MotNav />
      <MotHero />
      <MotRecognition />
      <MotWiring />
      <MotTiming />
      <MotNovelty />
      <MotUrgency />
      <MotReframe />
      <MotWhatHelps />
      <MotOpenQuestions />
      <MotBottomLine />
      <MotFinalCTA />
      <Footer />
    </main>
  );
}

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