/* Loops Blog — "Getting Fit with ADHD Means Not Stopping, Not Starting"
   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 BF_LINK = "text-brand-deep font-semibold hover:underline";

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

const BF_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
  { label: "Get fit", href: "/adhd/get-fit/" },
];

const BfNav = () => {
  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">
            {BF_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">
              {BF_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 BfHero = () => (
  <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]">
          Getting Fit with ADHD Starts With Not Stopping
        </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">
          This is a topic I'm currently living with, right now, as I type this.
        </p>
      </div>
    </Container>
  </section>
);

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

const BfOpening = () => (
  <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>
          I haven't been to the gym, properly, in longer than I'd like to admit. Not because I don't want to. I do want to. There are other projects pulling at my attention, the kind that feel urgent and interesting in a way the gym just doesn't, and every day I mean to go, and every day I don't.
        </p>
        <p>And here's the part that stings. I know exactly how good it makes me feel after exercise.</p>
        <p>
          I always feel better on the days I go. That knowledge sits there, completely useless, while I don't go anyway. And a quiet layer of guilt builds on top of it.
        </p>
        <p>If you recognise that exact feeling, you're the person I'm writing this for.</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 fitness habit was never the hard part. Not stopping 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 don't have this solved. I'm just a bit further into thinking about it. But I've been reading about why it happens, and some of it genuinely helped, so I wanted to share what I found. It's also the reason we ended up building an app called <a href="/adhd/get-fit/" className={BF_LINK}>Loops</a>, and the thing I use Loops for myself.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: wanting it ---------------- */

const BfWanting = () => (
  <Section id="wanting" 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]">
          Wanting it was never the problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Russell Barkley argues that <a href="https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" target="_blank" rel="noopener noreferrer" className={BF_LINK}>ADHD isn't really a knowledge or desire problem</a>. It's a <a href="/adhd/executive-function-with-adhd/" className={BF_LINK}>self-regulation problem</a> at the point of performance, and his conclusion is that the support has to be externalised. Visible cues, prompts, accountability, placed exactly where the behaviour needs to happen.
          </p>
          <p>
            That lands hard for me, because it names the thing I keep getting wrong. I keep assuming that if I just wanted it enough, I'd go.
          </p>
          <p>
            A <a href="https://link.springer.com/article/10.1007/s10882-024-09994-0" target="_blank" rel="noopener noreferrer" className={BF_LINK}>study of what actually drives exercise in adults with ADHD symptoms</a> gently takes that assumption apart. People with ADHD symptoms reported more barriers around planning, emotion, belief in their own ability, and motivation, which neatly separates "I don't want to" from "I can't reliably make the plan survive contact with real life." I'm firmly in the second camp. The wanting is not the problem. The gap between deciding and going is.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: the workout is the easy part ---------------- */

const BfWorkout = () => (
  <Section id="workout" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The hidden task-stack</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 workout is the easy part. It's everything around 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 something it took me embarrassingly long to see.</p>
          <p>
            A 45-minute workout is almost never 45 minutes. It's finding the kit, the journey there, the changing, the waiting, the shower, and dragging myself back to what I was doing afterwards.
          </p>
          <p>The session itself is the easy bit.</p>
          <p>
            The hidden chain of steps around it is where I quietly fall apart. That makes sense given that <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" target="_blank" rel="noopener noreferrer" className={BF_LINK}>time perception in adult ADHD is consistently impaired</a>, so that clean-looking block of time is actually experienced as an amorphous pile of admin.
          </p>
          <p>
            And it isn't just me being disorganised. <a href="https://link.springer.com/article/10.1007/s10882-023-09908-6" target="_blank" rel="noopener noreferrer" className={BF_LINK}>Qualitative research on physical activity in adults with ADHD</a> found a barrier cluster that reads a lot like a description of my own head. Forgetfulness, trouble sustaining focus, time-management problems, low self-esteem, and low motivation. The friction was never in the exercise. It's in the route to it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: reward too far away ---------------- */

const BfReward = () => (
  <Section id="reward" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The delayed reward</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 reward is too far away to move you.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>Then there's the reward, or rather the lack of an immediate one.</p>
          <p>
            Adults with ADHD have well-documented <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC3010326/" target="_blank" rel="noopener noreferrer" className={BF_LINK}>differences in reward processing and delay discounting</a>, which means distant rewards lose their pull fast. "Future me will be fitter" is a hopeless motivator against the very immediate cost of getting changed, travelling, and leaving a project I'm enjoying. On paper the maths is obvious. In the moment, the office desk wins.
          </p>
          <p>But here's the reframe that actually works for me, on the days it works at all.</p>
          <p>
            Exercise isn't only a slow, invisible investment. A <a href="https://pubmed.ncbi.nlm.nih.gov/30971959/" target="_blank" rel="noopener noreferrer" className={BF_LINK}>single bout of exercise can improve attention, mood, and executive function</a> more or less the same day, often within the hour. So I don't go for a version of me six months from now. I go because it makes the next few hours of today more workable. That's not a motivational trick. It's just a truer description of what the movement actually does for an ADHD brain, and it's the one thing that occasionally gets me out the door.
          </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 don't go for a version of me six months from now. I go because it makes today more workable.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Body: boom-bust ---------------- */

const BfBoomBust = () => (
  <Section id="boom-bust" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The boom-bust cycle</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 boom-bust cycle, and the guilt that follows.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>The shape of my failure is always the same.</p>
          <p>
            I go all in for a couple of weeks. Then something interrupts, a trip, a busy stretch, a bad few days, and I miss a session. Then a few. And because a broken streak feels like starting from zero, going back feels enormous, so I don't. The break quietly becomes permanent. That all-or-nothing response isn't a lack of commitment. It's just how an ADHD brain tends to handle a lost run of momentum.
          </p>
          <p>
            And the emotional side is real, not decorative. Given how much <a href="https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" target="_blank" rel="noopener noreferrer" className={BF_LINK}>emotion dysregulation</a> shows up in adult ADHD, setbacks land harder than they should, and the whole category of "fitness" slowly becomes emotionally loaded. The unused gym bag by the door stops being neutral. It becomes a small daily reminder that I've failed at this before. That's the guilt I'm carrying this week, in fact. It doesn't make me go. It just makes the not-going heavier.
          </p>
          <p>
            It doesn't help that so many of us are running on unstable fuel. Adult ADHD is strongly tied to <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC12728042/" target="_blank" rel="noopener noreferrer" className={BF_LINK}>sleep problems and delayed circadian timing</a>, so we're often trying to build a movement habit on late nights and hard mornings, at exactly the times our task-initiation is weakest.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: friction-and-reward ---------------- */

const BfFriction = () => (
  <Section id="friction" 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 friction-and-reward 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 "just be more disciplined" turns out to be useless advice. The evidence points somewhere else entirely.</p>
          <p>
            <a href="https://www.nice.org.uk/guidance/ng87/chapter/recommendations" target="_blank" rel="noopener noreferrer" className={BF_LINK}>NICE recommends visual reminders, routine anchoring and peer support</a> to help people with ADHD stick with things, none of which is willpower. It helps enormously to assume interruption rather than fear it. <a href="https://www.nhs.uk/live-well/exercise/physical-activity-guidelines-for-adults-aged-19-to-64/" target="_blank" rel="noopener noreferrer" className={BF_LINK}>UK activity guidance</a> is built around weekly totals rather than perfect daily streaks, which quietly gives you permission to have an uneven week and still be doing fine. Broken streaks are one of the fastest routes to quitting, so anything that treats a gap as normal rather than fatal is worth its weight.
          </p>
          <p>
            Novelty matters too. Varied, engaging formats tend to hold an ADHD brain better than the same repetitive routine, which is why the thing that felt brilliant in week two can feel impossible by week eight. And the single most reliable lever, across the research and my own experience, is <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC10156575/" target="_blank" rel="noopener noreferrer" className={BF_LINK}>another person</a>. Exercising with someone, or even just having someone see that you did, turns intention into action in a way going solo almost never does. That gap is the whole problem, and it's where we decided to build something.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BfWhatWeDid = () => (
  <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 is built on getting back in, not starting over.
        </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, and I'll say plainly that this is the one I use the app for myself. At its core, <a href="/adhd/get-fit/" className={BF_LINK}>Loops</a> is a daily coaching app for people with ADHD.
          </p>
          <p>
            It gives me small daily actions instead of a whole programme, so the decision is tiny and the threshold to start is low. It coaches me through the moment the routine breaks, so a missed week stays a pause rather than becoming the end. It's built for getting back in, not starting over. And it leans on the two things that actually move me, the same-day payoff and one person who gets to see me show up, rather than a distant goal and a lonely streak.
          </p>
          <p>
            It hasn't made me love the friction. I'm still me. But it has helped me make time for the gym again this week, not because I suddenly became more disciplined, but because getting back no longer feels like starting from scratch. What it's changed is what a gap means. Stopping used to feel like a verdict on me. Now it feels like a pause, and I come back faster. I'm not writing this to sell you anything. I'm writing it because I'm in it too.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BfReframe = () => (
  <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]">
          Starting was never the hard part. Staying in it is.
        </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 started and stopped more times than you can count, you've probably decided that means you lack the discipline for this.
          </p>
          <p>I don't believe that, about you or about me.</p>
          <p>
            Starting was never the hard part. Staying in it is, and staying in it isn't about discipline. It's about the friction before each session and the reward that arrives too late, and both of those can be designed smaller. It's not a motivation problem. It's an ADHD one, and that's a far more fixable thing.
          </p>
          <p>
            I'm making time for the gym again this week, not because I finally found the willpower, but because the thing that gets me there was never willpower in the first place. If you're carrying the same guilt right now, put it down. The bag by the door isn't proof you failed. It's just waiting for tomorrow.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BfTldr = () => (
  <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>
            Starting a fitness habit was never the hard part. Not stopping is. And that's not a motivation problem, it's an ADHD one.
          </p>
          <p>
            Starting is easy. Staying in it is where it breaks. The evidence shows the barriers sit around planning, emotion, self-belief and reward, not around desire. The real gap is continuity, closing that space between deciding to go and going, over and over, through real life.
          </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 task-stack, where the kit, journey, changing and waiting are harder than the workout itself.",
          "The delayed reward, where \u201Cfitter in six months\u201D can't compete with the immediate cost of getting there.",
          "The boom-bust cycle, where a missed few days quietly becomes a permanent stop.",
          "The boredom barrier, where repetitive formats lose their pull faster for ADHD brains.",
          "The shame spiral, where each lapse makes starting again heavier.",
        ].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 desire</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            The workout is the easy part. Impaired time perception makes the admin around it feel enormous, and steep delay discounting makes the slow rewards weak. Meanwhile emotion dysregulation turns lapses into a loaded "I always fail at this" story. The reframe that helps most is immediacy. A single session can lift attention, mood and focus the same day, often within the hour. That's a reason to move today, not for a distant version of you.
          </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 externalising the habit over trying harder. What actually helps looks like:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "one tiny daily action with a very low threshold to start;",
              "planning for interruption, with weekly rather than perfect-daily targets;",
              "variety and enjoyment rather than rigid repetition;",
              "re-entry after a gap treated as normal, not as failure;",
              "one person who sees you show up.",
            ].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 keeps a movement habit alive through real life. It helps you:
          </p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "take small, achievable actions each day;",
              "get coaching when the routine breaks, so a pause stays a pause;",
              "come back after a gap without starting from scratch;",
              "move for how it makes today feel, not just a far-off goal;",
              "keep going alongside one person who sees 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>Starting and stopping many times doesn't mean you lack discipline. Starting was never the hard part. Not stopping is, and that's about friction and reward, not willpower. Both can be designed smaller.</p>
          <p>It's not a motivation problem. It's an ADHD one, which is a far more fixable thing. Put down the guilt. The bag by the door is just waiting for tomorrow.</p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BfAuthorBio = () => (
  <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 BfApp() {
  return (
    <main id="main">
      <BfNav />
      <BfHero />
      <BfOpening />
      <BfWanting />
      <BfWorkout />
      <BfReward />
      <BfBoomBust />
      <BfFriction />
      <BfWhatWeDid />
      <BfReframe />
      <BfTldr />
      <BfAuthorBio />
      <Footer />
    </main>
  );
}

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