/* Loops Blog — "Getting a Promotion with ADHD Means Building a Record of Your Work"
   Authored editorial post by Matt Humphreys. Flowing prose in a prose column,
   hub-style pull quotes, a stat callout row, and a scannable TL;DR section
   anchor-linked from the hero (#tldr). UK English, no em dashes. */

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

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

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

const BrNav = () => {
  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">
            {BR_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">
              {BR_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 BrHero = () => (
  <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 a promotion with ADHD means building a record of your work.
        </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 become fairly sure this is one of the most important and least discussed truths about work and careers. And it hits people with ADHD hardest of all.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Reusable prose section ---------------- */

const BrSection = ({ id, bg, kicker, title, children, titleSize }) => (
  <Section id={id} className={bg}>
    <Container>
      <div className="max-w-prose">
        {kicker ? <Kicker>{kicker}</Kicker> : null}
        {title ? (
          <h2 className={`${kicker ? "mt-5" : ""} text-balance text-ink font-semibold tracking-tight2 ${titleSize || "text-[28px] sm:text-[34px] lg:text-[40px]"} leading-[1.12]`}>
            {title}
          </h2>
        ) : null}
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          {children}
        </div>
      </div>
    </Container>
  </Section>
);

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

const BrOpening = () => (
  <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>
          Most of us are raised on a comforting idea that you do good work and it will be recognised. It's a lovely story, but it's just not how promotion actually works if we're all being honest.
        </p>
        <p>
          By the time a panel sits down to decide who moves up, the work itself is gone. Nobody re-watches the year. What they assess is the record of the work, the evidence, the narrative and the visible trail of impact. Two people can do equally good work and get completely different outcomes because one of them kept the record and the other assumed the work would speak for itself.
        </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 don't get promoted for the work. You get promoted for the record of the work.
        </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 matters so much, what the research actually says and why it affects people like us with ADHD the most. Then I'll tell you what we did about it, because it's the reason we built <a href="/adhd/get-promoted/" className={BR_LINK}>Loops</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: not a test of your work + stat row ---------------- */

const BR_STATS = [
  { figure: "~69%", label: "of adults with ADHD reported quietly struggling at work, rather than the visible failures." },
  { figure: "20–23%", label: "reported the obvious problems: attendance, being fired, or poor formal reviews." },
  { figure: "22.1", label: "excess days of lost role performance a year associated with adult ADHD (WHO survey)." },
];

const BrNotATest = () => (
  <Section id="not-a-test" 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]">
          Promotion is not a test of your work.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Promotion is a compound challenge. Yes, it rewards reliable execution. But it also rewards visible evidence of impact, strategic communication, social judgement, and follow-through over months rather than days. Those are exactly the domains where adult ADHD creates the most friction, and they get harder as a role becomes more ambiguous and self-managed.
          </p>
          <p>Here's the finding that reframed the whole thing for me.</p>
          <p>
            In a <a href="https://link.springer.com/article/10.1007/s00702-021-02309-z" target="_blank" rel="noopener noreferrer" className={BR_LINK}>2021 workplace study</a>, adults with ADHD did not mostly report the obvious failures. Only around 20% to 23% reported problems with attendance, being fired, or poor formal performance reviews. What they reported instead was so much quieter. Roughly 69% said they struggled.
          </p>
          <p>
            So let's just sit with that gap for a moment. Most people with ADHD are not failing in a way anyone can see. They're failing to show what they are capable of. There's a difference between the value you create and the value your organisation can see, and promotions are lost in that difference.
          </p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-3">
        {BR_STATS.map((s, i) => (
          <article key={i} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="text-[34px] sm:text-[40px] font-bold tracking-tight3 text-brand-deep tnum leading-none">{s.figure}</div>
            <p className="mt-3 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{s.label}</p>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          This is not a small or marginal effect. In the <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC2665789/" target="_blank" rel="noopener noreferrer" className={BR_LINK}>WHO World Mental Health Survey</a>, an estimated 3.5% of workers met the criteria for adult ADHD. A <a href="https://pmc.ncbi.nlm.nih.gov/articles/PMC2665789/" target="_blank" rel="noopener noreferrer" className={BR_LINK}>large manufacturing study</a> found ADHD linked to a 4% to 5% drop in work performance. Numbers like these are big enough to change the story a manager tells about someone's readiness and consistency, even when the actual work is strong.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Body: the inconsistency trap ---------------- */

const BrInconsistency = () => (
  <BrSection id="inconsistency" bg="bg-base" kicker="The inconsistency trap" title="Brilliant peaks, uneven valleys.">
    <p>
      There's a particular pattern that makes this worse. People with ADHD often perform brilliantly when work is new, urgent, socially accountable or genuinely interesting, and then look inexplicably unreliable when it comes to the routine, administrative and ambiguous work in between.
    </p>
    <p>
      <a href="https://www.brownadhdclinic.com/brown-ef-model-adhd" target="_blank" rel="noopener noreferrer" className={BR_LINK}>Thomas Brown</a>, whose <a href="/adhd/executive-function-with-adhd/" className={BR_LINK}>executive-function model</a> shaped a lot of my thinking here, describes how ADHD symptoms can seem to disappear around a highly engaging interest. Which is precisely why other people misread the problem as willpower.
    </p>
    <p>
      Organisations tend to reward smoothness, polish and predictability more than raw upside. So the person with the biggest peaks, and the most uneven valleys, is often the one who gets overlooked. Their work is real, but their record looks jagged.
    </p>
    <p>
      I saw this recently in a message from someone I went to school with who had been passed over three times, diagnosed with ADHD in her early thirties and was only now starting to understand that the pattern was never a verdict on her ability. Reading it, I recognised a version of myself from years ago before my own diagnosis, before any of this made sense. Her work had never been the problem, but her record of it absolutely had been.
    </p>
  </BrSection>
);

/* ---------------- Body: why the record is hardest ---------------- */

const BrHardest = () => (
  <BrSection id="hardest" bg="bg-soft" kicker="The cruel part" title="Keeping the record is the thing ADHD brains are worst at.">
    <p>
      The research on <a href="https://www.semanticscholar.org/paper/Attention-Deficit-Hyperactivity-Disorder-and-Delay-Jackson-Mackillop/320b88f189ed1913ca16f2e1ca6798c0129b2c7b" target="_blank" rel="noopener noreferrer" className={BR_LINK}>delay discounting</a> is clear that distant rewards lose their pull faster for people with ADHD. A promotion nine months away simply can't compete with the thing that's being done today. So the write-up never happens and the win never gets logged. You tell yourself that next cycle you'll do it properly. And we all know it probably won't.
    </p>
    <p>
      There's also the getting started problem. One of the clearest ADHD bottlenecks in <a href="https://www.brownadhdclinic.com/brown-ef-model-adhd" target="_blank" rel="noopener noreferrer" className={BR_LINK}>Brown's model</a> is <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={BR_LINK}>activation</a>: organising, prioritising and sitting down to begin. You can understand exactly why a weekly wins log matters. You can explain it to someone else with total clarity. And you still won't start it, because knowing and doing are two different things.
    </p>
    <p>
      Time management sits right at the centre of this. <a href="https://link.springer.com/article/10.1007/s10926-024-10259-y" target="_blank" rel="noopener noreferrer" className={BR_LINK}>Recent occupational research</a> found time-management difficulties among the most consistent predictors of work outcomes for people with ADHD, and a <a href="https://www.aimspress.com/aimspress-data/aimsph/2024/1/PDF/publichealth-11-01-015.pdf" target="_blank" rel="noopener noreferrer" className={BR_LINK}>2024 study</a> found the link between ADHD and <a href="/adhd/recover-from-adhd-burnout/" className={BR_LINK}>burnout</a> ran largely through deficits in managing time and organising yourself.
    </p>
    <p>
      In <a href="https://www.grantacoaching.com/post/reducing-barriers-to-promotion-for-adhders" target="_blank" rel="noopener noreferrer" className={BR_LINK}>exploratory interviews with ADHDers about promotion</a> specifically, people described the process itself as executive-function heavy, with too much writing, too much evidence-gathering and too many time-limited tasks only loosely related to the actual job. One person said the effort made them unwilling to apply at all unless success felt almost certain.
    </p>
    <p>
      To be clear, that isn't laziness. It's a rational response to repeated effort with little return.
    </p>
  </BrSection>
);

/* ---------------- Body: systems problem ---------------- */

const BrSystems = () => (
  <Section id="systems" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Not a motivation 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 systems 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, because the standard reading of all this is that people with ADHD need to "try harder". I hate that phrase, because the evidence points the other way.
          </p>
          <p>
            <a href="https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" target="_blank" rel="noopener noreferrer" className={BR_LINK}>Russell Barkley</a> frames ADHD as a disorder of self-regulation, not a shortage of effort or desire. And his prescription is not more willpower. It's to externalise the information, externalise the motivation and put support at the point of performance rather than after the failure has already happened.
          </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 <a href="https://research.blogs.bbk.ac.uk/2023/01/09/a-systematic-review-of-interventions-to-support-adults-with-adhd-at-work-implications-from-the-paucity-of-context-specific-research-for-theory-and-practice/" target="_blank" rel="noopener noreferrer" className={BR_LINK}>systematic review</a> found 143 intervention studies for adults with ADHD at work, and not a single one was actually carried out in a workplace.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          The treatment exists. The workplace design barely does though. That gap is the whole opportunity, and it's where we decided to build something.
        </p>
      </div>
    </Container>
  </Section>
);

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

const BrWhatWeDid = () => (
  <BrSection id="what-we-did" bg="bg-soft" kicker="What we did about it" title="Loops is our answer to this specific problem.">
    <p>
      At its core, <a href="/adhd/get-promoted/" className={BR_LINK}>Loops</a> is a daily coaching app for people with ADHD, and it's built around Barkley's three moves rather than around simply "trying harder".
    </p>
    <p>
      With getting a promotion in mind, it externalises the record keeping by turning "what did I do today that mattered" into a couple of minutes rather than a dreaded end-of-cycle write-up. It externalises the motivation by letting 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 support at the point of performance with a coach that already knows your goal and your history, so help is there at 11pm on a Tuesday rather than in a review nine months away.
    </p>
    <p>
      I'm not writing this to sell you anything. I'm writing it because the problem underneath Loops is one I lived before I understood it, and one I keep seeing in people who deserve better than the story they've been telling themselves.
    </p>
  </BrSection>
);

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

const BrReframe = () => (
  <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 work was never the problem. The record was.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            If you've been passed over more than once, you've probably started to wonder whether it means you're not good enough. I don't think it does, and the evidence doesn't either. For most people with ADHD, the work was never the problem, but the record was. Thankfully, a record is something we can fix pretty easily.
          </p>
          <p>
            You don't need a new personality or a perfect system. You need a small, reliable way to catch the work before it fades, and ideally one person who gets to watch you do it too. Start there by giving Loops a try. It's the thing I wish someone had built for my friend three promotions ago, and for me long before that.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BrTldr = () => (
  <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 don't get promoted only for doing good work. You get promoted when there's a clear record of that work.
          </p>
          <p>By the time promotion decisions happen, people may not remember everything you did. They look for evidence:</p>
        </div>
      </div>

      <ul className="mt-6 max-w-prose grid gap-2.5 sm:grid-cols-2">
        {[
          "What did you achieve?",
          "What changed because of your work?",
          "Who did you help?",
          "What problems did you solve?",
          "Can your impact be explained clearly?",
        ].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>

      <div className="mt-6 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>This is especially difficult for people with ADHD. Many ADHDers do strong work but struggle with the tasks that make it visible, such as tracking wins, writing updates, gathering evidence and remembering details months later.</p>
      </div>

      {/* Sub-blocks */}
      <div className="mt-10 grid gap-4 sm:gap-5 max-w-3xl">
        <div className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] sm:text-[19px] font-semibold tracking-tight2 text-ink leading-snug">The problem is not ability</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            ADHD can make performance look inconsistent. You might do brilliantly when work is urgent, interesting or important to someone else, but struggle with routine admin and long-term follow-through. That unevenness can be mistaken for a lack of effort or readiness, even when the quality of your work is high.
          </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">The hardest part is keeping the record</h3>
          <p className="mt-3 text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
            Logging your achievements today has no immediate reward. A possible promotion months from now can feel too distant to motivate you. You may know a weekly wins log would help and still struggle to start or maintain one. That's not laziness. It's an executive-function problem.
          </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 answer is not to "try harder". The answer is to make the process external, immediate and easy:</p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "Record important work before you forget it.",
              "Keep the habit small enough to repeat.",
              "Use accountability from someone you trust.",
              "Get support while the work is happening, not months 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 the question "What did I do today that mattered?" into a short daily check-in. It helps you:
          </p>
          <ul className="mt-4 flex flex-col gap-2">
            {[
              "build a record of your work over time;",
              "stay accountable to someone you trust;",
              "get coaching based on your goals and previous progress;",
              "avoid rebuilding an entire year of evidence during promotion season.",
            ].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>Being passed over does not automatically mean you're not good enough. For many people with ADHD, the work wasn't the problem. The missing record was.</p>
          <p>You don't need a perfect productivity system or a different personality. You need a small, reliable way to capture your work before it disappears.</p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BrAuthorBio = () => (
  <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 BrApp() {
  return (
    <main id="main">
      <BrNav />
      <BrHero />
      <BrOpening />
      <BrNotATest />
      <BrInconsistency />
      <BrHardest />
      <BrSystems />
      <BrWhatWeDid />
      <BrReframe />
      <BrTldr />
      <BrAuthorBio />
      <Footer />
    </main>
  );
}

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