/* Loops — "Building Better Relationships With ADHD" use-case page
   Shame-driven dread of being seen as unreliable by the people who matter most. Peer (not
   hierarchical/dependent) relationships. Five gaps: follow-through / amplification /
   attunement / shame-avoidance / reminder-resentment. Unique section: intense start vs
   quieter middle. Unique objection: "another thing my partner has to manage". CTA low bar. */

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

const REL_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 RelNav = () => {
  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">
            {REL_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">
              {REL_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 REL_HERO_BLOCKS = [
  {
    title: "Follow through more often",
    body: "Small daily nudges that help you reply, remember, and show up.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
  {
    title: "Stay steadier under friction",
    body: "Support for the moments small things start to feel huge.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793z"/></svg>),
  },
  {
    title: "Repair before shame takes over",
    body: "A quick way back in after a slip, before avoidance makes it worse.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>),
  },
];

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

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.05] text-[32px] sm:text-[44px] lg:text-[52px] fade-in-up delay-1">
          You care more than your follow-through shows. Here's why that gap keeps happening.
        </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">
          Forgotten replies, missed plans, and late apologies don't mean you don't care. They're a sign that the part of relationships ADHD makes hardest is the part nobody warned you about.
        </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 daily actions, support for the moments a small friction feels huge, 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">
        {REL_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 RelWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
        <div className="lg:order-1 flex justify-center"><LoopsGalleryPhone /></div>
        <div className="max-w-prose lg:order-2">
        <Kicker>How Loops helps</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A daily system built for the part relationships actually test.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            You don't need to want it more. You need the gap between meaning to reply, remember, or show up, and actually doing it, to get smaller.
          </p>
          <p>
            Loops gives you small daily actions, support for the moments a small friction starts to feel overwhelming, and a quick way to repair after a slip, before shame turns it into something bigger.
          </p>
          <p>
            Then it adds 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 REL_RECOGNITION = [
  "You read a message, mean to reply properly, and then it sits unanswered for days.",
  "A small comment from someone you love can knock you sideways for the rest of the day.",
  "You've forgotten a plan, a date, or a promise you genuinely meant to keep.",
  "You sometimes avoid opening a message because you already feel bad about not replying sooner.",
  "A partner or friend has become the one who reminds you of things, and you both feel worse about it.",
  "You showed up intensely at the start of a relationship and worry the same focus won't last.",
];

const RelRecognition = () => (
  <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 close relationships. If you see yourself here, you're in the right place.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {REL_RECOGNITION.map((t, i) => (
          <article key={i} className="card-hover flex gap-4 rounded-card border border-line bg-white p-6">
            <span aria-hidden="true" className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-[12px] font-bold text-brand-deep tnum">{i + 1}</span>
            <p className="text-[15px] leading-[1.6] text-ink text-pretty">{t}</p>
          </article>
        ))}
      </div>

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          None of this means you love people less. It means the follow-through side of relationships needs more support than most advice accounts for.
        </p>
      </div>

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

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

const REL_PATTERNS = [
  { title: "The follow-through gap", body: "Meaning to reply isn't the same as actually replying. A forgotten message often isn't a sign of low priority. It's a sign the moment to act on it slipped past." },
  { title: "The amplification gap", body: "A small friction can land as a much bigger emotional event. That's not oversensitivity. It's a documented part of how ADHD affects emotional regulation under pressure." },
  { title: "The attunement gap", body: "Reading the room is sometimes effortless and sometimes genuinely hard, depending on load. The same person can seem deeply present one day and distracted the next, without either being the \u201Creal\u201D version." },
  { title: "The shame-avoidance gap", body: "A small mistake can trigger enough shame to make the message harder to open. Avoidance usually grows the problem it was trying to escape." },
  { title: "The reminder-resentment gap", body: "When a partner becomes the reminder system, both people end up unhappy. One feels managed, the other feels like the only one keeping track." },
];

const RelWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not a caring problem. It's a follow-through problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Relationships run on small, repeated actions: replying, remembering, noticing, and showing up steadily. ADHD affects exactly those things, separately from how much you care.
        </p>
      </div>

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

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">None of these gaps mean the relationship is doomed. They mean the follow-through side needs its own support, separate from how much you feel.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: intense start vs quieter middle ---------------- */

const RelReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The intense start and the quieter middle need different things.
        </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>
          It's common to show up for someone with total focus at the start of a relationship or friendship, full attention, constant contact, deep interest, and then feel that intensity fade once things become familiar. That drop can feel alarming, as if the caring itself has run out.
        </p>
        <p className="text-ink font-medium">
          It usually hasn't. The early stage often runs on novelty, which ADHD brains respond to strongly. The steadier middle of a relationship runs on something different: small, repeated follow-through. Both matter, but they need different kinds of support, and most relationship advice only ever talks about the spark.
        </p>
      </div>
    </Container>
  </Section>
);

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

const REL_WITNESS_CARDS = [
  { t: "They see you carry it yourself", b: "When you close a loop, they see it. They're not chasing you or keeping the list for you. They just get to see you carrying it yourself, which is the opposite of the pattern that wears people down." },
  { t: "Not a reminder service", b: "They don't nag, they don't manage you, they don't even pay. This is support for you, not another person handed the job of remembering on your behalf." },
  { t: "You're always in control", b: "You choose who it is. It might be the partner or friend this is all about, or someone entirely separate. You decide exactly what they can see, and you can change it any time." },
  { t: "When it's finally yours to hold", b: "When the follow-through is finally yours to hold, one person glad to watch you hold it makes it lighter." },
];

const RelWhyLoopsWorks = () => (
  <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 follow through 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>There's a trap this page already names: when a partner becomes your reminder system, one of you feels managed and the other feels like the only one keeping track. So the answer isn't handing the follow-through to someone else. It's carrying it yourself, with a bit of support.</p>
          <p>That support is one person. Not a manager, not a reminder service, just someone in your corner.</p>
          <p>You choose one person you trust. It might be the partner or friend this is all about, or someone entirely separate. When you close a loop, they see it. They're not chasing you or keeping the list for you. They just get to see you carrying it yourself. 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">
        {REL_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 REL_STEPS = [
  { t: "Tell Loops what you want to follow through on", b: "Name the relationship habit you keep missing, whether that's replying, remembering plans, or checking in." },
  { t: "Choose your person, if you want one", b: "Optional, and easy to skip for now. If you'd like someone alongside you, pick one person you trust to see the small steps you're taking. They don't keep the list or do the reminding: they simply see you carrying it yourself. You decide exactly what they can see, and you can change it any time. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Short, specific nudges each day. No grand romantic gesture required. Close the loop, and your person sees it." },
  { t: "Get support when things feel like too much", b: "Quick support for the moments a small friction threatens to turn into a bigger one." },
  { t: "Repair quickly, before shame takes over", b: "A simple way back in after a slip, so avoidance doesn't get the chance to make it worse." },
];

const RelHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Simple from day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to rebuild how you relate to people. Loops fits around the relationships you already care about.
        </p>
      </div>

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

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

const REL_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The relationship habit you keep missing, described your way: replying, remembering plans, checking in, whatever it is. No categories. Just a clear sense of where you want your follow-through to catch up with how much you care." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, small enough for a busy or hard day. Some run every day, some a few times a week: reply to the message that's been sitting, a two-minute check-in, put the date in the moment it's made. A few connect to the relationship you're working on. Others are just life, like taking your meds before breakfast. Miss one and nothing is wiped out. The next action is still there, still small, still doable." },
  { t: "Your person", b: "The one you choose to see the small steps you're taking. They see you carrying the follow-through yourself, not a list of what you owe, and they're not there to do the reminding. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: a week of replies that didn't sit for days, a plan remembered without a prompt, a slip you repaired before the shame could grow. 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 the follow-through you're working on and where it tends to slip, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when a small friction is starting to feel huge, and after a slip, with a simple way to repair rather than a reason to avoid." },
];

const RelWhatsInside = () => (
  <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">
        {REL_WHATS_INSIDE.map((p, i) => (
          <article key={p.t} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex items-baseline gap-4">
              <span className="text-[30px] sm:text-[34px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">{String(i + 1).padStart(2, "0")}</span>
              <h3 className="text-[19px] sm:text-[21px] font-semibold tracking-tight2 text-ink leading-snug">{p.t}</h3>
            </div>
            <p className="mt-3 pl-0 sm:pl-[52px] text-[15.5px] sm:text-[16.5px] leading-[1.7] text-ink-2 text-pretty">{p.b}</p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

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

const REL_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the follow-through you're building.", 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. A natural fit for a couple, where both are carrying their own side.", featured: true },
];

const RelPricing = () => (
  <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">
        {REL_PRICING.map((p) => (
          <article key={p.name} className={`relative flex flex-col rounded-card border bg-white p-6 sm:p-7 ${p.featured ? "border-brand shadow-card ring-1 ring-brand/20" : "border-line shadow-soft"}`}>
            {p.tag ? <span className="absolute -top-3 left-6 rounded-pill bg-brand px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-white shadow-cta">{p.tag}</span> : null}
            <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
            <div className="mt-3 flex items-baseline gap-1">
              <span className="text-[32px] font-bold tracking-tight3 text-ink tnum">{p.price}</span>
              <span className="text-[15px] text-ink-3">{p.per}</span>
            </div>
            <p className="mt-4 flex-1 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{p.blurb}</p>
            <div className="mt-6">
              <Button variant={p.featured ? "primary" : "secondary"} size="md" href="#start">Get Early Access</Button>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          <span className="font-semibold text-ink">Prefer to pay yearly?</span> A year of it, together, with two months free. Every plan starts with a 7-day free trial. On iOS for now.
        </p>
      </div>
    </Container>
  </Section>
);

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

const REL_TESTIMONIALS = [
  { quote: "I used to let messages sit for days because I felt too guilty to open them. Having a daily nudge to just reply, even briefly, changed that completely.", who: "Graphic designer", meta: "Diagnosed with ADHD at 34" },
  { quote: "My partner had become the one who remembered everything for both of us. This helped me carry more of that myself, which helped us both.", who: "In a long-term relationship", meta: "Using Loops for 5 months" },
  { quote: "Small comments used to wreck my whole day. I'm not perfect at it now, but I come back from it much faster.", who: "Teacher, Edinburgh", meta: null },
];

const RelSocialProof = () => (
  <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">
        {REL_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. reminder-rescue 1st) ---------------- */

const REL_OBJECTIONS = [
  { q: "\u201CWon't this just turn into another thing my partner has to manage for me?\u201D", a: "No, and that's exactly the pattern this is built to avoid. Loops supports you directly, so the work of remembering and following through sits with you, not with the people you love. If you do choose to share your progress, your person only sees you carrying it yourself, never a list to keep on your behalf." },
  { q: "\u201CWhat if I just always disappoint the people I love, no matter what I try?\u201D", a: "That fear is understandable, but it's not the full picture. Forgetting and following through late are usually executive function problems, not evidence of how much you care, and they respond well to the right support." },
  { q: "\u201CI've tried reminders and calendars before. They didn't last.\u201D", a: "Most reminder systems rely on you remembering to check them. Loops is built around small daily prompts that meet you where you already are, rather than one more system to maintain." },
  { q: "\u201CI'm worried I'll get defensive or shut down if this brings up hard feelings.\u201D", a: "That's a common response to shame, not a flaw in you. Loops focuses on small, low-stakes steps specifically because big emotional asks are where most attempts at change tend to stall." },
  { q: "\u201CIs this a replacement for couples therapy?\u201D", a: "No. Loops helps with your own daily follow-through, which can ease some of the friction, but it isn't therapy and doesn't replace it. If a relationship needs deeper support, a good couples therapist is a genuinely valuable thing, and Loops can sit happily alongside that work." },
];

const RelObjections = () => (
  <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">
        {REL_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>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

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

const REL_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. For relationships, it focuses on small daily actions, one person who sees you carrying your follow-through yourself, support in moments of friction, and quick repair after a slip." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see the small steps you're taking, never a list of what you owe. They don't nag, remind or manage you: they simply see you carrying the follow-through yourself, which is the opposite of the reminder-system pattern that wears couples down. You don't need one to start, and this can stay completely private. Your person is there for if and when you want it. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with relationships if you have ADHD?", a: "It breaks follow-through into one manageable daily step, offers support when a small friction starts to feel overwhelming, and helps you repair quickly after a mistake instead of avoiding it." },
  { q: "Why is it hard to follow through in relationships even when you care deeply?", a: "Relationships depend on small, repeated actions like replying and remembering, which ADHD affects through executive function and time perception. The struggle is rarely about how much someone cares." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the patterns on this page feel familiar, Loops is built for you." },
  { q: "Is this a replacement for couples therapy?", a: "No. Loops supports the individual follow-through side of relationships and works well alongside therapy, not instead of it." },
  { q: "Will this stop arguments happening altogether?", a: "No, and it wouldn't be honest to promise that. Loops is built to help you stay steadier under friction and recover faster afterwards, not to remove all conflict." },
  { q: "How long does it take to see results?", a: "Some people notice a difference in how replying or remembering feels within the first couple of weeks. Steadier patterns in a relationship usually build over a few months." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

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

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

const RelFinalCTA = () => (
  <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>Before the guilt grows</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]">
            Reply before the guilt gets a chance to grow.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need to become a different partner or friend. You need a bit more support around the moments that keep slipping, and, if you want, 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 REL_SOURCES = [
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "ADHD and Relationships — ADHD Aware", u: "https://adhdaware.org.uk/resources/adhd-and-relationships/" },
  { t: "The Lived Experiences of Adults With ADHD: A Rapid Review of Qualitative Evidence — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.949321/full" },
  { t: "Emotion Dysregulation in Adults With ADHD: A Meta-Analysis — BMC Psychiatry", u: "https://link.springer.com/article/10.1186/s12888-020-2442-7" },
  { t: "Investigating Self-Control Resource Depletion as a Situational Risk Factor for Aversive Interpartner Communication by Young Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/29865884/" },
  { t: "Social Cognition in Adult ADHD: A Systematic Review — Frontiers in Psychology", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.940445/full" },
  { t: "Internalized Stigma, Anticipated Discrimination and Perceived Public Stigma in Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/30341693/" },
  { t: "“I Felt Like a Burden”: An Exploration Into the Experience of Romantic Relationships for People With ADHD — ResearchGate", u: "https://www.researchgate.net/publication/398104576_I_Felt_Like_a_Burden_An_Exploration_Into_the_Experience_of_Romantic_Relationships_for_People_With_ADHD" },
  { t: "A Research on the Marital Conflict and Marital Adjustment of Adults With ADHD — ResearchGate", u: "https://www.researchgate.net/publication/340105583_A_Research_on_the_Marital_Conflict_and_Marital_Adjustment_of_Adults_with_Attention_Deficit_Hyperactivity_Disorder_XVIEuropean_Co" },
  { t: "“Dysregulated Not Deficit”: A Qualitative Study on Symptomatology of ADHD in Young Adults — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10569543/" },
  { t: "Partners With ADHD Want to Be Reminded of Chores — r/ADHD_partners", u: "https://www.reddit.com/r/ADHD_partners/comments/ryfrvi/partners_with_adhd_want_to_be_reminded_of_chores/" },
  { t: "Experience of CBT in Adults With ADHD: A Mixed Methods Study — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2024.1341624/full" },
  { t: "Integrative Couples Group Treatment for Emerging Adults With ADHD Symptoms — ResearchGate", u: "https://www.researchgate.net/publication/266857817_Integrative_Couples_Group_Treatment_for_Emerging_Adults_With_ADHD_Symptoms" },
  { t: "CBT for Adult ADHD: From Intention to Action — Psychwire", u: "https://psychwire.com/free-resources/q-and-a/15i4yzk/cbt-for-adult-adhd-from-intention-to-action" },
  { t: "Preferences for Social Support and Perceived Support Gaps Among ADHD Adults — ResearchGate", u: "https://www.researchgate.net/publication/390816706_Preferences_for_social_support_and_perceived_support_gaps_among_attentiondeficithyperactivity_disorder_ADHD_adults" },
  { t: "Not Replying to Messages — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/usczn0/not_replying_to_messages/" },
  { t: "Understood: Real-Time Communication Support for Adults With ADHD Using Mixed Reality — arXiv", u: "https://arxiv.org/abs/2507.18151" },
  { t: "Parental ADHD in Pregnancy and the Postpartum Period: A Systematic Review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33421168/" },
];

const RelSources = () => (
  <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 relationship research, studies on emotional regulation and follow-through in adult ADHD, and real accounts from people trying to be reliable to the people they love. Here's where it comes from.
        </p>
      </div>

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

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

function RelApp() {
  return (
    <main id="main">
      <RelNav />
      <RelHero />
      <RelWhatLoopsDoes />
      <RelRecognition />
      <RelWhyItHappens />
      <RelReframe />
      <RelWhyLoopsWorks />
      <RelHowItWorks />
      <RelWhatsInside />
      <RelSocialProof />
      <LoopsPricing bg="bg-soft" />
      <RelObjections />
      <RelFAQ />
      <RelFinalCTA />
      <RelSources />
      <Footer />
    </main>
  );
}

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