/* Loops Blog — "Starting a Business with ADHD Means Surviving the Boring Middle"
   Authored editorial post by Matt Humphreys. Same blog template: editorial hero with
   byline + Skip to TL;DR, flowing prose with pull quotes, scannable TL;DR (#tldr),
   author bio. Research links open in a new tab. UK English, no em dashes. */

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

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

const BB_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
  { label: "Starting a business", href: "/adhd/starting-a-business-with-adhd/" },
];

const BbNav = () => {
  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">
            {BB_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">
              {BB_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 BbHero = () => (
  <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]">
          Starting a business with ADHD means surviving the boring middle.
        </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've started more things than I've finished. A lot more.
        </p>
      </div>
    </Container>
  </section>
);

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

const BbOpening = () => (
  <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>
          For a long time I read that as proof I wasn't cut out for things. Three ventures, before my own diagnosis, each one exciting at the start and each one quietly dead within a few months. Same shape every single time. A brilliant opening burst, then a slow fade into the stuff I simply couldn't make myself do.
        </p>
        <p>Here's what nobody warned me about.</p>
        <p>
          The dangerous part of building a business isn't the beginning. It's the middle. The follow-up emails, the invoicing, the weeks when nothing feels urgent and nothing gets done. The start plays to every strength an ADHD brain has. The middle attacks every single weakness.
        </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">
          Starting a business was never your problem. Finishing the boring bits is.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          I want to explore why this happens, what the research says about it, and why it hits people like us with ADHD the hardest. Then I'll tell you what we did about it, because it's the reason we built <a href="/adhd/starting-a-business-with-adhd/" className={BB_LINK}>Loops</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: helps you start ---------------- */

const BbStart = () => (
  <Section id="start-vs-sustain" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The paradox</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          ADHD helps you start. Then it works against you.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            A <a href="https://www.sciencedirect.com/science/article/pii/S0883902625000643" target="_blank" rel="noopener noreferrer" className={BB_LINK}>2026 meta-analysis</a>, pulling together 298 effect sizes from 47 studies, found that hyperactivity and impulsivity are positively linked to entrepreneurial attitudes and to actually starting a business, but inattention is negatively linked to what happens after launch. Overall, ADHD symptoms and diagnosis predict getting into entrepreneurship while predicting worse outcomes once you're in it.
          </p>
          <p>
            So let's just sit with that for a second, because it's the whole story in one sentence. The traits that pull you towards building something are not the same traits that keep it alive.
          </p>
          <p>
            That fits with the <a href="https://papers.ssrn.com/sol3/Delivery.cfm/37266.pdf?abstractid=2149387&mirid=1" target="_blank" rel="noopener noreferrer" className={BB_LINK}>research on what draws people to entrepreneurship</a> in the first place. The autonomy, the novelty, the need for independence. It all lands early, when the work is new and interesting. And then the work stops being new.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: not a superpower ---------------- */

const BbSuperpower = () => (
  <Section id="superpower" 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]">
          ADHD isn't a superpower. It's not a sentence either.
        </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 popular version of this conversation that leads with the strengths. The creativity, the risk tolerance, the speed of thought. Those things are real, and <a href="https://link.springer.com/article/10.1007/s12402-018-0277-6" target="_blank" rel="noopener noreferrer" className={BB_LINK}>qualitative research does back up genuine positives</a> that adults with ADHD experience.
          </p>
          <p>
            But telling someone ADHD is a founder superpower, without naming where it creates friction, sets them up for the exact cycle I kept living myself. The honest version is more useful. ADHD creates specific, predictable breaking points. And a breaking point you can name is a breaking point you can design around.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: nothing compounds ---------------- */

const BbExecution = () => (
  <Section id="execution" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Where it first 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]">
          The day fills up but nothing compounds.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The first place it breaks is execution. Occupational guidance for adults with ADHD describes a drift from <a href="https://link.springer.com/article/10.1186/s12888-021-03070-z" target="_blank" rel="noopener noreferrer" className={BB_LINK}>"planned mode" into "reactive mode"</a>, where the day gets taken over by whatever shows up rather than what actually matters. You start with good intentions, get pulled into a dozen small urgent things, and reach the evening with the important work untouched.
          </p>
          <p>
            This isn't laziness. <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC8295111/" target="_blank" rel="noopener noreferrer" className={BB_LINK}>Inattention is strongly associated with work-related problems</a> for adults with ADHD, and the pain is usually felt as not working to your own potential rather than as any obvious failure. The business feels busy. It just doesn't feel like it's adding up. A lot of motion, not much compounding.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: admin ---------------- */

const BbAdmin = () => (
  <Section id="admin" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Where it quietly dies</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 admin is where it quietly dies.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Then comes the part that killed every attempt I made. The admin. Bookkeeping, invoicing, tax, follow-ups, contracts. Repetitive, error-sensitive, emotionally loaded, and offering almost nothing back in the moment. There's a real mechanism here. <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC5049699/" target="_blank" rel="noopener noreferrer" className={BB_LINK}>Delay discounting is elevated in ADHD</a>, which means immediate rewards get weighted far more heavily than larger rewards later on. And business admin is nothing but delayed reward.
          </p>
          <p>
            So the invoice doesn't go out. The books fall a month behind, then three. The specific task that triggers the shutdown varies from person to person, but the pattern doesn't. The business keeps running right up until the admin catches up with it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: shame ---------------- */

const BbShame = () => (
  <Section id="shame" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The real bottleneck</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          And then the shame, which is the real bottleneck.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            This is the part that turns a business problem into an identity problem. <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" target="_blank" rel="noopener noreferrer" className={BB_LINK}>Emotion dysregulation is a major source of impairment in ADHD</a>, and growing evidence suggests it's central rather than a side issue. <a href="https://link.springer.com/article/10.1186/s12888-022-04409-w" target="_blank" rel="noopener noreferrer" className={BB_LINK}>Qualitative studies of working adults with ADHD</a> describe careers marked by persistent anxiety, exhaustion, and the feeling of never quite staying on top of things.
          </p>
          <p>
            When tasks pile up and the dread builds, quietly abandoning the whole thing and starting a shiny new idea isn't a character flaw. It's emotion regulation. It's you protecting yourself from the pile. The trouble is it also ends the business.
          </p>
          <p>
            And the ones who don't abandon it often overcorrect instead, running on evenings, weekends and crisis energy until they <a href="/adhd/recover-from-adhd-burnout/" className={BB_LINK}>burn out</a>. From the outside that looks like drive. Up close it's a brittle operating model with no slack in it for a bad week.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: implementation problem ---------------- */

const BbImplementation = () => (
  <Section id="implementation" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Not a discipline 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 an implementation problem, not a discipline one.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The standard reading of all this is that founders with ADHD just need to try harder. I hate that phrase, because the evidence points the other way.
          </p>
          <p>
            The experts, Barkley and Hallowell among them, keep landing on external structure and environmental supports rather than willpower. And when researchers actually measure it, <a href="https://journals.sagepub.com/doi/10.1177/27546330241292984" target="_blank" rel="noopener noreferrer" className={BB_LINK}>psychosocial support, especially CBT, shows more robust effects than medication alone</a> on work-relevant outcomes. Even <a href="https://www.nice.org.uk/guidance/ng87/chapter/recommendations" target="_blank" rel="noopener noreferrer" className={BB_LINK}>NICE recommends environmental changes first</a>, before medication, when impairment shows up at work.
          </p>
          <p>
            The frustrating bit is how little is actually built this way. A <a href="https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" target="_blank" rel="noopener noreferrer" className={BB_LINK}>systematic review of ADHD support at work</a> found almost no studies run in real workplace contexts, and the evidence for what genuinely helps remains thin. Most productivity tools assume stable self-regulation and linear time. That's precisely the assumption an ADHD brain breaks. Which is why the planner graveyard is such a familiar thing for us, and why the tool you loved for a fortnight is now a tab you never open.
          </p>
          <p>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 BbWhatWeDid = () => (
  <Section id="what-we-did" className="bg-soft">
    <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 is built on the boring middle.
        </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 a problem like that. At its core, <a href="/adhd/starting-a-business-with-adhd/" className={BB_LINK}>Loops</a> is a daily coaching app for people with ADHD, and with starting a business in mind, it's built on the boring middle rather than the superpower story.
          </p>
          <p>
            It gives you small clear daily actions to keep the business moving, so you're in planned mode instead of reacting to whatever's loudest. A missed day, or a missed week, doesn't wipe you out. You pick up where you left off, because the moment a system shames you for stopping is the moment you stop for good.
          </p>
          <p>
            It lets one person you trust see you keep going, because brains finish for people in a way they never finish for a sheet. And it puts a coach at the point of performance, one that already knows what you're building and where you keep getting stuck, so there's help at 11pm when you're avoiding the invoice you've dodged all week.
          </p>
          <p>
            I'm not writing this to sell you anything. I'm writing it because the problem underneath Loops is one I lived, three failed starts over, before I understood it later in life.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BbReframe = () => (
  <Section id="reframe" className="bg-base">
    <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]">
          Starting was never the problem. The middle was.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            If you've abandoned more than one thing, you've probably started to wonder whether the problem is you. I don't think it is, and the evidence doesn't either. For most founders with ADHD, starting was never the problem. Finishing the slow, repetitive, unglamorous parts is, and those parts can be designed around.
          </p>
          <p>
            You don't need a perfect business or a different personality. You need one small thing to do each day, a way to restart that doesn't punish you for the gap, and ideally one person who gets to watch you keep going. The goal was never a perfect business. It's one that's still going.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BbTldr = () => (
  <Section id="tldr" className="bg-soft">
    <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>
            Starting a business is rarely the problem for people with ADHD. Surviving the slow, repetitive middle is.
          </p>
          <p>
            There's a real paradox in the research. A 2026 meta-analysis found that the traits linked to starting a business, like impulsivity and drive, are not the ones that keep it alive. Inattention, in particular, predicts worse outcomes after launch. ADHD can pull you towards entrepreneurship and still make sustaining it harder.
          </p>
          <p>The failure 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 idea spiral, where months of research replace a single customer conversation.",
          "Reactive execution, where the day fills up but nothing compounds.",
          "Admin paralysis, where invoicing and bookkeeping quietly stop getting done.",
          "Shame and avoidance, where abandoning the venture becomes a way to cope.",
          "Burnout, where crisis energy stands in for a sustainable model.",
        ].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-white 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">
            Admin is punishing because delay discounting is elevated in ADHD, so tasks with no immediate payoff are unusually hard to start. And emotion dysregulation, a major source of impairment, turns a pile of overdue tasks into dread. Left alone, that dread turns a business problem into an identity problem. You stop asking why the admin slipped and start asking what's wrong with you.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white 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 discipline</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">The evidence favours external structure over willpower. Psychosocial support, especially CBT, beats medication alone on work outcomes, and NICE recommends environmental changes first. What actually helps looks like:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "small, achievable actions a day rather than a project plan;",
              "a way to restart after a gap without starting from scratch;",
              "accountability from one person you trust;",
              "support at the moment you're avoiding something, not weeks later.",
            ].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 turns "keep the business going" into one daily action and stays with you through the slow weeks. It helps you:
          </p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "do the next right thing instead of reacting to whatever's loudest;",
              "pick up where you left off, shame-free, after a bad week;",
              "stay accountable to someone you trust;",
              "get coaching when you're stuck on the thing you keep dodging.",
            ].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>Abandoning things before doesn't mean you can't do this. For most founders with ADHD, starting was never the problem. The boring middle was, and it can be designed around.</p>
          <p>You don't need a perfect business or a different personality. You need one small thing to do each day, and an easy way back in when you stop.</p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BbAuthorBio = () => (
  <Section id="author" className="bg-base">
    <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 BbApp() {
  return (
    <main id="main">
      <BbNav />
      <BbHero />
      <BbOpening />
      <BbStart />
      <BbSuperpower />
      <BbExecution />
      <BbAdmin />
      <BbShame />
      <BbImplementation />
      <BbWhatWeDid />
      <BbReframe />
      <BbTldr />
      <BbAuthorBio />
      <Footer />
    </main>
  );
}

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