/* Loops Knowledge Hub — "ADHD at Work" — editorial guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quotes, single CTA at the end only.
   Inline links point to existing pages; UK English, no em dashes, non-geo-specific. */

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

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

const AW_NAV_LINKS = [
  { label: "Why it's hard", href: "#why" },
  { label: "What helps", href: "#help" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const AwNav = () => {
  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">
            {AW_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">
              {AW_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 AwHero = () => (
  <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]">
          It's affecting my work.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Meetings, deadlines, inboxes. It adds up faster than anyone realises. The work itself was never the problem. It's everything around the work, and understanding that difference changes what help looks like.
        </p>
      </div>
    </Container>
  </section>
);

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

const AwBasics = () => (
  <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]">
          Modern work is an executive function stress test.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Strip any job down and the actual craft, the part you're good at, sits inside a thick shell of something else: prioritising, scheduling, remembering, switching, documenting, replying. That shell is almost pure <a href="/adhd/executive-function-with-adhd/" className={AW_LINK}>executive function</a>, and it's precisely what ADHD makes unreliable.
          </p>
          <p>
            The research draws the gap sharply. A 2021 workplace study found that adults with ADHD most commonly reported difficulty working to their potential (around 69%) and getting work done efficiently (around 55%), while only 20 to 23% reported problems with attendance, formal negative evaluations, or getting fired. Read that again: the struggle isn't showing up, caring, or capability. It's converting capability into visible output, reliably, inside systems built for different brains.
          </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">
          The gap was never between you and the work. It's between your capability and the conditions you're asked to deliver it in.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

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

const AW_RECOGNITION = [
  "Meetings evaporate on contact. You were there, you nodded, and an hour later the actions live in nobody's notes, least of all yours.",
  "The inbox is less a tool than a weather system. Certain messages age into something too heavy to open.",
  "Your best work happens in deadline sprints that impress everyone and quietly cost you days of recovery.",
  "Every job has its boring 20%: the expenses, the timesheets, the updates. Yours is where everything stalls.",
  "You're busy all day, visibly, provably busy, and the one thing that actually mattered is still untouched at five.",
  "You leave work more exhausted than colleagues who did the same hours, because holding it together was a second job.",
];

const AwRecognition = () => (
  <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]">
          Where the day actually goes.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often at work.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {AW_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">
          None of this is a work ethic problem. Each pattern has a specific mechanism behind it, and mechanisms can be designed around.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Why work is specifically hard (5 blocks) ---------------- */

const AwWhy = () => (
  <Section id="why" 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]">
          Five reasons the office bites harder than it looks.
        </h2>
      </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 task mix problem</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">Every role, however interesting, has a low-stimulation admin core, and <a href="/adhd/motivation-and-reward-with-adhd/" className={AW_LINK}>ADHD motivation</a> doesn't fund it.</span> The stalled 20% isn't the hard part of the job. It's the flat part, which for an ADHD brain is harder than hard.
          </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 interruption tax</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">Open-plan offices, pings and meetings mean constant re-entry, and <a href="/adhd/working-memory-with-adhd/" className={AW_LINK}>reconstructing where you were is expensive with ADHD</a>.</span> A day of interruptions can shred hours of capacity without a single task looking difficult.
          </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 visibility problem</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">Good work that isn't documented doesn't exist in a review's eyes.</span> Wins fade from memory, praise goes unrecorded, and six months of real effort <a href="/adhd/get-promoted/" className={AW_LINK}>becomes a blank page at exactly the wrong moment</a>.
          </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 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">Deadline pressure genuinely works for starting, which is why so many careers run on it.</span> But each sprint has a crash on the invoice, and <a href="/adhd/feel-less-overwhelmed-with-adhd/" className={AW_LINK}>a workplace where everything must become urgent before it becomes possible</a> is exhausting to inhabit.
          </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 invisible second job</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={AW_LINK}>Masking and compensation</a> at work, performing calm, triple-checking, tracking everything mentally, consumes the same capacity the actual job needs.</span> Case research describes these strategies as effective for years, and also conscious, energy-intensive and time-consuming.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Feedback belongs on this list too: with <a href="/adhd/emotional-dysregulation-with-adhd/" className={AW_LINK}>emotions running at full volume</a>, an ordinary piece of criticism can cost an afternoon, and a performance review can cost a week.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The reframe ---------------- */

const AwReframe = () => (
  <Section id="reframe" className="bg-base">
    <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]">
          You're not underperforming. You're overspending.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            From the outside, ADHD at work often looks like inconsistency: brilliant some weeks, flat others. From the inside, the picture is different. The output is being maintained, but at a hidden cost that fluctuates wildly: vigilance, masking, recovery from sprints, the constant tax of systems that don't fit.
          </p>
          <p>
            The WHO's World Mental Health Survey associated adult ADHD with roughly 22 excess days of lost role performance per year, and around 3.5% of workers meet criteria, most undiagnosed. Which means the pattern you're living is common, measurable, and structural. The question that follows isn't "how do I try harder?" It's "where is the spend going, and what would make the same output cheaper?" That reframe, from performance problem to cost problem, is what everything below builds on.
          </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">
          The job was never too hard. The shell around it was too expensive.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 6: What helps (6 blocks) ---------------- */

const AwWhatHelps = () => (
  <Section id="help" className="bg-soft">
    <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]">
          Make the output cheaper. Don't just demand more of it.
        </h2>
      </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">Get everything in writing</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">Meeting actions, instructions, decisions: written, or they didn't happen.</span> Asking for written follow-ups isn't weakness, <a href="/adhd/working-memory-with-adhd/" className={AW_LINK}>it's matching information to the machinery processing it</a>. Take your own two-line note the moment a meeting ends.
          </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">Keep one source of truth</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">Tasks scattered across inbox, chat, memory and sticky notes guarantee drops.</span> One trusted place everything funnels into, <a href="/adhd/get-organised-with-adhd/" className={AW_LINK}>checked by habit, beats a better memory you don't have</a>.
          </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">Log wins as they happen</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">One line, same day: what you did, what it changed.</span> It takes thirty seconds while the details exist and <a href="/adhd/get-promoted/" className={AW_LINK}>rewrites your next review before it's scheduled</a>. This is the single highest-leverage habit on this list.
          </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">Protect one real block</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">Not a perfectly planned day. One defended stretch for the thing that matters, <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={AW_LINK}>started with a step too small to refuse</a>.</span> Stack the shallow work around it rather than letting it graze all day.
          </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">Treat the inbox as a system, not a moral test</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">Fixed times, a two-minute rule for quick replies, and a way to flag the heavy ones before they age.</span> An unanswered message is a task that never surfaced, not evidence about your character.
          </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">Borrow presence and accountability</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 co-working session, a check-in, <a href="/adhd/body-doubling-with-adhd/" className={AW_LINK}>a body double</a> for the admin block.</span> Mild external structure does what self-generated pressure keeps not doing, at a fraction of the cost of deadline panic.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Adjustments and disclosure ---------------- */

const AwAdjustments = () => (
  <Section id="adjustments" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The workplace side</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Some of this is the workplace's job, not yours.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Everything above is what you can do unilaterally. It has a ceiling. Beyond it sit adjustments, and an honest word about disclosure.
          </p>
          <p>
            Many of the most effective adjustments are simply good management that any employee could request: written briefs, clear deadlines instead of vague ones, a quieter place to work, meetings with agendas and actions. You can ask for these without naming a diagnosis, and partial disclosure, naming what helps without naming the condition, <a href="/adhd/masking-and-compensation-with-adhd/" className={AW_LINK}>works well for many people</a>. Formal disclosure opens stronger protections and formal adjustments, and it's a genuinely complex, personal call: workplace culture, your manager, and your own read of the risks all matter. Clinical guidance recognises workplace adjustments as part of supporting adult ADHD, which is useful context to hold in that conversation.
          </p>
          <p>
            And one thing said plainly, because gaslighting yourself helps nobody: sometimes the workplace genuinely is the problem. A role that's all admin shell and no craft, a culture of constant interruption, a manager who punishes difference. Structure can make a bad fit survivable. It can't make it good, and <a href="/adhd/finding-a-new-job-with-adhd/" className={AW_LINK}>knowing when to look elsewhere</a> is its own valid strategy.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: When it's more than friction ---------------- */

const AwEscalation = () => (
  <Section id="escalation" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Watch for the tipping points</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 two escalation paths worth knowing in advance.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Two patterns turn everyday work friction into something bigger, and both are more manageable seen early.
          </p>
          <p>
            The first is the slow one: months of overspending, sprint-and-crash cycles and invisible second-job costs compounding into <a href="/adhd/recover-from-adhd-burnout/" className={AW_LINK}>ADHD burnout</a>, where even basic things stop being possible. The tell isn't drama. It's basics quietly failing: sleep, replies, meals, the easy tasks.
          </p>
          <p>
            The second is the step-change: <a href="/adhd/get-promoted/" className={AW_LINK}>a promotion</a> or <a href="/adhd/becoming-a-leader-with-adhd/" className={AW_LINK}>a move into leadership</a> multiplies the tracking, delegating and monitoring load precisely where compensation doesn't scale. Success, ironically, is one of the most reliable ways for managed ADHD to become unmanageable. Neither path means you can't advance. Both mean the support has to scale with the role, not stay calibrated to the old one.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AwOpenQuestions = () => (
  <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>
            Workplace ADHD research leans heavily on self-report surveys and broad performance measures, which capture the size of the gap better than its texture. Which adjustments deliver the most benefit, how disclosure actually plays out across different industries and cultures, and what happens to outcomes over years rather than survey windows are all thinner than they should be.
          </p>
          <p>
            Remote and hybrid work is a genuinely open question too: fewer interruptions and more autonomy help some ADHD brains enormously, while the loss of ambient structure and presence hurts others, and the research hasn't settled into a clear picture. As ever, the honest answer is that it depends, and noticing which way it cuts for you is more useful than any general rule.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AwBottomLine = () => (
  <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 job was never too hard. The shell around it was too expensive.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD at work is a cost story, not a competence story: a low-stimulation admin core your motivation won't fund, an interruption tax on a leaky workspace, good work going undocumented, an urgency economy with crash cycles, and a second job of looking fine. The research is blunt that the gap sits between capability and conditions, not capability and effort.
          </p>
          <p>
            What helps is making output cheaper: everything in writing, one source of truth, wins logged same-day, one protected block, the inbox demoted from moral test to system, and accountability borrowed instead of panic manufactured. Ask for the adjustments that are just good management. Watch the two escalation paths. And if the fit is truly wrong, that's information too.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AwFinalCTA = () => (
  <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>Make the output cheaper</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 work thing, done today.
          </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 ADHD brains at work. It holds the goal, surfaces small next steps at the right moment, and keeps a running record of what you've actually done, so reviews stop being archaeology.
          </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 AwApp() {
  return (
    <main id="main">
      <AwNav />
      <AwHero />
      <AwBasics />
      <AwRecognition />
      <AwWhy />
      <AwReframe />
      <AwWhatHelps />
      <AwAdjustments />
      <AwEscalation />
      <AwOpenQuestions />
      <AwBottomLine />
      <AwFinalCTA />
      <Footer />
    </main>
  );
}

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