/* Loops Blog — "Finding a New Job with ADHD Means Building a Search You Can Restart"
   Authored editorial post by Matt Humphreys. Same blog template as blog-record-page:
   editorial hero with byline + Skip to TL;DR, flowing prose with pull quotes and a
   stat/failure-point callout, scannable TL;DR (#tldr), author bio. UK English, no em dashes. */

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

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

const BJ_NAV_LINKS = [
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
  { label: "Finding a job", href: "/adhd/finding-a-new-job-with-adhd/" },
];

const BjNav = () => {
  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">
            {BJ_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">
              {BJ_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 BjHero = () => (
  <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]">
          Finding a new job with ADHD means building a search you can restart.
        </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 come to think most job searches don't end with a decision. They end with a silence.
        </p>
      </div>
    </Container>
  </section>
);

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

const BjOpening = () => (
  <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>
          Nobody sits down and formally quits. There's no moment where you decide to stop. What actually happens is quieter than that. A rejection lands, or a fortnight of no replies goes by, and the search just goes still. Days become weeks. And the longer it stays stopped, the harder it is to start again.
        </p>
        <p>
          That's the thing I wish someone had told me years ago, before my own ADHD diagnosis, before any of this made sense. The risk was never that I'd give up. I cared far too much for that. The risk was the quiet stall that nobody decides on.
        </p>
      </div>

      <figure className="mt-10 max-w-3xl rounded-card bg-muted p-8 sm:p-10 border-l-4 border-brand">
        <blockquote className="text-[20px] sm:text-[25px] font-semibold tracking-tight2 text-ink leading-[1.3] text-balance">
          A job search doesn't fail because you gave up. It fails because it stalled and never restarted.
        </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/finding-a-new-job-with-adhd/" className={BJ_LINK}>Loops</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: a search is a system ---------------- */

const BjSystem = () => (
  <Section id="system" 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 job search isn't a task. It's a system.
        </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 finding that made the whole thing click for me.</p>
          <p>
            <a href="https://carlsonschool.umn.edu/sites/carlsonschool.umn.edu/files/2021-06/VanHooftKammeyerMuellerWanbergKanferBasbug_JAP%202021.pdf" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>General job-search research</a> shows that self-regulation, goal clarity, and job-search quality predict interviews, offers and actually getting hired better than sheer search intensity. In other words, it's not really about how hard you go for a week. It's about whether you can keep the thing running.
          </p>
          <p>That's a quiet bombshell if you have ADHD.</p>
          <p>
            It means a job search isn't one task you complete. It's a self-management system you have to sustain over weeks or months, with no fixed deadline and a reward that feels a very long way off. And self-management over time is precisely the thing an ADHD brain finds hardest.
          </p>
          <p>
            So the search doesn't collapse because you don't understand it. It collapses because the system holding it together was never something willpower alone could carry.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: bursts ---------------- */

const BjBursts = () => (
  <Section id="bursts" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Not nothing, just bursts</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 problem isn't doing nothing. It's doing it in bursts.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The complaint I hear most often isn't "I do nothing." It's "I can only do it in bursts." When the pressure or the interest is high, everything flows. You fire off five applications in an evening. Then the urgency fades, and starting again feels almost physically impossible.
          </p>
          <p>
            There's a real mechanism underneath this. ADHD involves <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC3010326/" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>atypical reward processing</a> and <a href="/adhd/motivation-and-reward-with-adhd/" className={BJ_LINK}>motivation tied to dopamine pathways</a>, which means low-reward, delayed, ambiguous tasks are unusually hard to start. And a job search is absolutely made of those. Boring, fragmented, delayed in payoff, and rarely finishable in one sitting.
          </p>
          <p>
            The clinical work of people like J. Russell Ramsay frames adult ADHD as a problem of <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={BJ_LINK}>turning intentions into actions</a>, not a problem of lacking knowledge. You already know what to do, because knowing was never the issue. Doing the thing, again, on a Wednesday when nothing is on fire, is the issue.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: rejection ---------------- */

const BjRejection = () => (
  <Section id="rejection" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Where a stall becomes a stop</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Rejection is where the stall becomes a stop.
        </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 does the real damage. The evidence for <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>emotional dysregulation in ADHD</a> is strong, and it's a major driver of impairment. A knockback that takes another candidate an afternoon to shrug off can flatten someone with ADHD for a week or more.
          </p>
          <p>
            <a href="https://link.springer.com/article/10.1186/s12888-022-04409-w" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>Qualitative studies of adults with ADHD</a> describe persistent stress, anxiety, exhaustion and relapse into poor mental health around work. The pattern is horribly familiar. Apply intensely, get ghosted or rejected, feel the shame, stop searching, then panic about it later.
          </p>
          <p>And that's the moment the whole thing tips.</p>
        </div>
      </div>

      <figure className="mt-10 max-w-3xl rounded-card bg-muted p-8 sm:p-10 border-l-4 border-amber">
        <blockquote className="text-[22px] sm:text-[28px] font-semibold tracking-tight2 text-ink leading-[1.25] text-balance">
          A rejection is a search problem. But left alone, it quietly becomes an identity problem.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          You stop asking "why didn't that one land" and start asking "what's wrong with me." Those are very different questions, and only one of them keeps you applying.
        </p>
      </div>
    </Container>
  </Section>
);

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

const BjAdmin = () => (
  <Section id="admin" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The background load</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 wears you down in the background.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Even without a single rejection, there's the sheer load of it. CV tailoring, cover letters, portals, follow-ups, scheduling, references. Each one looks small. None of them are small when your brain has to switch, remember, prioritise and restart for every single one.
          </p>
          <p>
            The <a href="https://link.springer.com/article/10.1186/s12888-021-03070-z" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>UK Adult ADHD Network's guidance</a> is clear that adults with ADHD often need <a href="/adhd/executive-function-with-adhd/" className={BJ_LINK}>external structure</a>, task breakdown, routines and alerts, precisely because one big burst of effort rarely holds over time. This isn't a nice-to-have. It's the difference between a search that keeps moving and one that silently stops.
          </p>
          <p>
            It's worth naming the backdrop here too. Adults with ADHD face <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC3599848/" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>elevated risks of unemployment, job instability and poorer work functioning</a>, and in <a href="https://link.springer.com/article/10.1007/s00702-021-02309-z" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>workplace research</a> the pain is felt most as "not working to potential" rather than as any obvious failure. That gap, between what you can do and what you can consistently show, is the same gap a job search punishes hardest.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BjImplementation = () => (
  <Section id="implementation" 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 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>
            I want to be careful here, as always, because the standard reading of all this is that people with ADHD need to "try harder". This is a phrase I despise, because the evidence points the other way.
          </p>
          <p>
            The expert consensus, from <a href="https://www.guilford.com/books/Taking-Charge-of-Adult-ADHD/Russell-Barkley/9781462546855" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>Barkley</a> through Ramsay and Hallowell, keeps landing on the same conclusion. Adults with ADHD usually know exactly what to do. What they need are practical, environment-sensitive strategies that reduce cognitive load and build follow-through, rather than more discipline layered on top of shame.
          </p>
          <p>Ordinary productivity advice keeps missing this, because it mistakes an implementation problem for a motivation problem.</p>
          <p>And here's the frustrating bit.</p>
          <p>
            We actually know roughly what works. <a href="https://pubmed.ncbi.nlm.nih.gov/24588365/" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>Meta-analytic job-search research</a> finds the winning combination is skills, plus motivation, plus social support. Reviews of <a href="https://strathprints.strath.ac.uk/89559/7/Bosnic-etal-DHI-2024-Evaluating-Digital-Interventions-for-ADHD-Diagnosis-and-Management.pdf" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>digital ADHD tools</a> find they work far better when that social support is built in, not bolted on. Yet almost nothing is designed this way, and there's <a href="https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" target="_blank" rel="noopener noreferrer" className={BJ_LINK}>still no mature evidence base</a> for job-search support built specifically around an ADHD brain.
          </p>
          <p>That gap is the whole opportunity, and it's where we decided to build something for people like us.</p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BjWhatWeDid = () => (
  <Section id="what-we-did" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What we did about it</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Loops makes the search something you can always restart.
        </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/finding-a-new-job-with-adhd/" className={BJ_LINK}>Loops</a> is a daily coaching app for people with ADHD and, with finding a job in mind, it makes the search something you can always restart.
          </p>
          <p>
            It turns "find a new job" into one small daily action, so you always know the next right thing rather than facing an overwhelming list. A missed day doesn't wipe you out. You repair the streak simply by showing up again, which is exactly the moment most searches die.
          </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 spreadsheet. And it puts a coach at the point of performance, one that already knows where you are in your job search, so there's help at night when a rejection lands, not in some appointment three weeks away.
          </p>
          <p>
            I'm not writing this to sell Loops. I'm writing it because the problem underneath Loops is one I lived before I understood it in my thirties, and one I keep seeing in people who deserve better than the story they've been telling themselves.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BjReframe = () => (
  <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 problem was never a lack of ambition.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            If your job search has gone quiet more than once, you've probably started to wonder whether it means you're not cut out for this. I don't think it does, and the evidence doesn't either. For most people with ADHD, the problem was never a lack of ambition or ability. It was a search that stalled and had no easy way back in.
          </p>
          <p>
            You don't need a perfect week or a new personality. You need a small, reliable way to take the next step, a way to restart that doesn't ask you to begin from scratch, and ideally one person who gets to watch you keep going. Start by checking out how <a href="/adhd/finding-a-new-job-with-adhd/" className={BJ_LINK}>Loops</a> can help you with this. It's the thing I wish someone had built for me long before anyone did.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BjTldr = () => (
  <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>
            A job search rarely fails because you gave up. It fails because it stalled after a setback and never restarted.
          </p>
          <p>
            The search isn't one task. It's a system you have to keep running over weeks or months, with no deadline and a reward that feels far away. Research shows outcomes depend more on self-regulation and consistency than on how hard you search in any given week.
          </p>
          <p>For people with ADHD, that's the hard part. The failure points are predictable:</p>
        </div>
      </div>

      <ul className="mt-6 max-w-prose grid gap-2.5 sm:grid-cols-2">
        {[
          "Getting started when there's no urgency, interest or immediate reward.",
          "Keeping going in bursts rather than steadily.",
          "Grinding through the admin of CVs, cover letters, portals and follow-ups.",
          "Performing in interviews when your mind goes blank under pressure.",
          "Recovering after rejection or being ghosted.",
          "Deciding whether to disclose or ask for adjustments.",
        ].map((q) => (
          <li key={q} className="flex items-start gap-3 rounded-tile border border-line bg-white px-4 py-3 shadow-soft">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-0.5 shrink-0 text-brand"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
            <span className="text-[15px] leading-[1.5] text-ink text-pretty">{q}</span>
          </li>
        ))}
      </ul>

      {/* Sub-blocks */}
      <div className="mt-10 grid gap-4 sm:gap-5 max-w-3xl">
        <div className="rounded-card border border-line bg-soft p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] sm:text-[19px] font-semibold tracking-tight2 text-ink leading-snug">The problem is not ability</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            Rejection hits harder because of emotional dysregulation, which is well evidenced in ADHD. A knockback that takes someone else an afternoon can stop your search for weeks. Left alone, that turns a search problem into an identity problem. You stop asking why one application failed and start asking what's wrong with 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">Experts like Barkley, Ramsay and Hallowell agree. People with ADHD usually know what to do. What helps is reducing cognitive load and building follow-through, not trying harder. What actually works, across the research, is a combination of:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "small, achievable actions at a time rather than a giant to-do list;",
              "an easy way to restart after a missed day or a knockback;",
              "accountability from one person you trust;",
              "support at the moment things go wrong, 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 "find a new job" into a short daily action and keeps the search moving through the quiet weeks. It helps you:
          </p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "take clear next steps each day;",
              "restart easily when momentum drops, without starting from scratch;",
              "stay accountable to someone you trust, if you want that;",
              "get coaching when a rejection lands, not at your next appointment.",
            ].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 search going quiet doesn't mean you're not good enough. For most people with ADHD, the problem was never giving up. It was the quiet stall that nobody decided on.</p>
          <p>You don't need a perfect system or a different personality. You need a small, reliable way to take the next step, and an easy way back in when the search stops.</p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BjAuthorBio = () => (
  <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 BjApp() {
  return (
    <main id="main">
      <BjNav />
      <BjHero />
      <BjOpening />
      <BjSystem />
      <BjBursts />
      <BjRejection />
      <BjAdmin />
      <BjImplementation />
      <BjWhatWeDid />
      <BjReframe />
      <BjTldr />
      <BjAuthorBio />
      <Footer />
    </main>
  );
}

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