/* Loops Knowledge Hub — "Treatment & Self-Management" — cluster landing page.
   Front door to the Treatment section: honest overview of options, routes outward to strategy pages.
   Treatment sections are visually parallel siblings; none styled as recommended.
   Medical info: disclaimer kept as quiet body copy; last-reviewed date near top; no urgency devices.
   "NICE" softened to "clinical guidelines" for consistency with other medical hub pages (drug names kept).
   Higher link density by design; "Read the full page" are text links; single final CTA button.
   UK English, no em dashes. */

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

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

const TS_NAV_LINKS = [
  { label: "Medication", href: "#medication" },
  { label: "Strategies", href: "#strategy-core" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const TsNav = () => {
  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">
            {TS_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">
              {TS_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 TsHero = () => (
  <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>Treatment &amp; Self-Management</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]">
          Managing ADHD is a daily practice, not a single decision.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Practical ways to manage ADHD day to day, whether or not medication is part of the picture. What each treatment actually does, what the strategies actually fix, and how the pieces fit together.
        </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: Topic index (two groups) ---------------- */

const TS_TREATMENTS = [
  { title: "Medication", body: "What it does, what it doesn't, and the honest evidence picture.", note: "Covered below", href: "#medication" },
  { title: "Therapy", body: "Where CBT genuinely helps, and what to look for in a therapist.", note: "Covered below", href: "#therapy" },
  { title: "Coaching", body: "Support aimed at the gap between knowing and doing.", note: "Covered below", href: "#coaching" },
];

const TS_STRATEGIES = [
  { title: "Executive function strategies", body: "Externalise, shrink the step, design for bad days. The master list.", note: "Read the full page", href: "/adhd/executive-function-with-adhd/" },
  { title: "Time blindness", body: "Making time visible when you can't reliably feel it passing.", note: "Read the full page", href: "/adhd/time-blindness-with-adhd/" },
  { title: "Task initiation", body: "Engineering the start instead of waiting to feel ready.", note: "Read the full page", href: "/adhd/task-initiation-and-getting-started-with-adhd/" },
  { title: "Organisation", body: "One source of truth, and why the upkeep matters more than the setup.", note: "Read the full page", href: "/adhd/get-organised-with-adhd/" },
  { title: "Routines", body: "Building routines that survive bad days instead of breaking on them.", note: "Read the full page", href: "/adhd/build-routines-that-survive-bad-days/" },
  { title: "Body doubling", body: "How another person's presence changes what gets started.", note: "Read the full page", href: "/adhd/body-doubling-with-adhd/" },
  { title: "Sleep", body: "The foundation that moves every other number on this page.", note: "Read the full page", href: "/adhd/sleep-better-with-adhd/" },
  { title: "Tools & planners", body: "Why most tools get abandoned, and what to look for instead.", note: "Covered below", href: "#tools" },
];

const TsIndexCard = ({ c }) => (
  <a href={c.href} className="group focus-ring flex flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft transition-shadow hover:shadow-lift">
    <h3 className="text-[17px] font-semibold tracking-tight2 text-ink leading-snug group-hover:text-brand-deep transition-colors">{c.title}</h3>
    <p className="mt-2.5 flex-1 text-[15px] leading-[1.6] text-ink-2 text-pretty">{c.body}</p>
    <span className="mt-4 inline-flex items-center gap-1 text-[13px] font-semibold uppercase tracking-[0.06em] text-ink-3">
      {c.note}
      <svg width="13" height="13" 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>
    </span>
  </a>
);

const TsIndex = () => (
  <Section id="index" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>In this section</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Two kinds of help, one system.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Treatments raise your capacity. Strategies decide what the capacity gets spent on. Most people who do well use both.
        </p>
      </div>

      <p className="mt-12 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-3">Treatments</p>
      <div className="mt-4 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {TS_TREATMENTS.map((c) => <TsIndexCard key={c.title} c={c} />)}
      </div>

      <p className="mt-10 text-[12px] font-semibold uppercase tracking-[0.12em] text-ink-3">Day-to-day strategies</p>
      <div className="mt-4 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {TS_STRATEGIES.map((c) => <TsIndexCard key={c.title} c={c} />)}
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 3: Medication ---------------- */

const TsMedication = () => (
  <Section id="medication" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Medication</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 it does, and what it was never going to do.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Medication is the most studied ADHD treatment, and the honest picture has two halves. Clinical guidelines recommend stimulant medication, lisdexamfetamine or methylphenidate, as a first-line option for adults, and a 2025 umbrella review found moderate-to-high certainty evidence for short-term symptom improvement. For many people the difference is meaningful, sometimes described as the first quiet the noise has ever had.
          </p>
          <p>
            The second half matters just as much. A major 2025 analysis found medication improved symptoms without clearly improving broader outcomes like quality of life, and community reports name the specific limit: medication can improve focus without deciding what to focus on. If the target task wasn't chosen before it takes effect, you can end up highly focused on entirely the wrong thing. Finding the right medication and dose is also a genuine process, with follow-up and adjustment, not a single prescription.
          </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">
          Medication raises capacity. It doesn't decide what the capacity gets spent on. That's what structure is for.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Whether medication belongs in your picture is a decision for you and your clinician, and both choices are legitimate. Nothing else on this page assumes it either way.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Therapy ---------------- */

const TsTherapy = () => (
  <Section id="therapy" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Therapy</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 talking helps, specifically.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            CBT is the most well-supported psychological approach for adult ADHD, with evidence it improves core and emotional symptoms, and stronger results when combined with medication. Good ADHD-focused therapy tends to work on specific machinery: the <a href="/adhd/shame-spiral-with-adhd/" className={TS_LINK}>shame accumulated over years of unexplained struggle</a>, the <a href="/adhd/all-or-nothing-thinking-with-adhd/" className={TS_LINK}>all-or-nothing verdicts</a>, the <a href="/adhd/emotional-dysregulation-with-adhd/" className={TS_LINK}>emotional responses that arrive at full volume</a>, and practical skills for planning and follow-through.
          </p>
          <p>
            Two honest notes. The evidence has a known gap: trials measure symptom scores far more often than the outcomes people care about most, like whether daily life actually got easier. And the ADHD-informed part matters: standard approaches that assume reliable follow-through between sessions can quietly become another system to fail at, so it's worth asking any prospective therapist directly about their experience with adult ADHD.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: Coaching ---------------- */

const TsCoaching = () => (
  <Section id="coaching" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Coaching</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Aimed at the gap the other treatments leave.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Medication raises capacity and therapy reworks patterns, but neither lives inside Tuesday afternoon, where <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={TS_LINK}>the gap between knowing and doing</a> actually happens. Coaching-style support targets exactly that: turning goals into next actions, keeping them visible, and providing the light accountability that ADHD brains reliably respond to.
          </p>
          <p>
            The evidence base is younger here than for medication or CBT, with encouraging early results rather than settled proof, and it's fair to hold it that way. What coaching asks of you is also different: small and daily rather than large and occasional, which for many people is precisely why it sticks where other support hasn't. Formats range from human coaches to structured daily systems; what matters is the mechanism, not the label.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: The strategy core (5 moves) ---------------- */

const TsStrategyCore = () => (
  <Section id="strategy-core" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Day-to-day strategies</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 five moves underneath every strategy that works.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          The strategy pages above are domain-specific applications of the same five principles, worth knowing in their own right.
        </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">Externalise everything</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">Information held in the world survives. Information held in your head doesn't.</span> One trusted place for tasks, <a href="/adhd/working-memory-with-adhd/" className={TS_LINK}>prompts that arrive on their own</a>, time made visible, plans written where they'll be seen.
          </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">Shrink the step</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 goal stays ambitious. The doorway gets small.</span> <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={TS_LINK}>Starting is the bottleneck</a>, so the first action should cost almost nothing to take.
          </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 for the bad day</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 system that needs a good day will break on the first bad one.</span> <a href="/adhd/all-or-nothing-thinking-with-adhd/" className={TS_LINK}>Minimum versions, decided in advance</a>, are what let routines bend instead of shatter.
          </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">Make restarting cheap</h3>
          <p className="mt-3 text-[15.5px] sm:text-[16px] leading-[1.7] text-ink-2 text-pretty">
            <span className="font-semibold text-ink">Every system will lapse. The ones that survive are the ones that cost nothing to come back to.</span> No broken streaks, no guilt tax, <a href="/adhd/shame-spiral-with-adhd/" className={TS_LINK}>no verdict attached to a missed day</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">Work with the wiring</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">Interest, novelty, presence and mild urgency are legitimate fuels.</span> <a href="/adhd/motivation-and-reward-with-adhd/" className={TS_LINK}>Use them deliberately</a> instead of trying to run on importance, which was never connected to the engine.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: Tools & planners ---------------- */

const TsTools = () => (
  <Section id="tools" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Tools &amp; planners</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 the drawer full of abandoned systems isn't your fault.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Here's the counterintuitive failure mode worth naming: trying to fix ADHD with a more elaborate system often creates more of the problem. Setting up the project board, maintaining the tracker, tending the elaborate planner all require exactly the executive function that's already scarce. Community accounts describe the arc precisely: the tool helps for a short novelty window, then becomes another thing to remember, then becomes a source of guilt, then gets abandoned. The tool turned into a task.
          </p>
          <p>
            So judge any tool, app or planner by one question: does it reduce overhead or add it? The versions that survive share a shape: capture that takes seconds, <a href="/adhd/get-organised-with-adhd/" className={TS_LINK}>one source of truth rather than five</a>, prompts that come to you rather than waiting to be checked, and a restart that costs nothing after the inevitable gap. Anything that punishes a missed day, and most streak mechanics do, is designed for a brain that doesn't lapse, which is not the brain being supported here.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const TsOpenQuestions = () => (
  <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>
            The uncomfortable truth of ADHD treatment research is that the things easiest to measure, short-term symptom scores, are not the things people most want changed, and the outcomes that matter most, quality of life, follow-through, self-esteem over years, remain under-measured across every treatment on this page. How best to combine medication, therapy, coaching and daily structure is barely studied at all, even though combining them is what most people actually do.
          </p>
          <p>
            Individual variation runs through everything: each option on this page helps some people substantially and others little, and the only reliable way to find your mix is structured trial and honest observation. That's not a research failure to apologise for. It's the actual state of knowledge, and pages that pretend otherwise are selling something.
          </p>
          <p className="text-[15.5px] text-ink-3">
            This is general information, not medical advice. Decisions about medication and treatment belong with you and your clinician.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const TsBottomLine = () => (
  <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]">
          Capacity plus structure. That's the whole model.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Everything on this page reduces to one working model: treatments raise the capacity available, and daily structure decides where it goes. Medication without structure is focus without a target. Structure without support can be a grind that treatment would have eased. The people who do best tend to run both, tuned to their own wiring, with restarts kept cheap for the weeks when everything slips.
          </p>
          <p>
            Whether or not medication is part of your picture, the daily layer is yours to build, and it's the layer where the strategy pages above do their work. Start with one: the mechanism that costs you most, one small system against it, designed for your worst day rather than your best.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const TsFinalCTA = () => (
  <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 structure side of the model</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]">
            The daily layer, handled.
          </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 runs the structure side of the model with small steps a day, surfaced at the right moment, with a restart that never costs more than the step itself. Whether or not medication is part of your picture, this part can start today.
          </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 TsApp() {
  return (
    <main id="main">
      <TsNav />
      <TsHero />
      <TsMedication />
      <TsTherapy />
      <TsCoaching />
      <TsStrategyCore />
      <TsTools />
      <TsOpenQuestions />
      <TsBottomLine />
      <TsFinalCTA />
      <Footer />
    </main>
  );
}

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