/* Loops — "Recover From Burnout and Start Again With ADHD" use-case page
   Most safeguarding-critical page. Samaritans (116 123) in FOUR places: hero note,
   objection 4, crisis FAQ, below final CTA. GP signpost in objection 4 + standalone FAQ.
   Nothing implies recovering faster / pushing harder / managing alone. Unique: active rest. */

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

const BRN_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 BrnNav = () => {
  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">
            {BRN_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">
              {BRN_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 BRN_HERO_BLOCKS = [
  {
    title: "Start smaller than you think",
    body: "One tiny action is more useful than waiting until you feel ready.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/></svg>),
  },
  {
    title: "Reduce the load first",
    body: "Recovery starts with less, not more.",
    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: "Come back at your own pace",
    body: "Not back to normal. Just back to something.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg>),
  },
];

const BrnHero = () => (
  <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.06] text-[32px] sm:text-[44px] lg:text-[52px] fade-in-up delay-1">
          This isn't laziness. This isn't weakness. This is ADHD burnout.
        </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">
          ADHD burnout isn't ordinary tiredness. It's a specific kind of collapse that happens when the brain has been running on extra effort for too long. And it doesn't respond to pushing through.
        </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, sized to the day you're actually having, and, if you want it, <span className="text-ink font-medium">one person who's quietly there while you find your way back.</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>

        {/* Safeguarding note on first screen */}
        <div className="mx-auto mt-7 max-w-xl rounded-tile border border-line bg-white/70 px-5 py-3.5 fade-in-up delay-3">
          <p className="text-[13.5px] leading-[1.6] text-ink-2 text-pretty">
            If you're struggling more than this page can help with, please talk to your doctor or a crisis line. 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>
      </div>

      {/* Three icon blocks */}
      <p className="mt-12 lg:mt-14 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">
        {BRN_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 BrnWhatLoopsDoes = () => (
  <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 for people who aren't ready to be back to normal yet.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most support for burnout assumes you're ready to do more. Loops assumes you're not. It's built for the in-between stage: when you want to start moving again but the thought of a full system, a full list, or a full day feels impossible.
          </p>
          <p>
            Loops gives you small actions each day. Something you can actually do from where you are right now. No backlog to clear. No catching up. One thing, chosen to be as gentle as today needs it to be.
          </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 BRN_RECOGNITION = [
  "You pushed hard for months. Now you can't do the basics. You're not sure how you got here and you're not sure how to get back.",
  "Things that used to feel manageable now feel impossible. Not hard. Impossible.",
  "You've been here before. You recovered last time. But you're not sure you can do it again, and this time feels worse.",
  "You know you need rest. But rest doesn't seem to be working. You're still exhausted after weeks of doing almost nothing.",
  "The shame about what got left undone during the good stretch is almost as heavy as the burnout itself.",
  "You're worried that the motivation that carried you through the last good period isn't coming back this time.",
];

const BrnRecognition = () => (
  <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 in and after burnout.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {BRN_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">
          ADHD burnout is a real, recognised pattern. It has specific causes, and it responds to a different kind of support than ordinary exhaustion does.
        </p>
      </div>

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

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

const BRN_PATTERNS = [
  { title: "The hyperfocus-crash cycle", body: "The good stretch costs more than it looks like it costs. ADHD hyperfocus can produce intense, high-output periods, but often at the expense of sleep, meals, and recovery time. When the focus breaks, the deferred cost arrives all at once." },
  { title: "The executive overdraft", body: "Every day of extra effort leaves a deficit that doesn't fully repay overnight. ADHD brains spend more cognitive resource on routine tasks than other brains do. Over months, that cumulative gap becomes a debt the system eventually refuses to carry." },
  { title: "The open loops problem", body: "Unfinished tasks don't just sit on a list. They sit in the mind, draining energy continuously. Research links executive dysfunction to fatigue: carrying dozens of pending decisions and unresolved tasks keeps the nervous system in a low-level state of alert, even during rest." },
  { title: "The fear that motivation won't return", body: "One of the most painful parts of ADHD burnout is not knowing whether the motivated version of yourself still exists. ADHD affects the brain's ability to emotionally recall the feeling of being capable, which means that from inside a crash, the good period can feel irretrievably far away." },
  { title: "The pushing-through trap", body: "The instinct to push through burnout doesn't speed recovery. It deepens it. Unlike some kinds of exhaustion, ADHD burnout worsens with additional executive demands. Rest that includes pressure to perform or resume normal output is not rest." },
];

const BrnWhyItHappens = () => (
  <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]">
          ADHD burnout isn't a failure of willpower. It's what happens after too much of it.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          ADHD burnout follows a specific cycle. Understanding the pattern matters because it changes what recovery looks like and why standard advice so often makes things worse.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {BRN_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">Recovery from ADHD burnout starts with reducing demands, not adding them. That's what Loops is designed for.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: active rest vs. passive rest ---------------- */

const BrnReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something important to know about ADHD recovery</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]">
          Lying still and waiting to feel better often doesn't work. Active rest does.
        </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 many people with ADHD, passive rest, just stopping, creates its own problem: the open loops get louder, the shame gets heavier, and the gap between now and "ready to start again" feels wider each day.
        </p>
        <p className="text-ink font-medium">
          What works better is something researchers and ADHD specialists call active rest: small, low-pressure engagement with things that feel genuinely enlivening rather than obligating. A short walk. Something creative. A task so small it barely counts. Not productivity. Not recovery. Just enough engagement to remind the brain that starting is still possible.
        </p>
      </div>
    </Container>
  </Section>
);

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

const BRN_WITNESS_CARDS = [
  { t: "They just have to see it", b: "When you do the one small thing, they see it. Not to check up on you. Just so you're not completely on your own in it." },
  { t: "They don't expect anything", b: "They don't nag, they don't manage you, they don't even pay. They're just there, quietly glad, on the days that feel like too much." },
  { 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. Always optional, no pressure." },
  { t: "Someone holds the belief", b: "When you can't feel that the capable version of you still exists, sometimes someone else holding that belief for a while is enough." },
];

const BrnWhyLoopsWorks = () => (
  <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 come back 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>Burnout makes you disappear. You go quiet, you cancel things, you let the messages sit, and the longer it goes on the harder it is to reach back out. It gets very lonely in there.</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 do the one small thing, they see it. Not to check up on you. Just so you're not completely on your own in it. 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. But being seen, even a little, can make coming back feel less impossible.</p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {BRN_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>

      <figure className="mt-10 max-w-3xl rounded-card border border-line bg-white p-7 sm:p-9 shadow-card">
        <blockquote className="text-[19px] sm:text-[22px] leading-[1.45] text-ink font-semibold tracking-tight2 text-balance">
          "You don't have to do this alone."
        </blockquote>
      </figure>

      <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, that's completely okay. Solo works on its own. Your person is there for if and when you want it, and only then.
        </p>
      </div>
    </Container>
  </Section>
);

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

const BRN_STEPS = [
  { t: "Tell Loops where you are", b: "Name what's hardest right now: getting out of bed, facing the backlog, managing basic things. No categories, no setup. Just where you actually are." },
  { 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 the smallest possible actions", b: "Each day, Loops gives you things to do. In burnout, that might be very small. Answering one message. Moving one thing. Eating something. The size is calibrated to what's actually possible today. Do it, and if you've chosen someone, your person sees it." },
  { t: "Get support when the shame hits", b: "Burnout brings shame. Loops gives you a calm, practical response when the weight of it makes starting feel impossible again. Not motivation. Just the next smallest thing." },
  { t: "Move toward something, one day at a time", b: "Recovery isn't linear. Loops isn't built around streaks or targets. It's built around the day you're actually having, and giving you something to do in it." },
];

const BrnHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          One thing. Smaller than you think. Today.
        </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. You don't need to feel better first. Loops is designed for exactly where you are.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {BRN_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">
        There is no wrong pace. One thing today is enough.
      </p>
    </Container>
  </Section>
);

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

const BRN_WHATS_INSIDE = [
  { t: "One goal, held lightly", b: "You don't need a big goal right now. Just name what's hardest: getting out of bed, the backlog, the basics. Loops holds it lightly, so there's something to come back to, at the pace you actually have. Not back to normal. Just back to something." },
  { t: "Loops that fit the day you're having", b: "A loop is one small, repeating action, sized to the day you're actually having. On the hardest days it's tiny: answer one message, move one thing, eat something. On easier days, a little more. A few connect to what you're working back towards. 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: the good coffee, an evening with no obligations, a book you've wanted to sink into. 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 where you are and what you're carrying, so there's no re-explaining yourself from the start. No booking, no waiting room. When the shame hits and starting feels impossible again, it's there with a calm response and the next smallest thing. Not a pep talk, not a plan." },
];

const BrnWhatsInside = () => (
  <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">
        {BRN_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 BRN_TESTIMONIALS = [
  { quote: "I couldn't understand why resting wasn't making me feel better. I'd been burned out for months and I was still exhausted. Loops gave me something so small I almost laughed. But I did it. And then the next day I did it again.", who: "Nurse", meta: "Diagnosed with ADHD at 41" },
  { quote: "The shame about what I'd let fall apart was almost worse than the burnout. Loops didn't ask me to fix any of it. It just asked me to do one thing. That was different from everything else I'd tried.", who: "Freelance designer", meta: "Using Loops for 11 weeks" },
  { quote: "I kept waiting to feel ready. Loops helped me understand I didn't have to feel ready. I just had to do something small enough to be possible.", who: "Project manager, Cardiff", meta: null },
];

const BrnSocialProof = () => (
  <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">
        {BRN_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 BRN_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 BrnPricing = () => (
  <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">
        {BRN_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. crisis signpost) ---------------- */

const BrnObjections = () => (
  <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 just need to push through and get back on track.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Pushing through is what caused the burnout. It's unlikely to end it. Research on ADHD burnout is consistent that additional executive demands during a crash deepen the depletion rather than resolving it. The path back is smaller, not harder.</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 this 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 and when you'd like someone alongside you, they add nothing for you to keep up, they just see the small things you manage. You decide what your person sees, and you can add them whenever you're ready, or not at all.</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've tried to restart before and it never works.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">The restarts that didn't work were probably trying to do too much too soon. Loops is designed around the kind of start that's possible from inside burnout: one action, sized to today, with no expectation of the day after until it arrives.</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;What if this is more serious than burnout?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">It might be, and it's important to take that seriously. If you're experiencing persistent low mood, hopelessness, or thoughts of harming yourself, please speak with your doctor as soon as possible. Loops is not a substitute for professional support, and no amount of small actions replaces that conversation if you need 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 BRN_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 the small things you manage, and gentle support in one system. For burnout specifically, it helps with the gentlest possible re-engagement: one small action each day, calibrated to where you actually are." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is 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. There's nothing for them to manage and nothing for you to keep up. You can skip it for now and add someone whenever you're ready, or not at all. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with ADHD burnout recovery?", a: "It removes the pressure of deciding what to do and how much to do. Each day you get one action, sized to be genuinely possible today. There's no expectation of a full return to normal. Just one thing, for as long as that's what you need." },
  { q: "What is ADHD burnout and how is it different from ordinary exhaustion?", a: "ADHD burnout comes from sustained over-expenditure of executive resources on a brain that finds routine functioning more demanding than other brains do. Unlike ordinary tiredness, it doesn't resolve with sleep alone. Recovery usually involves reducing ongoing demands and gently re-engaging with low-pressure activities rather than resting completely." },
  { q: "Should I see a doctor about my burnout?", a: "Yes, if it's significantly affecting your daily life. Burnout can look like depression, and sometimes it overlaps with it. Your doctor can help you work out what's happening and what kind of support is appropriate. Loops works well alongside professional support but is not a replacement for it.", support: true },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "What if I'm in crisis right now?", crisis: true },
  { q: "How long does ADHD burnout recovery take?", a: "There's no fixed answer, and it varies significantly between people and situations. Recovery is usually not linear. Loops is designed to be useful throughout: in the early days when even tiny actions feel hard, and later when re-engagement starts to feel more possible." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

const BrnFAQItem = ({ q, a, crisis, 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">
        {crisis
          ? <>Please reach out to someone who can help. You can contact your doctor or a crisis line, and you'll find 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>. Loops is not the right support for a mental health crisis, and we don't want you to be alone with that.</>
          : (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 BrnFAQ = () => (
  <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">
          {BRN_FAQS.map((f, i) => <BrnFAQItem key={f.q} q={f.q} a={f.a} crisis={f.crisis} support={f.support} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const BrnFinalCTA = () => (
  <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</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. That's all.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not back to normal. Not recovered. Just one thing, from where you are, at the pace you actually have, and, if you want, one person quietly there while you do.
          </p>
          <div className="mt-8 flex flex-col items-center gap-3">
            <Button variant="primary" size="lg" href="#start">
              Get Early Access
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </Button>
            <span className="text-[13.5px] text-ink-3">Free for 7 days. No complicated setup. On iOS for now.</span>
            <p className="mt-2 text-[13px] leading-[1.6] text-ink-3 text-pretty max-w-md">
              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>
      </div>
    </Container>
  </Section>
);

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

const BRN_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Delay Aversion and Executive Functioning in Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC6209856/" },
  { t: "A Systematic Review and Component Network Meta-Analysis of ADHD Interventions — The Lancet Psychiatry", u: "https://www.thelancet.com/journals/lanpsy/article/PIIS2215-0366%2824%2900360-2/fulltext" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — Frontiers", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" },
  { t: "Executive Function Deficits Mediate the Relationship Between ADHD and Job Burnout — AIMS Public Health", u: "https://www.aimspress.com/article/doi/10.3934/publichealth.2024015" },
  { t: "The Experience of Effort in ADHD: A Scoping Review — Frontiers", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2024.1349440/full" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD: A Systematic Review — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" },
  { t: "Executive Function Skills — CHADD", u: "https://chadd.org/about-adhd/executive-function-skills/" },
  { t: "Experiences of Criticism in Adults With ADHD: A Qualitative Study — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0263366" },
  { t: "Stress and Work-Related Mental Illness Among Working Adults With ADHD — Springer", u: "https://link.springer.com/article/10.1186/s12888-022-04409-w" },
  { t: "Sleep in Adults With ADHD: Systematic Review and Meta-Analysis — ScienceDirect", u: "https://www.sciencedirect.com/science/article/abs/pii/S0149763418300137" },
  { t: "How Do You Get Any Work Done? What's Your Strategy? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/qbx63y/how_do_you_get_any_work_done_whats_your_strategy/" },
  { t: "A Meta-Analysis of Randomised Controlled Trials on Adult ADHD Treatment — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36794797/" },
  { t: "Coaching for Adults With ADHD: A Prospective Study — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/15598276261432960" },
  { t: "The Experiences of Adults With ADHD in Interpersonal Relationships and Support Networks — ScienceDirect", u: "https://www.sciencedirect.com/science/article/pii/S2667321523000070" },
  { 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 Lived Experiences of Adults With Attention-Deficit/Hyperactivity Disorder — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.949321/full" },
];

const BrnSources = () => (
  <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 ADHD clinical guidelines, research into executive function, emotion regulation, sleep and burnout, and real accounts from people who have lived through the hyperfocus-crash cycle. Here's where it comes from.
        </p>
      </div>

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

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

function BrnApp() {
  return (
    <main id="main">
      <BrnNav />
      <BrnHero />
      <BrnWhatLoopsDoes />
      <BrnRecognition />
      <BrnWhyItHappens />
      <BrnReframe />
      <BrnWhyLoopsWorks />
      <BrnHowItWorks />
      <BrnWhatsInside />
      <BrnSocialProof />
      <LoopsPricing bg="bg-soft" />
      <BrnObjections />
      <BrnFAQ />
      <BrnFinalCTA />
      <BrnSources />
      <Footer />
    </main>
  );
}

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