/* Loops Knowledge Hub — "Living With ADHD" — cluster landing page.
   Front door to the Living With ADHD section. NO topic-index section by site convention:
   all routing happens through inline content blocks, so "Read the full page" text links are
   load-bearing navigation and stay visually consistent (text links, never buttons).
   Self-esteem and finances are covered in full body copy here (no dedicated deep pages).
   Single final CTA button. UK English, no em dashes, non-geo-specific. */

const LW_LINK = "text-brand-deep font-semibold hover:underline";
const LW_PAGELINK = "inline-flex items-center gap-1 text-[14.5px] font-semibold text-brand-deep hover:underline";

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

const LW_NAV_LINKS = [
  { label: "The machinery", href: "#machinery" },
  { label: "The people", href: "#people" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const LwNav = () => {
  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">
            {LW_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">
              {LW_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 LwHero = () => (
  <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>
        <p className="mt-6"><Kicker>Living With ADHD</Kicker></p>
        <h1 className="mt-4 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          The everyday reality of an ADHD brain.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          And how to work with it instead of against it. Not the diagnosis, not the debate. The actual Tuesday: what's happening underneath it, why the heavier patterns form, and where the leverage genuinely is.
        </p>
      </div>
    </Container>
  </section>
);

/* ---------------- Section 2: The frame ---------------- */

const LwFrame = () => (
  <Section id="frame" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The everyday reality</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not the big moments. It's every day.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD is mostly discussed at the extremes: the diagnosis story, the crisis, the superpower headline. Living with it happens somewhere quieter. It's the reply you meant to send, the timer that didn't help, the promising Monday and the vanished Thursday, the constant low-level arithmetic of holding an ordinary life together on effort nobody sees.
          </p>
          <p>
            The single most useful thing to know about that daily reality: it isn't hundreds of separate failings. It's a handful of mechanisms, expressing themselves through every domain of your life at once. Learn the mechanisms and the chaos becomes legible. Legible things can be designed for.
          </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">
          You don't have a hundred problems. You have about five mechanisms with a hundred costumes.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 3: The machinery (5 routing blocks) ---------------- */

const LW_MACHINERY = [
  { title: "Executive function", insight: "The management layer of the brain: planning, starting, sequencing, monitoring.", body: "ADHD was never a disorder of knowing what to do. It's a disorder of doing what you know.", href: "/adhd/executive-function-with-adhd/" },
  { title: "Working memory", insight: "The small, leaky workspace where intentions live between forming and acting.", body: "The forgetting was never indifference. The retrieval failed, not the caring.", href: "/adhd/working-memory-with-adhd/" },
  { title: "Motivation & reward", insight: "Attention follows interest, novelty, urgency and challenge. Not importance.", body: "It funds beginnings generously and withdraws around week three, on schedule.", href: "/adhd/motivation-and-reward-with-adhd/" },
  { title: "Emotional dysregulation", insight: "Feelings that arrive faster, hit harder and take longer to fade, in every direction.", body: "The emotion is usually appropriate. The volume is the difference.", href: "/adhd/emotional-dysregulation-with-adhd/" },
  { title: "All-or-nothing thinking", insight: "One missed day reads as total failure, and anything short of complete gets filed as worthless.", body: "It's the binary that kills good systems, and there's a third category it refuses to offer: paused.", href: "/adhd/all-or-nothing-thinking-with-adhd/" },
];

const LwRoutingBlock = ({ b, bg }) => (
  <div className={`rounded-card border border-line ${bg} 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">{b.title}</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">{b.insight}</span> {b.body}
    </p>
    <p className="mt-4"><a href={b.href} className={LW_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
  </div>
);

const LwMachinery = () => (
  <Section id="machinery" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The machinery</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 explain most of it.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {LW_MACHINERY.map((b, i) => <LwRoutingBlock key={b.title} b={b} bg={i % 2 === 0 ? "bg-soft" : "bg-base"} />)}
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The heavier patterns (3 routing blocks) ---------------- */

const LW_HEAVIER = [
  { title: "Masking", insight: "The learned, energy-intensive work of looking fine: performing calm, covering gaps, holding it together in public.", body: "It works for years, and the bill compounds quietly the whole time.", href: "/adhd/masking-and-compensation-with-adhd/" },
  { title: "Rejection sensitive dysphoria", insight: "Criticism and rejection, real or perceived, landing as something closer to physical pain.", body: "The label is contested in the research. The experience isn't.", href: "/adhd/rejection-sensitive-dysphoria-with-adhd/" },
  { title: "Burnout", insight: "What happens when sustained hyper-effort finally gives way and even basic things stop being possible.", body: "Not tiredness with better branding: the invoice for years of invisible overspending.", href: "/adhd/understanding-adhd-burnout/" },
];

const LwHeavier = () => (
  <Section id="heavier" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>What the years add</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 patterns that grow on top.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Live with those five mechanisms long enough, unexplained, and they compound into something heavier. These patterns aren't ADHD itself. They're what years of unsupported ADHD build.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {LW_HEAVIER.map((b, i) => <LwRoutingBlock key={b.title} b={b} bg={i % 2 === 0 ? "bg-white" : "bg-base"} />)}
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: Self-esteem (in-page, full body copy) ---------------- */

const LwSelfEsteem = () => (
  <Section id="self-esteem" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Self-esteem</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 ledger problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            By adulthood, most people with ADHD are carrying a ledger written by other people's feedback: lazy, careless, flaky, so much potential. Adults with ADHD report lower self-compassion and higher perceived criticism than the general population, and one study found 88.5% anticipated discrimination in daily life. When the entries pile up for decades, the conclusion stops feeling like an opinion and starts feeling like accurate self-knowledge. It isn't. It's <a href="/adhd/shame-spiral-with-adhd/" className={LW_LINK}>a shame spiral with a mechanism</a>, and the mechanism was never your character.
          </p>
          <p>
            Rebuilding self-esteem with ADHD is less about affirmations and more about accounting: re-filing years of "lazy" under "unsupported", understanding the mechanisms well enough to stop prosecuting yourself for them, and then building a new evidence base the only way one gets built, through small kept promises that get noticed. The research is direct that reducing shame improves persistence and restarts. Self-compassion here is functional equipment, not decoration.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: The people in your life (3 routing blocks) ---------------- */

const LwPeople = () => (
  <Section id="people" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The people in your life</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It reaches the people you love. That's workable too.
        </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">Relationships</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">Partners experience the delivery, not the intention, and the gap between them is where the damage happens.</span> The reminder trap, the amplified arguments, the fix that isn't "try harder".
          </p>
          <p className="mt-4"><a href="/adhd/adhd-and-relationships/" className={LW_PAGELINK}>Read the full page<svg width="14" height="14" 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></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">Friendships</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">Friendships with ADHD die of admin, not conflict.</span> Out of sight, out of mind is a working memory statement, not a love statement, and the right people, told the truth, are more generous than your shame predicts.
          </p>
          <p className="mt-4"><a href="/adhd/adhd-and-relationships/" className={LW_PAGELINK}>Covered on the relationships page<svg width="14" height="14" 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></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">Parenting</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 runs strongly in families, so the hardest households are often managing parent ADHD and child ADHD at once.</span> The same problems repeating isn't failure. It's the pattern, and it has its own page.
          </p>
          <p className="mt-4"><a href="/adhd/parenting-with-adhd/" className={LW_PAGELINK}>Read the full page<svg width="14" height="14" 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></p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: The practical load (finances, in-page) ---------------- */

const LwFinances = () => (
  <Section id="finances" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Finances</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 ADHD tax is real money.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Money deserves naming on any honest page about daily reality, because nearly every financial habit, saving, paying on time, delaying a purchase, is a delayed-reward, multi-step, low-stimulation behaviour. That's <a href="/adhd/motivation-and-reward-with-adhd/" className={LW_LINK}>exactly where ADHD bites hardest</a>, and the result has a community name: the ADHD tax. Late fees, forgotten subscriptions, the letter that sat unopened until it became a much bigger problem, the relief spending after a hard day, the <a href="/adhd/shame-spiral-with-adhd/" className={LW_LINK}>avoided banking app radiating guilt</a>.
          </p>
          <p>
            None of it is a money knowledge problem, which is why budgeting advice alone rarely fixes it. It's a follow-through problem, and it responds to the same design moves as everything else: automate what can be automated, make the important numbers visible without a login, and gentle regular check-ins instead of dreaded audits. <a href="/adhd/build-financial-security/" className={LW_LINK}>The full page covers it properly</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 8: The reframe ---------------- */

const LwReframe = () => (
  <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]">
          Working with it is a design practice, not a surrender.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            "Work with your brain instead of against it" can sound like lowering the bar. It's the opposite. Against means running importance-based systems on interest-based wiring, budgeting zero for the invisible work, and treating every lapse as a verdict: a strategy with decades of your own evidence against it. With means engineering: rewards moved closer, steps shrunk, time made visible, restarts made cheap, and the load shared with systems and people instead of carried silently.
          </p>
          <p>
            None of this means the hard days stop. It means the hard days stop costing the whole system. The practical toolkit lives in <a href="/adhd/treatment-and-self-management/" className={LW_LINK}>Treatment &amp; Self-Management</a>, and every mechanism page above ends with what actually helps for that specific piece.
          </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">
          Discipline asks you to be a different person every day. Design only asks you to build the system once.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

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

const LwBottomLine = () => (
  <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]">
          Legible, workable, and not your fault.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The everyday reality of ADHD is five mechanisms wearing a hundred costumes, a few heavier patterns that years of going unexplained build on top, and a set of domains, love, money, family, self-worth, where it all plays out. Every piece of that is legible, and legible things can be designed for.
          </p>
          <p>
            You've been running this life on effort and self-blame for long enough to know what that strategy yields. The alternative isn't trying harder. It's understanding the machine, working with its wiring, and letting structure carry what willpower was never going to. Start with whichever page above describes the thing that costs you most.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const LwFinalCTA = () => (
  <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>The design practice, handled</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]">
            Work with your brain, starting 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 around how ADHD brains actually run with small steps a day, surfaced at the right moment, with restarts that never cost more than the step. The design practice, handled for you.
          </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 LwApp() {
  return (
    <main id="main">
      <LwNav />
      <LwHero />
      <LwFrame />
      <LwMachinery />
      <LwHeavier />
      <LwSelfEsteem />
      <LwPeople />
      <LwFinances />
      <LwReframe />
      <LwBottomLine />
      <LwFinalCTA />
      <Footer />
    </main>
  );
}

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