/* Loops Knowledge Hub — "ADHD and Relationships" — sensitive guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quotes, single CTA at the end only.
   Extra-calm, no-blame treatment: two-sides reframe sits visually neutral.
   Inline links point to existing pages; UK English, no em dashes, non-geo-specific. */

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

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

const AR_NAV_LINKS = [
  { label: "The mechanisms", href: "#mechanisms" },
  { label: "What helps", href: "#help" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const ArNav = () => {
  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">
            {AR_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">
              {AR_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 ArHero = () => (
  <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 relationships.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          It shows up in the people closest to you too, not just at your desk. The hardest part is that everyone involved is reading the same moments differently, and almost everyone is reading them wrong.
        </p>
      </div>
    </Container>
  </section>
);

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

const ArBasics = () => (
  <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]">
          Relationships run on exactly what ADHD affects.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Close relationships don't run on grand gestures. They run on small, repeated deliveries: the thing you said you'd do, the message answered, the attention held, the temper kept, the date remembered. Steady follow-through, presence and emotional regulation, over and over, in unremarkable moments.
          </p>
          <p>
            That list is almost a definition of what ADHD disrupts. <a href="/adhd/working-memory-with-adhd/" className={AR_LINK}>Intentions that don't surface when needed</a>, <a href="/adhd/motivation-and-reward-with-adhd/" className={AR_LINK}>attention that follows interest rather than importance</a>, <a href="/adhd/emotional-dysregulation-with-adhd/" className={AR_LINK}>feelings that arrive at full volume</a>. None of it says anything about how much you love the people involved. All of it changes what they experience from you, and that gap between what's felt and what's delivered is where the damage quietly happens.
          </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">
          It was never a caring problem. It was a delivery problem, and the two look identical from the outside.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

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

const AR_RECOGNITION = [
  "You promised, and you meant it completely. It still didn't happen, and \"I forgot\" has stopped sounding like an explanation to anyone.",
  "You drift mid-conversation and get caught. It wasn't boredom, but there's no way to say that convincingly in the moment.",
  "A message from someone you love has been sitting unanswered so long that the silence is now the problem.",
  "One partner has become the household's reminder system. Neither of you likes what that's doing to the relationship.",
  "A small comment lands like a verdict, and an ordinary disagreement runs hotter than either of you intended.",
  "Work gets the best hours of your regulation. The people you love get whatever is left when the front door closes.",
];

const ArRecognition = () => (
  <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]">
          The moments that keep repeating.
        </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, and the people who love them, describe most often.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {AR_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 means the relationship is failing, and none of it means you don't care. Every one of these has a mechanism, and mechanisms can be worked with, together.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The mechanisms (5 blocks) ---------------- */

const ArMechanisms = () => (
  <Section id="mechanisms" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</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 mechanisms doing most of the damage.
        </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 follow-through gap</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">The promise was sincere. The retrieval failed.</span> <a href="/adhd/working-memory-with-adhd/" className={AR_LINK}>Prospective memory</a> means intentions often don't surface at the moment action is possible, so the forgotten errand reads as a statement about priorities when it was never a decision at all. This is the engine of most <a href="/adhd/building-better-relationships/" className={AR_LINK}>relationship follow-through problems</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 attention drift</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 attention is regulated by interest and stimulation, not by how much a person matters.</span> Drifting during a partner's story about their day is the same mechanism as drifting in a meeting, but at home it gets read as "you don't listen to me", which lands as "you don't care about me".
          </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 amplification effect</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/emotional-dysregulation-with-adhd/" className={AR_LINK}>Emotional dysregulation</a> means a small friction can land as a much bigger event.</span> A mild criticism from someone you love, <a href="/adhd/rejection-sensitive-dysphoria-with-adhd/" className={AR_LINK}>especially with heightened rejection sensitivity</a>, can trigger a response sized for a much larger wound, and now there are two hurt people instead of one.
          </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 novelty arc</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/motivation-and-reward-with-adhd/" className={AR_LINK}>ADHD motivation funds beginnings generously</a>, and early relationships are pure novelty.</span> The intense, attentive start is real, but so is the fade into the steady middle, and a partner who experienced the start can read the middle as lost interest rather than changed neurochemistry.
          </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 shame-avoidance 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">Hiding a mistake, delaying an apology, not opening the message: community accounts consistently describe this as a survival pattern built from years of criticism, not indifference.</span> One study found 88.5% of adults with ADHD anticipated discrimination in daily life. The cruelty of the loop is that <a href="/adhd/shame-spiral-with-adhd/" className={AR_LINK}>avoidance grows exactly the thing it's avoiding</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: The reminder trap ---------------- */

const ArReminderTrap = () => (
  <Section id="reminder-trap" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The dynamic worth naming</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          When one partner becomes the project manager.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            This dynamic deserves its own section because it's the most common and the most corrosive. It starts sensibly: things were getting dropped, so the non-ADHD partner started remembering for two. Years later, one person is running the household's entire executive function and feels like a manager instead of a partner, while the other feels monitored, infantilised and quietly ashamed. Both resent it. Both are right to.
          </p>
          <p>
            The fix is not the ADHD partner promising to remember harder; that promise has been made before and the mechanism doesn't care. The fix is moving the remembering out of both people and into a system: shared lists, visible calendars, prompts that arrive on their own. When the reminder comes from a system, it's information. When it comes from your partner, for the hundredth time, it's evidence of a role neither of you wanted.
          </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 goal isn't a partner who nags less. It's a household where nobody has to be the reminder.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 6: The reframe (neutral, no-blame) ---------------- */

const ArReframe = () => (
  <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]">
          Both of you are usually right.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Arguments about ADHD in relationships tend to run on a false choice: either the struggling partner is right that they're trying incredibly hard, or the exhausted partner is right that they're carrying too much. Here's the uncomfortable, freeing truth: both are true at once, almost always.
          </p>
          <p>
            The effort is real, and mostly invisible, because <a href="/adhd/masking-and-compensation-with-adhd/" className={AR_LINK}>compensating and holding it together is silent work</a>. The load is real too, and mostly uncounted, because remembering, planning and smoothing don't look like labour until nobody does them. Once both facts are allowed to stand together, the argument changes shape: it stops being a trial about who's failing and becomes a design problem about where the load should sit. Design problems, unlike character trials, have solutions.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const ArWhatHelps = () => (
  <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]">
          Repair the pattern, not just the incident.
        </h2>
      </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">Explain the mechanism, once, properly</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">"My brain doesn't surface intentions at the right moment" starts a better conversation than another apology.</span> A mechanism can be planned around together. A mystery just gets re-litigated every time it happens.
          </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">Move memory into a shared system</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">Joint lists, a visible household calendar, prompts that arrive by themselves.</span> This is the direct fix for the reminder trap, and it converts a hundred small negotiations into infrastructure.
          </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">Repair fast and small</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">The apology delayed is the apology that grows.</span> A quick, imperfect "I dropped it, it wasn't about you, here's what I'm doing" within a day beats a perfect explanation next week, because <a href="/adhd/shame-spiral-with-adhd/" className={AR_LINK}>the avoidance loop feeds on delay</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">Design presence instead of hoping for 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">Phones in another room for one meal, a standing walk, twenty protected minutes.</span> Attention that's structurally protected beats attention that's promised, for exactly the same reason all <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={AR_LINK}>starting works better engineered than willed</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">Budget something for home</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 <a href="/adhd/masking-and-compensation-with-adhd/" className={AR_LINK}>masking through the workday</a> spends everything, the people you love inherit the deficit.</span> Even a fifteen-minute decompression buffer between work and home changes who walks through the door.
          </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">Get help that knows ADHD</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 the same fight keeps happening, an ADHD-informed couples therapist changes the conversation faster than another round of trying harder.</span> Standard advice that assumes reliable follow-through can make things worse; informed help doesn't.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: Friendships and family ---------------- */

const ArFriendships = () => (
  <Section id="friendships" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Beyond partners</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Friendships die of admin, not conflict.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most lost ADHD friendships don't end in a fight. They end in unanswered messages, unmade plans and a proximity-based memory that genuinely stops surfacing people who aren't in the room. Out of sight, out of mind is a working memory statement, not a love statement, but the friend on the other end can't tell the difference unless you tell them.
          </p>
          <p>
            What helps is unglamorous: name the pattern to the friends who matter ("if I go quiet, it's never a signal; nudge me"), put the people you love in the prompt system like anything else that matters, and let some friendships be honestly low-maintenance rather than guiltily neglected. The right people, told the truth, are usually far more generous than the story your shame has been telling you. Family adds its own layer: ADHD runs strongly in families, and <a href="/adhd/parenting-with-adhd/" className={AR_LINK}>the same dynamics often play out between parents and children too</a>, sometimes in both directions at once.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const ArOpenQuestions = () => (
  <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>
            Relationship research in adult ADHD leans heavily on self-report and clinical samples, and much of it centres romantic couples, leaving friendships, family and community ties comparatively under-studied. The couple-dynamics work is also better at describing patterns like the reminder trap than at testing which interventions actually shift them long-term.
          </p>
          <p>
            ADHD-informed couples therapy shows promise but has a smaller evidence base than individual treatment, and most of what's known about repair, disclosure to friends, and rebuilding trust comes from clinical experience and community accounts rather than trials. Those accounts are abundant and strikingly consistent, which usually means the research has catching up to do.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const ArBottomLine = () => (
  <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 people who love you can't read your intentions. Show them the mechanism instead.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD reaches relationships through five reliable channels: intentions that don't surface, attention that follows interest, emotions that amplify, novelty that fades on schedule, and avoidance that grows what it hides. None of them measures love. All of them shape what the people closest to you actually experience, and unexplained, they get read as character.
          </p>
          <p>
            What helps is making the invisible visible: the mechanism explained once and properly, memory moved into shared systems so nobody has to be the reminder, repair made fast and small, presence designed rather than promised, and something left in the budget for home. The effort was always real. The work is letting it be seen, and putting it where it counts.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const ArFinalCTA = () => (
  <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>Let the follow-through match the caring</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]">
            Keep one promise a day. Let it be seen.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Loops is a daily coaching app that helps the follow-through match the caring. It holds the intentions that matter, surfaces them at the right moment, and makes the way back after a dropped day small enough to actually take.
          </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 ArApp() {
  return (
    <main id="main">
      <ArNav />
      <ArHero />
      <ArBasics />
      <ArRecognition />
      <ArMechanisms />
      <ArReminderTrap />
      <ArReframe />
      <ArWhatHelps />
      <ArFriendships />
      <ArOpenQuestions />
      <ArBottomLine />
      <ArFinalCTA />
      <Footer />
    </main>
  );
}

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