/* Loops — "The Shame Spiral With ADHD" — mechanism explainer page.
   Read most often in the aftermath of a lapse. Separate the weight from the person.
   Shame as mechanism, not aftermath. Unique section: pattern evidence vs character evidence.
   No guilt-inducing language, including no implied guilt about feeling shame. */

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

const SH_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 ShNav = () => {
  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">
            {SH_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">
              {SH_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 SH_HERO_BLOCKS = [
  {
    title: "A documented pattern",
    body: "Adults with ADHD consistently report lower self-compassion and higher perceived criticism. This is research, not reassurance.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/></svg>),
  },
  {
    title: "Shame works against you",
    body: "Guilt about not starting doesn't create motivation. The evidence shows it actively makes starting harder.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m2 1.5a2 2 0 1 0-3 1.732V4H5a.5.5 0 0 0 0 1h2v6.708A4.5 4.5 0 0 1 4 8.5a.5.5 0 0 0-1 0 5.5 5.5 0 0 0 5 5.478V14a.5.5 0 0 0 1 0v-.022a5.5 5.5 0 0 0 5-5.478.5.5 0 0 0-1 0 4.5 4.5 0 0 1-3 4.208V5h2a.5.5 0 0 0 0-1H9V3.232A2 2 0 0 0 10 1.5"/></svg>),
  },
  {
    title: "A way back in",
    body: "Loops treats returning after a lapse as a skill with support behind it, not something willpower should handle alone.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1"/><path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117M11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5M4 1.934V15h6V1.077z"/></svg>),
  },
];

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

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[54px] fade-in-up delay-1">
          It's not the task that got heavier. It's everything the task now stands for.
        </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">
          Every abandoned planner, broken streak, and unfinished project adds weight to the next attempt. That's the shame spiral, and it's one of the most consistent patterns in adult ADHD. It has a mechanism. The mechanism isn't your character.
        </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">
        {SH_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 ShWhatLoopsDoes = () => (
  <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]">
          Built for the restart, because that's where the spiral wins.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most tools are built for the start: fresh plans, new streaks, day one energy. But the moment that decides everything with ADHD is the return after a lapse, when shame has made the way back feel heavier than the original task ever was.
          </p>
          <p>
            Loops is designed around that moment. A small, specific way back in. Coaching that treats a missed day as information, not a verdict. No punitive streaks, no guilt mechanics, no starting over from zero.
          </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 SH_RECOGNITION = [
  "There's a folder, a drawer, or an app you avoid opening, because everything in it is unfinished and looking at it feels like reading a verdict.",
  "You missed one day of a streak you'd kept for weeks. You never went back. The app is still on your phone, quietly radiating guilt.",
  "Every new attempt starts with \u201Cthis time I'll do it properly,\u201D which somehow makes it feel heavier before you've even begun.",
  "A message went unanswered a little too long. Now the delay itself is the problem, and replying feels harder every day you don't.",
  "Each abandoned planner or system gets filed as evidence about you, rather than evidence about the planner.",
  "You criticise yourself pre-emptively, before anyone else gets the chance, because it feels safer than being caught off guard.",
];

const ShRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          You're not alone in this.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often when shame has entered the loop.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {SH_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 is a character flaw. It's a well-documented loop where shame from the last attempt raises the cost of the next one, and it can be interrupted.
        </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 SH_PATTERNS = [
  { title: "Shame is part of the mechanism, not the aftermath", body: "Guilt about not starting doesn't create motivation. It actively works against it. Research on procrastination and emotional dysregulation shows people are often not unmotivated but actively escaping a task that feels likely to expose failure, which creates a self-reinforcing loop: avoid, feel guilty, feel ashamed, avoid further." },
  { title: "The pattern is measurable, not imagined", body: "Adults with ADHD report lower self-compassion and higher perceived criticism than the general population, and both are linked to worse mental health outcomes. A 2023 systematic review found more frequent use of non-adaptive emotional strategies among adults with ADHD, including suppression, rumination, catastrophising, and self-blame." },
  { title: "Every attempt carries the ones before it", body: "Each unfinished project becomes evidence in an internal story that the problem is personal rather than structural. That accumulated evidence measurably raises the barrier to starting again, which is why the tenth restart can feel heavier than the first attempt ever did." },
  { title: "Avoidance is a survival pattern, not indifference", body: "One study found 88.5% of adults with ADHD reported anticipating discrimination in daily life. After years of criticism, hiding a mistake, delaying an apology, or not opening the message stops being a choice and starts being a reflex, even though avoidance almost always grows the problem it's trying to escape." },
  { title: "Pushing harder makes it worse, and that's a finding, not an excuse", body: "Research on self-compassion and stigma suggests that pushing harder in the presence of high shame can actively worsen the mechanisms keeping someone stuck. Reducing shame improves persistence after setbacks and willingness to re-attempt avoided tasks, which makes it a practical intervention rather than a soft one." },
];

const ShWhyItHappens = () => (
  <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]">
          Shame isn't how the struggle ends. It's part of what keeps the struggle going.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          The shame spiral is one of the most consistent findings across research on adult ADHD, and one of the least explained. Here's the actual mechanism.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {SH_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 this evidence: lower the emotional cost of the restart, and the restart starts happening.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: pattern vs character evidence ---------------- */

const ShReframe = () => (
  <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]">
          Your unfinished things are evidence of a pattern. They were never evidence about your character.
        </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>
          Here's the distinction that changes what help looks like. When something goes unfinished, there are two available explanations. One: "this happens because several specific, documented mechanisms are involved." Two: "this happens because something is wrong with me."
        </p>
        <p className="text-ink font-medium">
          The second explanation feels more honest, because it's had years of repetition behind it. But the research supports the first. And the distinction isn't just kinder, it's functional: treating unfinished work as a structural pattern rather than a personal verdict measurably lowers the barrier to trying again. Self-criticism feels like accountability. In practice, it's the fuel the spiral runs on.
        </p>
      </div>
    </Container>
  </Section>
);

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

const SH_STEPS = [
  { t: "Start with one thing, sized so it can't become a verdict", b: "Not a life overhaul. One small daily action, chosen so that even a hard day can absorb it." },
  { t: "Get coaching that notices partial progress", b: "Loops recognises movement, not just completion, so an imperfect day still counts as a day something happened." },
  { t: "When a day goes wrong, get a way back in, not a reset to zero", b: "No broken streaks, no guilt screens. A missed day is treated as information, and the next step stays small and specific." },
  { t: "Watch the evidence change", b: "Every return gets noticed. Over time you build a record of coming back, which is the only kind of evidence that competes with the old story." },
];

const ShHowItWorks = () => (
  <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]">
          Small enough to start. Safe enough to come back to.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to believe a new story about yourself yet. You just need one restart that doesn't cost you a fight with yourself first.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {SH_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 momentum to start. Starting is how the momentum happens.
      </p>
    </Container>
  </Section>
);

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

const SH_TESTIMONIALS = [
  { quote: "I'd stopped starting things because I couldn't face adding another one to the pile. The first thing Loops changed wasn't my productivity. It was how much a missed day cost me.", who: "Software developer", meta: "Diagnosed with ADHD at 29" },
  { quote: "Every app I'd tried made me feel worse when I broke the streak. This is the first thing that expected me to have bad days and had a plan for them.", who: "Teacher and parent", meta: "Using Loops for 4 months" },
  { quote: "The phrase that stuck with me was pattern, not verdict. I'd been treating fifteen years of unfinished projects as a personality. Turns out it was a mechanism.", who: "Freelance illustrator, Manchester", meta: null },
];

const ShSocialProof = () => (
  <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 know exactly how heavy a restart can feel.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {SH_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 SH_OBJECTIONS = [
  { q: "\u201CIsn't this just letting myself off the hook?\u201D", a: "No, and the evidence is direct on this point. Shame doesn't produce follow-through, it reduces it: self-criticism measurably lowers the likelihood of re-attempting avoided tasks. Loops keeps the accountability and removes the judgement, because that combination is what the research supports." },
  { q: "\u201CI've abandoned every app I've ever downloaded. Why would this be different?\u201D", a: "Most tools punish exactly the pattern this page describes. Streaks that reset to zero and guilt-based reminders are designed for brains that don't lapse. Loops is designed around the lapse, so the moment other tools lose you is the moment this one is built for." },
  { q: "\u201CWhat if the shame I feel is bigger than this page describes?\u201D", a: "That's worth taking seriously. If shame or self-criticism feels overwhelming, persistent, or is affecting how you see your worth day to day, 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 ShObjections = () => (
  <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">
        {SH_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 SH_FAQS = [
  { q: "What is the ADHD shame spiral?", a: "It's a self-reinforcing loop where guilt about an unfinished task leads to avoidance, avoidance leads to more shame, and the accumulated weight makes each new attempt harder to start. It's one of the most consistently reported patterns in adult ADHD." },
  { q: "Is shame a symptom of ADHD?", a: "Not formally. But adults with ADHD report lower self-compassion and higher perceived criticism than the general population, and emotional dysregulation is estimated to affect roughly a third to two-thirds of adults with the condition, which makes shame a very common part of the lived experience." },
  { q: "Why does restarting feel harder than starting?", a: "Because a restart carries the emotional weight of every previous attempt. Research shows accumulated experiences of non-completion get internalised as evidence of personal failure, which measurably raises the barrier to trying again." },
  { q: "Does being harder on myself help?", a: "The evidence points the other way. Pushing harder in the presence of high shame can actively worsen the mechanisms keeping someone stuck, while reducing shame improves persistence after setbacks and willingness to re-attempt avoided tasks." },
  { 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 shame or self-criticism 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 ShFAQItem = ({ 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 ShFAQ = () => (
  <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">
          {SH_FAQS.map((f, i) => <ShFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const ShFinalCTA = () => (
  <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>A small way back in</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]">
            Come back to one thing. Leave the weight where it is.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a fresh start. Not a new you. Just a small way back in, without the verdict attached.
          </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 SH_RELATED = [
  { t: "Stop procrastinating with ADHD", d: "The shame spiral named as a core procrastination mechanism.", href: "/adhd/stop-procrastinating-with-adhd/" },
  { t: "Finish what you started with ADHD", d: "The shame layer that settles over unfinished projects.", href: "/adhd/finish-what-you-started-with-adhd/" },
  { t: "Recover from burnout with ADHD", d: "How shame grows in the quiet of passive rest, and a way out.", href: "/adhd/recover-from-adhd-burnout/" },
  { t: "Build routines that survive bad days with ADHD", d: "Shame after a miss raising the cost of return, handled differently.", href: "/adhd/build-routines-that-survive-bad-days/" },
  { t: "Rejection sensitive dysphoria with ADHD", d: "External judgement versus the internal weight that accumulates.", href: "/adhd/rejection-sensitive-dysphoria-with-adhd/" },
];

const ShRelated = () => (
  <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">
        {SH_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 ShApp() {
  return (
    <main id="main">
      <ShNav />
      <ShHero />
      <ShWhatLoopsDoes />
      <ShRecognition />
      <ShWhyItHappens />
      <ShReframe />
      <ShHowItWorks />
      <ShSocialProof />
      <ShObjections />
      <ShFAQ />
      <ShFinalCTA />
      <ShRelated />
      <Footer />
    </main>
  );
}

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