/* Loops — "Heal After Loss With ADHD" use-case page
   Grief tangled with self-blame + exhaustion. Wellbeing guardrails: NO recovery timeline
   anywhere, no shaming of pace, self-harm signpost in FAQ NOT shortened (Samaritans 116 123
   + SHOUT 85258), Loops positioned alongside therapy. Five gaps: collapse / activation /
   shame / criticism / perfectionism. Unique section: a late diagnosis as its own loss. */

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

const LOS_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 LosNav = () => {
  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">
            {LOS_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">
              {LOS_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 LOS_HERO_BLOCKS = [
  {
    title: "Start impossibly small",
    body: "One gentle action a day, sized for how hard things feel right now.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.174 1.184a2 2 0 0 1 3.652 0A2 2 0 0 1 12.99 3.01a2 2 0 0 1 1.826 3.164 2 2 0 0 1 0 3.652 2 2 0 0 1-1.826 3.164 2 2 0 0 1-3.164 1.826 2 2 0 0 1-3.652 0A2 2 0 0 1 3.01 12.99a2 2 0 0 1-1.826-3.164 2 2 0 0 1 0-3.652A2 2 0 0 1 3.01 3.01a2 2 0 0 1 3.164-1.826M8 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4"/></svg>),
  },
  {
    title: "Soften the self-blame",
    body: "Support that separates grieving from failing, gently and without judgement.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>),
  },
  {
    title: "Rebuild at your pace",
    body: "No timeline, no pressure to be \u201Cover it\u201D by a certain point.",
    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>),
  },
];

const LosHero = () => (
  <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.05] text-[32px] sm:text-[44px] lg:text-[52px] fade-in-up delay-1">
          You're not failing at grief. ADHD just makes loss heavier to carry.
        </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">
          Grief alone can make everyday things harder. ADHD adds another layer on top, which is why basic tasks can feel impossible right now, even when you're trying.
        </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 gentle actions a day, sized for how hard things feel right now, and, if you want it, <span className="text-ink font-medium">one person quietly alongside you.</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>

        <p className="mx-auto mt-7 max-w-2xl text-[14px] sm:text-[14.5px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-3">
          <span className="font-semibold text-ink">If you're struggling more than this page can help with, please talk to your doctor or a crisis line.</span> You'll find options wherever you are on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.
        </p>
      </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">
        {LOS_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 LosWhatLoopsDoes = () => (
  <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 built for the hardest stretch, not the easy one.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            You don't need a plan for getting your life back on track all at once. You need today to feel slightly more possible than yesterday did.
          </p>
          <p>
            Loops offers small, low-effort actions each day, gentle support for the self-blame that often follows loss, and space to move at whatever pace this actually takes.
          </p>
          <p>
            Then there's the part most apps leave out. <span className="text-ink font-medium">One person, quietly alongside you.</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 LOS_RECOGNITION = [
  "Things that used to feel automatic, like replying to messages or washing up, suddenly feel huge.",
  "You're harder on yourself for \u201Cnot coping better\u201D than you'd ever be on someone else.",
  "A small piece of criticism or a missed task can feel disproportionately devastating right now.",
  "You've tried to push through with sheer effort, and it's left you more exhausted, not less.",
  "Part of you worries that needing extra support means you're handling this badly.",
  "Even after some time has passed, things don't feel like they're getting easier the way you expected.",
];

const LosRecognition = () => (
  <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 while healing after a loss. If you see yourself here, you're in the right place.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {LOS_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 grieving wrong. It means grief and ADHD are compounding each other, and that takes more support, not less of it.
        </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 gaps) ---------------- */

const LOS_PATTERNS = [
  { title: "The collapse gap", body: "Grief and ADHD both draw on the same mental resources. When they hit together, planning, memory, and follow-through can all become harder at once, not just feelings." },
  { title: "The activation gap", body: "Knowing what you should do becomes much harder to act on after a loss. A missed task often isn't carelessness. It's the cost of starting going up while your resources go down." },
  { title: "The shame gap", body: "Struggling after loss can quickly turn into \u201CI am failing at this too.\u201D That belief adds pressure exactly when you have the least capacity to carry it." },
  { title: "The criticism gap", body: "Small criticisms or setbacks can feel disproportionately painful while you're already grieving. That heightened sensitivity is common, not a sign you're being overly dramatic." },
  { title: "The perfectionism gap", body: "Pushing through on willpower alone can look like coping from the outside. It often runs out quietly, leaving more exhaustion behind than it solved." },
];

const LosWhyItHappens = () => (
  <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 personal failure. It's two systems under strain at once.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Grief alone affects concentration, memory, and motivation. ADHD affects those same areas on an ordinary day. Together, they can make basic functioning genuinely harder, not just harder to feel motivated about.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {LOS_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">None of these gaps mean you're handling this badly. They mean two demanding processes are happening at once, and that deserves real support.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: late diagnosis as its own loss ---------------- */

const LosReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing</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 late diagnosis can be its own kind of loss.
        </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>
          For some people, the loss this page is about isn't a bereavement or a breakup. It's the grief that can follow an ADHD diagnosis later in life: looking back at years of struggle, masking, or self-blame, and realising it had a name the whole time.
        </p>
        <p className="text-ink font-medium">
          That grief is real, and it's easy to assume a diagnosis should feel like an ending rather than a beginning. It's more often the start of understanding yourself differently, not a finish line you should have already crossed.
        </p>
      </div>
    </Container>
  </Section>
);

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

const LOS_WITNESS_CARDS = [
  { t: "Not carrying every day alone", b: "When you manage the one small thing, they see it. Not to check up on you. Just so you're not carrying every day of this entirely alone." },
  { t: "They expect nothing", b: "They don't nag, they don't manage you, they don't even pay. They're just there, quietly, on the days that feel like too much." },
  { t: "Always optional, always yours", b: "You choose who it is. You decide exactly what they can see, and you can change it any time. There's no pressure to use it at all." },
  { t: "Not a substitute for real support", b: "Being witnessed, even a little, can make the heaviest stretch a fraction lighter. But a good friend, a grief counsellor, or your doctor matters more than any app." },
];

const LosWhyLoopsWorks = () => (
  <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 cope better with people, not with apps.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>Grief can be terribly isolating. People stop asking how you are, the world moves on, and you're left doing the quiet, heavy work of ordinary days mostly on your own.</p>
          <p>So Loops offers you, gently, the one thing that helps ADHD brains most. <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 manage the one small thing, they see it. Not to check up on you. Just so you're not carrying every day of this entirely alone. You decide exactly what they can see, and you can change it any time.</p>
          <p>This part is always optional, and there's no pressure to use it. It also isn't a substitute for real support: a good friend, a grief counsellor, or your doctor matters more than any app.</p>
          <p><span className="text-ink font-medium">You don't have to carry it alone.</span></p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {LOS_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 you'd rather keep everything to yourself for now, that's completely okay. Solo works on its own. Your person is there for if and when you want it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const LOS_STEPS = [
  { t: "Tell Loops what feels hardest right now", b: "Name the loss, however you'd describe it, and what's felt out of reach since it happened." },
  { t: "Choose your person, if you want one", b: "This one is completely optional, and it's fine to skip it for now and come back later. If you'd like someone alongside you, pick one person you trust to see the small things you manage. You decide exactly what they can see, and you can change it any time. There's nothing for them to manage, and nothing for you to keep up. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Gentle, low-effort steps each day, sized for how things actually feel. Manage it, and if you've chosen someone, your person sees it." },
  { t: "Get support when self-blame shows up", b: "Quick, kind responses for the moments grief turns into \u201CI'm failing at this.\u201D" },
  { t: "Move at your own pace", b: "No fixed timeline. Some days will need less than others, and that's expected." },
];

const LosHowItWorks = () => (
  <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 day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to feel ready to start. Loops is built to meet you exactly where things are right now.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {LOS_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 to feel ready. You just need today's small step.
      </p>
    </Container>
  </Section>
);

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

const LOS_WHATS_INSIDE = [
  { t: "One goal, held lightly", b: "You don't need a big goal right now. Just name what feels hardest, and what's felt out of reach since the loss. Loops holds it lightly, so there's something small to come back to, at whatever pace this takes. No timeline." },
  { t: "Loops that fit the day you're having", b: "A loop is one small, repeating action, sized to how heavy the day feels. On the hardest days it's tiny: reply to one message, eat something, step outside for a minute. On easier days, a little more. A few connect to steadying yourself. Others are just life, like taking your meds before breakfast. There's no streak to keep and nothing to catch up on. If today wasn't possible, the next small thing is still there, whenever you're ready." },
  { t: "Your person, if you want one", b: "Someone you choose to see the small things you manage, without expecting more. It's not there to check up on you, and it's completely optional. On a Crew plan it can be more than one: your people." },
  { t: "Rewards, as kindness not targets", b: "Promise yourself something gentle, for when you want it. Not a milestone to hit. Just a small, kind thing waiting for you: a favourite meal, an afternoon with no obligations, time somewhere that helps. Loops holds it, with no pressure and no deadline." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows what you're carrying, so there's no re-explaining yourself from the start. No booking, no waiting room. When self-blame shows up and the smallest task feels impossible, it's there with a kind response and one gentle next step. Not a pep talk, not a plan." },
];

const LosWhatsInside = () => (
  <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]">
          A few simple things, working together, as gently as you need.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {LOS_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>
);

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

const LOS_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, rewards and coach. Just you, one small thing 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 a little easier.", featured: true },
];

const LosPricing = () => (
  <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. And you can start alone.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {LOS_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-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">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>
);

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

const LOS_TESTIMONIALS = [
  { quote: "After my dad died, I couldn't do the basics for weeks. I was so hard on myself about it. Having something this gentle helped me stop adding to my own pain.", who: "After a bereavement", meta: "Diagnosed with ADHD at 29" },
  { quote: "My diagnosis came after years of struggling. I didn't expect to grieve it, but I did. This helped me process that instead of just pushing past it.", who: "After a late diagnosis", meta: "Using Loops for 3 months" },
  { quote: "I pushed through my redundancy on pure willpower and crashed hard afterwards. This time I had something that didn't ask for that.", who: "Marketing consultant, Glasgow", meta: null },
];

const LosSocialProof = () => (
  <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">
        {LOS_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>
);

/* ---------------- Objections (4, incl. "cope alone by now" 1st) ---------------- */

const LOS_OBJECTIONS = [
  { q: "\u201CShouldn't I be able to get through this on my own by now?\u201D", a: "Needing support isn't a sign you're handling this badly. Grief alongside ADHD is genuinely harder to manage with willpower alone, and getting support earlier tends to help more, not less." },
  { q: "\u201CDo I have to share this with anyone?\u201D", a: "No. Solo works perfectly well on its own, and this can stay completely private. If and when you'd like someone alongside you, they add nothing for you to keep up, they just see the small things you choose to share. You decide what your person sees, and you can add them whenever you're ready, or not at all." },
  { q: "\u201CWhat if I'm not grieving the 'right' way?\u201D", a: "There isn't a right way to grieve. Loops doesn't ask you to grieve on a particular timeline or in a particular order, just to take one small step on the days you can." },
  { q: "\u201CIs this a replacement for grief counselling or therapy?\u201D", a: "No. Loops can help with the small daily things that get harder after a loss, but it isn't therapy and doesn't replace it. Grief counselling and therapy can help in ways an app simply cannot, and if you're able to reach for that kind of support, it's genuinely worth it. Loops is happy to sit alongside it." },
  { q: "\u201CWhat if I'm having thoughts of harming myself?\u201D", crisis: true },
];

const LosObjections = () => (
  <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">
        {LOS_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.crisis
                ? <>Please treat that as a reason to reach out for real support now, not later. If you're having thoughts of harming yourself, contact your doctor or a crisis line, or if you're in immediate danger, your local emergency number. You'll find options wherever you are on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>. This is bigger than anything an app can hold, and you deserve a person on the other end of it.</>
                : o.a}
            </p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- FAQ accordion (incl. non-shortened crisis signpost) ---------------- */

const LOS_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. For healing after loss, it offers small daily actions, gentle support for self-blame, and space to move at your own pace." },
  { q: "How does Loops help with healing after loss if you have ADHD?", a: "It breaks the day into one manageable, low-effort step, offers gentle support when grief turns into self-blame, and doesn't impose a fixed timeline for recovery." },
  { q: "Why does loss feel so much harder to function through with ADHD?", a: "Grief and ADHD both affect concentration, memory, and motivation. When they happen together, everyday tasks can become genuinely harder, separately from how much someone wants to cope." },
  { 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 patterns on this page feel familiar, Loops is built for you." },
  { q: "Is this a replacement for grief counselling or therapy?", a: "No. Loops offers gentle daily support and works well alongside therapy or counselling, not instead of it." },
  { q: "How long does it take to feel better?", a: "There's no fixed timeline, and it's not something Loops can predict. Some people notice small things feeling more manageable within a few weeks, while healing itself takes as long as it takes." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

const LosFAQItem = ({ q, a, crisis, 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">
        {crisis
          ? <>If you're having thoughts of suicide or self-harm, please reach out for support straight away. You can contact your doctor or a crisis line now, and you'll find confidential, free crisis lines and support wherever you are on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.</>
          : a}
      </p>
    </div>
  </details>
);

const LosFAQ = () => (
  <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">
          {LOS_FAQS.map((f, i) => <LosFAQItem key={f.q} q={f.q} a={f.a} crisis={f.crisis} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const LosFinalCTA = () => (
  <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>One small thing today</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            One small thing today. Not healing on a schedule.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need to be ready to feel better. You need one gentle, manageable step for today, and, if you want, one person quietly alongside you.
          </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>
          <p className="mt-6 text-[13.5px] leading-[1.6] text-ink-3 text-pretty">
            If you need more support than this right now, please speak to your doctor or find a crisis line on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

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

const LOS_SOURCES = [
  { t: "From ADHD Diagnosis to Meaning: Does Grief Theory Enhance Our Understanding of Narrative Reconstruction? — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12562482/" },
  { t: "The Important Role of Executive Functioning and Self-Regulation in ADHD — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/resources/attention-deficit-hyperactivity-disorder-diagnosis-and-management-pdf-1837699732933" },
  { t: "Grieving as a Form of Learning: Insights From Neuroscience Applied to Grief and Loss — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC8858332/" },
  { t: "Emotion Dysregulation in Adults With Attention Deficit Hyperactivity Disorder: A Meta-Analysis — BMC Psychiatry", u: "https://link.springer.com/article/10.1186/s12888-020-2442-7" },
  { t: "Cognitive Functioning in Complicated Grief — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4163517/" },
  { t: "A Systematic Review of Lived Experiences of Receiving a Diagnosis of ADHD in Adulthood — Journal of Attention Disorders", u: "https://journals.sagepub.com/doi/10.1177/10870547261455946" },
  { t: "Adult ADHD-Related Poor Quality of Life: Investigating the Role of Procrastination — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/40217123/" },
  { t: "Self-Esteem in Adults With ADHD Using the Rosenberg Self-Esteem Scale: A Systematic Review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/38491855/" },
  { t: "Any Other Late-Diagnosed High Achievers/Perfectionists? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1jdrh35/any_other_late_diagnosed_high/" },
  { t: "Rejection Sensitive Dysphoria (RSD): Symptoms & Treatment — Cleveland Clinic", u: "https://my.clevelandclinic.org/health/diseases/24099-rejection-sensitive-dysphoria-rsd" },
  { t: "The Lived Experience of Rejection Sensitivity in ADHD: A Qualitative Exploration — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12822938/" },
  { t: "Procrastination, Perfectionism, and Other Work-Related Mental Problems: A Scoping Review — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2021.736776/full" },
  { t: "Effectiveness of Cognitive Behavioural-Based Interventions for Adults With ADHD: A Meta-Analysis of RCTs — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36794797/" },
  { t: "Anyone Else Very All or Nothing? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/196xlph/anyone_else_very_all_or_nothing/" },
  { t: "Body Doubling vs Body Halving — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/144gle3/body_doubling_vs_body_halving/" },
  { t: "Plain English Summary of the ADHD Taskforce Report — NHS England", u: "https://www.england.nhs.uk/long-read/plain-english-summary-of-the-adhd-taskforce-report/" },
  { t: "The Role of Self-Compassion in the Mental Health of Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9790285/" },
  { t: "Promoting the Translation of Intentions Into Action by Implementation Intentions — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4500900/" },
  { t: "ADHD UK — Homepage", u: "https://adhduk.co.uk/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — Frontiers in Psychology", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" },
  { t: "Exploring the Lived Experience of Grief in Adults With Attention Deficit Hyperactivity Disorder — Martina Bauer, Antioch University", u: "https://aura.antioch.edu/cgi/viewcontent.cgi?article=2183&context=etds" },
];

const LosSources = () => (
  <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 grief research, adult ADHD studies on emotional regulation and self-esteem, and real accounts of healing after loss, including the grief that can follow a late diagnosis. Here's where it comes from.
        </p>
      </div>

      <ol className="mt-10 grid gap-x-8 gap-y-0 sm:grid-cols-2">
        {LOS_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 healing after loss; they are not an endorsement of Loops by their authors.
      </p>
    </Container>
  </Section>
);

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

function LosApp() {
  return (
    <main id="main">
      <LosNav />
      <LosHero />
      <LosWhatLoopsDoes />
      <LosRecognition />
      <LosWhyItHappens />
      <LosReframe />
      <LosWhyLoopsWorks />
      <LosHowItWorks />
      <LosWhatsInside />
      <LosSocialProof />
      <LoopsPricing bg="bg-soft" />
      <LosObjections />
      <LosFAQ />
      <LosFinalCTA />
      <LosSources />
      <Footer />
    </main>
  );
}

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