/* Loops Knowledge Hub — "Could This Be ADHD?" — sensitive/clinically-adjacent guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quotes, single CTA at the end only.
   Extra-calm treatment: no urgency devices; doctor + support signposts kept as quiet body copy.
   Inline links point to existing pages; UK English, no em dashes, no GP (use "doctor"), non-geo-specific. */

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

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

const CTA_NAV_LINKS = [
  { label: "The basics", href: "#basics" },
  { label: "What to do next", href: "#next" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const CtaNav = () => {
  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">
            {CTA_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">
              {CTA_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 CtaHero = () => (
  <section id="top" aria-label="Hero" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-20 pb-12 lg:pb-16">
      <div className="max-w-3xl">
        <a href="/adhd/knowledge-hub/" className="focus-ring inline-flex items-center gap-1.5 rounded-pill text-[13.5px] font-semibold text-brand-deep hover:underline">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M19 12H5M11 18l-6-6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          ADHD Knowledge Hub
        </a>
        <h1 className="mt-6 text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[32px] sm:text-[44px] lg:text-[52px]">
          I'm wondering if this is ADHD.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          A lot of this sounds familiar. You're just not sure yet. This page can't diagnose you, and it won't pretend to. What it can do is help you think clearly about the question, and show you what a useful next step looks like.
        </p>
      </div>
    </Container>
  </section>
);

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

const CtaBasics = () => (
  <Section id="basics" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The basics</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          What ADHD actually is. And what it isn't.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            ADHD isn't a shortage of attention, and it was never really about being unable to sit still. It's best understood as a cluster of interacting differences: <a href="/adhd/executive-function-with-adhd/" className={CTA_LINK}>executive dysfunction</a>, altered time perception, steeper discounting of delayed rewards, and frequent <a href="/adhd/emotional-dysregulation-with-adhd/" className={CTA_LINK}>emotional dysregulation</a>.
          </p>
          <p>
            In practice, that means attention that follows interest rather than importance, <a href="/adhd/task-initiation-and-getting-started-with-adhd/" className={CTA_LINK}>starting that doesn't follow from knowing</a>, <a href="/adhd/working-memory-with-adhd/" className={CTA_LINK}>intentions that don't surface when needed</a>, and feelings that arrive at full volume. It also means <a href="/adhd/hyperfocus-with-adhd/" className={CTA_LINK}>hyperfocus</a>: the same brain that can't start the tax return can disappear into a fascinating problem for six hours.
          </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">
          The question was never "can you pay attention?" It's "can you direct your attention where you choose, when it matters, reliably?"
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          Everyone experiences some of this sometimes. What distinguishes ADHD is degree, persistence and cost: the patterns are lifelong, show up across multiple areas of life, and get in the way of things that matter, even when you're trying hard. Often especially when you're trying hard.
        </p>
      </div>
    </Container>
  </Section>
);

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

const CTA_RECOGNITION = [
  "A lifetime of \"so much potential\" followed by a quiet, private confusion about why everything is harder for you than it seems to be for everyone else.",
  "A career built on last-minute sprints. The work is good. The way it gets done is costing you.",
  "A graveyard of systems: planners, apps, routines. Each one worked brilliantly for about three weeks.",
  "Emotions with the volume turned up. Criticism that lands like injury, frustration that ends whole days.",
  "Time that behaves strangely. Chronically late or absurdly early, deadlines that feel unreal until they're emergencies.",
  "Exhaustion nobody sees, because holding it together in public is its own full-time job.",
];

const CtaRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          What it tends to look like in an adult life.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Adult ADHD rarely looks like the classroom stereotype. It looks more like this.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {CTA_RECOGNITION.map((t, i) => (
          <article key={i} className="flex gap-4 rounded-card border border-line bg-white p-6 shadow-soft">
            <span aria-hidden="true" className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-[12px] font-bold text-brand-deep tnum">{i + 1}</span>
            <p className="text-[15px] leading-[1.6] text-ink text-pretty">{t}</p>
          </article>
        ))}
      </div>

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          Recognising yourself here isn't a diagnosis. But it isn't nothing, either. Patterns this consistent deserve to be taken seriously rather than filed under "everyone struggles".
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: Why it gets missed (4 blocks) ---------------- */

const CtaMissed = () => (
  <Section id="missed" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the gap</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 nobody spotted it, including you.
        </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 stereotype problem</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 public image of ADHD is a disruptive eight-year-old child.</span> If you were quiet, capable or well-behaved, you didn't match the picture, so nobody looked, and eventually neither did you.
          </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">Compensation hides the evidence</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">Being bright or hardworking enough to cover the gaps doesn't remove ADHD. It removes the proof.</span> <a href="/adhd/masking-and-compensation-with-adhd/" className={CTA_LINK}>Masking and compensation</a> can hold for decades, which is why so many people are told "you can't have ADHD, look how well you're doing". The doing-well was the symptom.
          </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">It presents differently, especially in women</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">Inattentive patterns, internal restlessness and emotional intensity are easier to miss than bounced-off-walls hyperactivity.</span> Many women, and plenty of men, reach their thirties or forties before anyone connects the dots.
          </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">It gets diagnosed as its consequences</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">Years of unexplained struggle produce anxiety, low mood and battered self-esteem.</span> Those often get treated first, sometimes for years, while the pattern underneath them goes unexamined.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          A common trigger for finally asking the question is a moment when compensation stops covering: a promotion, a baby, a loss, a burnout. If that's what brought you here, you're in well-documented company.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: What else it could be ---------------- */

const CtaElse = () => (
  <Section id="else" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The honest 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]">
          Familiar doesn't automatically mean ADHD.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            This page would be doing you a disservice if it only argued one direction. Several other things can produce ADHD-like patterns, and a good assessment exists precisely to tell them apart.
          </p>
          <p>
            Anxiety and depression both disrupt concentration, memory and follow-through. <a href="/adhd/sleep-better-with-adhd/" className={CTA_LINK}>Poor sleep</a> degrades attention and emotional regulation in anyone, and untreated sleep disorders can look strikingly like ADHD. <a href="/adhd/recover-from-adhd-burnout/" className={CTA_LINK}>Chronic stress and burnout</a> flatten executive function for as long as they last. Thyroid problems, hormonal changes and some medications matter too.
          </p>
          <p>
            Two honest complications. First, direction: these conditions can mimic ADHD, but ADHD also causes several of them, so their presence doesn't rule ADHD out. Second, company: ADHD frequently travels with anxiety, depression and sleep problems, so it's often not either-or. This is genuinely hard to untangle from the inside, which is exactly why a proper assessment, rather than a quiz or a feed of relatable videos, is the right tool for the job.
          </p>
          <p>
            One useful distinguishing question: how long has this been true? ADHD patterns are lifelong, visible in some form since childhood or adolescence, even if they were masked or explained away. If your difficulties appeared recently, alongside a life event, an illness or a mood change, that points somewhere else first.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 6: The reframe ---------------- */

const CtaReframe = () => (
  <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]">
          You don't need certainty to take this seriously.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            People often get stuck at this stage for months or years, cycling between "it would explain everything" and "everyone's a bit like this, I'm probably being dramatic". Both thoughts can feel true on the same afternoon. Neither is a plan.
          </p>
          <p>
            Here's the reframe that unsticks it: the question "do I definitely have ADHD?" doesn't need answering before the question "do I deserve support with the things I'm struggling with?" The answer to the second one is already yes. Whatever the assessment eventually says, the difficulty was real, <a href="/adhd/shame-spiral-with-adhd/" className={CTA_LINK}>the years of self-blame were doing damage</a>, and the strategies that help ADHD brains, external structure, smaller starts, kinder restarts, help the people who merely resemble them too.
          </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">
          A diagnosis is a door, not a verdict. And you're allowed to start making life easier before anyone opens it.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

/* ---------------- Section 7: What to do next (5 blocks + closing) ---------------- */

const CtaNext = () => (
  <Section id="next" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Practical steps</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 sensible path from "wondering" to "knowing".
        </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">Write the pattern down</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">Before any appointment, collect concrete examples across your life: school reports, work patterns, money, relationships, the systems that didn't stick.</span> Assessments look for lifelong patterns across settings, and specifics beat vibes.
          </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">Use a screener as a conversation starter</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">Validated tools like the Adult ADHD Self-Report Scale (ASRS) exist and are free.</span> They can't diagnose you, but a high score is a legitimate, evidence-based reason to take the next step.
          </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">Ask people who knew you young</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 parent, sibling or old friend can often confirm patterns you've normalised or forgotten.</span> Childhood evidence matters in assessment, and other people's memories count.
          </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">Speak to your doctor</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 route to an assessment usually starts with your doctor, and it's worth being direct: bring your examples, name the pattern, and ask about your options.</span> Waiting lists are often long, and it's reasonable to ask what routes exist rather than accepting the first one quoted.
          </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">Support yourself in the meantime</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 referral is not a pause button on your life.</span> Long waits are exactly why support that doesn't require a finished diagnosis, structure, coaching-style help, psychoeducation, communities of people with the same patterns, matters so much in the gap.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          And a note on self-identification, said without hedging: many people wait years for assessment, and recognising these patterns in yourself in the meantime is legitimate. You don't need a certificate to start working with your brain instead of against it. If any of this sits alongside serious distress, though, don't wait it out alone. Your doctor is a good first call, and <a href="/support/find-help/" className={CTA_LINK}>other support is available too</a>.
        </p>
      </div>
    </Container>
  </Section>
);

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

const CtaOpenQuestions = () => (
  <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>
            Adult ADHD diagnosis is rising sharply, and the field is honestly divided about what mix that represents: genuine historical underdiagnosis being corrected, better recognition of women and inattentive presentations, and, in some places, assessment quality that varies more than anyone would like. All three can be true at once.
          </p>
          <p>
            The boundaries are genuinely debated too: where ordinary human variation ends and diagnosable impairment begins isn't a bright line, and reasonable clinicians can disagree at the margins. None of that makes your experience less real. It makes a careful, thorough assessment more valuable, not less.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const CtaBottomLine = () => (
  <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]">
          Wondering is a reasonable place to be. It isn't a place to live.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            If lifelong patterns of interest-led attention, hard starts, leaky memory, strange time and loud emotions are costing you things you care about, the question you're asking is legitimate, whatever the answer turns out to be. ADHD is a real explanation for some people. Sleep, mood, stress or burnout is the better explanation for others. Sometimes it's both.
          </p>
          <p>
            What matters is movement: examples written down, a screener done, a conversation booked, and support in place that doesn't wait for certainty. You're not being dramatic. You're being thorough about your own life, and that's the opposite of the problem.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const CtaFinalCTA = () => (
  <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>You don't need a diagnosis to start</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]">
            Start before the waiting list does.
          </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 for ADHD brains, and you don't need a diagnosis to use it. Many people start while they're still wondering, still waiting, or still deciding. If the patterns on this page feel familiar, Loops is built for the way your days actually work.
          </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 CtaApp() {
  return (
    <main id="main">
      <CtaNav />
      <CtaHero />
      <CtaBasics />
      <CtaRecognition />
      <CtaMissed />
      <CtaElse />
      <CtaReframe />
      <CtaNext />
      <CtaOpenQuestions />
      <CtaBottomLine />
      <CtaFinalCTA />
      <Footer />
    </main>
  );
}

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