/* Loops Knowledge Hub — "All-or-Nothing Thinking With ADHD" — editorial guide page.
   Follows the Knowledge Hub design direction: eyebrow labels, stacked insight blocks with
   alternating rhythm, a 2x2 card grid, a distinct pull quote, single CTA at the end only.
   Inline links point to existing pages where they exist; UK English, no em dashes. */

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

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

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

const AonNav = () => {
  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">
            {AON_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">
              {AON_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 AonHero = () => (
  <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]">
          All-or-nothing thinking with ADHD: why one missed day feels like total failure
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          You miss one gym session and the whole programme is dead. You skip the routine once and it becomes something you used to do. If a single lapse routinely turns into a full stop, you've met one of the main mechanisms by which good systems die.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: What it is ---------------- */

const AonWhatItIs = () => (
  <Section id="what" 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]">
          Not a belief. An emotional event.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            All-or-nothing thinking, sometimes called black-and-white or dichotomous thinking, is evaluating things in two categories with nothing between them. Perfect or ruined. On track or failed. Doing it properly or not doing it at all. It's a recognised cognitive distortion in the general psychology literature, but in ADHD it has a specific character worth understanding, because it isn't primarily a belief. It's an emotional event.
          </p>
          <p>
            The distinction matters for what help looks like. A belief can be argued with. But when a missed day arrives with a full-volume feeling of failure attached, the verdict lands before any reasoning gets a chance to happen. That's why knowing the thought is distorted rarely stops it. The thinking is downstream of the feeling.
          </p>
          <p>
            It's also worth separating this from high standards. Research on perfectionism in ADHD increasingly points at a maladaptive pattern tied less to unusually ambitious goals and more to harsh self-judgement and doubt about acting at all. The person caught in all-or-nothing thinking isn't usually demanding excellence. They're trying to avoid the feeling that arrives with anything that reads as failure, and the binary is the shape that avoidance takes.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 3: Why it happens (4 stacked blocks) ---------------- */

const AonWhyItHappens = () => (
  <Section id="why" className="bg-base">
    <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]">
          Why ADHD brains default to binary.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Several well-documented ADHD mechanisms converge on this one pattern, which is why it's so persistent.
        </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 pause is missing</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">Emotional dysregulation means feelings arrive faster, hit harder, and skip the waiting room.</span> A lapse produces a spike of shame, and without a pause between feeling and conclusion, the spike gets read as information: this feeling is huge, so the failure must be huge.
          </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">Lapses don't stay the right size</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 missed day doesn't sit in memory as one data point among thirty. It expands to fill the frame.</span> This is the same time-perception machinery behind <a href="/adhd/time-blindness-with-adhd/" className={AON_LINK}>time blindness</a>, applied to the past instead of the future: the streak is abstract, the lapse is vivid.
          </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 evidence 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">By adulthood, most people with ADHD carry a genuinely long list of abandoned attempts, so "I always do this" feels like pattern recognition, not distortion.</span> What the binary omits is why those attempts collapsed, which was rarely the first miss and almost always <a href="/adhd/shame-spiral-with-adhd/" className={AON_LINK}>the spiral that followed it</a>.
          </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">The binary meets the novelty cliff</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">ADHD motivation funds beginnings generously and fades once things become familiar.</span> That fade is neurological and predictable, but if the only categories are "doing it properly" and "failed", the fade has nowhere to land except failure.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The second face ---------------- */

const AonSecondFace = () => (
  <Section id="second-face" 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-[40px] leading-[1.12]">
          Perfectionism as a shield, not a standard.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            There's a second face of this pattern that looks superficially opposite: not abandoning things after a lapse, but never letting them be finished or seen at all.
          </p>
          <p>
            As long as work stays unshared, it can't be criticised. As long as a project stays in progress, it can't be judged as done and found wanting. For many people with ADHD, especially those with <a href="/adhd/rejection-sensitive-dysphoria-with-adhd/" className={AON_LINK}>heightened sensitivity to rejection</a>, finishing doesn't just feel hard. It feels unsafe, because done is the moment the binary gets to deliver its verdict. This is a large part of why <a href="/adhd/share-your-work-with-adhd/" className={AON_LINK}>sharing work stalls at the threshold</a> and why <a href="/adhd/finish-what-you-started-with-adhd/" className={AON_LINK}>finishing is disproportionately difficult</a> even when almost all the work is complete.
          </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-[24px] sm:text-[30px] font-semibold tracking-tight2 text-ink leading-[1.2] text-balance">
          Unfinished is the last safe category.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          The same shield shows up at the start. "If I can't do it properly, there's no point starting" is all-or-nothing thinking working as a gatekeeper, and it quietly powers a lot of <a href="/adhd/stop-procrastinating-with-adhd/" className={AON_LINK}>ADHD procrastination</a>. Not starting protects the version of the task that could still have been perfect.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: How it shows up (4 cards) ---------------- */

const AON_CARDS = [
  { t: "Routines", body: (<>One missed day registers as proof the routine has failed, rather than as a single missed day. It's why <a href="/adhd/build-routines-that-survive-bad-days/" className={AON_LINK}>routines so often collapse after one bad day</a> instead of degrading gracefully.</>) },
  { t: "Training and health", body: (<>A skipped session becomes "I've blown it", followed by quitting or a compensatory binge effort. Two missed runs, one heroic overcorrection, repeat.</>) },
  { t: "Projects", body: (<>When reality diverges from the plan, the plan doesn't get revised. It gets abandoned, because a broken plan feels like proof the whole thing was unrealistic. Long-term projects offer years of chances for the binary to trigger.</>) },
  { t: "The perfect restart", body: (<>Resuming today, imperfectly, loses out to a clean boundary: Monday, the first of the month. Each deferred restart arrives with a raised bar, which makes the new attempt heavier and more breakable than the one that just failed. Run long enough, total-effort-total-collapse cycles are one of the roads into <a href="/adhd/recover-from-adhd-burnout/" className={AON_LINK}>ADHD burnout</a>.</>) },
];

const AonShowsUp = () => (
  <Section id="shows-up" 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 binary does its damage.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {AON_CARDS.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
            <p className="mt-2.5 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.body}</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">
          Not everyone with ADHD experiences this strongly, and it isn't exclusive to ADHD. But emotional intensity, a real history of abandoned attempts, and a reward system that makes middles hard mean the pattern finds unusually fertile ground here.
        </p>
      </div>
    </Container>
  </Section>
);

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

const AonReframe = () => (
  <Section id="reframe" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The category that changes everything</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          Paused is not failed.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            The single most useful reframe in this area is a category correction. Between "on track" and "failed" there is a third state: paused. A project held as paused can be returned to without the identity cost of admitting failure. A routine with a planned minimum version for bad days hasn't broken when a bad day arrives. It's running in low-capacity mode, exactly as designed.
          </p>
          <p className="text-ink font-medium">
            This isn't a gentler description of the same thing. It's a structural difference in what returning costs emotionally, and for ADHD brains, where returning is already expensive, that difference is often what decides whether the return happens at all.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AonWhatHelps = () => (
  <Section id="help" 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]">
          Build the middle category on purpose.
        </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">Decide the minimum before you need it</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">Pre-define the smallest version that still counts: one exercise, one sentence, one small step.</span> Deciding this in advance matters, because the moment of the lapse is precisely when the deciding machinery is least available.
          </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">Design for recovery, not streaks</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">Streak-based systems hand the binary a weapon.</span> What matters isn't never lapsing. It's the average gap between lapse and return.
          </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">Name the verdict as a feeling</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">"This is the all-or-nothing response, not an assessment" doesn't dissolve the feeling, but labelling it buys the pause that ADHD skips.</span> The disappointment is real. Its conclusion is not reliable data.
          </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">Shrink the judgement window</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 day is small enough to fail and restart cheaply. A life overhaul is not.</span> The bigger the unit being judged, the more catastrophic each lapse becomes, so keep the unit that can fail small.
          </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">Ban the upgraded restart</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 returning after a gap, return to less than before, not more.</span> The raised-bar restart feels like commitment and functions as self-sabotage.
          </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">Watch where it tips into something bigger</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">If the verdicts are constant, global and dark rather than task-shaped, that's worth raising with a doctor or therapist.</span> Persistent harsh self-criticism travels closely with depression and anxiety, both common alongside ADHD.
          </p>
          <a href="/support/find-help/" className="focus-ring mt-4 inline-flex items-center gap-2 rounded-pill bg-brand-soft px-4 py-2.5 text-[14px] font-semibold text-brand-deep transition-colors hover:bg-muted">
            Find help and support resources
            <svg width="15" height="15" 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>
          </a>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: Open questions ---------------- */

const AonOpenQuestions = () => (
  <Section id="open" className="bg-soft">
    <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>
            Perfectionism and dichotomous thinking are well studied in general and anxiety populations, but ADHD-specific research is younger and thinner. It isn't yet settled how much of the pattern is a direct product of ADHD neurobiology versus a learned response to years of accumulated failure experiences, and the honest answer is probably both, in proportions that differ between people.
          </p>
          <p>
            Intervention evidence is similarly borrowed: cognitive and compassion-based approaches help with all-or-nothing patterns in other populations, but large ADHD-specific trials are scarce. The lived-experience accounts, meanwhile, are abundant and strikingly consistent, which is usually a sign the research has catching up to do.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const AonBottomLine = () => (
  <Section id="bottom-line" className="bg-base">
    <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]">
          Lapses should stay the size they actually are.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            All-or-nothing thinking with ADHD is a binary verdict system running on emotional hardware: lapses arrive with outsized feelings attached, feelings get read as facts, and anything short of complete gets filed as failed. It was never a discipline problem, and the answer was never trying harder to be consistent.
          </p>
          <p>
            What helps is building the middle category the binary refuses to offer: minimum versions decided in advance, recovery made cheaper than restarting, judgement windows kept small, and paused treated as a real state rather than a polite word for quit. The lapses will still happen. The goal is making sure they stay the size they actually are.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 10: Final CTA ---------------- */

const AonFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <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>Support for the doing part</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 step. Even on the bad days.
          </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 around the middle category. Each day asks for small steps rather than a perfect run, a missed day is treated as information rather than a verdict, and the way back in is always smaller than the fear of it.
          </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">7-day free trial. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function AonApp() {
  return (
    <main id="main">
      <AonNav />
      <AonHero />
      <AonWhatItIs />
      <AonWhyItHappens />
      <AonSecondFace />
      <AonShowsUp />
      <AonReframe />
      <AonWhatHelps />
      <AonOpenQuestions />
      <AonBottomLine />
      <AonFinalCTA />
      <Footer />
    </main>
  );
}

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