/* Loops Knowledge Hub — "Masking and Compensation With ADHD" — editorial guide page.
   Knowledge Hub design direction: eyebrow labels, stacked insight blocks with alternating
   rhythm, a 2x3 recognition card grid, a distinct pull quote, single CTA at the end only.
   Inline links point to existing pages where they exist; UK English, no em dashes. */

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

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

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

const MskNav = () => {
  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">
            {MSK_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">
              {MSK_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 MskHero = () => (
  <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]">
          Masking and compensation with ADHD: the invisible work of looking fine
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Some of the most exhausted people with ADHD are the ones nobody would ever suspect of having it. The holding-together is a full-time job that no one can see, running underneath the visible one.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: Two kinds of hidden work ---------------- */

const MskTwoKinds = () => (
  <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]">
          Masking hides it. Compensation covers for it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The hidden job has two names. Masking is suppressing or hiding ADHD traits so they don't show: rehearsing spontaneity, sitting on restlessness, performing calm. Compensation is the machinery built to cover the gaps: working longer, triple-checking, arriving absurdly early to avoid being late, keeping everything in your head through sheer vigilance.
          </p>
          <p>
            Both work, which is exactly the problem. They work at a cost that compounds quietly for years.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MSK_RECOGNITION = [
  "You're impressive and composed all day, and there's nothing left the moment the front door closes.",
  "You arrive absurdly early to everything, because early is the only reliable defence against late.",
  "You triple-check everything you send, because one visible mistake feels like it would confirm something.",
  "Praise doesn't land as praise. It lands as relief that you got away with it again.",
  "People say \u201Cyou can't have ADHD, look how well you're doing.\u201D The doing-well is the most tiring thing you do.",
  "Nobody, including the people closest to you, knows what today actually cost.",
];

const MskRecognition = () => (
  <Section id="recognition" 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]">
          Composed on the outside. Spent on the inside.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people describe most often when masking has become the day job.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {MSK_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-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          None of this is fraud, and none of it is weakness. It's labour. The rest of this page is about what that labour costs and how to put some of it down.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Why people mask ---------------- */

const MskWhy = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The context</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Nobody masks for fun.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Masking is learned, usually early, from repeated experience of what happens when the unmasked version shows: criticism, mockery, lost jobs, strained relationships, the accumulated feedback that who you naturally are is too much or not enough.
          </p>
          <p>
            The research context makes the behaviour entirely rational. One study found 88.5% of adults with ADHD reported anticipating discrimination in daily life, and a 2026 systematic review of stigma in adult ADHD found self-stigma, perceived stigma and structural stigma running throughout the literature, with internalised stigma tied to worse self-esteem, worse functioning and reduced help-seeking.
          </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-[22px] sm:text-[27px] font-semibold tracking-tight2 text-ink leading-[1.25] text-balance">
          When most of a population expects to be judged for their condition, concealment isn't paranoia. It's a survival strategy with evidence behind it.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          It's worth acknowledging plainly: masking often does protect people. Jobs have been kept, relationships preserved, judgements dodged. Any honest discussion starts from the fact that, in the short term, this strategy works.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The cost ---------------- */

const MskCost = () => (
  <Section id="cost" className="bg-base">
    <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 cost, and why it compounds.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Case research on professionally successful adults with ADHD describes their compensation strategies, working longer, masking harder, keeping everything mentally tracked rather than externalised, as genuinely effective for years, but also conscious, energy-intensive and time-consuming. That third finding is the important one. Compensation isn't free capacity. It's borrowed capacity, and the interest accumulates.
          </p>
          <p>
            Masking draws on the same limited pool as everything else. The executive function spent monitoring your own behaviour all day is unavailable for the actual work, and the <a href="/adhd/rejection-sensitive-dysphoria-with-adhd/" className={MSK_LINK}>emotional regulation</a> spent performing calm is unavailable for feeling it. This is why so many masked adults describe the same day-shape: composed until the front door closes, then nothing left. The people they love get the depleted version.
          </p>
          <p>
            Run long enough, this pattern is one of the recognised roads into <a href="/adhd/recover-from-adhd-burnout/" className={MSK_LINK}>ADHD burnout</a>: months or years of spending more than you have, invisibly, until even basic things stop being possible. The collapse looks sudden from the outside. It was decades in the making.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MskScaling = () => (
  <Section id="scaling" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Where it breaks</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Compensation doesn't scale.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Strategies calibrated for one job, one workload, one life can be overwhelmed the moment the load steps up. This is why masked ADHD so often surfaces at transitions.
          </p>
          <p>
            <a href="/adhd/get-promoted/" className={MSK_LINK}>A promotion</a> multiplies the volume of things to track past what vigilance can hold. <a href="/adhd/becoming-a-leader-with-adhd/" className={MSK_LINK}>Leadership</a> is a particularly reliable breaking point, because the invisible work of monitoring and organising scales with the size of a team while the compensation budget doesn't. New parenthood, a house move, a loss, <a href="/adhd/navigating-big-life-changes/" className={MSK_LINK}>any big life change</a> that strips away routine does the same thing: the scaffolding that made coping possible gets dismantled overnight.
          </p>
          <p>
            What looked like stable competence turns out to have been a system running at 98% capacity with no headroom. A lot of adult diagnoses happen exactly here, in the wreckage of a compensation system that finally met a load it couldn't cover.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: The diagnosis paradox ---------------- */

const MskParadox = () => (
  <Section id="paradox" 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-[40px] leading-[1.12]">
          The doing-well was the symptom.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Masking works well enough to fool clinicians, employers, families, and frequently the person themselves. Decades of managed appearances become the evidence against your own experience: you can't have ADHD, look how well you're doing. The doing-well was the symptom. It was just wearing a costume.
          </p>
          <p>
            This is one reason so many people, women especially, though by no means only women, reach their thirties or forties before anyone connects the dots. The grief that often follows a late diagnosis is real and double-edged: relief at finally having an explanation, and mourning for the years spent believing the struggle was a personal defect. If that's where you are, that grief deserves room. It isn't self-indulgence. It's an accurate response to genuinely lost ease.
          </p>
          <p>
            There's real variation in this experience too. Some people mask heavily in one context and not at all in another. Some compensate without much masking, or mask without elaborate systems. And some people's traits were never given room to be acceptable anywhere, which is its own distinct weight.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MskWhatHelps = () => (
  <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]">
          Taking the mask off, carefully.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Unmasking is not an all-or-nothing moral obligation. It's a set of choices, made context by context, about where the cost of concealment outweighs the risk of visibility.
        </p>
      </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">Separate compensation from concealment</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">Some strategies are just good adaptations: externalising memory, building routines, arriving early. Keep those.</span> The expensive part is the hiding. The same systems, run openly, cost a fraction of the energy.
          </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">Find one place the mask is off</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">Recovery from masking requires time actually spent not doing it.</span> A partner, a friend, a community, anywhere the monitoring can stop entirely changes the arithmetic of the whole week.
          </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 disclosure as a decision, not a duty</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">Telling an employer is a genuinely complex call involving real trade-offs.</span> Partial disclosure, naming needs without naming the diagnosis, works well for many people. You're allowed to decide this one context at a time.
          </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">Watch the budget, not just the performance</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">The question isn't whether you held it together today. It's what it cost, and whether tomorrow's budget can absorb the same spend.</span> Chronic 98% is a burnout schedule, however good it looks, and <a href="/adhd/reduce-stress-with-adhd/" className={MSK_LINK}>stress</a> and <a href="/adhd/sleep-better-with-adhd/" className={MSK_LINK}>sleep</a> are the fastest-moving indicators of how it's really going.
          </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">Let the systems be visible</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 on the wall, notes in the meeting, an app doing the tracking.</span> Every piece of support that moves from hidden to open stops costing double.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MskOpenQuestions = () => (
  <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>
            Masking research has a candour problem worth naming: most of it comes from autism literature, and ADHD-specific masking research is still young. How closely the mechanisms map between the two, how prevalence differs across gender and culture, and what long-term unmasking actually does for wellbeing in ADHD specifically are all under-studied.
          </p>
          <p>
            The compensation findings rest heavily on small qualitative studies of professionally successful adults, which tells us little about everyone else. The lived-experience accounts are abundant and remarkably consistent. The formal evidence is still catching up to them.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MskBottomLine = () => (
  <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]">
          You were never doing less. You were doing more, unseen.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Masking and compensation are rational responses to a world that punishes visible ADHD, and they often work for years, at an invisible cost that compounds until a promotion, a loss, or an ordinary Tuesday finally exceeds the budget. Looking fine was never the same as being fine, and the exhaustion was never weakness. It was labour.
          </p>
          <p>
            What helps isn't tearing the mask off everywhere at once, but choosing where it can come off safely, running the good systems openly instead of secretly, and refusing to price your own recovery at zero.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const MskFinalCTA = () => (
  <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>Support you don't have to earn</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 that doesn't need to be hidden.
          </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 takes over some of the invisible work: the tracking, the reminding, the holding-it-all-in-your-head. It's built for the version of you behind the mask, and it doesn't need to be earned.
          </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 MskApp() {
  return (
    <main id="main">
      <MskNav />
      <MskHero />
      <MskTwoKinds />
      <MskRecognition />
      <MskWhy />
      <MskCost />
      <MskScaling />
      <MskParadox />
      <MskWhatHelps />
      <MskOpenQuestions />
      <MskBottomLine />
      <MskFinalCTA />
      <Footer />
    </main>
  );
}

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