/* Loops — "Get Organised Without Relying on Memory With ADHD" use-case page
   Shame/self-worth guardrails: "disorganised" explicitly rejected, every mechanism framed
   structurally (working-memory/retrieval), "trying harder" rejected, winning is an absence.
   Unique section: the one source of truth reframe (subtraction, not addition). */

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

const ORG_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 OrgNav = () => {
  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">
            {ORG_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">
              {ORG_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 ORG_HERO_BLOCKS = [
  {
    title: "One place, always visible",
    body: "Not another list to forget. One source of truth that stays in front of you.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"/><path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0M7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Prompts that actually land",
    body: "Actions that reach you at the right moment, not the wrong one.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901"/></svg>),
  },
  {
    title: "Nothing falls through",
    body: "A daily system that catches what memory misses.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793z"/></svg>),
  },
];

const OrgHero = () => (
  <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-[50px] lg:text-[60px] fade-in-up delay-1">
          You have the lists. You still forget.
        </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 a discipline problem. For many people with ADHD, organisation fails not at the writing-it-down stage, but at the remembering-to-look stage. More lists won't fix that.
        </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 puts clear things in front of you when you need it, coaching for when it all piles up, and, if you want it, <span className="text-ink font-medium">one person quietly in your corner.</span>
        </p>

        <div className="mt-9 flex flex-col items-center gap-3 fade-in-up delay-3">
          <Button variant="primary" size="lg" href="#start">
            Get Early Access
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Button>
          <span className="text-[13.5px] text-ink-3">Free for 7 days. No complicated setup. On iOS for now.</span>
        </div>
      </div>

      {/* Three icon blocks */}
      <p className="mt-14 lg:mt-16 text-center text-[12px] font-semibold uppercase tracking-[0.14em] text-brand-deep fade-in-up delay-4">Three things Loops does for you</p>
      <div className="mx-auto mt-6 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {ORG_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 OrgWhatLoopsDoes = () => (
  <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 that doesn't depend on you remembering to use it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most organisation tools assume the problem is capturing information. Loops assumes the problem is what happens between capturing it and needing it, which is exactly where ADHD makes things go wrong.
          </p>
          <p>
            Loops gives you clear daily actions, delivered when you need it. Not stored somewhere you'll forget to check. Not buried in an app that requires twenty minutes of setup. There when you need it, in a form your brain can actually use.
          </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 ORG_RECOGNITION = [
  "You write everything down. You still forget things. You're not sure what the point of writing them down was.",
  "You have five different to-do systems running at once. None of them talk to each other. None of them are quite right.",
  "A new app or planner feels exciting for about four days. Then it becomes another thing you've abandoned.",
  "The reminder went off at the wrong moment. You were in the middle of something. You swiped it away. You forgot.",
  "You spend so long deciding which task to do first that the decision itself uses up the time you had.",
  "You know everything is written down somewhere. You just can't find it when you need it, and by then it's too late.",
];

const OrgRecognition = () => (
  <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 organisation and memory.
        </p>
      </div>

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

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          None of this means you're disorganised. It means your brain processes information differently, and the systems most people use weren't built with that in mind.
        </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 ORG_PATTERNS = [
  { title: "Out of sight, out of mind", body: "If the task or list isn't visible right now, it doesn't exist right now. ADHD affects the ability to hold things in mind that aren't immediately present, which is why perfectly written lists get made and then never opened." },
  { title: "Working memory as the actual problem", body: "The failure isn't at the writing-it-down stage. It's at the retrieving-it-when-it-matters stage. ADHD impairs working memory, which is the system responsible for keeping goals and plans active and usable. A list can't fix that if the brain doesn't prompt itself to look at the list." },
  { title: "The novelty trap", body: "A new system feels energising until it doesn't. Then it gets abandoned completely. ADHD brains respond to novelty with a dopamine boost that fades within days. When the excitement of a new app or planner disappears, so does the motivation to maintain it." },
  { title: "Overwhelm and analysis paralysis", body: "When everything feels urgent, deciding what to do becomes the task that blocks everything else. Facing a full list without a clear entry point uses up the cognitive resources needed to actually do anything on the list." },
  { title: "The perfect system trap", body: "The moment a system feels suboptimal, abandoning it entirely feels easier than fixing it. ADHD's all-or-nothing response to imperfection means that one thing out of place in an organisation system can cause the whole thing to be dropped." },
];

const OrgWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not about trying harder. It's about where the system breaks.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Organisation fails for ADHD brains at specific points that more effort doesn't fix. Each one has a structural cause, and each requires a different kind of solution.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {ORG_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 work at every one of these failure points, not just the most obvious one.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the one source of truth reframe ---------------- */

const OrgReframe = () => (
  <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 you try another system</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The problem isn't that you need a better system. It's that you have too many.
        </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>
          Multiple lists don't reduce the cognitive load of remembering things. They multiply it. Every new tool, app, or notebook adds another location to check, another thing to maintain, and another place for something to get lost.
        </p>
        <p className="text-ink font-medium">
          The research on ADHD organisation is consistent here: what works isn't more sophisticated capture, it's radical simplification. One place. Visible by default. Requiring as few decisions as possible to use. Not because that's easier to build, but because it's the only kind of system that doesn't become its own thing to remember.
        </p>
      </div>
    </Container>
  </Section>
);

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

const ORG_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. The thing that would once have slipped, done, and seen. They just get to see you stay on top of the things that matter, and cheer you on." },
  { t: "Not another place to check", b: "They're not another system to keep. They don't nag, 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: "The dread eases", b: "Some of that dread eases when you're not the only one holding it all." },
];

const OrgWhyLoopsWorks = () => (
  <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>Forgetting isn't just inconvenient. It's the quiet dread of not knowing what you've missed, and the apologies that follow. Carried alone, that weight builds.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, whoever feels safe. When you close a loop, they see it. The thing that would once have slipped, done, and seen. 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">
        {ORG_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 ORG_STEPS = [
  { t: "Tell Loops what you're trying to stay on top of", b: "Name the thing that keeps slipping: appointments, tasks, follow-ups, anything. Plain language. No categories or tags to configure." },
  { t: "Choose your person, if you want one", b: "Pick one person you trust to see your progress. You decide exactly what they can see, and you can change it any time. They are not another place to check: they simply see what you already do. This is the step most people skip with other apps, and the one that makes Loops work. It's entirely optional. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Each day, Loops gives you specific, visible things to do. Not a list to scroll. One thing, in a form your brain can act on rather than file away. Close the loop, and your person sees it." },
  { t: "Get coached when things pile up", b: "Feeling overwhelmed by what's accumulated? Loops gives you a clear next step rather than a reminder of everything you haven't done." },
  { t: "Build a week where nothing slips", b: "Over time, one daily action becomes a pattern of nothing falling through. That's the goal." },
];

const OrgHowItWorks = () => (
  <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 action. In front of you. Every day.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to consolidate all your existing systems. You need something that works on its own.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {ORG_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 fix your existing systems first. Start with one thing today.
      </p>
    </Container>
  </Section>
);

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

const ORG_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The thing that keeps slipping, described your way: appointments, tasks, follow-ups, whatever it is. No categories, no tags. Just a clear picture of what you're trying to stay on top of." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, delivered to you rather than filed somewhere you'll forget to look. Some run every day, some a few times a week: check tomorrow's calendar tonight, send the one reply you owe, put the appointment in the moment you make it. A few connect to your goal. Others are just life, like taking your meds before breakfast. Miss one and nothing is wiped out. The next action is still there, still small, still in front of you." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the things that no longer slip. They are not another place to check, they simply see what you already do. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: a week where nothing slipped, the first time you didn't have to apologise for forgetting, a month of staying on top of the thing that always got away. 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 trying to stay on top of and where things tend to slip, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when it's all piled up and you can't find the entry point, with one clear next step, not a reminder of everything you haven't done." },
];

const OrgWhatsInside = () => (
  <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">
        {ORG_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 ORG_TESTIMONIALS = [
  { quote: "I had Notion, a paper planner, three different reminder apps, and a whiteboard. I was still missing things. Loops was the first thing that didn't ask me to remember to use it. It just showed up.", who: "Account manager", meta: "Diagnosed with ADHD at 33" },
  { quote: "The problem was never that I didn't write things down. It was that I had too many places things were written. Loops fixed that without me having to consolidate anything.", who: "PhD student", meta: "Using Loops for 6 weeks" },
  { quote: "I went a whole week without apologising to anyone for forgetting something. I didn't realise how much energy I was spending on the dread of what I'd missed.", who: "Operations coordinator, Glasgow", meta: null },
];

const OrgSocialProof = () => (
  <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">
        {ORG_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 ORG_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you, one thing at a time.", 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 OrgPricing = () => (
  <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">
        {ORG_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-white 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, incl. unique "forget to use it") ---------------- */

const ORG_OBJECTIONS = [
  { q: "\u201CI've tried every app and nothing sticks.\u201D", a: "Most apps are built for people who remember to open them. Loops gives you one daily action rather than a system to maintain. There's no database to build, no inbox to clear, and no streak to protect." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", a: "No. Solo works perfectly well on its own. But most people find it works better when one person can see them, and because it's just a view of what you already do, it never becomes another place to check. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI just need to be more disciplined about checking my lists.\u201D", a: "The issue isn't discipline. It's how ADHD affects working memory. Research is consistent that ADHD organisation failures happen at the retrieval stage, not the capture stage. Checking more often won't fix a system that relies on remembering to check." },
  { 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: "\u201CWon't Loops just become another thing I forget to use?\u201D", a: "That's exactly what it's designed not to be. One daily action, delivered to you. No system to check. No tab to remember to open. Loops reaches you rather than waiting to be found." },
];

const OrgObjections = () => (
  <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">
        {ORG_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 ORG_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 organisation specifically, it helps by reducing the cognitive load of managing tasks and keeping one clear action visible every day." },
  { 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 and the things that no longer slip. They are not another place to check, they simply see what you already do. They don't nag or manage you. 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 organisation if you have ADHD?", a: "It removes the step of remembering to check a system. Each day you get one specific, low-friction action. It's not a task manager or a planner. It's a daily prompt that shows up rather than waiting to be found." },
  { q: "Why do organisation systems keep failing with ADHD?", a: "The failure usually isn't at the capture stage. Most people with ADHD are excellent at writing things down. The failure is at working memory: the system that keeps plans active and usable when you need them. No amount of better lists fixes a problem that exists at the retrieval level." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "Is Loops a task manager?", a: "No. Task managers store and display information. Loops coaches you through the moment of acting on it. If you already have a task manager, Loops works alongside it rather than replacing it." },
  { q: "What if I miss a day and fall behind?", a: "That's built into the design. Loops doesn't treat a missed day as a failure state. The next action is still there the following day, still small, still designed to be the easiest possible step." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "How quickly will I notice a difference?", a: "Most people notice a shift within the first week or two, less in what they're getting done and more in the dread of what they might have missed. Building genuine organisational momentum usually takes longer, and Loops is designed to make that sustainable." },
];

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

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

const OrgFinalCTA = () => (
  <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>The week, handled</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]">
            A week where nothing slips through.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a perfectly organised life. Just the things that matter, actually handled, and, if you want, one person who sees you handle them.
          </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 ORG_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "The Adult ADHD Tool Kit: Using CBT to Facilitate Coping Inside and Out — J. Russell Ramsay and Anthony L. Rostain", u: "https://api.pageplace.de/preview/DT0400.9781135072308_A23797699/preview-9781135072308_A23797699.pdf" },
  { t: "Attention-Deficit/Hyperactivity Disorder (ADHD) and Working Memory — OpenAIRE", u: "https://oamonitor.ireland.openaire.eu/rfo/sfi_rfo/search/publication?pid=10.1037%2Fa0032371" },
  { t: "Complex Prospective Memory in Adults With Attention Deficit Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3590133/" },
  { t: "Time Perception in Adult ADHD: Findings From a Decade — A Systematic Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "Working Memory Related Functional Connectivity in Adult ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11602582/" },
  { t: "I Miss Appointments, Plans and Even Things I Enjoy Because I Can't Keep a Calendar Going — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1p1lflu/i_miss_appointments_plans_and_even_things_i_enjoy/" },
  { t: "The Lived Experiences of Adults With Attention-Deficit Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9403235/" },
  { t: "Does Everyone Here Really “Completely Forget” About Important Appointments, Meetings, Deadlines, Dates Etc.? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/5pa26a/does_everyone_here_really_completely_forget_about/" },
  { t: "What Actually Worked for You to Create Routines or Habits With ADHD? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1qasrfg/what_actually_worked_for_you_to_create_routines/" },
  { t: "Effectiveness of Cognitive Behavioural-Based Interventions for Adult ADHD — Wiley", u: "https://bpspsychub.onlinelibrary.wiley.com/doi/10.1111/papt.12455" },
  { t: "Evaluating the Evidence: A Systematic Review of Digital Interventions for ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12016436/" },
  { t: "Working Memory Training Does Not Improve Performance on Untrained Measures — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4968033/" },
  { t: "Functional Impairments Among Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/30624968/" },
  { t: "A Systematic Review and Component Network Meta-Analysis of ADHD Interventions — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39701638/" },
  { t: "Australian Evidence-Based Clinical Practice ADHD Guideline", u: "https://adhdguideline.aadpa.com.au/" },
];

const OrgSources = () => (
  <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 working memory, prospective memory and time perception, and real accounts from people who have tried every app and still forget things. Here's where it comes from.
        </p>
      </div>

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

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

function OrgApp() {
  return (
    <main id="main">
      <OrgNav />
      <OrgHero />
      <OrgWhatLoopsDoes />
      <OrgRecognition />
      <OrgWhyItHappens />
      <OrgReframe />
      <OrgWhyLoopsWorks />
      <OrgHowItWorks />
      <OrgWhatsInside />
      <OrgSocialProof />
      <LoopsPricing bg="bg-soft" />
      <OrgObjections />
      <OrgFAQ />
      <OrgFinalCTA />
      <OrgSources />
      <Footer />
    </main>
  );
}

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