/* Loops — "Reduce Stress With ADHD" use-case page
   Wellbeing guardrails: no clinical/medication advice, GP + therapist named as genuine
   complements in objections + FAQ, nothing implies managing alone, shame-free framing. */

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

const STR_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 StrNav = () => {
  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">
            {STR_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">
              {STR_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 STR_HERO_BLOCKS = [
  {
    title: "Shrink the mental load",
    body: "One clear daily action, so the pile doesn't take over.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Break the shame spiral",
    body: "A bad day doesn't have to compound into a bad week.",
    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: "Lower the baseline",
    body: "Small consistent steps that build up where it matters.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z"/></svg>),
  },
];

const StrHero = () => (
  <section id="top" aria-label="Hero" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-20 pb-16 lg:pb-24">
      <div className="mx-auto max-w-3xl text-center">
        <div className="mb-7 flex justify-center fade-in-up">
          <span className="gradient-ring inline-flex items-center bg-white px-4 py-2 shadow-soft">
            <span className="text-[13px] sm:text-[13.5px] font-semibold text-ink">Designed for ADHD. Works for everyone.</span>
          </span>
        </div>

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[54px] fade-in-up delay-1">
          It's not just stress. It's stress about everything, all at once, all the time.
        </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">
          For many people with ADHD, stress isn't a response to one bad situation. It's a background state. And the more stressed you get, the harder it becomes to do anything about it.
        </p>

        <p className="mx-auto mt-4 max-w-2xl text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-2">
          Loops is a daily coaching app for people with ADHD. It gives you small things to do instead of the whole overwhelming pile, coaching for when it spirals, 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">
        {STR_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 StrWhatLoopsDoes = () => (
  <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 reduces the load instead of adding to it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most stress tools ask you to do more: more mindfulness, more journalling, more planning. For ADHD brains already running on empty, that's the last thing that helps.
          </p>
          <p>
            Loops works differently. It gives you small actions each day, coaches you through the moments when stress makes starting impossible, and helps you recover when a hard day breaks your momentum.
          </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 STR_RECOGNITION = [
  "You have a list of things you need to do. The list makes you more anxious, not less.",
  "You know what would help. You just can't make yourself start it when you're already overwhelmed.",
  "You tried meditation. You spent the whole time thinking about what you weren't doing instead.",
  "One missed deadline or forgotten task can ruin the rest of the day. Sometimes the rest of the week.",
  "You're not stressed about one thing. You're stressed about everything, all at once, at low volume, constantly.",
  "You've been told you need to \u201Cjust relax.\u201D That advice doesn't help, and you already knew it wouldn't.",
];

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

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {STR_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">
          This isn't a character flaw. It's a very specific pattern that ADHD creates, and it responds to a different kind of support.
        </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 mechanisms) ---------------- */

const STR_PATTERNS = [
  { title: "Task overload and time blindness", body: "The tasks pile up faster than they can be cleared, and the pile feels bigger than it is. ADHD affects time perception, which means deadlines that are hours away can feel both urgent and unreal at the same time." },
  { title: "The stress-performance spiral", body: "Stress makes ADHD symptoms worse. Worse symptoms create more stress. The loop runs itself. Research confirms what many already know from experience: feeling stressed, ashamed, or overwhelmed directly reduces the ability to perform, which then deepens the stress." },
  { title: "Emotional dysregulation", body: "A small setback doesn't land like a small setback. It lands like confirmation of something much worse. Intense emotional responses to ordinary frustrations are common in adult ADHD, and the internal self-criticism they trigger is a chronic stressor in its own right." },
  { title: "Executive function strain", body: "Doing ordinary things takes significantly more effort with ADHD. That effort costs something. Planning, organising, and managing time all require sustained conscious effort that neurotypical brains handle more automatically, leaving ADHD brains running at a deficit by the end of most days." },
  { title: "ADHD burnout", body: "This isn't just tiredness. It's a specific collapse that happens when the coping runs out. Researchers describe ADHD burnout as the point where sustained hyper-effort finally gives way, and motivation, focus, and emotional resilience fail together rather than separately." },
];

const StrWhyItHappens = () => (
  <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 that you can't handle stress. It's that you're carrying more of it than most people realise.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          ADHD creates stress through several distinct mechanisms. Understanding them matters because each one requires a slightly different response.
        </p>
      </div>

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

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">Loops is designed to interrupt these patterns before they compound, not to add another thing to manage.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Stress-degrades-coping reframe (unique to this page) ---------------- */

const StrReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth understanding before 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]">
          Stress doesn't just feel worse with ADHD. It actively makes ADHD harder to manage.
        </h2>
      </div>
      <div className="mx-auto mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          Most people assume stress at least creates urgency: even if it's unpleasant, it gets things done. For ADHD brains, chronic stress does the opposite. The executive systems that help with planning, starting, and self-regulation are exactly the systems that chronic stress degrades.
        </p>
        <p className="text-ink font-medium">
          This matters because it means the standard advice “just get organised”, “make a plan”, “take it one step at a time” is hardest to follow precisely when you need it most. It's not a discipline problem. It's a systems problem, and the system breaks down under the weight it's supposed to carry.
        </p>
      </div>
    </Container>
  </Section>
);

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

const STR_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. After a hard day, they see you come back to one small thing, and it's no big deal. They just get to see you keep showing up, and cheer you on." },
  { t: "They take weight off, not add to the pile", b: "They're not there to check up on you. They don't nag, they don't manage you, they don't even pay. Their side is light on purpose." },
  { t: "You're always in control", b: "You choose who it is. You decide exactly what they can see, and you can change it any time." },
  { t: "Quiet company helps", b: "On the days it all feels like too much, knowing one person is quietly in your corner takes a little of the weight off." },
];

const StrWhyLoopsWorks = () => (
  <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>When everything feels like too much, the first thing to go is other people. You go quiet, you fall behind, and the falling behind feels like something to hide. Stress is lonely like that.</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 hard day, they see you come back to one small thing, 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">
        {STR_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 this to yourself, that's completely fine. 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 STR_STEPS = [
  { t: "Tell Loops what you're dealing with", b: "Set your focus in plain language. Reducing the daily pile, managing your energy, recovering from a hard week. No forms. No setup you have to sustain." },
  { 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 this 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. Something realistic for the kind of day you're actually having, not the ideal version of it. Close the loop, and your person sees it." },
  { t: "Get coaching when things spiral", b: "Bad day triggering a worse one? Loops gives you a practical next step, not a motivational speech or a list of things you should already be doing." },
  { t: "Lower the baseline over time", b: "Small consistent actions don't feel like much in the moment. Over time, they change what a normal day feels like." },
];

const StrHowItWorks = () => (
  <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 on even the worst days.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to be calm to start. Loops is designed for the days when you're not.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {STR_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 be in a good place to start. That's exactly what Loops is for.
      </p>
    </Container>
  </Section>
);

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

const STR_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "What you're focusing on, described your way: shrinking the daily pile, managing your energy, getting through a hard stretch. Not a number, not a perfect day. Just a clear sense of what a bit better looks like, so your brain has something to hold on to that isn't the whole mountain." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose. Small enough to do on a bad day. Some run every day, some a few times a week: clear one thing off the pile, step outside for five minutes, write down the three things actually due today. A few connect to what you're working on. 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 days you came back after a hard one. You decide what they see, so it can be as much or as little as you like. Support, without the nagging or the pressure. 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 where you kept showing up, a hard day you got through, a spiral you caught before it took the whole week. 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 carrying and where things tend to tip over, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when a bad day is turning into a worse one, with a practical next step, not a pep talk." },
];

const StrWhatsInside = () => (
  <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">
        {STR_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 STR_TESTIMONIALS = [
  { quote: "I'd been told to meditate, exercise more, and keep a journal. None of it stuck. Loops was the first thing that gave me something small enough to actually do when I was already overwhelmed. That felt completely different.", who: "Operations manager", meta: "Diagnosed with ADHD at 38" },
  { quote: "The shame spiral was the worst part for me. One thing goes wrong and suddenly I'm behind on everything and too stressed to fix any of it. Loops didn't fix the stress, but it gave me a way back in.", who: "Freelance writer", meta: "Using Loops for 10 weeks" },
  { quote: "I used to think I was just bad at handling pressure. I wasn't. I just needed a different kind of support.", who: "Secondary school teacher, Bristol", meta: null },
];

const StrSocialProof = () => (
  <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">
        {STR_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 STR_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you, one day 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 StrPricing = () => (
  <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">
        {STR_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/therapist signpost) ---------------- */

const StrObjections = () => (
  <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 mindfulness and it doesn't work for me.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">That's more common than the wellness industry would have you believe. Traditional mindfulness asks you to sit still, focus on one thing, and disengage from your thoughts. For many ADHD brains, that's the hardest possible task. Loops works differently.</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;I don't have the energy for another system to manage.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">That's why Loops gives you one action. Not a system. One thing. It's designed for the days when you're already running on empty, not the days when everything's working.</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 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;Should I be talking to someone instead?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Possibly, yes, and Loops isn't a reason not to. If you're experiencing significant distress, a doctor or therapist is a genuinely good idea. Loops works alongside that kind of support, not instead of it.</p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/support/find-help/">Find help now</Button></div>
        </article>
      </div>
    </Container>
  </Section>
);

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

const STR_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. It combines personalised coaching, daily micro-actions, one person who sees your progress, and accountability in one system. For stress specifically, it helps reduce the daily load, break the shame spiral, and build more resilience into ordinary days." },
  { 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 days you came back after a hard one. They're not there to check up on you or add to the pile. They don't nag or manage you. They just get to see you keep showing up, and cheer you on. You don't have to add one to start, and because this 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 stress if you have ADHD?", a: "It removes the decision-making from your hardest moments by giving you one specific, low-friction action each day. It also coaches you when things go wrong, so a bad day doesn't have to become a bad week." },
  { q: "Why is stress so much harder to manage with ADHD?", a: "ADHD creates stress through several compounding mechanisms: difficulty managing time and tasks, intense emotional responses to setbacks, the constant effort required to do ordinary things, and a burnout pattern that's different from standard tiredness. Chronic stress also degrades the executive systems ADHD already makes unreliable, which is why the usual advice is hardest to follow when you need it most." },
  { 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: "Is Loops a substitute for therapy?", a: "No. If you're experiencing significant or persistent distress, speaking with a doctor or therapist is genuinely worth doing. Loops is a daily coaching tool that can work well alongside professional support, but it's not a replacement for it.", support: true },
  { q: "Will Loops tell me to meditate?", a: "No. Loops gives you one practical, specific action each day. If that ever includes something mindfulness-adjacent, it'll be designed for how ADHD brains actually work, not a standard meditation instruction." },
  { 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 terrible week and fall completely off track?", a: "That's built into the design. Loops doesn't treat a bad week as a failure state. The next action is still there, still small, and still designed to be the easiest possible step back in." },
];

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

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

const StrFinalCTA = () => (
  <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 with one day</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 day that doesn't feel like a battle 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 to solve everything. You need something that helps on the hard days, not just the good 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 STR_SOURCES = [
  { t: "“Turning Intentions Into Actions” — J. Russell Ramsay", u: "https://journals.sagepub.com/doi/10.1177/1534650115611483" },
  { t: "Emotional dysregulation and Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "ADHD, Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "A meta-analytic review of the association between cortisol and ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5837926/" },
  { t: "Sleep in adults with ADHD: systematic review and meta-analysis — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/29477617/" },
  { t: "Self-compassion and perceived criticism in adults with attention deficit hyperactivity disorder (ADHD)", u: "https://eprints.whiterose.ac.uk/id/eprint/165039/1/Self-compassion%20and%20Perceived%20Criticism%20in%20Adults%20with%20Attention%20Deficit%20Hyperactivity%20Disorder%20%28ADHD%29.pdf" },
  { t: "ADHD + productivity apps = endless cycle of downloading... — r/ProductivityApps", u: "https://www.reddit.com/r/ProductivityApps/comments/1t2m4jw/adhd_productivity_apps_endless_cycle_of/" },
  { t: "An Investigation of Body Doubling with Neurodivergent Participants — ACM Digital Library", u: "https://dl.acm.org/doi/full/10.1145/3689648" },
  { t: "Efficacy of digital mental health interventions for attention-deficit hyperactivity disorder: a meta-analytic review of randomised controlled trials — ScienceDirect", u: "https://www.sciencedirect.com/science/article/pii/S2451958825001186" },
  { t: "ADHD diagnosis life-changing but long waits on the NHS — Healthwatch England", u: "https://www.healthwatch.co.uk/news/2025-05-28/adhd-diagnosis-life-changing-long-waits-nhs-need-urgent-action" },
  { 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: "Why Do Adults With ADHD Choose Strength-Based Coaching Over Public Mental Health Care? A Qualitative Case Study From the Netherlands — ResearchGate", u: "https://www.researchgate.net/publication/306002750_Why_Do_Adults_With_ADHD_Choose_Strength-Based_Coaching_Over_Public_Mental_Health_Care_A_Qualitative_Case_Study_From_the_Netherlands" },
  { t: "Comparative efficacy and acceptability of pharmacological, psychological and neurostimulatory interventions for ADHD in adults: a systematic review and component network meta-analysis — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39701638/" },
  { 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" },
];

const StrSources = () => (
  <Section id="sources" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on research into ADHD, chronic stress, emotional regulation and burnout, alongside real accounts from people caught in repeated failure cycles. Here's where it comes from.
        </p>
      </div>

      <div className="mt-6 max-w-prose rounded-card border border-brand/25 bg-brand-soft/50 p-5 sm:p-6">
        <p className="text-[14.5px] leading-[1.6] text-ink-2 text-pretty">
          If stress or overwhelm feels significant or persistent, speaking with a doctor or therapist is genuinely worth doing. Loops works alongside that kind of support, not instead of it. You can also find support on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.
        </p>
      </div>

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

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

function StrApp() {
  return (
    <main id="main">
      <StrNav />
      <StrHero />
      <StrWhatLoopsDoes />
      <StrRecognition />
      <StrWhyItHappens />
      <StrReframe />
      <StrWhyLoopsWorks />
      <StrHowItWorks />
      <StrWhatsInside />
      <StrSocialProof />
      <LoopsPricing bg="bg-soft" />
      <StrObjections />
      <StrFAQ />
      <StrFinalCTA />
      <StrSources />
      <Footer />
    </main>
  );
}

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