/* Loops Blog — "Becoming a Leader with ADHD Means Running the System, Not Just Doing the Work"
   Authored editorial post by Matt Humphreys. Same blog template. Cross-links to sibling
   blog posts and mechanism pages where relevant. UK English, no em dashes. */

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

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

const BL_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
  { label: "Become a leader", href: "/adhd/becoming-a-leader-with-adhd/" },
];

const BlNav = () => {
  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">
            {BL_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">
              {BL_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="/blog/" onClick={() => setOpen(false)}>Back to the Blog</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

/* ---------------- Hero ---------------- */

const BlHero = () => (
  <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-10 lg:pb-14">
      <div className="max-w-3xl">
        <a href="/blog/" 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>
          Loops Blog
        </a>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          Becoming a leader with ADHD means running the system, not just doing the work.
        </h1>

        {/* Byline */}
        <div className="mt-7 flex flex-wrap items-center gap-x-4 gap-y-3">
          <div className="flex items-center gap-3">
            <img src="/uploads/matt-humphreys.jpg" alt="Matt Humphreys" width="44" height="44" className="h-11 w-11 rounded-pill object-cover shadow-cta" />
            <div className="leading-tight">
              <div className="text-[15px] font-semibold text-ink">Matt Humphreys</div>
              <div className="text-[13px] text-ink-3">Loops</div>
            </div>
          </div>
          <span aria-hidden="true" className="hidden sm:block h-8 w-px bg-line"></span>
          <a href="#tldr" className="focus-ring inline-flex items-center gap-2 rounded-pill border border-line bg-white px-4 py-2 text-[13.5px] font-semibold text-brand-deep shadow-soft hover:border-muted transition-colors">
            Skip to the TL;DR
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>

        <p className="mt-8 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          I'll be straight with you from the start. I'm not a C-level or a head of anything, and I've never run a big team. But building Loops means hearing from people who do.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Body: opening ---------------- */

const BlOpening = () => (
  <Section id="opening" className="bg-base">
    <Container>
      <div className="max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          One thing comes up so often it's become impossible to miss. Someone who was brilliant at the actual work, who stepped up to lead and then found that within a few months something had quietly gone wrong. Not the vision. Not the big calls. Everything around them. The follow-ups they meant to make, the delegated work they forgot to check on, the feedback they kept putting off, the meeting they walked into cold. Before an ADHD diagnosis, this was simply read as failing at leadership.
        </p>
        <p>
          They usually have it backwards. They aren't failing at leadership. They're failing at the invisible machine that leadership actually runs on.
        </p>
      </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">
          I can do the work. I just can't reliably run the system around the work.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          In this post I want to go through why this happens, what the research says about it, and why it hits leaders with ADHD the hardest. Then I'll tell you what we did about it at <a href="/adhd/becoming-a-leader-with-adhd/" className={BL_LINK}>Loops</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: stress test ---------------- */

const BlStressTest = () => (
  <Section id="stress-test" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The real 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]">
          Leadership is a near-perfect stress test for the things ADHD affects.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Leadership leans almost entirely on <a href="/adhd/executive-function-with-adhd/" className={BL_LINK}>executive functions</a>. Planning, monitoring, prioritising, delegating, holding the whole picture in mind and sustaining follow-through across a lot of people at once. Those are exactly the functions ADHD most consistently disrupts.
          </p>
          <p>
            <a href="https://www.aimspress.com/aimspress-data/aimsph/2024/1/PDF/publichealth-11-01-015.pdf" target="_blank" rel="noopener noreferrer" className={BL_LINK}>One workplace study</a> spells it out clearly. Executive-function deficits create problems with time management, organisation, multitasking, setting priorities, decision-making, communication and conflict resolution, all of which are the daily texture of management.
          </p>
          <p>
            And in the same study, self-management to time and self-organisation were the strongest links between ADHD and job <a href="/adhd/recover-from-adhd-burnout/" className={BL_LINK}>burnout</a>. Leadership isn't just hard with ADHD. It's a stress test aimed squarely at the weak points.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: invisible work ---------------- */

const BlInvisible = () => (
  <Section id="invisible" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Not the vision</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 invisible work is the problem, not the vision.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The bit people imagine being hard, the strategy and the big ideas, is rarely where it breaks. Leaders with ADHD are very good at that. It's the maintenance underneath that breaks.
          </p>
          <p>
            Tracking who's doing what and when to check in. Preparing for and recovering from meetings. Giving regular feedback. Noticing what's slipped before it becomes a fire. This work is low in novelty, high in importance, and almost never urgent until it's already overdue.
          </p>
          <p>That's the worst possible combination for an ADHD brain.</p>
          <p>
            <a href="https://journals.sagepub.com/doi/abs/10.1177/1534650115611483" target="_blank" rel="noopener noreferrer" className={BL_LINK}>Ramsay's clinical work</a> describes adults with ADHD who know exactly what they should do, and understand the cost of not doing it, and still can't reliably execute the plan. That <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={BL_LINK}>intention-to-action gap</a> barely shows when the work is your own and interesting. But it's brutal when the work is a dozen unstimulating follow-ups that only you are responsible for remembering.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: crises ---------------- */

const BlCrises = () => (
  <Section id="crises" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The urgency trap</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Crises are easy. The calm, steady work is where it slips.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>There's a cruel twist in how this plays out.</p>
          <p>
            Adult ADHD involves <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" target="_blank" rel="noopener noreferrer" className={BL_LINK}>impaired time perception and steep delay discounting</a>, which means immediate, visible problems feel far more compelling than slow-burn ones. So the crisis gets handled superbly, while the quiet, anticipatory work, the delegation, the succession planning, the steady culture-building, keeps getting postponed until it's urgent too. Which is usually too late.
          </p>
          <p>
            There's even a direct leadership signal in the research. A <a href="https://pubmed.ncbi.nlm.nih.gov/30187648/" target="_blank" rel="noopener noreferrer" className={BL_LINK}>2018 study</a> found leaders' ADHD symptoms were associated with more passive leadership, and that the link ran through daytime sleepiness. That's oddly hopeful, because it means the path from symptoms to struggle runs partly through things you can change, like sleep, fatigue and how engaging the work feels. For a leader who keeps slipping, <a href="/adhd/sleep-better-with-adhd/" className={BL_LINK}>sleep</a> isn't a side issue. It's central.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: emotional load ---------------- */

const BlEmotional = () => (
  <Section id="emotional" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The uncounted cost</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 emotional load is real, and nobody counts it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>Here's the part almost nobody warns you about.</p>
          <p>
            A <a href="https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" target="_blank" rel="noopener noreferrer" className={BL_LINK}>systematic review of emotion dysregulation in adults with ADHD</a> found more frequent use of unhelpful emotion-regulation strategies and consistently lower emotion-regulation scores than in people without ADHD.
          </p>
          <p>In leadership, that shows up as overreacting to criticism, avoiding a hard conversation, or struggling to steady yourself after conflict.</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-[28px] font-semibold tracking-tight2 text-ink leading-[1.25] text-balance">
          A difficult conversation that costs a peer an afternoon can cost an ADHDer the whole day, and some of the next one.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          Nobody sees that cost, so nobody accounts for it. But it's real, and it accumulates into a kind of debt that makes the hard parts of the role heavier over time.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: overcompensation ---------------- */

const BlOvercompensation = () => (
  <Section id="overcompensation" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The brittle model</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Overcompensation works, right up until it doesn't.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>For a while, you can hold all of this together by force.</p>
          <p>
            Case studies of <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC5619157/" target="_blank" rel="noopener noreferrer" className={BL_LINK}>professionally successful adults with ADHD</a> describe compensation strategies that are conscious, energy-demanding and time-consuming. You can run on those for years. Longer hours, everything kept in your head, personally rescuing whatever's failing.
          </p>
          <p>
            The trouble is that leadership scales the invisible work upwards and the compensation eventually breaks. What looks from the outside like high drive is often a brittle operating model with no slack in it. Work longer, mask harder, hold it all in your head, stay late to patch the gaps, then burn out or become inconsistent. It's a cycle, and it's exhausting.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: strengths ---------------- */

const BlStrengths = () => (
  <Section id="strengths" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>An honest framing</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 strengths are real, but only with the right fit.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            I want to be fair, because ADHD does bring genuine strengths to leadership. A <a href="https://journals.sagepub.com/doi/10.1177/27546330241287655" target="_blank" rel="noopener noreferrer" className={BL_LINK}>systematic review of ADHD in employment</a> lists creativity, rapid task-switching, hyperfocus, energy and empathy among them.
          </p>
          <p>But those strengths are highly context-dependent.</p>
          <p>
            In a well-designed role with good support, they look like decisive, energising, strategic leadership. In a badly designed one, the very same profile turns into firefighting, impulsive communication and unreliable follow-up. The strengths are real. They just need the right container to become an asset rather than a liability.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: system-and-fit ---------------- */

const BlSystemFit = () => (
  <Section id="system-fit" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Not a willpower problem</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          This is a system-and-fit problem, not a willpower one.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>So the usual advice, be more disciplined and get more organised, completely misses the point.</p>
          <p>
            <a href="https://www.nice.org.uk/guidance/ng87/chapter/recommendations" target="_blank" rel="noopener noreferrer" className={BL_LINK}>NICE recommends holistic plans that address occupational needs</a>, not willpower. Medication can genuinely help you focus, but it doesn't build a delegation system or an emotionally safe feedback habit for you. And the support that would do that barely exists. A <a href="https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" target="_blank" rel="noopener noreferrer" className={BL_LINK}>2022 systematic review of ADHD support at work</a> pulled together 143 studies and found most looked at medication, with workplace-specific design still thin on the ground.
          </p>
          <p>The context matters as much as the individual.</p>
          <p>
            A <a href="https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2026.1820248/full" target="_blank" rel="noopener noreferrer" className={BL_LINK}>study of what makes work sustainable for adults with ADHD</a> found that ADHD at work becomes a resource when it's met with trust and practical support, and a liability when it's met with scrutiny. Person-environment fit, in other words, is the big lever. Existing support is still far better at treating symptoms than at helping someone actually run a leadership role. That gap is the whole opportunity, and it's where we decided to build something.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: what we did ---------------- */

const BlWhatWeDid = () => (
  <Section id="what-we-did" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What we did about 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]">
          Loops makes the invisible work visible and doable.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Loops is our answer to this specific problem. At its core, <a href="/" className={BL_LINK}>Loops</a> is a daily coaching app for people with ADHD, and for leaders, it's built to make the invisible maintenance work visible and doable.
          </p>
          <p>
            It can give you clear daily leadership actions, a follow-up to make, a one-to-one to prepare for, a check-in to schedule, so the steady work happens before it becomes a fire. It coaches you through the parts that cost the most, the difficult conversation and the recovery afterwards. And it's built to resume, not restart, so a bad week doesn't collapse the whole cadence.
          </p>
          <p>
            There's also the strange loneliness of the role, where you follow up on everyone and nobody follows up on you. So there's one person you trust who gets to see you keep going, and a coach at the point of performance, right before the conversation you've been dreading.
          </p>
          <p>
            I'm not writing this to sell you anything. I'm writing it because I keep hearing this same machine described by the people Loops is for, and the problem was never them.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: the reframe ---------------- */

const BlReframe = () => (
  <Section id="reframe" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The reframe</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The gap was never ability. It was the system around the work.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            If leadership has felt like something you can only just about hold together, you've probably wondered whether you're cut out for it at all. I don't think that's the right question, and the evidence doesn't either.
          </p>
          <p>
            For most leaders with ADHD, the gap was never ability. You can do the work. What often breaks is the system around the work, and a system is a thing you can build.
          </p>
          <p>
            You don't need to work harder or become a different kind of person. You need the invisible work made visible, small manageable actions a day, an easy way back in after a hard week, and ideally one person who finally checks in on you. Leadership shouldn't be something you can only sustain by burning yourself down.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- TL;DR ---------------- */

const BlTldr = () => (
  <Section id="tldr" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <span className="inline-flex items-center rounded-pill bg-brand-soft px-3 py-1 text-[11px] font-bold uppercase tracking-[0.12em] text-brand-deep">TL;DR</span>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          The short version.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Leadership rarely fails for people with ADHD because of the vision or the big decisions. It fails on the invisible system underneath.
          </p>
          <p>
            Leadership leans almost entirely on executive functions: planning, monitoring, prioritising, delegating, and following through across many people. Those are the functions ADHD most affects, and research shows time management and organisation are the strongest links between ADHD and burnout at work.
          </p>
          <p>The struggle tends to follow a predictable shape:</p>
        </div>
      </div>

      <ul className="mt-6 max-w-prose grid gap-2.5 sm:grid-cols-2">
        {[
          "The delegation gap, where assigning work is easy but tracking it isn't.",
          "Fragmentation, where interruptions cause you to lose the whole picture.",
          "The urgency trap, where crises get handled and the calm, steady work slips.",
          "Emotional load, where difficult conversations cost more than they seem to.",
          "Overcompensation, where longer hours hold it together until they don't.",
        ].map((q) => (
          <li key={q} className="flex items-start gap-3 rounded-tile border border-line bg-white px-4 py-3 shadow-soft">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-0.5 shrink-0 text-brand"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            <span className="text-[15px] leading-[1.5] text-ink text-pretty">{q}</span>
          </li>
        ))}
      </ul>

      {/* Sub-blocks */}
      <div className="mt-10 grid gap-4 sm:gap-5 max-w-3xl">
        <div className="rounded-card border border-line bg-soft p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] sm:text-[19px] font-semibold tracking-tight2 text-ink leading-snug">The problem is not ability</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            The maintenance work is low-novelty, high-importance and rarely urgent until it's overdue, which is exactly what an ADHD brain struggles to action. Emotion dysregulation, well evidenced in ADHD, makes feedback and conflict unusually costly. Left unaddressed, the compensation breaks, and you burn out or go inconsistent. The question stops being why the follow-up slipped and becomes whether you belong in the role at all.
          </p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] sm:text-[19px] font-semibold tracking-tight2 text-ink leading-snug">This needs a system, not more willpower</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">The evidence favours external structure and good person-environment fit over trying harder. Medication helps focus but won't build a delegation system for you. What actually helps looks like:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "the invisible work made visible and reviewable;",
              "one small, achievable leadership action a day;",
              "coaching for hard conversations and the recovery after them;",
              "a way to resume after a bad week, not restart;",
              "accountability from one person you trust.",
            ].map((t) => (
              <li key={t} className="flex items-start gap-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
                <span aria-hidden="true" className="mt-2 h-1.5 w-1.5 shrink-0 rounded-pill bg-brand"></span>
                {t}
              </li>
            ))}
          </ul>
        </div>
        <div className="rounded-card border border-brand bg-brand-soft/40 p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] sm:text-[19px] font-semibold tracking-tight2 text-ink leading-snug">What Loops is designed to do</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            Loops makes the maintenance work of leadership doable. It helps you:
          </p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "track the follow-ups, delegation and things that slip;",
              "do clear leadership actions each day;",
              "get through difficult conversations and emotional recovery;",
              "pick up where you left off after a hard week;",
              "stay accountable to someone who finally checks in on you.",
            ].map((t) => (
              <li key={t} className="flex items-start gap-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">
                <span aria-hidden="true" className="mt-2 h-1.5 w-1.5 shrink-0 rounded-pill bg-brand"></span>
                {t}
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="mt-10 max-w-prose">
        <h3 className="text-[18px] sm:text-[19px] font-semibold tracking-tight2 text-ink leading-snug">The main reframe</h3>
        <div className="mt-3 space-y-4 text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          <p>Struggling with the role doesn't mean you're in the wrong one. For most leaders with ADHD, the gap was never ability. You can do the work. What breaks is the system around it, and a system can be built.</p>
          <p>You don't need to work harder or be a different person. You need the invisible work made visible, small actions a day, and one person who sees it.</p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Author bio ---------------- */

const BlAuthorBio = () => (
  <Section id="author" className="bg-soft">
    <Container>
      <div className="max-w-3xl rounded-card border border-line bg-white p-7 sm:p-9 shadow-soft">
        <div className="flex flex-col sm:flex-row sm:items-start gap-6">
          <img src="/uploads/matt-humphreys.jpg" alt="Matt Humphreys" width="96" height="96" className="h-20 w-20 sm:h-24 sm:w-24 shrink-0 rounded-pill object-cover shadow-cta" />
          <div>
            <div className="text-[11px] font-bold uppercase tracking-[0.12em] text-brand-deep">Written by</div>
            <h2 className="mt-1.5 text-[22px] sm:text-[24px] font-semibold tracking-tight2 text-ink leading-tight">Matt Humphreys</h2>
            <div className="text-[14px] text-ink-3">Loops</div>
            <div className="mt-4 space-y-4 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
              <p>Matt has worked in design and marketing for 14 years and is fascinated by how AI will shape the future of both. Diagnosed with ADHD in his early thirties, he writes and researches the ideas that help him better understand his own brain.</p>
              <p>At Loops, Matt helps train the AI coach, speaks with users and shapes the app around how people with ADHD actually think and work. It's the kind of tool he wishes he'd had years before his diagnosis.</p>
              <p>Outside work, Matt lives with his wife, dog and cat, grows pine trees and dreams of one day owning a patch of land to plant them on.</p>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function BlApp() {
  return (
    <main id="main">
      <BlNav />
      <BlHero />
      <BlOpening />
      <BlStressTest />
      <BlInvisible />
      <BlCrises />
      <BlEmotional />
      <BlOvercompensation />
      <BlStrengths />
      <BlSystemFit />
      <BlWhatWeDid />
      <BlReframe />
      <BlTldr />
      <BlAuthorBio />
      <Footer />
    </main>
  );
}

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