/* Loops — "Build Routines That Survive Bad Days With ADHD" use-case page
   Shame/identity guardrails: "You can do this" appears once (recognition close), every
   mechanism framed structurally, identity threat named + rebutted, imperfection is the promise.
   Unique section: the bad day mode reframe. */

/* ---------------- Page nav (links back to the homepage) ---------------- */

const RTN_NAV_LINKS = [
  { label: "Why it happens", href: "#why" },
  { label: "How it works", href: "#how" },
  { label: "Questions", href: "#faq" },
  { label: "For ADHD", href: "/adhd/#directory" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const RtnNav = () => {
  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">
            {RTN_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="#start">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">
              {RTN_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="#start" onClick={() => setOpen(false)}>Get Early Access</Button>
              <Button variant="secondary" size="md" href="/" onClick={() => setOpen(false)}>Back to home</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

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

const RTN_HERO_BLOCKS = [
  {
    title: "Built for bad days",
    body: "A routine designed to survive interruptions, not pretend they won't happen.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793z"/></svg>),
  },
  {
    title: "Come back without shame",
    body: "One miss isn't the end. Loops gives you a way back in that's smaller than starting over.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg>),
  },
  {
    title: "Build something that lasts",
    body: "Six months from now, still running. Imperfectly. Still there.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z"/></svg>),
  },
];

const RtnHero = () => (
  <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-16 lg:pb-24">
      <div className="mx-auto max-w-3xl text-center">
        <div className="mb-7 flex justify-center fade-in-up">
          <span className="gradient-ring inline-flex items-center bg-white px-4 py-2 shadow-soft">
            <span className="text-[13px] sm:text-[13.5px] font-semibold text-ink">Designed for ADHD. Works for everyone.</span>
          </span>
        </div>

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[54px] fade-in-up delay-1">
          You can build a routine. You just can't survive the first bad day.
        </h1>

        <p className="mx-auto mt-7 max-w-2xl text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
          It's not a consistency problem. For many people with ADHD, the routine itself is fine. It's what happens after one missed day that ends everything.
        </p>

        <p className="mx-auto mt-4 max-w-2xl text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-2">
          Loops is a daily coaching app for people with ADHD. It gives you small daily actions, an easy way back in after a miss, and, if you want it, <span className="text-ink font-medium">one person who's glad when you show up.</span>
        </p>

        <div className="mt-9 flex flex-col items-center gap-3 fade-in-up delay-3">
          <Button variant="primary" size="lg" href="#start">
            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>

      {/* Three icon blocks */}
      <p className="mt-14 lg:mt-16 text-center text-[12px] font-semibold uppercase tracking-[0.14em] text-brand-deep fade-in-up delay-4">Three things Loops does for you</p>
      <div className="mx-auto mt-6 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {RTN_HERO_BLOCKS.map((b) => (
          <div key={b.title} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex h-11 w-11 items-center justify-center rounded-tile bg-brand-soft text-brand">
              {b.icon}
            </div>
            <h3 className="mt-5 text-[16.5px] font-semibold tracking-tight2 text-ink">{b.title}</h3>
            <p className="mt-2 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{b.body}</p>
          </div>
        ))}
      </div>

      <p className="mt-8 text-center text-[14px] text-ink-3 text-pretty mx-auto max-w-xl fade-in-up delay-4">Loops is a daily coaching app for people with ADHD.</p>
    </Container>
  </section>
);

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

const RtnWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
        <div className="lg:order-1 flex justify-center"><LoopsGalleryPhone /></div>
        <div className="max-w-prose lg:order-2">
        <Kicker>How Loops helps</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 system that plans for the bad days, not around them.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most routine advice assumes the problem is finding the right system. Loops assumes the problem is what happens to any system the first time life goes sideways.
          </p>
          <p>
            Loops gives you small daily actions, a way back in after a miss, and coaching through the moments when the routine usually breaks for good. It's not built for perfect weeks. It's built to survive the imperfect ones.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person who sees you doing it.</span> More on that just below.
          </p>
        </div>
        <div className="mt-8">
          <Button variant="primary" size="md" href="#start">Get Early Access</Button>
        </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Recognition (6 cards) ---------------- */

const RTN_RECOGNITION = [
  "You had a great streak going. Then one bad day broke it. Now you can't restart, and you're not entirely sure why.",
  "Missing one day feels like missing a week. The longer you leave it, the harder restarting becomes.",
  "You've tried habit trackers, planners, apps, spreadsheets. They work for about two weeks. Then maintaining the system becomes the thing you're avoiding.",
  "The routine felt natural when you built it. After a break, it feels like starting from scratch, even though nothing actually changed.",
  "You know exactly what you need to do. On a bad day, you can't make yourself do any of it. Even the easy parts.",
  "You've built and abandoned so many routines that you're starting to wonder if you're just someone who can't do this.",
];

const RtnRecognition = () => (
  <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]">
          You're not alone in this.
        </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 it comes to building routines.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {RTN_RECOGNITION.map((t, i) => (
          <article key={i} className="card-hover flex gap-4 rounded-card border border-line bg-white p-6">
            <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">
          <span className="font-semibold text-ink">You can do this.</span> The routines haven't failed because of you. They've failed because they weren't designed to survive the kind of days ADHD creates.
        </p>
      </div>

      <div className="mt-8">
        <Button variant="primary" size="md" href="#start">Get Early Access</Button>
      </div>
    </Container>
  </Section>
);

/* ---------------- Why it keeps happening (5 patterns) ---------------- */

const RTN_PATTERNS = [
  { title: "The all-or-nothing collapse", body: "One missed day becomes proof that the whole routine is over. ADHD's poor temporal tracking makes it hard to contextualise a single miss. It doesn't feel like one skipped day. It feels like failure." },
  { title: "The back-to-zero spiral", body: "Shame after a miss makes the next attempt harder, not easier. The emotional weight of a broken routine builds with every day it stays broken, until restarting feels more daunting than the routine ever did." },
  { title: "The novelty fade", body: "The routine that felt energising in week one starts to feel punishing by week three. ADHD brains crave novelty and immediate reward. Once the dopamine boost of a new habit fades, the repetition itself becomes a source of low-grade aversion." },
  { title: "The rigid tool trap", body: "The system you built to help you gets abandoned the first time you can't maintain it. Planners, habit trackers, and apps add a layer of complexity that requires its own consistency. When the routine breaks, so does the tool, and now there are two things to restart." },
  { title: "The bad day amplifier", body: "On a low-energy day, even the simplest parts of a routine feel impossible. ADHD involves real fluctuations in arousal, working memory, and frustration tolerance. A bad day doesn't just make things harder. It changes what the brain can do." },
];

const RtnWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not about willpower. It's about how ADHD changes what a bad day costs.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Routines fail for ADHD brains through a specific set of compounding mechanisms. Each one makes the next harder. Understanding them matters because each requires a different solution.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {RTN_PATTERNS.map((p, i) => (
          <li key={p.title} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex flex-col gap-4 sm:flex-row sm:gap-7">
              <span className="text-[40px] font-semibold tracking-tight3 text-brand-deep tnum leading-none sm:w-16 sm:shrink-0">{String(i + 1).padStart(2, "0")}</span>
              <div className="max-w-prose">
                <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">{p.title}</h3>
                <p className="mt-2.5 text-[15.5px] sm:text-[16px] leading-[1.65] text-ink-2 text-pretty">{p.body}</p>
              </div>
            </div>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">Loops is designed around all five of these failure points, so a bad day doesn't have to become the end of the routine.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the bad day mode reframe ---------------- */

const RtnReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>A different way to think about routines</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          A routine that only works on good days isn't a routine. It's a plan.
        </h2>
      </div>
      <div className="mx-auto mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          Most routine advice is written for brains where motivation is stable and disruption is the exception. For ADHD brains, it's the other way around. Disruption is expected. Variability is the baseline.
        </p>
        <p className="text-ink font-medium">
          This means a routine built for perfect conditions will always eventually break. A routine built for ADHD needs a different setting built into it from the start: one small action for the bad days, with no pressure to do more. Not a fallback. Not a compromise. The actual design.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- The part most apps miss (being seen) ---------------- */

const RTN_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you come back after a missed day, they see that too, and it's genuinely no big deal. They just get to see you keep showing up, and cheer you on." },
  { t: "They don't watch your streak", b: "They're not there to point out the day you missed. They don't nag, they don't manage you, they don't even pay. Their side is light on purpose." },
  { t: "You're always in control", b: "You choose who it is. You decide exactly what they can see, and you can change it any time." },
  { t: "Coming back gets easier", b: "When coming back feels harder than it should, one person who's glad you did makes it easier." },
];

const RtnWhyLoopsWorks = () => (
  <Section id="being-seen" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The part most apps miss</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Brains finish for people, not for apps.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>A routine you keep to yourself is a routine only you will miss. When one bad day breaks it, there's nobody to notice, and nobody to come back for, so it's quietly easier to let the whole thing go.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, whoever feels safe. When you close a loop, they see it. When you come back after a missed day, they see that too, and it's genuinely no big deal. You decide exactly what they can see, and you can change it any time.</p>
          <p><span className="text-ink font-medium">This is the step most people skip with other apps. It's also the one that makes Loops work.</span></p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {RTN_WITNESS_CARDS.map((c) => (
          <article key={c.t} 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">{c.t}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.b}</p>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          You can start on your own if you'd rather. It still works. It just works better when someone can see you.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- How it works (5 steps) ---------------- */

const RTN_STEPS = [
  { t: "Tell Loops what you're working on", b: "Name your routine goal in plain language. Morning structure, evening wind-down, exercise, anything you keep losing after a bad week. No categories, no setup that takes twenty minutes." },
  { t: "Choose your person, if you want one", b: "Pick one person you trust to see your progress. You decide exactly what they can see, and you can change it any time. It's not another thing to manage: they simply see what you already do. This is the step most people skip with other apps, and the one that makes Loops work. It's entirely optional. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Each day, Loops gives you specific, low-friction things to do. On harder days, it's smaller. The goal is always to give your brain something it can actually do today, not the ideal version of today. Close the loop, and your person sees it." },
  { t: "Get coached back in after a miss", b: "Missed a day? Loops gives you a clear, calm step back in. Not a reset. Not a reminder of the streak you broke. Just the next smallest thing." },
  { t: "Build something that survives", b: "Over time, a routine that keeps restarting becomes a routine that's still running. That's the goal." },
];

const RtnHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          One thing, every day. Even on the hard ones.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to rebuild your routine from scratch. You need something that survives the days when you can't.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {RTN_STEPS.map((s, i) => (
          <li key={s.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center rounded-pill bg-brand text-white text-[14px] font-bold tnum shadow-cta">{i + 1}</span>
              <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-brand-deep">Step {i + 1}</span>
            </div>
            <h3 className="mt-4 text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{s.t}</h3>
            <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.b}</p>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need a good week to start. One action on a bad day is enough.
      </p>
    </Container>
  </Section>
);

/* ---------------- What's inside Loops (5 parts) ---------------- */

const RTN_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "Your routine goal, described your way: a morning structure, an evening wind-down, exercise, whatever you keep losing after a bad week. No categories. Just a clear picture of what you're building, so it's easy to come back to." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose. On harder days it gets smaller, never a rule to break. Some run every day, some a few times a week: make the bed, ten minutes of tidying, lights out around the same time. A few connect to your routine. Others are just life, like taking your meds before breakfast. Miss one and nothing is wiped out. The next action is still there, still small, and designed to be the easiest way back in." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the times you come back after a miss. It's not another thing to manage, they simply see what you already do. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: the first time you came back the very next day, a month where the routine survived a bad week, six months of it still running. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows what you're building and where your routines tend to break, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there the morning after a missed day, with the smallest possible way back in, not a reminder of the streak you broke." },
];

const RtnWhatsInside = () => (
  <Section id="inside" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>What's inside Loops</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Five simple things, working together.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {RTN_WHATS_INSIDE.map((p, i) => (
          <article key={p.t} 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">{String(i + 1).padStart(2, "0")}</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>
);

/* ---------------- Social proof ---------------- */

const RTN_TESTIMONIALS = [
  { quote: "I'd built and abandoned probably twelve routines in two years. The problem was always the same: one bad day and I couldn't get back in. Loops was the first thing that gave me something to come back to that didn't feel like starting over.", who: "Secondary school teacher", meta: "Diagnosed with ADHD at 35" },
  { quote: "The habit tracker was making it worse. Every time I looked at the broken streak I felt worse, not more motivated. Loops doesn't do that. It just asks what I can do today.", who: "Freelance developer", meta: "Using Loops for 9 weeks" },
  { quote: "I've had my morning routine for four months now. It's not perfect. I've missed plenty of days. It's still there when I come back.", who: "Marketing manager, Leeds", meta: null },
];

const RtnSocialProof = () => (
  <Section id="stories" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What people say</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          From people who recognise themselves in this.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {RTN_TESTIMONIALS.map((t, i) => (
          <figure key={i} className="flex h-full flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="text-brand/30">
              <path d="M10 7c-3 0-5 2-5 5v5h5v-5H7c0-2 1.5-3 3-3V7Zm9 0c-3 0-5 2-5 5v5h5v-5h-3c0-2 1.5-3 3-3V7Z" fill="currentColor" />
            </svg>
            <blockquote className="mt-4 flex-1 text-[15.5px] sm:text-[16px] leading-[1.65] text-ink text-pretty">{t.quote}</blockquote>
            <figcaption className="mt-5 border-t border-line pt-4">
              <div className="text-[14px] font-semibold text-ink">{t.who}</div>
              {t.meta ? <div className="mt-0.5 text-[13px] text-ink-3">{t.meta}</div> : null}
            </figcaption>
          </figure>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- Pricing ---------------- */

const RTN_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the routine.", featured: false },
  { name: "Duo", price: "\u00A312.99", per: "/mo", tag: "The one we'd pick", blurb: "Everything, for two. You and your person, both with the full app, on one bill. Three pounds more than going alone, for the thing that makes it work.", featured: true },
];

const RtnPricing = () => (
  <Section id="pricing" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Pricing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Better with your person. Built for it.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {RTN_PRICING.map((p) => (
          <article key={p.name} className={`relative flex flex-col rounded-card border bg-white p-6 sm:p-7 ${p.featured ? "border-brand shadow-card ring-1 ring-brand/20" : "border-line shadow-soft"}`}>
            {p.tag ? <span className="absolute -top-3 left-6 rounded-pill bg-brand px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-white shadow-cta">{p.tag}</span> : null}
            <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
            <div className="mt-3 flex items-baseline gap-1">
              <span className="text-[32px] font-bold tracking-tight3 text-ink tnum">{p.price}</span>
              <span className="text-[15px] text-ink-3">{p.per}</span>
            </div>
            <p className="mt-4 flex-1 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{p.blurb}</p>
            <div className="mt-6">
              <Button variant={p.featured ? "primary" : "secondary"} size="md" href="#start">Get Early Access</Button>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-white p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          <span className="font-semibold text-ink">Prefer to pay yearly?</span> A year of it, together, with two months free. Every plan starts with a 7-day free trial. On iOS for now.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Objections (5, incl. unique abandonment) ---------------- */

const RTN_OBJECTIONS = [
  { q: "\u201CI've tried building routines before. They always break.\u201D", a: "That's exactly the pattern Loops is built for. The routines you've tried weren't wrong. They just weren't designed to survive the kind of days ADHD creates. Loops is." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", a: "No. Solo works perfectly well on its own. But most people find it works better when one person can see them, and because it's just a view of what you already do, it never becomes another thing to manage. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI just need more discipline.\u201D", a: "Discipline isn't the gap. Design is. Research on ADHD consistently shows that when routines fail, it's rarely because of commitment. It's because the system demands stable motivation that ADHD doesn't reliably supply." },
  { q: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns here feel familiar. If that's you, Loops is built for you." },
  { q: "\u201CWon't I just abandon Loops the way I've abandoned everything else?\u201D", a: "Loops is designed for exactly that risk. One daily action. No streak to protect. No elaborate system to maintain. If you miss a week, the next action is still there, still small, and designed to be the easiest possible step back in." },
];

const RtnObjections = () => (
  <Section id="objections" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>A few things worth knowing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Common questions before you start
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {RTN_OBJECTIONS.map((o) => (
          <article key={o.q} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">{o.q}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{o.a}</p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- FAQ accordion ---------------- */

const RTN_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. It combines personalised coaching, daily micro-actions, one person who sees your progress, and accountability in one system. For routines specifically, it helps with consistency, recovery after missed days, and building something that doesn't collapse the first time life goes sideways." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see your progress: the loops you close and the times you come back after a miss. It's not another thing to manage, they simply see what you already do. They don't watch your streak or point out the day you missed. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with building routines if you have ADHD?", a: "It gives you one low-friction action each day, adapted to what you can actually manage today. It also gives you a calm, practical way back in after a miss, so a bad day doesn't have to become a bad week." },
  { q: "Why do routines keep failing with ADHD?", a: "The mechanisms are specific. ADHD involves real fluctuations in arousal, motivation, and frustration tolerance. One missed day triggers shame, which makes restarting harder. The novelty of a new routine fades and the repetition starts to feel punishing. And the tools built to help often require their own maintenance. None of this is about commitment." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "What's the difference between Loops and a habit tracker?", a: "Habit trackers record what you do or don't do. Loops coaches you through the moments when you're not doing it. A tracker shows you a broken streak. Loops gives you the next step after one." },
  { q: "What if I have a terrible month and fall off everything?", a: "That's built into the design. Loops doesn't treat a terrible month as a reason to start over from scratch. The next daily action is still there, calibrated to be the smallest useful step back in." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "How long before a routine actually sticks?", a: "There's no fixed answer, because sticking isn't a single moment. It's a pattern of restarting. Most people notice the restarts getting easier within the first few weeks. The routine becoming genuinely durable usually takes longer, and Loops is designed to make that achievable rather than aspirational." },
];

const RtnFAQItem = ({ q, a, defaultOpen }) => (
  <details open={defaultOpen} className="group rounded-card border border-line bg-white shadow-soft transition-colors hover:border-muted open:border-muted">
    <summary className="focus-ring flex items-start gap-4 rounded-card px-6 py-5 sm:px-7 sm:py-6 list-none">
      <span className="flex-1 text-[16px] sm:text-[17px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">{q}</span>
      <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-pill bg-soft text-ink-2 transition-transform duration-200 group-open:rotate-45 group-open:bg-brand-soft group-open:text-brand">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /></svg>
      </span>
    </summary>
    <div className="px-6 sm:px-7 pb-6 -mt-1">
      <p className="max-w-prose text-[15.5px] sm:text-[16px] leading-[1.65] text-ink-2 text-pretty">{a}</p>
    </div>
  </details>
);

const RtnFAQ = () => (
  <Section id="faq" className="bg-soft">
    <Container>
      <div className="grid gap-10 lg:gap-16 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <Kicker>FAQ</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
            Questions people often ask
          </h2>
          <p className="mt-5 text-[16px] leading-[1.65] text-ink-2 max-w-md">
            Still wondering if Loops fits how your brain works? <a href="/contact/" className="text-brand-deep font-semibold hover:underline">Contact us</a>. A real person will reply.
          </p>
        </div>
        <div className="lg:col-span-8 flex flex-col gap-3">
          {RTN_FAQS.map((f, i) => <RtnFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const RtnFinalCTA = () => (
  <Section id="start" className="bg-base">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>Still running, six months on</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]">
            Six months from now, still running.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not perfectly. Not without bad days. Still there when you come back, and, if you want, one person there when you do.
          </p>
          <div className="mt-8 flex flex-col items-center gap-3">
            <Button variant="primary" size="lg" href="#start">
              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>
      </div>
    </Container>
  </Section>
);

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

const RTN_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87" },
  { t: "Recommendations | ADHD diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Non-pharmacological interventions — Australian ADHD Clinical Practice Guideline", u: "https://adhdguideline.aadpa.com.au/non-pharmacological/" },
  { t: "The Important Role of Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "Time Perception is a Focal Symptom of Attention-Deficit Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC8293837/" },
  { t: "Emotional Dysregulation and Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" },
  { t: "ADHD as a Circadian Rhythm Disorder: Evidence and Debate — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12728042/" },
  { t: "Delay Aversion and Executive Functioning in Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC6209856/" },
  { t: "The Lived Experiences of Adults With Attention-Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36032220/" },
  { t: "My Life Is Falling Apart. Please Give Me Apps That Actually Help — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1cv6zhj/my_life_is_falling_apart_please_give_me_apps_that/" },
  { t: "Anybody Here Using Tiimo (Visual Planner App)? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/q80kld/anybody_here_using_tiimo_visual_planner_app_and/" },
  { t: "Do You Like Routine But Also Hate It? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1do66tq/do_you_like_routine_but_also_hate_it/" },
  { t: "An Investigation of Body Doubling With Neurodivergent Users — ACM", u: "https://dl.acm.org/doi/full/10.1145/3689648" },
  { t: "Benefits and Harms of ADHD Interventions: An Umbrella Review — BMJ", u: "https://www.bmj.com/content/391/bmj-2025-085875" },
  { t: "A Meta-Analysis of the Intervention Effect of Cognitive-Behavioural Therapy — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/41483880/" },
  { t: "ADHD Coaching — Australian ADHD Clinical Practice Guideline", u: "https://adhdguideline.aadpa.com.au/non-pharmacological/adhd-coaching/" },
  { t: "Don't Buy That Planner, You Know You Won't Use It — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/18smcln/dont_buy_that_planner_you_know_you_wont_use_it_if/" },
  { t: "Complex Prospective Memory in Adults With Attention Deficit Hyperactivity Disorder — PLOS ONE", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0058338" },
  { t: "The Relationship Between Organization in Time, Executive Function and Quality of Life — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/41440058/" },
  { t: "Experiences of Criticism in Adults With ADHD: A Qualitative Study — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/35180241/" },
  { t: "Coaching for Adults With ADHD: A Prospective Study — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/41909194/" },
];

const RtnSources = () => (
  <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 this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on ADHD clinical guidelines, research into executive function, time perception and emotional regulation, and real accounts from people who've built a routine before and watched it collapse. Here's where it comes from.
        </p>
      </div>

      <ol className="mt-10 grid gap-x-8 gap-y-0 sm:grid-cols-2">
        {RTN_SOURCES.map((s, i) => (
          <li key={i} className="flex gap-3.5 border-t border-line py-3.5">
            <span aria-hidden="true" className="mt-0.5 text-[12px] font-semibold text-ink-3 tnum tabular-nums w-5 shrink-0">{String(i + 1).padStart(2, "0")}</span>
            <a href={s.u} target="_blank" rel="noopener noreferrer" className="focus-ring rounded-md text-[13.5px] leading-[1.55] text-ink-2 hover:text-brand-deep hover:underline text-pretty transition-colors">{s.t}</a>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[13px] leading-[1.6] text-ink-3 text-pretty">
        Loops is a daily coaching app, not a medical or clinical service. These sources inform how we think about ADHD and routines; they are not an endorsement of Loops by their authors.
      </p>
    </Container>
  </Section>
);

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

function RtnApp() {
  return (
    <main id="main">
      <RtnNav />
      <RtnHero />
      <RtnWhatLoopsDoes />
      <RtnRecognition />
      <RtnWhyItHappens />
      <RtnReframe />
      <RtnWhyLoopsWorks />
      <RtnHowItWorks />
      <RtnWhatsInside />
      <RtnSocialProof />
      <LoopsPricing bg="bg-soft" />
      <RtnObjections />
      <RtnFAQ />
      <RtnFinalCTA />
      <RtnSources />
      <Footer />
    </main>
  );
}

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