/* Loops — "Rejection Sensitive Dysphoria With ADHD" — mechanism explainer page.
   Emotionally exposed topic: validate intensity without overclaiming clinical status.
   Honest that "RSD" is a contested, informal term; underlying pain is well documented.
   Unique section: the label vs. the experience. */

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

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

const RsdNav = () => {
  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">
            {RSD_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">
              {RSD_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 RSD_HERO_BLOCKS = [
  {
    title: "A real, documented experience",
    body: "Not oversensitivity. A pattern with genuine research behind the underlying phenomenon.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>),
  },
  {
    title: "Named honestly",
    body: "RSD isn't a formal diagnosis. What it describes is real, even where the label is still contested.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524z"/><path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Support for the moment before",
    body: "Help for the anticipation, not just the aftermath, so the fear of a reaction doesn't stop you acting.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/></svg>),
  },
];

const RsdHero = () => (
  <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">
          The pain feels bigger than the moment. That doesn't mean it isn't real.
        </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">
          "Rejection sensitive dysphoria" describes something a lot of people with ADHD recognise instantly: intense, disproportionate pain around criticism, rejection, or even the anticipation of it. Here's what's actually known, what isn't, and what tends to help.
        </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 complicated setup.</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">
        {RSD_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 RsdWhatLoopsDoes = () => (
  <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]">
          Coaching for the moment right before, not just comfort after.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            For a lot of people, the hardest part isn't the actual criticism or rejection. It's the anticipation beforehand, the moment before sending a message, sharing work, or asking for something, when the imagined reaction already feels unbearable.
          </p>
          <p>
            Loops helps you move through that moment: a small, structured next step, coaching that takes the intensity seriously without amplifying it, and a way back in when a reaction does land hard.
          </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 RSD_RECOGNITION = [
  "A short, neutral reply gets read five times, each time hunting for a colder meaning that probably isn't there.",
  "You've stopped sharing certain ideas or work, not because you don't believe in them, but because a lukewarm response would hurt more than not trying.",
  "Mild feedback at work sits with you for days, replaying, even when you know rationally it wasn't a big deal.",
  "You know the reaction feels bigger than the moment deserves. Knowing that doesn't make it smaller.",
  "A delayed reply from a friend or partner can spiral into a genuine conviction that something's wrong, before there's any actual evidence of that.",
  "You've been called \u201Ctoo sensitive\u201D enough times that you've started policing your own reactions before anyone else gets the chance to.",
];

const RsdRecognition = () => (
  <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 around rejection and criticism.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {RSD_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 oversensitivity or a character flaw. Heightened pain around rejection and criticism is a well-documented pattern in ADHD, even though the exact label for it is still debated.
        </p>
      </div>

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

/* ---------------- What's actually happening (5 stages) ---------------- */

const RSD_PATTERNS = [
  { title: "The underlying experience is real and well supported", body: "Heightened sensitivity to criticism, rejection, and perceived failure is consistently described in research and community accounts of ADHD. Adults with ADHD report lower self-compassion and higher perceived criticism than the general population, both linked to worse mental health outcomes, which supports the phenomenon even before any specific label is applied to it." },
  { title: "The specific term is genuinely contested", body: "\u201CRejection sensitive dysphoria\u201D isn't a formal diagnostic category, and current scholarship notes a lack of consensus on how it should even be defined. This doesn't make the pain less real. It means the label functions as useful shorthand for something genuine, rather than as an established clinical diagnosis." },
  { title: "Anticipation is often worse than the event itself", body: "For many people, the anticipation of a negative reaction is reported as feeling as painful as the reaction actually happening. This makes the moment right before sharing, asking, or sending disproportionately high-stakes, independent of how the situation is actually likely to go." },
  { title: "Emotional dysregulation is the better-supported underlying mechanism", body: "Rather than a single distinct construct, much of what gets labelled RSD sits within the broader, better-evidenced pattern of emotional dysregulation in adult ADHD. A 2023 systematic review found more frequent use of non-adaptive emotional strategies, suppression, rumination, catastrophising, self-blame, among adults with ADHD, which offers a more solid explanation than any single named syndrome." },
  { title: "It amplifies whatever else is already happening", body: "This pattern doesn't sit in isolation. It tends to intensify grief, workplace stress, relationship friction, and the fear of sharing creative or professional work. A neutral piece of feedback or a delayed reply can become disproportionately painful precisely because this amplification effect is already active underneath it." },
];

const RsdWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not that you're too sensitive. It's a documented pattern, with a genuinely contested name.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          "Rejection sensitive dysphoria" is one of the most emotionally resonant terms in ADHD conversation, and one of the most worth explaining honestly.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {RSD_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 to support the moment before the fear takes over, not to explain the feeling away.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the label vs. the experience ---------------- */

const RsdReframe = () => (
  <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 name is contested. The pain isn't.
        </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 worth being precise about something most content on this topic glosses over. "Rejection sensitive dysphoria" is not a formally recognised diagnosis, and clinicians and researchers genuinely disagree about how it should be defined or whether it should be treated as a distinct condition at all.
        </p>
        <p className="text-ink font-medium">
          That disagreement is about the label, not about whether the underlying pain is real. The intense distress around criticism, rejection, and perceived failure is well supported by research on emotional dysregulation and criticism sensitivity in adult ADHD. Getting this distinction right matters, because it means the most useful support isn't a diagnosis-chasing search for the exact right term. It's addressing the actual, well-evidenced mechanism underneath it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const RSD_STEPS = [
  { t: "Name the thing you're avoiding because of how it might land", b: "A message, an application, sharing a piece of work. No need to explain the feeling first, just the task." },
  { t: "Get a small, structured next step", b: "Not \u201Cjust send it.\u201D A specific, lower-stakes version of the action that makes starting less loaded." },
  { t: "Get coached through the anticipation", b: "Loops helps you move through the moment before, rather than waiting for the fear to pass on its own." },
  { t: "Get a shame-safe way back in if a reaction does land hard", b: "If it does hurt, Loops helps you recover and re-engage, rather than letting one hard moment become a reason to stop trying altogether." },
];

const RsdHowItWorks = () => (
  <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]">
          Support for the moment before, and a way back in after.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need the feeling to disappear before you can act. Loops works alongside it.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {RSD_STEPS.map((s, i) => (
          <li key={s.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center rounded-pill bg-brand text-white text-[14px] font-bold tnum shadow-cta">{i + 1}</span>
              <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-brand-deep">Step {i + 1}</span>
            </div>
            <h3 className="mt-4 text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{s.t}</h3>
            <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.b}</p>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need to feel ready. A small next step is enough to start with.
      </p>
    </Container>
  </Section>
);

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

const RSD_TESTIMONIALS = [
  { quote: "I spent years thinking I was just too sensitive. Finding out the pain was real, even if the label is still debated, took a weight off I didn't know I was carrying.", who: "Content designer", meta: "Diagnosed with ADHD at 33" },
  { quote: "The anticipation was always worse than what actually happened. Having something help me through the moment before sending a message changed how often I actually send it.", who: "Product manager", meta: "Using Loops for 9 weeks" },
  { quote: "I used to disappear for a week after one piece of critical feedback. Having a small way back in, instead of just waiting it out alone, made an enormous difference.", who: "Photographer and small business owner, Leeds", meta: null },
];

const RsdSocialProof = () => (
  <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">
        {RSD_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 RSD_OBJECTIONS = [
  { q: "\u201CIs this even a real thing, or is it just something from TikTok?\u201D", a: "The underlying pain is genuinely well supported. The specific label is more contested than the feeling itself. Heightened sensitivity to criticism and rejection in ADHD is documented in research on emotional dysregulation and self-compassion, even though \u201Crejection sensitive dysphoria\u201D as a named, distinct condition isn't formally recognised." },
  { q: "\u201CAm I just being too sensitive?\u201D", a: "No. What you're describing fits a well-documented pattern, not a personal flaw. Naming it as a pattern rather than a character trait is often the first useful step." },
  { q: "\u201CWhat if my reactions feel bigger than this page describes?\u201D", a: "That's worth taking seriously. If rejection or criticism is triggering distress that feels overwhelming, prolonged, or is affecting your daily functioning, speaking with a doctor or a therapist is a genuinely good idea. 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/" } },
  { q: "\u201CWhat if I'm not diagnosed with ADHD?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise these patterns as familiar. If that's you, Loops is built for you." },
];

const RsdObjections = () => (
  <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">
        {RSD_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 RSD_FAQS = [
  { q: "What is rejection sensitive dysphoria?", a: "It's a widely used, informal term describing intense emotional pain in response to perceived or actual rejection, criticism, or failure. It isn't a formal clinical diagnosis, but the underlying experience is well supported by research on emotional dysregulation in adult ADHD." },
  { q: "Is rejection sensitive dysphoria a recognised diagnosis?", a: "No. It isn't included in formal diagnostic manuals, and researchers disagree about how it should be defined. The distress it describes is real and documented, even though the specific label remains informal." },
  { q: "Why does ADHD cause this kind of sensitivity?", a: "It's linked to broader emotional dysregulation in ADHD, which involves more frequent use of non-adaptive emotional strategies such as rumination, catastrophising, and self-blame, alongside lower self-compassion and higher perceived criticism." },
  { q: "Why does anticipating rejection sometimes feel worse than the actual event?", a: "Many people describe the anticipation of a negative reaction as feeling as painful as the reaction itself, which makes the moment right before an action, sending, sharing, asking, disproportionately high-stakes." },
  { 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: "Should I see a doctor or therapist as well?", a: "If this kind of sensitivity is causing significant distress or affecting your daily life, yes. Loops is a daily coaching tool that works well alongside professional support, but it's not a replacement for it." },
];

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

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

const RsdFinalCTA = () => (
  <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>One small step at a time</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]">
            Send it anyway. Share it anyway.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a promise the feeling disappears. Support for the moment it usually stops you.
          </p>
          <div className="mt-8 flex flex-col items-center gap-3">
            <Button variant="primary" size="lg" href="#start">
              Get Early Access
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </Button>
            <span className="text-[13.5px] text-ink-3">7-day free trial. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

const RSD_RELATED = [
  { t: "Share your work with ADHD", d: "Rejection sensitivity at the threshold of putting something out there.", href: "/adhd/share-your-work-with-adhd/" },
  { t: "Building better relationships with ADHD", d: "The amplification gap, and how it shapes closeness and conflict.", href: "/adhd/building-better-relationships/" },
  { t: "Growing an audience with ADHD", d: "Public rejection, feedback, and carrying on after it lands.", href: "/adhd/growing-an-audience-with-adhd/" },
  { t: "Heal after loss with ADHD", d: "How rejection sensitivity can act as a grief amplifier.", href: "/adhd/heal-after-loss/" },
];

const RsdRelated = () => (
  <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">
        {RSD_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 RsdApp() {
  return (
    <main id="main">
      <RsdNav />
      <RsdHero />
      <RsdWhatLoopsDoes />
      <RsdRecognition />
      <RsdWhyItHappens />
      <RsdReframe />
      <RsdHowItWorks />
      <RsdSocialProof />
      <RsdObjections />
      <RsdFAQ />
      <RsdFinalCTA />
      <RsdRelated />
      <Footer />
    </main>
  );
}

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