/* Loops Knowledge Hub — "Emotional Dysregulation With ADHD" — editorial guide page.
   Sensitive topic: quiet design, no alarm styling. 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 ED_LINK = "text-brand-deep font-semibold hover:underline";

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

const ED_NAV_LINKS = [
  { label: "How it shows up", href: "#shows-up" },
  { label: "What helps", href: "#help" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const EdNav = () => {
  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">
            {ED_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">
              {ED_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 EdHero = () => (
  <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]">
          Emotional dysregulation with ADHD: why feelings arrive faster and hit harder
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          A small criticism ruins an entire day. A minor frustration ends a project. If emotions with ADHD feel like they happen to you at full volume, with no dial, that experience has a name, a mechanism, and a substantial research literature behind it.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: What it means ---------------- */

const EdWhatItMeans = () => (
  <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]">
          Not wrong emotions. Unmodulated ones.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Emotional dysregulation doesn't mean having wrong emotions, or too many of them. It describes differences in how emotion is modulated: how quickly feelings arrive, how intense they are relative to the trigger, how hard they are to dial down once running, and how long they take to fade. The emotion itself is usually appropriate. What differs is amplitude and recovery time.
          </p>
          <p>
            A useful frame: executive function includes inhibition, the ability to pause a response before it takes over. In ADHD that pause is less reliable, and it's less reliable for feelings just as it is for impulses. The emotion doesn't get a moment in the waiting room. It walks straight in.
          </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">
          This cuts in every direction. The same wiring that makes frustration huge also makes enthusiasm huge, joy huge, and interest consuming. The difficulty isn't the depth of feeling. It's what unregulated depth costs on the hard days.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 3: The evidence ---------------- */

const EdEvidence = () => (
  <Section id="evidence" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What the research says</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 evidence, honestly stated.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Reviews estimate that significant emotional dysregulation affects somewhere between roughly 30% and 70% of adults with ADHD, and it's associated with symptom severity, executive dysfunction, and reduced quality of life. A 2023 systematic review found adults with ADHD use non-adaptive emotional strategies, including suppression, rumination, catastrophising and self-blame, more frequently than people without ADHD.
          </p>
          <p>
            Researchers increasingly describe emotional dysregulation as a core contributor to impairment rather than a side effect. At the same time, it's worth being precise about what remains debated: whether it should be treated as a central diagnostic feature of ADHD or as a very common associated one is a genuinely open question in the field. What isn't debated is that the experience is real, common and consequential.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const ED_CARDS = [
  { t: "Criticism lands like injury", body: (<>Feedback meant gently arrives as physical pain, and perceived rejection arrives even where none was sent. This pattern is often called <a href="/adhd/rejection-sensitive-dysphoria-with-adhd/" className={ED_LINK}>rejection sensitive dysphoria</a>. The label is contested. The experience isn't.</>) },
  { t: "Setbacks end projects", body: (<>A mistake or a difficult day can tip a project from in-progress to abandoned. A lot of <a href="/adhd/finish-what-you-started-with-adhd/" className={ED_LINK}>unfinished work</a> isn't a focus story. It's an emotion story.</>) },
  { t: "Shame compounds", body: (<>ADHD produces visible stumbles, and dysregulation amplifies each one. Over time this builds <a href="/adhd/shame-spiral-with-adhd/" className={ED_LINK}>the shame spiral</a>, where past attempts raise the cost of new ones.</>) },
  { t: "Stress spirals faster", body: (<>Feeling overwhelmed degrades the exact capacity you'd use to address the overwhelm. It's why <a href="/adhd/reduce-stress-with-adhd/" className={ED_LINK}>stress with ADHD</a> deserves treatment as a mechanism, not a mood.</>) },
  { t: "Relationships absorb the volatility", body: (<>A reasonable request lands as an accusation, an argument runs hotter than intended. None of it reflects how much you care, but <a href="/adhd/building-better-relationships/" className={ED_LINK}>follow-through and repair</a> get harder when the emotional layer is this loud.</>) },
  { t: "The heavy seasons hit heavier", body: (<>During <a href="/adhd/heal-after-loss/" className={ED_LINK}>grief and major loss</a>, the regulation load can exceed anything willpower was ever going to cover.</>) },
];

const EdShowsUp = () => (
  <Section id="shows-up" 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]">
          Where the volume gets turned up.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often when emotion is the mechanism underneath.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {ED_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-base p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          Experiences differ. Some people feel this mainly as intensity, others as slow recovery, and some barely at all. It also fluctuates with sleep, stress, hormones and load, so the same trigger can produce entirely different days.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: Why "calm down" fails ---------------- */

const EdCalmDown = () => (
  <Section id="calm-down" 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]">
          Why "calm down" doesn't work.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Telling a dysregulated brain to calm down is like telling an accelerating car to brake with brakes it doesn't currently have. The regulation capacity is exactly what's offline in the moment.
          </p>
          <p className="text-ink font-medium">
            Strategies that work don't demand in-the-moment willpower. They change the conditions around the moment.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: What helps (5 stacked blocks + support note) ---------------- */

const EdWhatHelps = () => (
  <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]">
          Change the conditions, not the feeling.
        </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">Name it while it's happening</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">"This is dysregulation, not information" sounds small, but labelling an emotional state engages regulatory circuits and creates the beginning of distance.</span> The feeling is real. Its size may not be accurate data about the situation.
          </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">Buy time before responding</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 the missing piece is the pause, install one externally.</span> Draft the reply and send it tomorrow. Leave the room with a stated return time. Distance does what inhibition couldn't.
          </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">Lower the stakes in advance</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">Emotional spikes are largest where stakes feel highest.</span> Smaller tasks, recoverable lapses and <a href="/adhd/build-routines-that-survive-bad-days/" className={ED_LINK}>routines that expect bad days</a> all shrink the emotional blast radius of ordinary setbacks before they happen.
          </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">Treat the emotional barrier as the actual target</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">When a task is avoided, the block is often a feeling rather than the task's difficulty.</span> Addressing the dread or the anticipated shame directly beats another round of task-splitting.
          </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">Protect the physical 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 reliably worsens emotional regulation in everyone.</span> Exercise has measurable same-day effects on mood and impulse control. Unglamorous, and it moves the dial. There's more in the guide on <a href="/adhd/sleep-better-with-adhd/" className={ED_LINK}>sleep with ADHD</a>.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          One more thing, said plainly. If emotional intensity regularly tips into despair, rage that frightens you, or persistent low mood, that's genuinely worth raising with a doctor or a therapist. Depression and anxiety frequently travel alongside ADHD, and support for them works. This isn't a failure state. It's the appropriate next step. You can find crisis lines and specialist support on <a href="/support/find-help/" className={ED_LINK}>our help page</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Open questions ---------------- */

const EdOpenQuestions = () => (
  <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>
            Beyond the core-feature debate, open questions remain about mechanism: how much ADHD emotional dysregulation reflects weaker top-down regulation versus stronger bottom-up emotional response, and how much overlap it shares with the anxiety and mood conditions that so often co-occur.
          </p>
          <p>
            Treatment evidence is also thinner here than for attention symptoms. Medication helps some people's emotional symptoms and does little for others', and most trials weren't designed to measure emotional outcomes at all. The honest summary: the experience is well documented, the explanation is still being assembled.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const EdBottomLine = () => (
  <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]">
          The dial exists. It has to be built outside first.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Emotional dysregulation is a core part of how many adults experience ADHD: feelings that arrive faster, hit harder and take longer to fade, in every direction, joy included. It was never oversensitivity as a moral failing, and "calm down" was never going to be the strategy.
          </p>
          <p>
            What helps is external structure around the hot moments, stakes lowered before setbacks arrive, feelings treated as the real target rather than an inconvenience, and professional support where the intensity warrants it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 9: Final CTA ---------------- */

const EdFinalCTA = () => (
  <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>Small steps, small setbacks</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]">
            Keep setbacks the size of setbacks.
          </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 keeps the emotional cost of progress low. Steps stay small enough that setbacks stay small, a missed day is treated as information rather than a verdict, and coming back is always built to feel lighter than the fear of 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 EdApp() {
  return (
    <main id="main">
      <EdNav />
      <EdHero />
      <EdWhatItMeans />
      <EdEvidence />
      <EdShowsUp />
      <EdCalmDown />
      <EdWhatHelps />
      <EdOpenQuestions />
      <EdBottomLine />
      <EdFinalCTA />
      <Footer />
    </main>
  );
}

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