/* Loops — "Body Doubling With ADHD" — mechanism explainer page.
   Visitor arrives already familiar with the term; page explains the mechanism
   (co-regulation, not supervision) and reframes the failure point as dependency
   on someone else's calendar. Honest about mixed evidence + non-universality.
   Unique section: presence-on-demand reframe. */

/* ---------------- Page nav ---------------- */

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

const BdNav = () => {
  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">
            {BD_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">
              {BD_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 BD_HERO_BLOCKS = [
  {
    title: "Not supervision",
    body: "It's not about being watched. It's about not being alone with the task.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/><path fillRule="evenodd" d="M5.216 14A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1z"/><path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/></svg>),
  },
  {
    title: "No arranging required",
    body: "Presence you don't have to schedule, ask for, or feel guilty about needing again.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.68 5.792 7.345 7.75 5.681 9.708a2.75 2.75 0 1 1 0-3.916ZM8 6.978 6.416 5.113l-.014-.015a3.75 3.75 0 1 0 0 5.804l.014-.015L8 9.022l1.584 1.865.014.015a3.75 3.75 0 1 0 0-5.804l-.014.015zm.656.772 1.665-1.958a2.75 2.75 0 1 1 0 3.916z"/></svg>),
  },
  {
    title: "Works on ordinary tasks",
    body: "Admin, apps, the pile you've been avoiding. Nothing needs to be dramatic first.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/></svg>),
  },
];

const BdHero = () => (
  <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">
          Why does just having someone there make starting so much easier?
        </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">
          Body doubling isn't a trick or a trend. For a lot of ADHD brains, another person's presence genuinely changes what's possible to start. Here's the actual mechanism, and a way to get it without arranging it every single time.
        </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">7-day free trial. No calls to schedule.</span>
        </div>
      </div>

      {/* Three icon blocks */}
      <div className="mx-auto mt-14 lg:mt-16 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {BD_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 fade-in-up delay-4">Loops is a daily coaching app for people with ADHD.</p>
    </Container>
  </section>
);

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

const BdWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <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]">
          Presence, without the favour.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Community-recommended body doubling works. The research is starting to catch up with what people have known for years: another person's presence lowers the barrier to starting in a way that willpower and reminders don't. The problem is that most versions of it depend on someone else's calendar, someone else's goodwill, and your own willingness to keep asking.
          </p>
          <p>
            Loops gives you that same sense of not being alone with a task, on demand, every day, without a favour attached to it.
          </p>
        </div>
        <div className="mt-8">
          <Button variant="primary" size="md" href="#start">Get Early Access</Button>
        </div>
      </div>
    </Container>
  </Section>
);

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

const BD_RECOGNITION = [
  "You've heard \u201Cget a body double\u201D so many times it barely registers as advice anymore. You still haven't tried it properly.",
  "You did it once, with a friend on a call, and got more done in forty minutes than you had all week. You haven't done it since.",
  "You don't want to keep asking the same person to sit there while you do your own admin. It feels like a lot to ask for something that sounds so small.",
  "You've tried a public body-doubling stream or a stranger's co-working room and found it stressful rather than calming, so you assumed it just doesn't work for you.",
  "You can't explain why knowing someone else is quietly doing their own thing nearby makes your task feel possible when being completely alone with it doesn't.",
  "You've noticed it works better for some tasks than others, and you've never quite worked out why.",
];

const BdRecognition = () => (
  <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 about body doubling.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {BD_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 about willpower or discipline. Another person's presence changes something real about how an ADHD brain approaches a task, and it's worth understanding why before deciding it's not for you.
        </p>
      </div>

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

/* ---------------- Why it works (5 stages) ---------------- */

const BD_PATTERNS = [
  { title: "Co-regulation, not supervision", body: "The value isn't in being checked on. It's in borrowing someone else's steadier state. People consistently describe body doubling as helping them start, not because the other person is enforcing anything, but because another regulated presence makes the task feel more approachable, a pattern researchers describe as co-regulation rather than accountability." },
  { title: "It lowers the cost of the first move", body: "Starting is usually the hardest part of any task. Presence makes that first move cost less. Task initiation is one of the clearest, most consistently reported bottlenecks in ADHD, and body doubling is widely reported as one of the few things that reliably lowers the activation barrier at exactly that point." },
  { title: "Arranging it is itself a task", body: "A support that only works after you've already crossed the initiation barrier will fail at the exact moment you need it most. Messaging someone, agreeing a time, and showing up to a call all require the same starting energy the task itself does. This is a real design flaw in how body doubling usually gets recommended, not a personal failure to use it properly." },
  { title: "It isn't universal, and that's a real finding, not a failure", body: "Some people find another presence stabilising. Others find it distracting, or find being watched adds pressure rather than removing it. Community and early research both describe this as genuinely mixed rather than uniformly positive, which means a version that can be adjusted, or opted out of, matters more than a single fixed format." },
  { title: "The favour cost adds up", body: "Needing to ask someone else's time, over and over, for something that sounds small, has a real emotional cost of its own. Even when a friend is happy to help, repeatedly asking for the same kind of support can feel like a burden to place on a relationship, which is part of why body doubling so often gets tried once and then quietly stops." },
];

const BdWhyItWorks = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not about being watched. It's about not being alone with it.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Body doubling has one of the widest gaps between how strongly it's endorsed by the ADHD community and how much formal research exists behind it. That gap is closing, and what's emerging explains a lot about why it works, and why it doesn't work the same way for everyone.
        </p>
      </div>

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

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">Loops is built around the same mechanism that makes body doubling work, minus the parts that make it hard to keep using.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: presence-on-demand reframe ---------------- */

const BdReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing 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]">
          The problem was never body doubling. It was needing someone else's calendar to get it.
        </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>
          Every honest account of body doubling includes the same caveat: it works, but it isn't always available exactly when it's needed, and arranging it depends on someone else's time. For a strategy whose whole value is removing the cost of starting, requiring a scheduled favour first undoes a lot of what makes it useful.
        </p>
        <p className="text-ink font-medium">
          The fix isn't trying to get better at asking for help, or finding a stranger's livestream to sit in. It's presence that's there before you need to ask for it, so the moment you're stuck is the moment support is already available, not the moment you have to go and find some.
        </p>
      </div>
    </Container>
  </Section>
);

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

const BD_STEPS = [
  { t: "Name the task you keep avoiding", b: "Admin, an application, a reply you've been putting off. Plain language. No setup required." },
  { t: "Get a daily action, and coaching alongside it", b: "Not a list. One task, with the sense of someone alongside you while you do it, not a supervisor, a presence." },
  { t: "Start with support already there", b: "No message to send, no favour to spend, no waiting for someone to be free. The support exists before the moment you need it." },
  { t: "Build the habit without depending on anyone else's time", b: "Over weeks, the pattern that used to require a favour becomes something you can access on your own terms, every day." },
];

const BdHowItWorks = () => (
  <Section id="how" className="bg-soft">
    <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]">
          Someone there, whenever the task is.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to schedule a session or explain yourself first. Loops works in the moment you're stuck.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {BD_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">
        If it doesn't feel right for a particular task, that's useful information. Loops adjusts rather than insisting on one format.
      </p>
    </Container>
  </Section>
);

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

const BD_TESTIMONIALS = [
  { quote: "I used to only get things done if a friend happened to be free to sit on a call. I felt bad asking so often. Having that same feeling available whenever I actually need it, not whenever someone else does, has genuinely changed my week.", who: "Marketing manager", meta: "Diagnosed with ADHD at 29" },
  { quote: "I always thought body doubling just didn't work for me because I tried a stranger's co-working stream once and hated it. Turns out I just needed a version that wasn't public and wasn't performative.", who: "Software developer", meta: "Using Loops for 10 weeks" },
  { quote: "Nobody could ever explain why sitting near someone doing their own thing helped me start my own boring tasks. It just did. Having that without needing to ask anyone for it is the actual difference.", who: "Freelance illustrator, Bristol", meta: null },
];

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

/* ---------------- Objections (4, incl. safeguarding link) ---------------- */

const BD_OBJECTIONS = [
  { q: "\u201CI tried it once and it felt awkward.\u201D", a: "That's a genuinely common reaction, and it doesn't mean body doubling can't work for you. Format matters a lot: public co-working streams and strangers feel very different from a quieter, lower-pressure presence. It's worth trying a different version before concluding it's not for you." },
  { q: "\u201CI don't want to keep asking people for this.\u201D", a: "You shouldn't have to. Needing to ask someone else's time repeatedly is one of the main reasons body doubling stops being used, even when it works. Loops removes that dependency entirely." },
  { q: "\u201CIsn't this just supervision with extra steps?\u201D", a: "No, and that distinction matters. The evidence points to co-regulation, not monitoring, as the actual mechanism. Nobody is checking your work. The value is in not being alone with the task, not in being watched while you do it." },
  { q: "\u201CWhat if this is more than a starting problem for me?\u201D", a: "That's worth taking seriously. If avoidance is tied to something heavier, persistent low mood, anxiety, or burnout, it's a good idea to speak with a doctor. Loops works well alongside professional support, but it isn't a substitute for it.", link: { label: "Find help and support resources", href: "/support/find-help/" } },
];

const BdObjections = () => (
  <Section id="objections" className="bg-soft">
    <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">
        {BD_OBJECTIONS.map((o) => (
          <article key={o.q} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">{o.q}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{o.a}</p>
            {o.link ? (
              <a href={o.link.href} className="focus-ring mt-4 inline-flex items-center gap-2 rounded-pill bg-brand-soft px-4 py-2.5 text-[14px] font-semibold text-brand-deep transition-colors hover:bg-muted">
                {o.link.label}
                <svg width="15" height="15" 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>
              </a>
            ) : null}
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

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

const BD_FAQS = [
  { q: "What is body doubling?", a: "Body doubling is working alongside another person, in person or remotely, while you each do your own separate task. Neither person helps the other directly. The presence itself is what helps." },
  { q: "Why does body doubling help with ADHD specifically?", a: "It's believed to work through co-regulation, borrowing another person's steadier, more regulated state, which lowers the cost of starting a task that would otherwise feel too effortful to begin alone." },
  { q: "Is body doubling backed by research, or is it just a community idea?", a: "Both. It started as a widely shared community strategy well before formal research existed, and early studies are now finding real, encouraging results, though the evidence base is still smaller and newer than for medication or CBT." },
  { q: "Does body doubling work for everyone?", a: "No, and that's a genuine, documented finding rather than a personal failing. Some people find a present, watching, or listening companion stabilising. Others find it distracting or pressuring. It's worth trying more than one format before ruling it out." },
  { 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 available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "How is this different from a co-working video call?", a: "A scheduled call depends on someone else being free at the same time as you. Loops is built to be there when you need it, not when a calendar allows it." },
];

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

const BdFAQ = () => (
  <Section id="faq" className="bg-base">
    <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">
          {BD_FAQS.map((f, i) => <BdFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const BdFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <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>Presence, on demand</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]">
            Someone there, right now. No favour needed.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a scheduled call. Not a stranger's livestream. Just enough presence to make starting possible today.
          </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">7-day free trial. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Related pages ---------------- */

const BD_RELATED = [
  { t: "Stop procrastinating with ADHD", d: "Why arranging body doubling can become its own procrastinated task, and what helps.", href: "/adhd/stop-procrastinating-with-adhd/" },
  { t: "Finish what you started with ADHD", d: "Presence as a completion support, not just a way to begin.", href: "/adhd/finish-what-you-started-with-adhd/" },
  { t: "Get fit with ADHD", d: "Co-regulation, exercise, and the pull of doing it alongside someone.", href: "/adhd/get-fit/" },
  { t: "Build a side project with ADHD", d: "Accountability that feels safe rather than performative.", href: "/adhd/build-a-side-project-with-adhd/" },
];

const BdRelated = () => (
  <Section id="related" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Keep exploring</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          If you're exploring this alongside other patterns
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {BD_RELATED.map((r) => (
          <a key={r.href} href={r.href} className="card-hover group flex items-start justify-between gap-4 rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="max-w-prose">
              <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{r.t}</h3>
              <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{r.d}</p>
            </div>
            <span aria-hidden="true" className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-brand transition-transform duration-200 group-hover:translate-x-0.5">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
          </a>
        ))}
      </div>
    </Container>
  </Section>
);

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

function BdApp() {
  return (
    <main id="main">
      <BdNav />
      <BdHero />
      <BdWhatLoopsDoes />
      <BdRecognition />
      <BdWhyItWorks />
      <BdReframe />
      <BdHowItWorks />
      <BdSocialProof />
      <BdObjections />
      <BdFAQ />
      <BdFinalCTA />
      <BdRelated />
      <Footer />
    </main>
  );
}

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