/* Loops Blog — "Doing My Tax Return with ADHD, and Why I Still Haven't Paid It"
   Authored editorial post by Matt Humphreys. Same blog template. Internal cross-links
   to mechanism pages and sibling posts. UK English, no em dashes. */

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

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

const BT_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
  { label: "Stop procrastinating", href: "/adhd/stop-procrastinating-with-adhd/" },
];

const BtNav = () => {
  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">
            {BT_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">
              {BT_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 BtHero = () => (
  <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]">
          Doing my tax return with ADHD, and why I still haven't paid it.
        </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">
          Here's my confession, written at the least flattering possible moment.
        </p>
      </div>
    </Container>
  </section>
);

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

const BtOpening = () => (
  <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>
          It's July. There's a tax payment due in a matter of days. I know roughly what I owe. The money is sitting in my account, ready to go. All I have to do is log in and send it.
        </p>
        <p className="text-ink font-medium">And I can't.</p>
        <p>
          Because to log in I need my Government Gateway password, and I have, of course, forgotten it. So the payment sits there, ready but unsent, while the deadline creeps closer and a very familiar guilt settles in. I did the actual return months ago. That was meant to be the hard part. And yet here I am in the middle of summer, beaten by a login and a payment I don't even really understand.
        </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">
          The tax return was never the hard part. It's the last click I can't make.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Body: the password ---------------- */

const BtPassword = () => (
  <Section id="password" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>An annual tradition</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 password I reset every year so I won't struggle, then forget.
        </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 bit that would be funny if it weren't happening right now.</p>
          <p>
            Last time, I forgot this exact password. So I reset it, felt briefly and enormously clever, and thought, right, that's future me sorted. Future me will just breeze in. Future me is me. Now. Locked out again, staring at a login screen like it's the first time I've ever seen it. This is <a href="/adhd/working-memory-with-adhd/" className={BT_LINK}>working memory</a> doing exactly what it does, and no amount of good intentions two or three months ago changes what my brain can actually hold until the next deadline.
          </p>
          <p>
            And the truly absurd part is that I already know how this ends. I'll reset it today. I'll feel clever again for exactly four seconds. And in January, when I have to pay again, I'll be right back here, forgetting the new one, resetting it, promising future me something I have no way of delivering. It's not a one-off mistake. It's an annual tradition. Twice-annual, in fact, which we'll get to.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: never one task ---------------- */

const BtChain = () => (
  <Section id="chain" className="bg-base">
    <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]">
          It was never one task. That's the whole problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>People talk about "doing your taxes" like it's a single thing you sit down and do. It isn't.</p>
          <p>
            It's finding the figures. It's remembering which email I used. It's the login I've forgotten, then the reset, then the code sent to a phone I've left in another room, then the reference number, then a completely separate trip into my banking app to actually move the money. Every one of those is a small, separate step, and every single one is a fresh chance for my brain to bounce off and wander away.
          </p>
          <p>
            For most people that chain is mildly annoying. For an ADHD brain it's a minefield, because you only need to trip on one link for the whole thing to stall. Each link demands its own act of <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={BT_LINK}>getting started</a>, and <a href="/adhd/executive-function-with-adhd/" className={BT_LINK}>executive function</a> is exactly what a chain like this taxes hardest. And it stalls at the worst possible spot, right at the end, when the difficult work is already behind you.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: the wall at the last step ---------------- */

const BtLastStep = () => (
  <Section id="last-step" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Why the end 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]">
          The wall is always at the last step.
        </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 I find hardest to explain to people who don't live it.</p>
          <p>
            Getting to the payment should feel like relief. Instead I'm frozen at the final click. Not because it's difficult, it's the easiest step of the whole ordeal, but because it needs the one thing I don't have, and starting the password reset feels like cracking the lid back off a box I only just managed to close. My brain treats "reset the password and pay" as if it were the entire tax return all over again, and it noses away from it.
          </p>
          <p>
            So the money sits there. Ready. Unpaid. And every day I don't do the two-minute job, the shame quietly compounds, which makes me want to look at it even less, which is precisely how a two-minute job becomes a two-week one. That's <a href="/adhd/shame-spiral-with-adhd/" className={BT_LINK}>the shame spiral</a>, and it's the reason <a href="/adhd/stop-procrastinating-with-adhd/" className={BT_LINK}>procrastination</a> is better understood as <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC9821724/" target="_blank" rel="noopener noreferrer" className={BT_LINK}>emotion regulation</a> than as poor discipline. It's the same trap I wrote about in <a href="/blog/building-a-side-project-means-finishing-not-starting/" className={BT_LINK}>finishing, not starting</a>, only this time the unfinished thing has a deadline and a fine attached.
          </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">
          I did the hard part. I just can't get over the small bit at the end.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Body: the calendar ---------------- */

const BtCalendar = () => (
  <Section id="calendar" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>And then there's the calendar</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          I genuinely cannot keep the order of this straight.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>Let me lay out what I think happens, and you can enjoy watching me not quite be sure.</p>
          <p>
            Right now, in July, there's a payment due. Some sort of advance on next year, I think. Then in January I have to log back in and pay again. Somewhere around April, once the new tax year turns over, I can actually do the next return. And then, reliably, I'll ignore all of it until it's July once more and the whole confusing merry-go-round comes back around.
          </p>
          <p>
            I've paid the July one for years and I still couldn't explain it to you. It's called a "<a href="https://www.gov.uk/government/news/taxpayers-urged-to-get-ahead-of-july-self-assessment-payment-deadline" target="_blank" rel="noopener noreferrer" className={BT_LINK}>payment on account</a>," a phrase that has told me precisely nothing across all the times I've dutifully handed the money over. All I really know is that there's a date at the end of July, it's looming right now, and if I miss it there's a fine, or interest, or some penalty I don't fully understand either.
          </p>
          <p>
            And if it's any comfort to either of us, I'm in enormous company. HMRC's own figures show <a href="https://www.gov.uk/government/publications/fiscal-events-2026-factsheets/timely-payments-in-income-tax-self-assessment-factsheet" target="_blank" rel="noopener noreferrer" className={BT_LINK}>roughly one in five Self Assessment bills are paid late, and about 1.1 million payments on account were missed in a single January</a>.
          </p>
          <p>
            When a date is that far off, <a href="/adhd/time-blindness-with-adhd/" className={BT_LINK}>time blindness</a> means it doesn't feel real until it very suddenly does. And when it does, I'm not just late. I'm late and baffled, scrambling to understand a thing I've somehow already paid several times.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: nobody explained it ---------------- */

const BtExplained = () => (
  <Section id="explained" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The bit underneath all of 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]">
          Nobody explained this to me. Or they did, and I wasn't listening.
        </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 I don't say out loud very often.</p>
          <p>
            I don't actually understand how any of this works. Not properly. I've been filing and paying for years, and I still couldn't confidently tell you what a payment on account is, why it lands in July, or how the whole calendar is meant to fit together.
          </p>
          <p>
            And the uncomfortable part is that I can't cleanly blame the system for that. Maybe nobody ever sat me down and explained it. Or, far more likely, someone did, once, in a letter or a form or a dull five minutes of someone's time, and it was just boring enough that my attention slid clean off it. That's the honest version. The information was probably right there in front of me, and I simply wasn't interested enough to hold onto it.
          </p>
          <p>
            The trouble is that tax doesn't care whether I found it interesting. The bit I glazed over years ago is the exact bit biting me today. That's the quiet cost of an ADHD attention span, if you'll forgive the pun. The boring-but-important thing doesn't get absorbed in the moment it's offered, because <a href="/adhd/motivation-and-reward-with-adhd/" className={BT_LINK}>interest is what drives an ADHD brain</a>, not importance, and then it comes back, every single year, wearing a deadline and a threat. Not understanding it isn't stupidity. It's what happens when the explaining is done in the driest possible way, at a moment my brain had already left the room.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: what would help ---------------- */

const BtWhatHelps = () => (
  <Section id="what-helps" 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]">
          What would actually help.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The honest answer isn't "become someone who remembers passwords and reads letters from HMRC properly." I've met me. That person isn't coming.
          </p>
          <p>
            What would actually help is not meeting this as one enormous dreaded wall at the deadline, but as a handful of tiny steps spread across the quiet weeks before, when there's no panic attached. Find the login early. Reset the password on a calm Tuesday, not a frantic one. Break the last click off from the rest so it isn't guarding the exit. On the days it still won't happen, a bit of <a href="https://www.understood.org/en/podcasts/adhd-channel/adhd-and-taxes" target="_blank" rel="noopener noreferrer" className={BT_LINK}>body doubling</a> gets more admin out of me than any amount of resolve.
          </p>
          <p>
            And, honestly, it would help to have the confusing bit explained at the one moment I might actually take it in, which is never when the letter arrives and always when I'm sitting there stuck at 11pm.
          </p>
          <p>
            That's genuinely why we're building <a href="/adhd/build-financial-security/" className={BT_LINK}>Loops</a>.
          </p>
          <p>
            It turns a horrible, looming, all-at-once task into small actions a day, it can talk me through the bit I've never understood at the moment I finally care about it, and it gives you one person who gets to see me chip away at the thing I'd otherwise avoid until the last possible minute. It won't remember my Government Gateway password for me. But it might stop me arriving here, every July and every January, at the same locked door.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BtReframe = () => (
  <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 task was never really the problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            If you're sitting on a payment you can't make, or a return you can't face, I promise you're not some sort of disorganised failure.
          </p>
          <p>
            For what it's worth, leaving it to the wire is practically the national sport. On this year's January deadline, HMRC said <a href="https://www.gov.uk/government/news/1148-million-beat-the-self-assessment-deadline" target="_blank" rel="noopener noreferrer" className={BT_LINK}>nearly half a million people filed on the final day, and more than 27,000 in the final hour</a>.
          </p>
          <p>
            The task was never really the problem. It's the password you can't hold onto, the last step that guards the door, the calendar that never got explained in a way that stuck, and the way the whole thing lands as one impossible wall instead of a series of small, survivable steps. Those are ADHD problems, not character ones, and they're far more fixable than "try to care more."
          </p>
          <p>
            Right, I'm going to go and reset that password now. I'll pay it today. And yes, come January, and then next July, I'll almost certainly be right back here, and honestly, that's fine. The answer was never to become a different person who finds tax fascinating. It's to build the thing that carries me through the exact bit I always get stuck on.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BtTldr = () => (
  <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>
            It's July. There's a tax payment due in days, the money is ready, and I still haven't sent it, because I've forgotten my Government Gateway password. Again.
          </p>
          <p>This isn't laziness. Doing your taxes with ADHD is hard for specific, predictable reasons:</p>
        </div>
      </div>

      <ul className="mt-6 max-w-prose grid gap-2.5 sm:grid-cols-2">
        {[
          "It's not one task, it's a long chain of small steps, and any one of them can stall the lot.",
          "The passwords don't survive from one login to the next, so I reset them and forget them at least twice a year.",
          "The wall lands at the very last step, after the hard work is done, which is the cruellest possible place for it.",
          "The calendar itself confuses me, a payment in July, another in January, a return I can file from April, and I couldn't cleanly explain any of it.",
          "Underneath all of it, the whole thing was never really explained in a way my attention could hold, so I glaze over it and then pay for it later.",
        ].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 that you don't care</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            The ready-but-unpaid payment is the proof. The caring was never missing. What's missing is a way through a multi-step, password-gated, poorly-explained task that an ADHD brain is almost designed to bounce off, especially at the final click.
          </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">What actually helps</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">Not more willpower, and not becoming someone who reads tax letters closely. What helps looks like:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "breaking the job into small steps across the calm weeks, not one dreaded wall at the deadline;",
              "sorting the boring blockers, like the login, early, when there's no panic attached;",
              "having the confusing bits explained at the moment you're actually stuck, not months before you care;",
              "one person who sees you chip away at it.",
            ].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">The reframe</h3>
          <div className="mt-3 space-y-4 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            <p>A payment you can't make, or a return you can't start, doesn't make you a disorganised failure.</p>
            <p>The task was never the real problem. The password, the last step, the baffling calendar, and the all-at-once wall are, and those are ADHD problems, not character ones.</p>
            <p>You don't need to care more or become a different person. You need the thing broken small, the blockers sorted early, the confusing bit explained when it counts, and someone who sees you do it.</p>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BtAuthorBio = () => (
  <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 BtApp() {
  return (
    <main id="main">
      <BtNav />
      <BtHero />
      <BtOpening />
      <BtPassword />
      <BtChain />
      <BtLastStep />
      <BtCalendar />
      <BtExplained />
      <BtWhatHelps />
      <BtReframe />
      <BtTldr />
      <BtAuthorBio />
      <Footer />
    </main>
  );
}

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