/* Loops Knowledge Hub — "Complex ADHD & Life Contexts" — cluster landing page.
   Front door to the Complex section. NO topic-index section by site convention: routing
   happens through inline blocks and their text links (never buttons).
   Topic blocks slightly fuller since most have no deep page yet; co-occurrence blocks visually
   parallel (no condition styled as more serious). Doctor prompts + disclaimer kept as quiet body copy.
   NOTE: University support (DSA) and Driving (DVLA) are named UK statutory schemes and are kept
   as-is because the geo-specifics ARE the content; generic medical prompt uses "doctor".
   Last-reviewed date near top (DVLA + student-funding content dates). Single final CTA button.
   UK English, no em dashes. */

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

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

const CX_NAV_LINKS = [
  { label: "What travels with it", href: "#companions" },
  { label: "Life contexts", href: "#contexts" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const CxNav = () => {
  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">
            {CX_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">
              {CX_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 CxHero = () => (
  <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>Complex ADHD &amp; Life Contexts</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]">
          ADHD rarely shows up on its own.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          This is where the bigger picture lives: the conditions that travel with ADHD, the hormones that turn its volume up and down, and the life contexts, study, work, driving, later life, where the standard picture needs a footnote.
        </p>
        <p className="mt-6 text-[13px] font-medium uppercase tracking-[0.1em] text-ink-3">
          Last reviewed July 2026
        </p>
      </div>
    </Container>
  </section>
);

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

const CxFrame = () => (
  <Section id="frame" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The bigger picture</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Co-occurrence is the norm, not the exception.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most adults with ADHD aren't managing ADHD alone. Anxiety, depression, sleep problems and other conditions travel with it so often that clinicians treat co-occurrence as the default assumption rather than a complication. And even where nothing else is going on, context changes everything: the same brain presents differently across hormonal cycles, life stages and environments.
          </p>
          <p>
            This matters practically, not academically. A picture of ADHD built only on the textbook case, young, male, uncomplicated, misses most of the people actually living with it. If the standard descriptions almost fit you but not quite, this page is probably why.
          </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">
          If the textbook version never quite matched you, it may be because you were never the textbook's subject.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 3: ADHD in women ---------------- */

const CxWomen = () => (
  <Section id="women" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>ADHD in women</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Underdiagnosed is putting it politely.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Women with ADHD have historically been missed on an industrial scale, and the reasons stack: <a href="/adhd/recognising-adhd/" className={CX_LINK}>inattentive presentations</a> that disrupt nobody, <a href="/adhd/masking-and-compensation-with-adhd/" className={CX_LINK}>masking learned earlier and practised harder</a> under stronger social expectations, and diagnostic criteria built from studies of boys. The result is a familiar biography: decades of "scatty", "sensitive" or "not applying herself", a string of anxiety and depression diagnoses that never quite fit, and recognition finally arriving in her thirties or forties, often triggered by a child's diagnosis or a hormonal transition.
          </p>
          <p>
            None of the underlying mechanisms differ by sex. What differs is presentation, expectation and cost: more internal restlessness than visible hyperactivity, more emotional load carried privately, and <a href="/adhd/understanding-adhd-burnout/" className={CX_LINK}>a compensation bill that compounds for longer before anyone names it</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Hormones and menopause ---------------- */

const CxHormones = () => (
  <Section id="hormones" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Hormones</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 volume dial nobody mentions at diagnosis.
        </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 cycle</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">Oestrogen interacts with the dopamine system, and many women report ADHD symptoms worsening noticeably in the low-oestrogen days before a period.</span> Medication that works beautifully in one week of the month can feel like it stopped working in another. Tracking symptoms against the cycle for a few months turns a bewildering pattern into a predictable one, and it's worth raising with your prescriber rather than quietly enduring.
          </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">Perimenopause and menopause</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 oestrogen falls at midlife, many women experience their ADHD intensifying sharply, and some meet it for the first time.</span> Brain fog, emotional volatility and executive collapse at perimenopause are routinely attributed to menopause alone, and sometimes they're ADHD that compensation can no longer cover. A wave of midlife diagnoses happens exactly here. If this is your story, it deserves a clinician willing to look at both explanations at once.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          The honest caveat: research on hormones and ADHD is young, and much of what's known comes from clinical observation and consistent community report rather than large trials. That makes the pattern worth taking seriously and worth discussing with a clinician, not worth over-claiming.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: What travels with ADHD (4 parallel blocks) ---------------- */

const CxCompanions = () => (
  <Section id="companions" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Co-occurring conditions</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 usual companions, and how to tell them apart.
        </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">Anxiety</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">Anxiety is one of ADHD's most common companions, and the relationship runs both ways.</span> Years of unpredictable follow-through genuinely teach a person to worry, and <a href="/adhd/emotional-dysregulation-with-adhd/" className={CX_LINK}>an emotional system at full volume</a> amplifies it. The practical point: anxiety treatment that ignores untreated ADHD often underperforms, because part of the worry is rational response to an unmanaged mechanism. Both deserve attention.
          </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">Depression</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">Low mood travels with ADHD frequently, and it can be consequence, companion, or <a href="/adhd/understanding-adhd-burnout/" className={CX_LINK}>burnout wearing depression's clothes</a>.</span> Untangling them matters because the treatments differ, and it's genuinely hard from the inside. Persistent flatness, pleasure that stops working, or dark turns in how you see yourself are doctor-conversation territory, plainly and promptly.
          </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">Autism (AuDHD)</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 and autism co-occur often enough that the community coined AuDHD, and co-diagnosis has only been formally allowed since 2013, which is why so many people got half an answer for years.</span> The lived experience is frequently one of internal contradiction: a brain that <a href="/adhd/motivation-and-reward-with-adhd/" className={CX_LINK}>craves novelty</a> and needs sameness, that seeks stimulation and gets overwhelmed by it. If one diagnosis explained some of you and left the rest unaccounted for, the combination is worth exploring with an assessor experienced in both.
          </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">Trauma</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">Trauma symptoms and ADHD symptoms overlap heavily, hypervigilance can look like distractibility, and the relationship runs in both directions: ADHD increases exposure to adverse experiences, and trauma shapes attention.</span> The wrong conclusion is that one explains away the other. They co-exist often, careful assessment can hold both, and support for each helps the other.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: Life contexts (4 blocks) ---------------- */

const CxContexts = () => (
  <Section id="contexts" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Life contexts</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 situations where the standard picture needs a footnote.
        </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">Work adjustments</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">Many of the most effective workplace adjustments are simply good management, and you can ask for them with or without disclosing a diagnosis.</span> Written briefs, clear deadlines, quieter space, meetings with actions. <a href="/adhd/adhd-at-work/" className={CX_LINK}>The full page covers the workplace properly</a>, including disclosure and when the workplace itself is the problem.
          </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">University support</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">In the UK, ADHD counts as a disability for student support purposes, which unlocks real help: Disabled Students' Allowance, exam adjustments, specialist mentoring.</span> The route runs through your university's disability service, it needs evidence of diagnosis, and it's worth starting early because the admin takes time, <a href="/adhd/executive-function-with-adhd/" className={CX_LINK}>which is its own irony given who it's for</a>. Support exists precisely because <a href="/adhd/pass-exams-with-adhd/" className={CX_LINK}>sustained self-directed study is the hardest format for ADHD</a>; using it isn't an unfair advantage, it's the level field.
          </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">Driving &amp; DVLA</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">In the UK, the rule turns on safety: if your ADHD or your medication affects your ability to drive safely, you must tell the DVLA, and your clinician can advise on whether that applies to you.</span> Worth knowing alongside it: research links ADHD to higher accident rates, and treatment appears to reduce that risk, which makes managing the condition part of managing the driving. Rules and forms change, so check current DVLA guidance directly before acting on anything here.
          </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">Older adults</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 doesn't expire at 65, but research and services largely behave as if it does.</span> Some people carry a lifelong diagnosis into ageing with no guidance; others finally recognise the pattern after retirement dismantles the structure that was holding them together. Symptom overlap with ordinary cognitive ageing makes assessment genuinely harder, and a careful clinician will want a lifelong history, <a href="/adhd/assessment-diagnosis-and-getting-help/" className={CX_LINK}>which is exactly where the evidence file earns its keep</a>. Late recognition still pays: explanation, community and structure all work at any age.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Open questions ---------------- */

const CxOpenQuestions = () => (
  <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>
            This page covers the parts of ADHD where the research is youngest, and that deserves saying without varnish. Hormones, menopause, AuDHD presentation, trauma interaction and ADHD in later life are all areas where lived-experience accounts run well ahead of trials, consistent enough to take seriously, thin enough that confident universal claims would be dishonest. Guidance on the practical topics, DVLA rules, student funding criteria, changes often enough that checking the current official position before acting is essential rather than cautious.
          </p>
          <p className="text-[15.5px] text-ink-3">
            And the standing disclaimer, because this page brushes against medical decisions repeatedly: this is general information, not medical advice. Clinicians who know your history are the right people for the specific calls.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const CxBottomLine = () => (
  <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 bigger picture is still a legible picture.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD rarely travels alone, and it never travels context-free. Anxiety, low mood, autism and trauma shape how it presents; hormones turn its volume up and down on a schedule nobody mentions at diagnosis; and study, work, driving and ageing each add rules and options worth knowing. None of this makes your situation too complicated to work with. It makes the map bigger, and most of the map is on this page or one link away.
          </p>
          <p>
            The mechanics underneath remain <a href="/adhd/living-with-adhd/" className={CX_LINK}>the same five mechanisms</a>, whatever else is in the picture, and the design moves that help them still hold. Complexity changes the tuning. It doesn't change the instrument.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 9: Final CTA ---------------- */

const CxFinalCTA = () => (
  <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>For the whole picture</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]">
            Built for the whole picture.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Loops is a daily coaching app for ADHD brains in real lives: cycles, co-conditions, night shifts, midlife and all. Small steps a day, sized for the day you're actually having.
          </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 CxApp() {
  return (
    <main id="main">
      <CxNav />
      <CxHero />
      <CxFrame />
      <CxWomen />
      <CxHormones />
      <CxCompanions />
      <CxContexts />
      <CxOpenQuestions />
      <CxBottomLine />
      <CxFinalCTA />
      <Footer />
    </main>
  );
}

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