/* Loops Knowledge Hub — "Understanding Burnout With ADHD" — most sensitive guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quotes, single CTA at the end only.
   Calmest page in the hub: maximum whitespace, no urgency devices, doctor + crisis
   signposts kept as quiet body copy.
   Inline links point to existing pages; UK English, no em dashes, "doctor" not GP, non-geo-specific. */

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

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

const UB_NAV_LINKS = [
  { label: "How you got here", href: "#roads" },
  { label: "Recovery", href: "#recovery" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const UbNav = () => {
  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">
            {UB_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">
              {UB_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 UbHero = () => (
  <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-12 lg:pb-16">
      <div className="max-w-3xl">
        <a href="/adhd/knowledge-hub/" 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>
          ADHD Knowledge Hub
        </a>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          I'm burnt out.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          You've been running on empty for a while now, and it's starting to show. This isn't tiredness with better branding, and it won't respond to a good weekend. Understanding what it actually is changes what recovery looks like.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: The basics ---------------- */

const UbBasics = () => (
  <Section id="basics" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The basics</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 ADHD burnout actually is.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD burnout is what happens when sustained hyper-effort finally gives way: motivation, focus and emotional resilience fail together, and even basic things stop feeling hard and start feeling impossible. Not the big projects. The shower, the reply, the bin. That's the signature that separates it from ordinary exhaustion: the floor drops out from under the easy things.
          </p>
          <p>
            It follows a specific arithmetic. For months or years, more was going out than coming in, <a href="/adhd/masking-and-compensation-with-adhd/" className={UB_LINK}>most of it invisible</a>: compensating, masking, sprinting, recovering, holding it together. The collapse looks sudden from the outside. It was compounding the whole time, and it's a well-documented pattern, not a personal failure of stamina.
          </p>
        </div>
      </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">
          Burnout isn't the absence of effort. It's the invoice for years of it.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 3: Recognition (6 cards) ---------------- */

const UB_RECOGNITION = [
  "Tasks you've done a thousand times, the shower, the school run, the simple email, suddenly feel like scaling a wall.",
  "You still care about things, in theory. In practice the caring doesn't produce anything anymore, and that frightens you.",
  "You sleep, sometimes a lot, and wake up exactly as empty as you went down.",
  "You're either snapping at tiny things or feeling strangely nothing at all. Sometimes both in one afternoon.",
  "You can still perform at work, just about. It takes everything, and there's nothing left for anyone or anything after.",
  "On top of it all sits shame about being burnt out, which is somehow the heaviest thing you're carrying.",
];

const UbRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</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 running on empty actually looks like.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the experiences people with ADHD describe most often when burnout has arrived.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {UB_RECOGNITION.map((t, i) => (
          <article key={i} className="flex gap-4 rounded-card border border-line bg-white p-6 shadow-soft">
            <span aria-hidden="true" className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-[12px] font-bold text-brand-deep tnum">{i + 1}</span>
            <p className="text-[15px] leading-[1.6] text-ink text-pretty">{t}</p>
          </article>
        ))}
      </div>

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          If this is you, the most important sentence on this page is this one: what you have is a recognised pattern with a mechanism, and "push through" is not the treatment. It's the cause.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: How you got here (4 roads) ---------------- */

const UbRoads = () => (
  <Section id="roads" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the 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]">
          The four roads into ADHD burnout.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Most people arrive by more than one of these at once.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        <div className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">The compensation bill</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink"><a href="/adhd/masking-and-compensation-with-adhd/" className={UB_LINK}>Masking and compensating</a> are effective for years, and also conscious, energy-intensive and time-consuming.</span> A system running at 98% capacity with no headroom doesn't fail gracefully. It fails all at once, usually when life adds one more thing.
          </p>
        </div>
        <div className="rounded-card border border-line bg-base p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">The hyperfocus debt</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink"><a href="/adhd/hyperfocus-with-adhd/" className={UB_LINK}>Hyperfocus</a> produces genuinely impressive stretches of output, but rarely for free.</span> Those periods are commonly sustained at the expense of sleep, meals, downtime and everyday maintenance. The good stretch costs more than it looks like it costs from the outside.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">The urgency economy</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">A working life built on <a href="/adhd/motivation-and-reward-with-adhd/" className={UB_LINK}>deadline sprints</a> means a working life built on crashes.</span> Each sprint borrows from recovery, each crash starts from lower down, and <a href="/adhd/feel-less-overwhelmed-with-adhd/" className={UB_LINK}>a life where everything must become urgent to become possible</a> never stops spending.
          </p>
        </div>
        <div className="rounded-card border border-line bg-base p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">The boom-bust loop</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink"><a href="/adhd/all-or-nothing-thinking-with-adhd/" className={UB_LINK}>All-or-nothing cycles</a> of total effort and total collapse, each restart launched at a higher bar than the last.</span> Every "this time, properly" round burns more than the one before, and the gaps between attempts stop being rest and start being shame.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Underneath all four runs the same quiet engine: a brain working harder than most to do ordinary things, in environments that never priced that in. Burnout is what happens when nobody, including you, was counting the real cost.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The honest section (burnout vs depression) ---------------- */

const UbHonest = () => (
  <Section id="honest" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Burnout, depression, or both</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Worth untangling, and worth help untangling.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD burnout and depression overlap heavily from the inside: exhaustion, flatness, everything feeling impossible. They're not the same thing, and the difference matters for what helps. Burnout tends to be context-shaped, it tracks the load, eases slightly when the pressure genuinely lifts, and the caring usually still exists somewhere under the fatigue. Depression tends to be more global: the flatness follows you into rest, pleasure stops working, and self-worth takes a darker turn.
          </p>
          <p>
            But this distinction is genuinely hard to make from the inside, they can coexist, and one can slide into the other. So the honest guidance is simple: if the emptiness is persistent, if nothing lifts it, or if your thoughts about yourself have turned dark, <a href="/support/find-help/" className={UB_LINK}>see your doctor</a>, and say the words plainly. Depression and anxiety are common alongside ADHD and they respond to treatment. There's also a sleep layer worth checking: in a large study of adults with ADHD, around 60% screened positive for at least one sleep disorder. <a href="/adhd/sleep-better-with-adhd/" className={UB_LINK}>Unaddressed sleep problems</a> can both mimic and deepen burnout.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: The reframe ---------------- */

const UbReframe = () => (
  <Section id="reframe" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Something worth knowing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          Pushing through is the mechanism, not the cure.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The instinct that got you here is the same one promising to get you out: try harder, tighten up, be more disciplined, earn the rest once things are back under control. It's worth saying directly that this instinct is the disease talking. Pushing through depleted reserves is precisely the behaviour that created the deficit, and research on burnout and shame is clear that criticism and self-blame make the next attempt harder, not more likely.
          </p>
          <p>
            Recovery also isn't something you qualify for by suffering enough first. Rest is not a reward for finished work. It's the input the work runs on, and it has been missing from the books for years.
          </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">
          You can't discipline your way out of a deficit you disciplined your way into.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 7: What recovery looks like (6 blocks) ---------------- */

const UbRecovery = () => (
  <Section id="recovery" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Working with 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]">
          Active rest, not passive waiting.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Recovery from ADHD burnout is not lying still until motivation returns; for ADHD brains, structure has to stay present, just radically smaller.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Triage to the basics</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">Sleep, food, and one small thing a day. That's the whole programme at the start.</span> Not because you're fragile, but because <a href="/adhd/executive-function-with-adhd/" className={UB_LINK}>the foundations are the capacity everything else runs on</a>, and they've been unfunded the longest.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Keep one tiny structure alive</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink"><a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={UB_LINK}>A step small enough to happen on the worst day</a>, one anchor time, one prompt that arrives by itself.</span> Total structurelessness feels like rest but reads to an ADHD brain as freefall, and it makes the eventual return steeper.
          </p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Cut the invisible spends first</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">Before cutting the visible workload, cut the hidden one: <a href="/adhd/masking-and-compensation-with-adhd/" className={UB_LINK}>drop the mask where it's safe</a>, decline the optional urgencies, let the standards fall where nobody's actually checking.</span> These were the biggest line items all along.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Make restarting cheap</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">Shame is the tax on every return, so <a href="/adhd/shame-spiral-with-adhd/" className={UB_LINK}>lowering it is a practical intervention, not a soft one</a>.</span> A missed day is information. The comeback bar goes under the fence, not over it.
          </p>
        </div>
        <div className="rounded-card border border-line bg-soft p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Rebuild for variability</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">When capacity returns, rebuild on <a href="/adhd/build-routines-that-survive-bad-days/" className={UB_LINK}>routines designed for bad days</a>, not on the perfect-week template that broke you.</span> The old normal was the problem. Don't reconstruct it faithfully.
          </p>
        </div>
        <div className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft max-w-3xl">
          <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">Let people carry something</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">Telling one person the truth about where you are converts private collapse into shared load.</span> If work is involved, <a href="/adhd/adhd-at-work/" className={UB_LINK}>some of this is the workplace's job</a>, and saying "I'm at capacity" earlier than feels comfortable is a skill worth building.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: The comeback trap ---------------- */

const UbComeback = () => (
  <Section id="comeback" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Watch for this</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 first good week is where relapses are built.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            At some point energy returns, and with it a familiar surge: catch up on everything, repay every debt, relaunch every project, this week. That surge is <a href="/adhd/motivation-and-reward-with-adhd/" className={UB_LINK}>novelty fuel</a>, it's the <a href="/adhd/all-or-nothing-thinking-with-adhd/" className={UB_LINK}>boom half of the cycle that helped cause this</a>, and following it at full speed is the most reliable way to be back here in three months.
          </p>
          <p>
            The move instead is deliberately underwhelming: return at half the pace the energy suggests, add one commitment at a time, and treat the urge to sprint as a symptom to notice rather than a sign of recovery to obey. Sustainable is the whole point. It will feel too slow. That feeling is the old operating system, not the truth.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 9: Open questions ---------------- */

const UbOpenQuestions = () => (
  <Section id="open" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Honest limits</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 we still don't know.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD burnout isn't a formal diagnostic category, and the research specific to it is young: much of what's known is assembled from occupational burnout literature, autistic burnout research, sleep and stress findings, and a large, remarkably consistent body of community description. How exactly it differs from occupational burnout, how long recovery typically takes, and which supports speed it up have not been rigorously measured.
          </p>
          <p>
            What the adjacent evidence does support: the sleep disruption is real and common, shame measurably raises the cost of restarting, external structure outperforms willpower for recovery behaviours, and pushing through worsens rather than resolves the pattern. The lived-experience accounts run ahead of the trials here, as they often do, but they run in a strikingly consistent direction.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 10: The bottom line ---------------- */

const UbBottomLine = () => (
  <Section id="bottom-line" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The bottom line</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 collapse was never weakness. It was arithmetic.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD burnout is the invoice for years of invisible overspending: compensation, hyperfocus debts, urgency sprints and boom-bust cycles, run by a brain doing ordinary life on extraordinary effort. Reaching the point where basic things feel impossible isn't evidence you're weak. It's evidence the books finally balanced.
          </p>
          <p>
            Recovery is active but tiny: basics first, one structure kept alive, the hidden spends cut before the visible ones, restarts made cheap, and a rebuild designed for the brain you have rather than the pace you performed. Get help untangling it from depression if the flatness won't lift. And when the energy comes back, spend it like someone who now knows what things cost.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 11: Final CTA ---------------- */

const UbFinalCTA = () => (
  <Section id="start" className="bg-base">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>One thing, from where you are</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            One small thing today. That's the whole ask.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Loops is a daily coaching app built for exactly this, small steps sized for the day you're actually having, no guilt mechanics, and a way back in that never asks you to start from zero.
          </p>
          <div className="mt-8 flex flex-col items-center gap-3">
            <Button variant="primary" size="lg" href="/#download">
              Get Early Access
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </Button>
            <span className="text-[13.5px] text-ink-3">Free to start. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- App ---------------- */

function UbApp() {
  return (
    <main id="main">
      <UbNav />
      <UbHero />
      <UbBasics />
      <UbRecognition />
      <UbRoads />
      <UbHonest />
      <UbReframe />
      <UbRecovery />
      <UbComeback />
      <UbOpenQuestions />
      <UbBottomLine />
      <UbFinalCTA />
      <Footer />
    </main>
  );
}

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