/* Loops — "Recover and Sleep Better With ADHD" use-case page
   Wellbeing guardrails: no health-outcome promises, no supplement/medication advice,
   GP signpost in objections + FAQ, sleep framed as a management target not a cure. */

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

const SLP_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 SlpNav = () => {
  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">
            {SLP_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">
              {SLP_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 SLP_HERO_BLOCKS = [
  {
    title: "Wind down without willpower",
    body: "A step-down system that does the transitioning for you.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.5 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/></svg>),
  },
  {
    title: "Wake up more consistently",
    body: "Morning activation built around how ADHD brains actually start.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/></svg>),
  },
  {
    title: "Recover without shame",
    body: "A bad night isn't a failure. It's a starting point.",
    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>),
  },
];

const SlpHero = () => (
  <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-[56px] fade-in-up delay-1">
          You know all the sleep rules. You still wake up wrecked.
        </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 knowledge problem. For people with ADHD, sleep fails for reasons that sleep hygiene advice was never built to fix.
        </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 a small wind-down step, a gentler morning, a way back after a bad night, and, if you want it, <span className="text-ink font-medium">one person quietly in your corner.</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">
        {SLP_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 SlpWhatLoopsDoes = () => (
  <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 works with your sleep, not against it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most sleep advice assumes the problem is information. Loops assumes the problem is structure, because for ADHD brains, knowing what to do and being able to do it at 11pm are two completely different things.
          </p>
          <p>
            Loops gives you small actions each day, like a wind-down prompt, a morning anchor, a recovery step after a bad night. Over time, those moments build into a system that doesn't depend on perfect nights.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person who gently 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 SLP_RECOGNITION = [
  "You know you should go to bed. But something always pulls you back, a video, a scroll, a thought, and suddenly it's two hours later.",
  "You set multiple alarms. You turn them off in your sleep without any memory of doing it.",
  "You've tried the bedtime routines, the supplements, the apps. They work for a week. Then they stop.",
  "After a bad night, the next day is so much harder. Then the next night is harder too. It compounds.",
  "You feel most awake and alive at 10pm. The whole world expects you to be unconscious by then.",
  "You're embarrassed to talk about it. Sleep is supposed to be the easy part.",
];

const SlpRecognition = () => (
  <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 sleep.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {SLP_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">
          None of this means you're doing it wrong. It means you need a system built for how your brain actually works at night.
        </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 SLP_PATTERNS = [
  { title: "The transition problem", body: "Getting into bed is an executive function task, not just a tiredness signal. ADHD affects the ability to disengage from stimulation, especially in the evening when self-regulation is at its lowest point." },
  { title: "The body clock mismatch", body: "Many people with ADHD have a naturally later body clock, not a bad habit. Research consistently finds delayed sleep timing in adults with ADHD, meaning \u201Cjust go to bed earlier\u201D is often biologically mismatched advice." },
  { title: "The stress and overload loop", body: "A hard day doesn't stay in the day. It follows you to bed. Adults with ADHD show higher sleep reactivity, stress disrupts sleep more intensely and more reliably than it does for people without ADHD." },
  { title: "The morning collapse", body: "Waking up is its own executive function challenge, separate from sleep itself. Sleep inertia, time blindness, and high cortisol demand make mornings feel disproportionately brutal, even after a reasonable night." },
  { title: "The recovery spiral", body: "One bad night makes the next one harder. The shame makes it harder still. Repeated sleep failure builds a conditioned dread of bedtime that sustains the problem even when the original cause has passed." },
];

const SlpWhyItHappens = () => (
  <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 a willpower problem. It's a systems problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Sleep for people with ADHD involves several compounding difficulties that standard advice doesn't address. Each one makes the next harder.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {SLP_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 built around all five of these failure points, not just one.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Body clock reframe (unique to this page) ---------------- */

const SlpBodyClock = () => (
  <Section id="bodyclock" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing before you try anything else</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]">
          You might be solving the wrong problem.
        </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>
          There's a difference between not being able to sleep and not being able to sleep early. A significant proportion of adults with ADHD have a biological tendency toward later sleep, a real, measurable difference in when the body is ready to wind down.
        </p>
        <p className="text-ink font-medium">
          For those people, the standard advice doesn't fail because of poor effort. It fails because it's treating a body-clock problem as though it's a bedtime-discipline problem. Understanding which one applies to you changes everything about what to try next. A doctor or sleep specialist can help you work out which it is.
        </p>
      </div>
    </Container>
  </Section>
);

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

const SLP_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, a wind-down step, a morning anchor, they see it. After a bad night, they see you pick it back up, and it's no big deal. They just get to see you keep showing up, and cheer you on." },
  { t: "They don't police your bedtime", b: "They don't nag, they don't manage you, they don't even pay. They're not there to check when you fell asleep. 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: "Quiet company helps", b: "For something you may never have talked about with anyone, one person quietly in your corner helps more than you'd think." },
];

const SlpWhyLoopsWorks = () => (
  <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>Sleep is a strange thing to keep failing at alone. It happens in private, it's the one thing everyone assumes is easy, and that makes it the easiest to quietly give up on.</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. After a bad night, they see you pick it back up, and it's 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">
        {SLP_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">
          And if this feels too private to share, that's completely fine. Solo works on its own, and you can keep everything to yourself. Your person is there for if and when you want it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const SLP_STEPS = [
  { t: "Tell Loops what you're working on", b: "Set your sleep goal in plain language, winding down earlier, waking more consistently, recovering after bad nights. No forms. No jargon." },
  { 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, so it can be as much or as little as you like. This is the step most people skip with other apps, and the one that makes Loops work. It's entirely optional, and because sleep can feel private, you can keep everything to yourself. 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. It takes a few minutes. It's designed for how ADHD brains work at the end of a real day. Close the loop, and your person sees it." },
  { t: "Get coaching when things go wrong", b: "Bad night? Loops gives you a practical step for the next day, not a reset from scratch. The system is built to survive the nights you expected it to." },
  { t: "Build something that lasts", b: "Over time, small consistent actions become a pattern your brain can lean on. Not a perfect routine. A real one." },
];

const SlpHowItWorks = () => (
  <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]">
          Simple from the first day.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to fix everything at once. Loops starts where you are.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {SLP_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. You just need today.
      </p>
    </Container>
  </Section>
);

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

const SLP_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "What you're working on, described your way: winding down earlier, waking more consistently, recovering after bad nights. Not a target number of hours. Just a clear sense of what better looks like for you, so your brain can hold on to it." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose. Gentle and doable. Some run every day, some a few times a week: a wind-down prompt an hour before bed, a morning anchor when you wake, put your phone across the room. A few connect to your sleep goal. Others are just life, like taking your meds before breakfast. A missed one doesn't wipe you out. You can pick it back up simply by showing up again." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the mornings you got up. You decide what they see, so it can be as much or as little as you like. Support, without the nagging or the policing. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something kind for the moments that matter: a week of doing your wind-down, the morning you got up on the first try, a bad night you recovered from instead of spiralling. 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 working on and where your nights and mornings tend to go wrong, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 11pm, when you know you should wind down and something keeps pulling you back." },
];

const SlpWhatsInside = () => (
  <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">
        {SLP_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 SLP_TESTIMONIALS = [
  { quote: "I had tried every sleep hygiene tip and tracked my sleep with three different apps. Loops was the first thing that didn't make me feel like the problem was me. The morning prompts especially, small, but they actually helped me start.", who: "Marketing coordinator", meta: "Diagnosed with ADHD at 29" },
  { quote: "The wind-down step was so small I almost didn't bother. Four weeks later I was getting into bed an hour earlier than before. I didn't expect that.", who: "Freelance designer", meta: "Using Loops for 6 weeks" },
  { quote: "I'd woken up late and felt awful about it for years. Loops helped me understand the mornings were their own problem to solve, not just evidence that I'd failed the night before.", who: "Teacher, London", meta: null },
];

const SlpSocialProof = () => (
  <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">
        {SLP_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 SLP_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you, one night at a time.", 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 SlpPricing = () => (
  <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">
        {SLP_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. GP signpost) ---------------- */

const SlpObjections = () => (
  <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">
        <article 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">&ldquo;I've tried everything. Nothing works.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Most sleep tools aren't built for ADHD brains, and that's not a small difference. Loops is designed specifically for the transition problems, time blindness, and stress reactivity that make standard sleep advice so frustrating to use.</p>
        </article>
        <article 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">&ldquo;Do I have to share my progress with anyone?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">No. Solo works perfectly well on its own, and this can stay completely private. If you'd like someone alongside you, you decide exactly what your person sees, and you can change it any time. You can add them whenever you're ready.</p>
        </article>
        <article 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">&ldquo;What if I'm not diagnosed?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns described here feel familiar. If that's you, Loops is built for you.</p>
        </article>
        <article className="rounded-card border border-brand/25 bg-brand-soft/50 p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;What if there's something medically wrong with my sleep?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">That's worth taking seriously, not dismissing. If you suspect your sleep problems might involve something beyond ADHD, like breathing difficulties or unusual daytime sleepiness, speak with your doctor. Loops isn't a substitute for that conversation, and it won't suggest you don't need one.</p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/support/find-help/">Find help now</Button></div>
        </article>
        <article 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">&ldquo;I can't commit to a new routine right now.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Loops isn't a routine. It's one step. You don't need a settled week to start. One small action on a hard day is exactly what Loops is built for.</p>
        </article>
      </div>
    </Container>
  </Section>
);

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

const SLP_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 progress tracking in one system. For sleep specifically, it helps with wind-down transitions, morning activation, and recovery after bad nights." },
  { 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 mornings you got up. They don't police your bedtime or check when you fell asleep. They just get to see you keep showing up, and cheer you on. You don't have to add one to start, and because sleep can feel private you can keep everything to yourself, 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 sleep if you have ADHD?", a: "It gives you one small, doable action each day, not a full routine to maintain. It also provides coaching when things go off track, so a bad night doesn't have to become a bad week." },
  { q: "Why do people with ADHD struggle with sleep so much?", a: "The barriers usually aren't information, they're structural. Difficulty disengaging from stimulation, a naturally later body clock in many cases, higher stress reactivity, and challenging mornings all compound each other. Standard sleep hygiene advice was designed for none of these." },
  { 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: "Will Loops cure my insomnia?", a: "No, and we'd be dishonest to suggest it could. Loops is a daily coaching system. If you're experiencing significant or long-standing sleep difficulties, speaking with your doctor is a good idea alongside anything else you try.", support: true },
  { q: "How long before I notice a difference?", a: "Many people notice a shift within the first two to three weeks, not dramatic, but real. Building a consistent pattern usually takes longer. Loops is designed to make that consistency achievable, not just aspirational." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "What if I have a bad night and fall off track?", a: "That's built into the design. Loops doesn't treat a missed night as a failure state. The next day's action is still there, and it's still small." },
];

const SlpFAQItem = ({ q, a, support, 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">{support ? <>{a} You can find crisis lines and support by country on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.</> : a}</p>
    </div>
  </details>
);

const SlpFAQ = () => (
  <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">
          {SLP_FAQS.map((f, i) => <SlpFAQItem key={f.q} q={f.q} a={f.a} support={f.support} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const SlpFinalCTA = () => (
  <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>Start small</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 less bad morning is enough to start.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need a perfect night. You need a system that survives the imperfect ones, and it helps to have one person quietly in your corner.
          </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 SLP_SOURCES = [
  { t: "Sleep Problems in Adults With ADHD: Prevalences and Their Relationship With Psychiatric Comorbidity", u: "https://journals.sagepub.com/doi/abs/10.1177/10870547241284477" },
  { t: "Sleep procrastination is real — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/15l98sz/sleep_procrastination_is_real/" },
  { t: "Executive Function Skills — CHADD", u: "https://chadd.org/about-adhd/executive-function-skills/" },
  { t: "Association Between Attention-Deficit/Hyperactivity Disorder and Sleep Impairment — The Journal of Clinical Psychiatry", u: "https://www.psychiatrist.com/jcp/association-between-attention-deficit-hyperactivity-sleep-impairment-adult-large-controlled-study/" },
  { t: "Sleep and Circadian Rhythmicity in Adult ADHD and the Effect of Stimulants — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/23509113/" },
  { t: "Combined impact of ADHD and insomnia symptoms on quality of life, productivity and health care use in the general population — Psychological Medicine", u: "https://www.cambridge.org/core/journals/psychological-medicine/article/combined-impact-of-adhd-and-insomnia-symptoms-on-quality-of-life-productivity-and-health-care-use-in-the-general-population/DBBA3206809833CE59EDB040E03FC488" },
  { t: "Insomnia — Health topics A to Z — NICE CKS", u: "https://cks.nice.org.uk/topics/insomnia/" },
  { t: "Dr Brown's Books — Brown Clinic for Attention and Related Disorders", u: "https://www.brownadhdclinic.com/books-by-dr-brown" },
  { t: "Behavioral and psychological treatments for chronic insomnia disorder in adults: an American Academy of Sleep Medicine clinical guideline", u: "https://www.researchgate.net/publication/346803039_Behavioral_and_psychological_treatments_for_chronic_insomnia_disorder_in_adults_an_American_Academy_of_Sleep_Medicine_clinical_" },
  { t: "The optimal system of care for the management of delayed sleep onset in adult ADHD in the UK: a modified Delphi consensus — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2025.1566390/full" },
  { t: "Do you struggle with sleep inertia too? Any tips? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1hevzo7/do_you_struggle_with_sleep_inertia_too_any_tips/" },
  { t: "Advanced Sleep-Wake Phase Disorder (ASWPD), Delayed Sleep-Wake Phase Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4582061/" },
  { t: "Unraveling the insomnia puzzle: sleep reactivity, attention deficit hyperactivity symptoms and insomnia severity in ADHD patients — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2024.1528979/full" },
  { t: "How do you keep your ‘revenge bedtime procrastination’... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1ip680q/how_do_you_keep_your_revenge_bedtime/" },
  { t: "Sleep, revenge bedtime procrastination and Clonidine — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1icm1lg/sleep_revenge_bedtime_procrastination_and/" },
  { t: "Sleep Procrastination Advice — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1jwi6pb/sleep_procrastination_advice/" },
  { t: "Insomnia Disorder in Adult Attention-Deficit/Hyperactivity Disorder Patients: Clinical, Comorbidity and Treatment Correlates — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2021.663889/full" },
  { t: "Effectiveness of cognitive behavioural therapy for insomnia in neurodevelopmental conditions — Strathprints", u: "https://strathprints.strath.ac.uk/92499/" },
  { t: "Correcting delayed circadian phase with bright light therapy predicts improvement in ADHD symptoms: a pilot study — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/28327443/" },
  { t: "Insomnia & Sleep Medicine Clinic — UCLH Integrated Sleep Services", u: "https://www.uclh.nhs.uk/our-services/find-service/integrated-medicine/insomnia-service" },
  { t: "Managing Sleep in Adults with ADHD: From Science to Pragmatic Approaches — MDPI", u: "https://www.mdpi.com/2076-3425/11/10/1361" },
  { t: "The Relationship Between Attention Deficit Hyperactivity Disorder and sleep — Journal of Contemporary Medicine", u: "https://dergipark.org.tr/en/pub/jcm/article/1242778" },
];

const SlpSources = () => (
  <Section id="sources" className="bg-soft">
    <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 research into ADHD, sleep, circadian rhythms, and real accounts from people who have tried repeatedly to fix their sleep. Here's where it comes from.
        </p>
      </div>

      <ol className="mt-10 grid gap-x-8 gap-y-0 sm:grid-cols-2">
        {SLP_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. If you suspect a sleep disorder, please speak with your doctor. These sources inform how we think about ADHD and sleep; they are not an endorsement of Loops by their authors.
      </p>
    </Container>
  </Section>
);

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

function SlpApp() {
  return (
    <main id="main">
      <SlpNav />
      <SlpHero />
      <SlpWhatLoopsDoes />
      <SlpRecognition />
      <SlpWhyItHappens />
      <SlpBodyClock />
      <SlpWhyLoopsWorks />
      <SlpHowItWorks />
      <SlpWhatsInside />
      <SlpSocialProof />
      <LoopsPricing bg="bg-soft" />
      <SlpObjections />
      <SlpFAQ />
      <SlpFinalCTA />
      <SlpSources />
      <Footer />
    </main>
  );
}

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