/* Loops Blog — "Building a Side Project with ADHD Means Finishing, Not Starting"
   Authored editorial post by Matt Humphreys. Same blog template. Research links open
   in a new tab; cross-links to sibling blog posts where relevant. UK English, no em dashes. */

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

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

const BS_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
  { label: "Build a side project", href: "/adhd/build-a-side-project-with-adhd/" },
];

const BsNav = () => {
  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">
            {BS_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">
              {BS_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 BsHero = () => (
  <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]">
          Building a side project with ADHD means finishing, not starting.
        </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 have a folder on my laptop. I bet you probably have one too.
        </p>
      </div>
    </Container>
  </section>
);

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

const BsOpening = () => (
  <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>
          Mine is full of things I started with total conviction and never took to the end. A half-built app. Two abandoned newsletters. A brilliant week of an idea that felt, at the time, like the one. For years I looked at that folder as proof I couldn't finish anything.
        </p>
        <p>
          It took me a long time, and a diagnosis, to see it differently. The folder wasn't evidence I lacked ideas or ability. It was evidence of one very specific thing. I'm great at the part with the novelty, and I fall apart at the part without it.
        </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">
          You're not short of side projects. You're short of finished ones.
        </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 go through why this happens, what the research actually says, 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/build-a-side-project-with-adhd/" className={BS_LINK}>Loops</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: hardest possible thing ---------------- */

const BsHardest = () => (
  <Section id="hardest" 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]">
          A side project is the hardest possible thing for an ADHD brain.
        </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 thing that reframed it for me.</p>
          <p>
            A side project is entirely optional. The reward is far away. There's no deadline, no audience, and no structure unless you build it yourself. Nobody is waiting, and nothing is urgent. That is almost the exact opposite of the conditions an ADHD brain needs to sustain effort.
          </p>
          <p>
            The mechanisms underneath are well documented. <a href="/adhd/motivation-and-reward-with-adhd/" className={BS_LINK}>Delay discounting is elevated in ADHD</a>, which means immediate rewards pull much harder and delayed ones are difficult to hold onto. And <a href="/adhd/time-blindness-with-adhd/" className={BS_LINK}>time perception in adult ADHD is consistently impaired</a>, so a long arc of slow progress can feel vague and unreal, right up until it's suddenly urgent.
          </p>
          <p>
            Put those together and a side project isn't just a bit hard. It's the single most ADHD-hostile way to try to build something.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: finishing is different ---------------- */

const BsFinishing = () => (
  <Section id="finishing" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>A different job entirely</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Finishing is a completely different job from starting.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Most advice treats finishing as the natural result of starting well. It isn't. Finishing is its own distinct phase, with its own demands, and they happen to be the demands ADHD makes hardest.
          </p>
          <p>
            The endgame of any project is the low-novelty, high-exposure work. Polishing, packaging, publishing, asking for feedback. It feels the least like the thing you fell in love with, and it asks you to sit with discomfort rather than move towards stimulation.
          </p>
          <p>
            So you don't do it. And here's the part worth hearing clearly. <a href="/adhd/stop-procrastinating-with-adhd/" className={BS_LINK}>Procrastination is increasingly understood as an emotion-regulation problem</a>, not a discipline one. You're not avoiding the work because you're lazy. You're avoiding a feeling. Russell Barkley has argued for years that ADHD is a performance problem more than a knowledge problem. You can see exactly what to do, and still not be able to make yourself do it in the moment.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: publishing feels like a threat ---------------- */

const BsPublishing = () => (
  <Section id="publishing" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Why the last step is worst</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Publishing feels like a threat, not a reward.
        </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 reason the final step is the hardest of all.</p>
          <p>
            Systematic reviews find that adults with ADHD commonly report lower self-esteem, and a recent review of stigma in ADHD links internalised stigma to worse self-esteem and poorer quality of life. If you've spent years being seen as careless or unreliable, then "just publish it" or "show someone the draft" doesn't feel like a growth step. It feels like inviting more proof that you're not good enough.
          </p>
          <p>
            That changes everything about the last ten percent. The bit everyone else calls the easy final push is, for us, the bit with the sharpest teeth.
          </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">
          The bit everyone else calls the easy final push is, for us, the bit with the sharpest teeth.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Body: day job eaten the fuel ---------------- */

const BsFuel = () => (
  <Section id="fuel" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Running on empty</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 job has already eaten the fuel.
        </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 practical cruelty on top of all this too.</p>
          <p>
            Qualitative studies of working adults with ADHD describe persistent stress, exhaustion, and constant compensatory overwork just to keep up. Which means the side project sits on top of a brain that's already running on empty. You're attempting your most self-directed, least scaffolded work at exactly the moment your energy and self-regulation are lowest. No wonder it's the thing that gets dropped.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: superpower story ---------------- */

const BsSuperpower = () => (
  <Section id="superpower" className="bg-soft">
    <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 superpower story isn't enough on its own.
        </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 here, because ADHD does bring real strengths. A systematic review of ADHD in employment found commonly reported strengths like creativity, resilience and hyperfocus. Those are genuine.
          </p>
          <p>
            But the honest picture is more mixed. The <a href="/blog/starting-a-business-means-surviving-the-boring-middle/" className={BS_LINK}>2026 meta-analysis on ADHD and entrepreneurship</a> found the traits linked to starting things are not the ones linked to good outcomes once launched, with inattention in particular predicting worse results. The strengths are real. They're just context-dependent, and they need containment to actually reach done. Selling the superpower story without naming the friction sets people up for the exact folder I've been describing.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BsImplementation = () => (
  <Section id="implementation" className="bg-base">
    <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 an implementation 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 standard advice, try harder and want it more, misses completely. I hate that framing, because the evidence points the other way.
          </p>
          <p>
            Barkley's conclusion is that changing the environment at the point of performance matters more than handing people more advice. NICE says much the same, recommending environmental modifications and written supports rather than willpower. And it's exactly why the planner graveyard is such a universal experience. The tool becomes another unfinished project. Reviews of digital ADHD tools find their effectiveness is still inconclusive and that liking an app doesn't reliably translate into sticking with it.
          </p>
          <p>
            The frustrating part is how little exists for this specific problem. A systematic review of ADHD support at work found almost no studies run in real-world contexts, and side projects are even less studied than jobs. 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 BsWhatWeDid = () => (
  <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 finishing, not starting.
        </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="/adhd/build-a-side-project-with-adhd/" className={BS_LINK}>Loops</a> is a daily coaching app for people with ADHD, and it's built on finishing rather than starting.
          </p>
          <p>
            It asks you to pick one project, not your best idea or your most ambitious one, the one you actually want to finish, and it parks the others so they feel held rather than abandoned. It gives you one small daily action so the project keeps moving after the novelty's gone. It treats <a href="/adhd/finish-what-you-started-with-adhd/" className={BS_LINK}>finishing as its own mode</a>, with support for the exposed, uncomfortable final push rather than pretending it happens by itself.
          </p>
          <p>
            And crucially, it's built for resuming, not restarting. A missed week isn't failure, and it won't make you feel like one. You just pick up where you left off. There's one person you trust who gets to see you keep going, because a project with no deadline and no audience suddenly has someone quietly waiting. And there's a coach at the point of performance, at 11pm, right before you open the shinier new idea.
          </p>
          <p>
            I'm not writing this to sell you anything. I'm writing it because the folder I described at the top is my own, and I understand it now in a way I wish I had years ago.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BsReframe = () => (
  <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]">
          The problem was never the ideas. It was the finishing.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            If your folder is full of half-built things, you've probably decided that means you don't finish what you start. I don't think it does, and the evidence doesn't either. For most people with ADHD, the problem was never the ideas or the starting. It's the finishing, and finishing is a specific, nameable thing that can be designed around.
          </p>
          <p>
            You don't need a perfect project or a different personality. You need one project at a time, one small action a day, an easy way back in when you drift, and ideally one person who gets to watch you do it. The goal was never a perfect project. It's a finished one. Pick the one gathering dust, and start there.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BsTldr = () => (
  <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>
            You're not short of side projects. You're short of finished ones. And that's a specific problem, not a character flaw.
          </p>
          <p>
            A side project is the hardest possible context for an ADHD brain. It's optional, the reward is far away, there's no deadline and no audience, and no structure unless you build it. Delay discounting and impaired time perception, both well evidenced in ADHD, make a long, low-reward arc especially hard to sustain.
          </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 choosing one project feels impossible.",
          "The motivation cliff around week three, when it stops being exciting and starts being work.",
          "The hard middle, where the boring, exposed tasks pile up.",
          "The idea hijack, when a shinier project offers escape.",
          "The shame layer, where each unfinished thing makes the next one harder to start.",
        ].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">Finishing is not the same as starting</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            The endgame is the lowest-novelty, highest-exposure work: polishing, publishing, asking for feedback. Procrastination here is emotion regulation, not poor discipline. And because self-esteem and stigma run high in ADHD, publishing can feel like inviting proof of inadequacy rather than a reward.
          </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 willpower</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">The evidence favours changing the environment at the point of performance over trying harder. Planners and apps often become another unfinished project. What actually helps looks like:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "one active project, with the others deliberately parked;",
              "one small, achievable action a day rather than a roadmap;",
              "treating finishing as its own mode, with support for the exposed final push;",
              "a safe way to resume after a gap, instead of restarting from scratch;",
              "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 helps you finish the one project you've got. It helps you:
          </p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "focus on a single project and park the rest;",
              "make one small bit of progress each day;",
              "get through the hard middle and the final push;",
              "resume, shame-free, after time away;",
              "stay accountable to someone who's quietly waiting.",
            ].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>A folder of unfinished things doesn't mean you can't finish. For most people with ADHD, the problem was never the starting. It was the finishing, and finishing can be designed around.</p>
          <p>You don't need a perfect project or a different personality. You need one project, one daily action, and an easy way back in when you drift.</p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BsAuthorBio = () => (
  <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 BsApp() {
  return (
    <main id="main">
      <BsNav />
      <BsHero />
      <BsOpening />
      <BsHardest />
      <BsFinishing />
      <BsPublishing />
      <BsFuel />
      <BsSuperpower />
      <BsImplementation />
      <BsWhatWeDid />
      <BsReframe />
      <BsTldr />
      <BsAuthorBio />
      <Footer />
    </main>
  );
}

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