/* Loops — "No Diagnosis Needed" page (/no-diagnosis-needed).
   For people told it isn't ADHD, still waiting, or who never sought assessment.
   Established design system: sticky nav, hero, stat cards, three-situation blocks,
   cards, pull-quotes, honest note, sources. UK English, no em dashes. */

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

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

const ND_NAV_LINKS = [
  { label: "Which one sounds like you", href: "#which-one" },
  { label: "Why it works", href: "#why-it-works" },
  { label: "An honest note", href: "#honest-note" },
  { label: "For ADHD", href: "/adhd/" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const NdNav = () => {
  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">
            {ND_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">
              {ND_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">
              <Button variant="primary" size="md" href="/#download" onClick={() => setOpen(false)}>Get Early Access</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

/* ---------------- Hero ---------------- */

const NdHero = () => (
  <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">
        <Kicker>No diagnosis needed</Kicker>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          You don't need a diagnosis to need a system.
        </h1>
        <p className="mt-7 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          Loops was designed for people with ADHD, but it's built for everyone. The struggles it helps with don't check whether you have a diagnosis first.
        </p>
        <div className="mt-8 flex flex-col items-start 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 for 7 days. No complicated setup. On iOS for now.</span>
        </div>
      </div>
    </Container>
  </section>
);

/* ---------------- The bit nobody talks about ---------------- */

const ND_STATS = [
  { n: "549,000", d: "people are waiting for an ADHD assessment in England.", src: "NHS England, March 2025" },
  { n: "144,000", d: "of them have been waiting more than two years.", src: "NHS England, March 2025" },
  { n: "14%", d: "of people referred for ADHD at one NHS clinic in Cardiff ended up with a diagnosis. The other 86% walked out with the same struggles they walked in with.", src: "BJPsych Open, 2024" },
];

const NdGap = () => (
  <Section id="the-gap" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The bit nobody talks about</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 struggle is real. Nobody's offering a system for it.
        </h2>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {ND_STATS.map((s) => (
          <article key={s.n} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="text-[30px] sm:text-[36px] font-bold tracking-tight3 text-brand-deep tnum leading-none">{s.n}</div>
            <p className="mt-3 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.d}</p>
            <p className="mt-3 text-[12.5px] font-medium uppercase tracking-[0.08em] text-ink-3">{s.src}</p>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>And when the assessment finally happens, the answer isn't always yes. Very often, people leave with no plan for what to do next.</p>
        <p>Meanwhile, plenty of people never join the queue at all. They just know that willpower alone hasn't been working.</p>
        <p className="text-ink font-medium">Three very different situations. One shared problem.</p>
      </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">
          That's the gap Loops was built to fill.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Which one sounds like you ---------------- */

const NdWhichOne = () => (
  <Section id="which-one" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Which one sounds like you?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Three different starting points. The same next step.
        </h2>
      </div>

      {/* 1 */}
      <div className="mt-12 rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
        <div className="flex items-baseline gap-4">
          <span className="text-[30px] sm:text-[34px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">01</span>
          <h3 className="text-[19px] sm:text-[22px] font-semibold tracking-tight2 text-ink leading-snug">You were assessed and told it's not ADHD</h3>
        </div>
        <div className="mt-4 sm:pl-[52px] space-y-4 text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          <p>Maybe you waited months, or years. You'd quietly hoped the assessment would explain everything. Then someone told you no, you don't have ADHD.</p>
          <p>Here's what we want you to know.</p>
          <p>A "no" doesn't erase the difficulties that sent you looking for answers in the first place. The trouble <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={ND_LINK}>starting tasks</a>, the abandoned projects, the <a href="/adhd/shame-spiral-with-adhd/" className={ND_LINK}>guilt spiral</a> after a missed day. Those were real before the assessment, and they're still real now.</p>
        </div>
        <div className="mt-5 sm:ml-[52px] rounded-card border border-brand/25 bg-brand-soft/40 p-5 sm:p-6">
          <p className="text-[15.5px] sm:text-[16.5px] leading-[1.7] text-ink-2 text-pretty">
            The NHS agrees. Its 2025 ADHD Taskforce report says support should be needs-led, and shouldn't rely on or require a clinical diagnosis. <span className="text-ink font-medium">In plain terms, if someone is struggling, help them based on their needs.</span>
          </p>
        </div>
        <div className="mt-5 sm:pl-[52px] space-y-4 text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          <p>That's exactly how Loops works. We never ask for a diagnosis. We ask what you're trying to do, and we help you build the small daily actions that get you there.</p>
          <p className="text-ink font-medium">You don't have to relitigate the assessment. You don't have to prove anything. You just have to start small.</p>
        </div>
      </div>

      {/* 2 */}
      <div className="mt-5 rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
        <div className="flex items-baseline gap-4">
          <span className="text-[30px] sm:text-[34px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">02</span>
          <h3 className="text-[19px] sm:text-[22px] font-semibold tracking-tight2 text-ink leading-snug">You're still waiting</h3>
        </div>
        <div className="mt-4 sm:pl-[52px] space-y-4 text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          <p>You're one of hundreds of thousands of people in the queue. Some waits now stretch past five years in parts of the UK.</p>
          <p><a href="/adhd/waiting-for-adhd-assessment/" className={ND_LINK}>Waiting is exhausting</a>. It can feel like your life is on pause until someone gives you an answer.</p>
          <p>But here's the thing. You don't need the answer to start building the system. The habits that help, tiny consistent actions, gentle accountability, celebrating small wins, work whether or not a diagnosis eventually arrives.</p>
          <p>If it does arrive, brilliant. You'll already have momentum, and a clearer picture of what helps you. If it doesn't, you'll still have the system.</p>
          <p className="text-ink font-medium">Start where you are. The queue can do its thing in the background.</p>
        </div>
      </div>

      {/* 3 */}
      <div className="mt-5 rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
        <div className="flex items-baseline gap-4">
          <span className="text-[30px] sm:text-[34px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">03</span>
          <h3 className="text-[19px] sm:text-[22px] font-semibold tracking-tight2 text-ink leading-snug">You've never sought an assessment</h3>
        </div>
        <div className="mt-4 sm:pl-[52px] space-y-4 text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
          <p>Maybe you suspect ADHD. Maybe you don't. Maybe you've just noticed a pattern, like the gym memberships that fizzled, the side project gathering dust, the promotion you keep meaning to go for.</p>
          <p>You don't need a label to recognise the pattern. <a href="/adhd/could-this-be-adhd/" className={ND_LINK}>You have the symptom, just not the system.</a></p>
          <p>Most productivity tools assume motivation is the missing piece. It usually isn't. What's missing is a structure that makes starting easy, keeps you going on the flat days, and doesn't punish you when life gets in the way.</p>
          <p>That's what a Loop is. Whether your goal is <a href="/adhd/get-fit/" className={ND_LINK}>getting healthier</a>, <a href="/adhd/finish-what-you-started-with-adhd/" className={ND_LINK}>finishing something</a>, or finally going for <a href="/adhd/get-promoted/" className={ND_LINK}>that promotion</a>, the approach is the same. Small daily actions, real accountability, and a system that meets you where you are.</p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Why the same system works ---------------- */

const NdWhyWorks = () => (
  <Section id="why-it-works" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Why the same system works for everyone</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          This isn't us stretching an ADHD app to fit more people. It's the other way round.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>Designing for ADHD means designing for the hardest version of the problem. Starting when starting feels impossible. Staying consistent when your attention has other plans. Recovering from setbacks without shame.</p>
          <p>Solving for that means we've solved it for everyone.</p>
        </div>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {[
          { t: "Breaking goals into small steps", b: "Big things stop being scary when the next action is genuinely small." },
          { t: "External accountability", b: "Someone who can see the work makes the work far more likely to happen." },
          { t: "Quick wins", b: "Progress you can feel now, not months from now." },
          { t: "Low-pressure recovery", b: "A missed day is data, not failure. Getting back in costs almost nothing." },
        ].map((c) => (
          <article key={c.t} className="flex items-start gap-4 rounded-card border border-line bg-white p-6 shadow-soft">
            <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-brand-deep" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5L20 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
            <div>
              <h3 className="text-[16.5px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
              <p className="mt-1.5 text-[15px] leading-[1.6] text-ink-2 text-pretty">{c.b}</p>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>The research backs this up. These things help people regardless of what's underneath the struggle. Anxiety, <a href="/adhd/recover-from-adhd-burnout/" className={ND_LINK}>burnout</a>, a chaotic season of life, or simply being human.</p>
      </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-[20px] sm:text-[25px] font-semibold tracking-tight2 text-ink leading-[1.3] text-balance">
          If it works for the hardest days, it works for the ordinary ones too.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- What Loops actually does ---------------- */

const ND_WHAT = [
  { n: "01", t: "Small daily actions", b: "Big goals broken into steps small enough that starting stops being scary." },
  { n: "02", t: "Accountability that's kind", b: "Gentle check-ins, not guilt trips. We never use shame to keep you going, because shame doesn't work." },
  { n: "03", t: "Rewards along the way", b: "Progress gets noticed and celebrated, even the tiny stuff. Especially the tiny stuff." },
  { n: "04", t: "Coaching that adapts", b: "As your goals change, Loops changes with you. Getting fit this season, career next season. Same system, new Loop." },
  { n: "05", t: "No judgement about setbacks", b: "Missed a few days? That's not failure, that's data. Loops helps you restart without the guilt spiral." },
];

const NdWhatItDoes = () => (
  <Section id="what-it-does" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>What Loops actually does</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A daily coaching system. Here's the shape of it.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {ND_WHAT.map((p) => (
          <article key={p.n} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex items-baseline gap-4">
              <span className="text-[30px] sm:text-[34px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">{p.n}</span>
              <h3 className="text-[19px] sm:text-[21px] font-semibold tracking-tight2 text-ink leading-snug">{p.t}</h3>
            </div>
            <p className="mt-3 pl-0 sm:pl-[52px] text-[15.5px] sm:text-[16.5px] leading-[1.7] text-ink-2 text-pretty">{p.b}</p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- An honest note ---------------- */

const NdHonestNote = () => (
  <Section id="honest-note" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>An honest note</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Loops is a coaching system, not a medical service.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>It doesn't diagnose anything, and it isn't a replacement for professional support.</p>
          <p>If an assessment pointed you towards something else, like anxiety, low mood, or <a href="/adhd/sleep-better-with-adhd/" className={ND_LINK}>sleep difficulties</a>, it's worth following that up with your doctor. Loops works well alongside that kind of support, not instead of it.</p>
        </div>
      </div>

      <div className="mt-10 grid gap-4 sm:gap-5 sm:grid-cols-2">
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">At work</h3>
          <p className="mt-3 text-[15.5px] leading-[1.65] text-ink-2 text-pretty">
            You don't need a diagnosis to ask for reasonable adjustments. Acas guidance is clear that employers should support workers based on how they're affected, diagnosis or not.
          </p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/adhd/adhd-at-work/">More on ADHD at work</Button></div>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">At school</h3>
          <p className="mt-3 text-[15.5px] leading-[1.65] text-ink-2 text-pretty">
            SEN support and EHCPs are based on a child's needs, not their labels. The legal charity IPSEA is explicit that support for special educational needs is not tied to diagnosis.
          </p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/adhd/parenting-with-adhd/">More on parenting</Button></div>
        </article>
      </div>

      <div className="mt-6 max-w-3xl rounded-card border border-brand/25 bg-brand-soft/50 p-6 sm:p-7 shadow-soft">
        <p className="text-[18px] sm:text-[20px] leading-[1.4] text-ink font-semibold tracking-tight2 text-balance">
          Support based on need, not label. It's the law's approach. It's the NHS Taskforce's recommendation. And it's how Loops has worked from day one.
        </p>
      </div>

      <div className="mt-6 max-w-3xl rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[15.5px] leading-[1.7] text-ink-2 text-pretty">
          If you're struggling right now and need to talk to someone, you can find crisis lines and specialist support on <a href="/support/find-help/" className={ND_LINK}>Find help now</a>.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Final CTA ---------------- */

const NdFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <Container>
      <div className="mx-auto max-w-2xl text-center">
        <Kicker>Start small. Start today.</Kicker>
        <h2 className="mt-5 text-balance text-ink font-bold tracking-tight3 text-[30px] sm:text-[38px] lg:text-[44px] leading-[1.08]">
          Pick one goal. Break it into something tiny. Do it today.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Whatever brought you here, an assessment that said no, a waiting list that says nothing, or just the quiet knowledge that willpower isn't cutting it, the next step is the same. That's a Loop. And it's yours, no diagnosis required.
        </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 for 7 days. No complicated setup. On iOS for now.</span>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Sources ---------------- */

const ND_SOURCES = [
  { t: "NHS England ADHD Management Information", d: "May 2025 release: 549,000 people waiting for ADHD assessment in England at end of March 2025; 144,000 waiting two years or more." },
  { t: "Brooks & Annear, BJPsych Open (2024)", d: "Service evaluation of 230 ADHD referrals at a Cardiff community mental health team; 14% received an ADHD diagnosis." },
  { t: "NHS England ADHD Taskforce report (2025)", d: "Support should be \u201Cneeds-led\u201D and should \u201Cnot rely on or require clinician provided diagnosis\u201D." },
  { t: "Acas guidance on neurodiversity at work", d: "A worker does not need a diagnosis to be considered disabled under the Equality Act 2010." },
  { t: "IPSEA", d: "\u201CSupport for SEN is not tied to diagnosis.\u201D" },
];

const NdSources = () => (
  <Section id="sources" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</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 these numbers come from.
        </h2>
      </div>
      <ul className="mt-8 max-w-3xl flex flex-col gap-3">
        {ND_SOURCES.map((s) => (
          <li key={s.t} className="rounded-card border border-line bg-white p-5 sm:p-6 shadow-soft">
            <div className="text-[16px] font-semibold tracking-tight2 text-ink">{s.t}</div>
            <p className="mt-2 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{s.d}</p>
          </li>
        ))}
      </ul>
    </Container>
  </Section>
);

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

function NdApp() {
  return (
    <main id="main">
      <NdNav />
      <NdHero />
      <NdGap />
      <NdWhichOne />
      <NdWhyWorks />
      <NdWhatItDoes />
      <NdHonestNote />
      <NdFinalCTA />
      <NdSources />
      <Footer />
    </main>
  );
}

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