/* Loops Knowledge Hub — "Task Initiation and Getting Started With ADHD" — editorial guide page.
   Knowledge Hub direction: eyebrow labels, stacked insight blocks, 2x3 recognition grid,
   distinct pull quotes, single CTA at the end only.
   Inline links point to existing pages; UK English, no em dashes. */

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

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

const TI_NAV_LINKS = [
  { label: "Why it happens", href: "#why" },
  { label: "What helps", href: "#help" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const TiNav = () => {
  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">
            {TI_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">
              {TI_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 TiHero = () => (
  <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 can't seem to start.
        </h1>
        <p className="mt-6 text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          You know exactly what needs doing. Starting it is another matter entirely. That gap between knowing and beginning has a name, a mechanism, and nothing to do with laziness.
        </p>
      </div>
    </Container>
  </section>
);

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

const TiBasics = () => (
  <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]">
          Starting is its own skill. ADHD affects it directly.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Task initiation is the ability to begin a task at the moment you intend to, without needing pressure, panic or another person to make it happen. It's one of the core <a href="/adhd/executive-function-with-adhd/" className={TI_LINK}>executive functions</a>, and it's among the most consistently affected in ADHD.
          </p>
          <p>
            This matters because most of the world treats starting as free. Advice assumes that once you know what to do and why it matters, beginning follows automatically. For ADHD brains, that last step is precisely where things break. <a href="/adhd/finish-what-you-started-with-adhd/" className={TI_LINK}>Starting and sustaining aren't even the same cognitive task</a>, and neither of them follows automatically from understanding.
          </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 psychologist J. Russell Ramsay calls it the intention-to-action gap: knowing precisely what to do, understanding the consequences of not doing it, and still being unable to make the action happen at the moment it needs to happen.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>If that sentence describes your life, this page is about why, and what works instead of trying harder.</p>
      </div>
    </Container>
  </Section>
);

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

const TI_RECOGNITION = [
  "The five-minute task has been waiting three weeks. You've thought about it every single day.",
  "You sit down to start, and somehow you're cleaning, scrolling, or doing any task except the one you sat down for.",
  "There's an appointment at 3pm, so the whole day before it goes into waiting mode. Nothing else can start either.",
  "You can start instantly when someone else needs it. For your own things, the ignition simply isn't there.",
  "Nothing moves until the deadline panic arrives. Then everything moves at once, at a cost you feel for days.",
  "You look productive. You're often genuinely busy. The one thing that actually matters is the one thing untouched.",
];

const TiRecognition = () => (
  <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]">
          The many shapes of not starting.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often when initiation is the mechanism underneath.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {TI_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">
          None of this is a discipline problem. Starting runs on specific machinery, that machinery works differently with ADHD, and every one of these patterns has an explanation below.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 4: The critical window ---------------- */

const TiWindow = () => (
  <Section id="window" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the moment</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 failure happens in seconds, not in the plan.
        </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 finding that changes where help should aim. Studies tracking people in real time found that avoidant automatic thoughts, the "not now", "I'll do it after this", believable-in-the-moment delay stories, occur in the few seconds before action, not during planning.
          </p>
          <p>
            Many failures to start aren't planning failures at all. The plan was clear, the task was understood, the intention was sincere. The collapse happens in a very short window right at the point of performance, when a plausible reason to delay arrives and gets accepted before reasoning has a chance to object.
          </p>
          <p>
            This is exactly where most productivity advice doesn't reach. Better goals, better breakdowns and better schedules all target the planning stage. The ADHD starting problem lives downstream of all of them, in a moment most tools never touch.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 5: Why it happens (4 blocks) ---------------- */

const TiWhy = () => (
  <Section id="why" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the mechanism</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Four things standing between you and starting.
        </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">There's no reward signal yet</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 brains discount distant rewards steeply, and most tasks only pay off at the end.</span> Research links delay cues in ADHD to activation in brain regions associated with threat and effortful control: waiting for a payoff isn't just unmotivating, it can be genuinely aversive. The full mechanism is covered in <a href="/adhd/motivation-and-reward-with-adhd/" className={TI_LINK}>motivation and reward</a>.
          </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">The task never surfaces at a usable moment</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">Prospective memory, remembering to act on an intention at the right time, partially explains the ADHD link with delay.</span> Some portion of not starting is the intention simply failing to arrive in consciousness when action was possible. More on this in <a href="/adhd/working-memory-with-adhd/" className={TI_LINK}>working memory</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">A feeling is guarding the door</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 a task has dread, boredom or anticipated failure attached, the block is emotional, not informational.</span> People are often not unmotivated but actively escaping a task that feels likely to expose failure. <a href="/adhd/emotional-dysregulation-with-adhd/" className={TI_LINK}>Emotional dysregulation</a> turns that guard up loud, and <a href="/adhd/shame-spiral-with-adhd/" className={TI_LINK}>each avoided day adds shame that makes the door heavier</a>.
          </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">The gatekeeper thought</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">"If I can't do it properly, there's no point starting" is <a href="/adhd/all-or-nothing-thinking-with-adhd/" className={TI_LINK}>all-or-nothing thinking</a> working as a bouncer.</span> Not starting quietly protects the version of the task that could still have been perfect.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          These four rarely operate alone. A typical stuck task has two or three of them stacked, which is why no single trick reliably unsticks everything.
        </p>
      </div>
    </Container>
  </Section>
);

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

const TiReframe = () => (
  <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]">
          Waiting to feel ready has the order backwards.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
          <p>
            Most people wait for motivation to arrive, then start. It's a reasonable strategy for brains where importance generates drive. With ADHD, it fails on a loop, because the feeling of readiness mostly doesn't arrive in advance. It arrives after.
          </p>
          <p>
            Momentum with ADHD is usually generated by contact with the task, not before it. The first two minutes of doing something produce the engagement that the previous two weeks of thinking about it never could. Which means the practical question was never "how do I feel ready?" It's "how do I make the first contact small enough to happen without readiness?"
          </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">
          You don't need momentum to start. Starting is how the momentum happens.
        </blockquote>
      </figure>

      <div className="mt-10 max-w-prose text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          It's also why the deadline sprint works: <a href="/adhd/feel-less-overwhelmed-with-adhd/" className={TI_LINK}>urgency substitutes for readiness</a>. But urgency is an expensive fuel with a documented crash, and <a href="/adhd/recover-from-adhd-burnout/" className={TI_LINK}>relying on it long-term is one of the roads into burnout</a>. The alternative isn't more discipline. It's engineering the start so it doesn't need either panic or readiness.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Section 7: What helps (6 blocks + closing note) ---------------- */

const TiWhatHelps = () => (
  <Section id="help" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Working with it</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Engineer the start. Don't wait for it.
        </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">Make the first step almost embarrassingly small</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">Not "write the report". Open the document and write one sentence.</span> The step should be small enough that starting costs less than continuing to avoid it, because completion generates the reward signal that anticipation couldn't.
          </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">Lower the emotional stakes on purpose</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">Give the first attempt explicit permission to be bad.</span> Since dread and anticipated judgement are load-bearing parts of the block, "a rough version, just for me" removes more friction than any amount of scheduling.
          </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">Let the prompt come to you</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 task that surfaces at a moment you can act beats a task waiting patiently on a list.</span> This works with the prospective memory problem instead of against it.
          </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 another person's presence</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 href="/adhd/body-doubling-with-adhd/" className={TI_LINK}>Body doubling</a> is one of the most consistently reported aids for starting, though not universal.</span> One honest caveat from community experience: arranging a session is itself a task that can be procrastinated, so the lowest-coordination version is the one that survives.
          </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">Borrow urgency in safe doses</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">Tell someone what you're about to do and when.</span> A stated micro-deadline to another human creates mild, non-catastrophic pressure that does what the distant deadline couldn't.
          </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">Protect the one task that matters</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">"Busy" and "moving the important thing" are different states, and ADHD makes them easy to confuse.</span> Researchers call the gap procrastivity: doing genuinely productive other tasks instead of the one that counts. Check for it periodically; it can hide the real problem for months. There's more on this pattern in <a href="/adhd/stop-procrastinating-with-adhd/" className={TI_LINK}>procrastination with ADHD</a>.
          </p>
        </div>
      </div>

      <div className="mt-8 max-w-prose text-[16px] sm:text-[17px] leading-[1.7] text-ink-2 text-pretty">
        <p>
          One more honest note. Medication improves core symptoms for many adults, but it doesn't decide what to focus on: community reports describe becoming highly focused on the wrong thing entirely if the target task wasn't chosen before it took effect. Structure around the moment of starting matters with or without treatment.
        </p>
      </div>
    </Container>
  </Section>
);

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

const TiOpenQuestions = () => (
  <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>
            Initiation research is still assembling its picture. Earlier work pointed most strongly at inattention, while newer studies highlight delay sensitivity, perceived task value and emotion regulation as at least equally important, and these findings describe different facets of the same pattern rather than replacing each other.
          </p>
          <p>
            Much of the evidence is also self-reported, cross-sectional and drawn heavily from student populations, which limits how confidently it generalises. And the outcomes people care about most, whether the important thing actually got started this week, remain measured far less often than symptom scores. Body doubling, despite strong community enthusiasm, still has limited formal research behind it.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const TiBottomLine = () => (
  <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]">
          The block was never at the knowing stage.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Task initiation with ADHD fails in a narrow window at the point of performance, where a reward that hasn't arrived, an intention that didn't surface, a feeling guarding the door and a perfectionist gatekeeper can all stack against a single small action. Knowing what to do was never the problem, and trying harder aims at the wrong stage entirely.
          </p>
          <p>
            What helps is engineering the start: a first step too small to refuse, stakes lowered in advance, prompts that arrive at usable moments, presence and mild accountability borrowed from outside, and an honest eye on whether the thing that matters is actually moving. Readiness isn't required. Contact is.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const TiFinalCTA = () => (
  <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>Contact, not readiness</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]">
            One small start, today.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Loops is a daily coaching app built around the moment of starting. It turns your goals into specific, doable first steps, brings it to you at the right moment, and makes the way in small enough that readiness is optional.
          </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 TiApp() {
  return (
    <main id="main">
      <TiNav />
      <TiHero />
      <TiBasics />
      <TiRecognition />
      <TiWindow />
      <TiWhy />
      <TiReframe />
      <TiWhatHelps />
      <TiOpenQuestions />
      <TiBottomLine />
      <TiFinalCTA />
      <Footer />
    </main>
  );
}

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