/* Loops — "Share Your Work With ADHD" use-case page
   Self-worth/RSD guardrails: work quality validated before any barrier, every mechanism
   structural/neurological, perfectionism named as protection, RSD explained + GP signpost
   (not over-medicalised), winning simplest in cluster (sent). Unique: good-enough-to-share. */

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

const SHR_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 ShrNav = () => {
  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">
            {SHR_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">
              {SHR_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 SHR_HERO_BLOCKS = [
  {
    title: "Get it out of the folder",
    body: "One small, specific action toward shared rather than saved.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v.64c.57.265.94.876.856 1.546l-.64 5.124A2.5 2.5 0 0 1 12.733 15H3.266a2.5 2.5 0 0 1-2.481-2.19l-.64-5.124A1.5 1.5 0 0 1 1 6.14zM2 6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3H2.5a.5.5 0 0 0-.5.5zm-.367 1a.5.5 0 0 0-.496.562l.64 5.124A1.5 1.5 0 0 0 3.266 14h9.468a1.5 1.5 0 0 0 1.489-1.314l.64-5.124A.5.5 0 0 0 14.367 7z"/></svg>),
  },
  {
    title: "Good enough to share",
    body: "Not perfect. Just ready enough. That's a different and achievable standard.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"/></svg>),
  },
  {
    title: "The relief of sent",
    body: "The specific feeling of something being in the world rather than waiting.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/></svg>),
  },
];

const ShrHero = () => (
  <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-[36px] sm:text-[48px] lg:text-[58px] fade-in-up delay-1">
          The work is done. You're still not sharing it.
        </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">
          It's not about quality. For many people with ADHD, the gap between finished and shared is one of the hardest to cross. And it has nothing to do with whether the work is ready.
        </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 breaks the last step into something small enough to do, coaching for the threshold moment, and, if you want it, <span className="text-ink font-medium">one safe person on your side while you cross it.</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">
        {SHR_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 ShrWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
        <div className="lg:order-1 flex justify-center"><LoopsGalleryPhone /></div>
        <div className="max-w-prose lg:order-2">
        <Kicker>How Loops helps</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A daily system for the step between finished and actually out there.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most support for creative work focuses on making. Finishing. Getting to done. The step that follows, sharing, publishing, sending, is treated as obvious. For ADHD brains, it often isn't.
          </p>
          <p>
            Loops gives you specific sharing actions each day, breaks the final step into something small enough to start, and coaches you through the moment when the work keeps nearly going out and then not. Not a motivation tool. A threshold-crossing tool.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person who sees you doing it.</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 SHR_RECOGNITION = [
  "The work is done. Or nearly done. It's been nearly done for a while now.",
  "You've written the caption. You've deleted the caption. You've written it again.",
  "You've told yourself you'll share it when it's a bit more polished. That was three months ago.",
  "One negative comment, or even the thought of one, can make the whole thing feel not worth sharing.",
  "You've shared things before. The response wasn't what you hoped for. Now starting feels harder, not easier.",
  "You know the work is good enough. Some part of you also can't quite believe that.",
];

const ShrRecognition = () => (
  <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 it comes to sharing their work.
        </p>
      </div>

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

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          This isn't about the quality of the work. It's about a very specific kind of stuck that ADHD creates at the very end of the process.
        </p>
      </div>

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

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

const SHR_PATTERNS = [
  { title: "Perfectionism as a permanent shield", body: "As long as the work isn't shared, it can't be criticised. The brain knows this. Not sharing keeps the work safe indefinitely. Perfectionism isn't just a quality standard. For ADHD brains, it's also a protection mechanism that can persist long after the work is genuinely ready." },
  { title: "Rejection sensitivity at the threshold", body: "For many people with ADHD, the anticipation of negative feedback feels as painful as the feedback itself. ADHD is associated with heightened rejection sensitivity: the brain's response to perceived criticism is more intense than average, and more likely to feel personal. This makes the moment of sharing disproportionately high-stakes." },
  { title: "Motivational decay near the finish line", body: "By the time the work is nearly done, the excitement that made it possible has moved on. ADHD motivation is driven by novelty and interest. Completing and sharing work is neither novel nor interesting. Without the original dopamine, the push to cross the final threshold simply isn't there." },
  { title: "The logistics of sharing", body: "Publishing, formatting, posting, writing the description: these are exactly the kind of sequential organisational tasks ADHD makes hardest. Each step in the sharing process requires sustained working memory and follow-through. Without external structure, completed projects sit invisible not from fear but from the plain difficulty of executing the final steps." },
  { title: "The shame-reset spiral", body: "Each thing that stays in the folder becomes evidence that makes the next one harder to share. Past projects that weren't shared, past shares that didn't land well, past decisions to do it later: these accumulate into a backdrop that makes every new sharing decision feel heavier than the last." },
];

const ShrWhyItHappens = () => (
  <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 fear of failure. It's what ADHD does to the last step specifically.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Sharing work is a distinct failure point from making it. It has its own mechanisms and it needs its own support. Understanding them changes what getting unstuck looks like.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {SHR_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 designed to make the sharing step small enough, specific enough, and supported enough to actually happen.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the good-enough-to-share frame ---------------- */

const ShrReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>The shift that changes what sharing actually requires</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]">
          There is no version of the work that will feel completely ready. That's not how sharing works.
        </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>
          The feeling of "not quite ready" is not a quality signal. It's a threshold signal. It means the brain is anticipating exposure, not identifying a genuine flaw that needs fixing. Waiting for the feeling to pass before sharing is waiting for something that, for ADHD brains in particular, often doesn't pass on its own.
        </p>
        <p className="text-ink font-medium">
          The shift that helps is redefining the question. Not "is it ready?" but "is it good enough to share?" These are different standards. Ready implies a state of completion that satisfies the inner critic. Good enough to share implies a bar the work has already cleared, and the decision becomes structural rather than qualitative.
        </p>
      </div>
    </Container>
  </Section>
);

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

const SHR_WITNESS_CARDS = [
  { t: "Not the crowd you're afraid of", b: "You choose one person you trust, someone whose opinion feels safe. They are not the wider audience. They're the one person who's simply glad you're getting it out there." },
  { t: "They don't review your work", b: "They don't have to review your work or tell you whether it's good. They don't manage you, they don't even pay. Their side is light on purpose." },
  { t: "You're always in control", b: "You choose who it is. You decide exactly what they can see, and you can change it any time." },
  { t: "One safe person makes it smaller", b: "When the fear of the wider response is what's holding you at the threshold, one safe person on your side makes the step smaller." },
];

const ShrWhyLoopsWorks = () => (
  <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 finish 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>Here's the strange part: the work can sit finished for months precisely because sharing means being seen, and being seen is the whole fear. Alone with it, there's no threshold to cross and no one to cross it for.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going, and for this step in particular, a safe one. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust, someone whose opinion feels safe. When you close a loop, they see it. They are not the crowd you're afraid of. They're the one person who's simply glad you're getting it out there. 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">
        {SHR_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">
          You can start on your own if you'd rather. It still works. It just works better when someone can see you.
        </p>
      </div>
    </Container>
  </Section>
);

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

const SHR_STEPS = [
  { t: "Tell Loops what you're trying to share", b: "Name the project and where you're stuck. The draft that's been sitting. The thing that's nearly published. The work that just needs to go. Plain language. No setup." },
  { t: "Choose your person", b: "Pick one person you trust, whose opinion feels safe, to see your progress. Not the wider audience, just one person on your side. You decide exactly what they can see, and you can change it any time. This is the step most people skip with other apps, and the one that makes Loops work. On a Crew plan you can choose more than one." },
  { t: "Get sharing actions today", b: "Each day, Loops gives you specific, small actions toward shared. Write the description. Choose the platform. Set a date. One step, sized to be possible today rather than requiring a perfect day. Close the loop, and your person sees it." },
  { t: "Get coached through the threshold moment", b: "Feeling the pull back into the folder? Loops gives you a calm, practical next step that makes the share possible without requiring certainty that it will land well." },
  { t: "Get it out there", b: "Not perfectly launched. Not with a flawless rollout. Just: in the world rather than in the folder. That's the goal." },
];

const ShrHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          One sharing action. Today. Smaller than you think.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to post everything at once. You need one specific action that moves the work one step closer to out there.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {SHR_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. You need one small action that moves the work toward shared.
      </p>
    </Container>
  </Section>
);

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

const SHR_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The thing you're trying to get out there, described your way, and where you're stuck: the draft that's been sitting, the thing that's nearly published, the work that just needs to go. Not another round of edits. Just a clear picture of getting it shared." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, pointed at shared rather than saved. Small enough for the days the folder feels safer. Some run every day, some a few times a week: write the description, choose the platform, set a date to send. A few connect to getting this out. Others are just life, like taking your meds before breakfast. A missed one doesn't wipe you out. You can repair a streak simply by showing up again." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close on the way to shared. A safe pair of eyes, not the crowd, and not there to judge the work. 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: the description finally written, the date set and kept, the thing actually sent. 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 what you're sharing and where you keep pulling back, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at the threshold moment, when the work nearly goes out and then doesn't, with a calm next step that doesn't require being sure it'll land well." },
];

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

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

const SHR_TESTIMONIALS = [
  { quote: "I had a newsletter I'd been 'finishing' for four months. Loops didn't make me less scared to send it. It gave me one small action each day that made not sending it harder than sending it. I sent it.", who: "Journalist", meta: "Self-identified ADHD" },
  { quote: "The 'good enough to share' reframe changed something for me. I'd been treating ready as a feeling I needed to have. I didn't need the feeling. I needed a decision.", who: "UX designer", meta: "Diagnosed with ADHD at 33" },
  { quote: "Posted. That's it. That's the whole story.", who: "Photographer, Sheffield", meta: null },
];

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

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

const SHR_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and getting it out there.", 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.", featured: true },
];

const ShrPricing = () => (
  <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. Built for it.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {SHR_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>
);

/* ---------------- Objections (5) ---------------- */

const SHR_OBJECTIONS = [
  { q: "\u201CI just need one more round of edits first.\u201D", a: "That round of edits probably won't be the last one. And the work is probably already good enough. The feeling of \u201Cnot quite ready\u201D is a threshold signal, not a quality signal. Loops can help you identify a specific, bounded final edit and then hold the line at sharing rather than reopening." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", a: "No. Solo works perfectly well on its own. If you do choose someone, they're a safe pair of eyes on your side, not the wider audience, and not there to judge the work. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CWhat if people don't like it?\u201D", a: "Some won't. That's different from the work not being worth sharing. ADHD rejection sensitivity makes negative responses feel more personal and more definitive than they are. Loops doesn't protect you from feedback. It helps you get to the point where feedback is possible." },
  { q: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns here feel familiar. If that's you, Loops is built for you." },
  { q: "\u201CWhat if I share it and it disappears without any response?\u201D", a: "That's a very common outcome, and it's not the same as failure. Most things shared quietly. The value of sharing isn't always in the response. It's in the work being out there rather than permanently protected by not existing in the world." },
];

const ShrObjections = () => (
  <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">
        {SHR_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 SHR_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. It combines personalised coaching, daily micro-actions, one person who sees your progress, and accountability in one system. For sharing work specifically, it helps bridge the gap between nearly done and actually out there, one small step at a time." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see your progress: the loops you close on the way to shared. They're a safe pair of eyes on your side, not the crowd you're afraid of, and not there to review the work or say whether it's good. When the fear of the wider response is what's holding you at the threshold, one safe person makes the step smaller. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with sharing work if you have ADHD?", a: "It breaks the sharing step into one specific daily action small enough to be possible even on a high-anxiety day. It also coaches you through the threshold moment when the work keeps almost going out and then doesn't." },
  { q: "Why do people with ADHD struggle to share work even when it's finished?", a: "The barriers are specific. Perfectionism protects unshared work from judgement indefinitely. Rejection sensitivity makes the anticipation of negative feedback disproportionately intense. Motivational decay means the excitement that drove the project is gone by the time sharing is required. And the logistics of publishing are precisely the kind of sequential organisational tasks ADHD makes hardest." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "What is rejection sensitive dysphoria and how does it affect sharing?", a: "Rejection Sensitive Dysphoria is the intense emotional response to perceived criticism or rejection that many people with ADHD experience. In sharing contexts, it means the anticipation of negative feedback can feel as painful as the feedback itself, making the decision to share feel disproportionately high-stakes. If this resonates significantly, it's worth discussing with a GP or ADHD specialist." },
  { q: "What if the work genuinely isn't ready?", a: "Loops can help you identify what \u201Cready\u201D actually means for this specific piece: a bounded, specific endpoint rather than an open-ended standard. If there's a genuine edit needed, that's a daily action too. The goal is a defined finish line, not indefinite improvement." },
  { q: "What if I miss several days?", a: "That's built into the design. Loops doesn't treat a missed week as a reason to start over. The next daily action is still there, still specific, still aimed at the same share." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

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

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

const ShrFinalCTA = () => (
  <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>Out there</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]">
            The work deserves to exist in the world.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not perfectly received. Not widely seen. Just: out there, in a form that can't be unsent, existing beyond the folder it's been sitting in, and, if you want, one person on your side as you send it.
          </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 SHR_SOURCES = [
  { t: "Executive Function Deficits in Attention-Deficit/Hyperactivity Disorder and Autism Spectrum Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11485171/" },
  { t: "Adult ADHD — APA, Speaking of Psychology (podcast)", u: "https://www.apa.org/news/podcasts/speaking-of-psychology/adult-adhd" },
  { t: "New Study Reveals Most Effective ADHD Treatments for Adults — NIHR ARC Oxford", u: "https://www.arc-oxtv.nihr.ac.uk/news/new-study-reveals-most-effective-adhd-treatments-for-adults" },
  { t: "Stress and Work-Related Mental Illness Among Working Adults With ADHD: A Qualitative Study — Springer", u: "https://link.springer.com/article/10.1186/s12888-022-04409-w" },
  { t: "The Experiences of Adults With ADHD in Interpersonal Relationships and Online Communities: A Qualitative Study — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10399076/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9443814/" },
  { t: "Self-Esteem in Adults With ADHD Using the Rosenberg Scale — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11016209/" },
  { t: "Emotional Dysregulation and Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" },
  { t: "ADHD Productivity Apps: Endless Cycle Of... — r/ProductivityApps", u: "https://www.reddit.com/r/ProductivityApps/comments/1t2m4jw/adhd_productivity_apps_endless_cycle_of/" },
  { t: "Am I the Only Person in the World With ADHD Who...? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1h6aqhc/am_i_the_only_person_in_the_world_with_adhd_who/" },
  { t: "An Investigation of Body Doubling With Neurodivergent Users — ACM", u: "https://dl.acm.org/doi/full/10.1145/3689648" },
  { t: "Understanding Neurodivergence at Work: ADHD Case Study — IET", u: "https://www.theiet.org/neurodiversity-in-engineering-and-technology/understanding-neurodivergence-at-work-toolkit/case-studies/adhd-case-study-1" },
  { t: "NHS: Attention Deficit Hyperactivity Disorder (ADHD) in Adults — NHS", u: "https://www.nhs.uk/conditions/adhd-adults/" },
  { t: "Systematic Review and Meta-Analysis: Effects of Pharmacological Treatment for ADHD on Quality of Life — ScienceDirect", u: "https://www.sciencedirect.com/science/article/pii/S0890856724003046" },
  { t: "Motivation Deficit in ADHD Is Associated With Dysfunction of the Dopamine Reward Pathway — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/20856250/" },
];

const ShrSources = () => (
  <Section id="sources" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on ADHD clinical guidelines, research into perfectionism, rejection sensitivity and workplace functioning, and real accounts from people with finished work still sitting in a folder. Here's where it comes from.
        </p>
      </div>

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

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

function ShrApp() {
  return (
    <main id="main">
      <ShrNav />
      <ShrHero />
      <ShrWhatLoopsDoes />
      <ShrRecognition />
      <ShrWhyItHappens />
      <ShrReframe />
      <ShrWhyLoopsWorks />
      <ShrHowItWorks />
      <ShrWhatsInside />
      <ShrSocialProof />
      <LoopsPricing bg="bg-soft" />
      <ShrObjections />
      <ShrFAQ />
      <ShrFinalCTA />
      <ShrSources />
      <Footer />
    </main>
  );
}

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