/* Loops — "Finish What You Started With ADHD" use-case page
   Self-worth guardrails: the near-finishing is real capability not failure, every mechanism
   structural/neurological, shame framed as accumulated cost, winning modest+honest.
   Unique section: the finish-line reward gap. Distinct from Side Project (single creative
   project) by focusing on the cross-cutting pattern of unfinished things everywhere. */

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

const FIN_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 FinNav = () => {
  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">
            {FIN_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">
              {FIN_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 FIN_HERO_BLOCKS = [
  {
    title: "Get through the last part",
    body: "The unrewarding final stretch is exactly what Loops is built for.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.101.5.101.5-.1.5-.1v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z"/></svg>),
  },
  {
    title: "One thing carried to done",
    body: "Not ten things at 80%. One thing, all the way.",
    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>),
  },
  {
    title: "Actually finished",
    body: "Closed, done, off the list. Not just nearly there.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 9.176 7.14 8.96 6.5 8.96c-.696 0-1.667.193-2.492.417A18 18 0 0 0 3 9.6v5.9a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.847 0 1.548.28 2.158.525l.028.01C9.32.782 9.86.998 10.5.998c.696 0 1.667-.193 2.492-.417A18 18 0 0 0 14 .3l.008-.003.002-.001h.001"/></svg>),
  },
];

const FinHero = () => (
  <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">
          You start things well. So why is everything still 80% done?
        </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 that you can't do the work. You clearly can. For many people with ADHD, the finish is the hardest part, because it's the part with no reward left in it.
        </p>

        <p className="mx-auto mt-4 max-w-2xl text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-2">
          Loops is a daily coaching app for people with ADHD. It gives you small steps toward done each day, coaching for when a new idea pulls at you, and, if you want it, <span className="text-ink font-medium">one person waiting for you to finish.</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">
        {FIN_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 FinWhatLoopsDoes = () => (
  <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 last part, not the exciting first part.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most productivity tools help you start. Starting was never your problem. The problem is the stretch between mostly-done and actually-finished, where the interest has gone and a newer, shinier thing is pulling at your attention.
          </p>
          <p>
            Loops gives you specific actions each day on the thing that's closest to done, keeps it visible when a new idea tries to replace it, and coaches you through the unrewarding final stretch. Not a fresh start. A finish.
          </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 FIN_RECOGNITION = [
  "You have a trail of things that are almost done. Not abandoned. Just never quite finished.",
  "The exciting part is the beginning. By the time the end arrives, the energy that started it is long gone.",
  "You finish the hard 90%. The boring last 10% is the part that never happens.",
  "A new idea always seems to arrive right when the current thing needs its final, least interesting push.",
  "You keep the almost-finished things around because finishing them feels strangely harder than starting new ones.",
  "You know you're capable. The evidence is everywhere, in all the things that are nearly, but not quite, complete.",
];

const FinRecognition = () => (
  <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 finishing things.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {FIN_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">
          A trail of nearly-finished things isn't evidence that you can't do it. It's evidence that you can, and that the finish is a different problem from the start.
        </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 FIN_PATTERNS = [
  { title: "The finish line has no reward", body: "Starting produces a dopamine hit. Finishing rarely does. ADHD brains are driven by novelty and immediate reward, and the final stretch of any task is usually the least novel and least stimulating part, which means the brain stops supplying the motivation that made the start feel easy." },
  { title: "The 90% done trap", body: "Once something is mostly done, it stops feeling urgent. The problem is solved in your head, even though it isn't solved in reality. ADHD's difficulty with future consequences means a nearly-finished thing quietly drops down the priority list until it's forgotten entirely." },
  { title: "The next-idea pull", body: "A new idea always feels more alive than an old one that's nearly done. The novelty of the next thing competes directly with the last unrewarding push on the current thing, and novelty usually wins. This isn't flightiness. It's how ADHD attention allocates itself." },
  { title: "Perfectionism at the end", body: "Sometimes the last 10% doesn't get done because finishing means judging it. As long as it's unfinished, it can't be evaluated. For ADHD brains where setbacks land hard, leaving something almost-done can be a way of protecting it, and yourself, from a verdict." },
  { title: "No external deadline", body: "The things that get finished usually have someone waiting. The things that don't are the ones only you are tracking. Without an external structure holding the finish in place, the final push depends entirely on internal motivation, which is exactly what runs out at the end." },
];

const FinWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not that you give up. It's that the end is built differently from the start.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Finishing breaks down for ADHD brains through a specific set of mechanisms. Understanding them matters, because the finish needs different support from the start.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {FIN_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 hold the finish in place when internal motivation can't.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the finish-line reward gap ---------------- */

const FinReframe = () => (
  <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 start anything new</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]">
          Finishing isn't a smaller version of starting. It's the opposite task.
        </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>
          Starting is novel, open-ended, and full of possibility, which is exactly what ADHD brains find rewarding. Finishing is repetitive, constrained, and final, which is exactly what they don't. Treating them as the same kind of effort is why "just push through to the end" so rarely works.
        </p>
        <p className="text-ink font-medium">
          The finish needs its own structure: an external prompt that keeps the nearly-done thing visible, a next action small enough to survive the missing reward, and something holding the deadline that isn't only your own fading interest. Not more willpower. A different scaffold for a different task.
        </p>
      </div>
    </Container>
  </Section>
);

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

const FIN_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When the thing is finally done, they see that too. They just get to watch you carry the thing all the way to done, and cheer you on." },
  { t: "They don't chase you", b: "They don't have to nag you or chase you. 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 finish isn't only yours", b: "Suddenly the finish isn't only yours to hold. Someone's waiting, and that is often the whole difference between 90% and done." },
];

const FinWhyLoopsWorks = () => (
  <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 pattern, in one line: the things that get finished usually have someone waiting. The things that don't are the ones only you were ever tracking.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going, and it's the exact thing a nearly-done project is missing. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, whoever it is. When you close a loop, they see it. When the thing is finally done, they see that too. 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">
        {FIN_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 FIN_STEPS = [
  { t: "Tell Loops what's nearly done", b: "Name the thing that's closest to finished, or the one that's been unfinished longest. Plain language. No categories, no setup that becomes its own project." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress, so the finish is not only yours to hold. You decide 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 small daily actions", b: "Each day, Loops gives you specific, low-friction steps on the finish, not the start. Small enough to do without the reward that's already gone. Targeted at closing, not reopening. Close the loop, and your person sees it." },
  { t: "Get coached when the new idea calls", b: "Feeling the pull of a shinier thing? Loops keeps the nearly-done thing in front of you and gives you a way to keep going, so the current thing gets finished before the next one begins." },
  { t: "Actually finish it", b: "Not perfectly. Not endlessly polished. Done. Off the list. And then, if you want, the next one, with the same structure holding it to the end." },
];

const FinHowItWorks = () => (
  <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 toward done. Every day. Until it's finished.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new project. You need to close one of the ones you already have.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {FIN_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 the enthusiasm you started with. You need one small step toward done.
      </p>
    </Container>
  </Section>
);

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

const FIN_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The one thing you want to finish, in your own words: the nearly-done thing, or the one that's sat unfinished longest. The finish line is the whole point here, so Loops keeps it in front of you until it's actually done." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, aimed at the finish rather than the start. Small enough to do without the reward that's already gone. Some run every day, some a few times a week: the next paragraph, the boring last section, the email that sends it out the door. A few connect to the thing you're finishing. 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, so the finish isn't only yours to hold: the loops you close and the moment it's finally done. Support, without the nagging or the chasing. 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 last 10% finally done, a thing off the pile for good, the first finish in longer than you'd like to admit. 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 finishing and where you tend to drift, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when a shinier idea is pulling at you, holding the nearly-done thing in front of you with the next small step to done." },
];

const FinWhatsInside = () => (
  <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">
        {FIN_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 FIN_TESTIMONIALS = [
  { quote: "I had eleven things sitting at about 90% done. I told Loops about the oldest one and it just kept handing me the next tiny step. I finished it in nine days. I hadn't finished anything in about a year.", who: "Product designer", meta: "Diagnosed with ADHD at 34" },
  { quote: "The last 10% was always where things died for me. Loops didn't make it interesting. It just made it possible to keep going without the interest. That was the whole thing I'd been missing.", who: "Freelance copywriter", meta: "Using Loops for 7 weeks" },
  { quote: "I finished it. It's done. For once there's no half-finished version of it haunting me. I didn't realise how much those were weighing on me until this one wasn't.", who: "PhD student, Manchester", meta: null },
];

const FinSocialProof = () => (
  <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">
        {FIN_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 FIN_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the finish.", 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 FinPricing = () => (
  <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">
        {FIN_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) ---------------- */

const FIN_OBJECTIONS = [
  { q: "\u201CI've got so many unfinished things I don't know where to start.\u201D", a: "You don't have to sort all of them. Pick one, the oldest or the closest to done, and let Loops handle the rest. Finishing one changes how the others feel, and Loops moves on to the next when you're ready." },
  { 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, since a finish with someone waiting is far more likely to happen. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CIsn't it easier to just start fresh?\u201D", a: "It feels easier, because starting is the rewarding part. But a new start becomes another nearly-done thing on the pile. Finishing one is what breaks the pattern, and it's usually far less work than beginning again." },
  { 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 one small step a day take forever to finish anything?\u201D", a: "It's faster than it sounds, because the last stretch is usually smaller than it feels. One daily step on the thing that's nearly done tends to close it in days or weeks, not the months it's already been sitting there." },
];

const FinObjections = () => (
  <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">
        {FIN_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 FIN_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 finishing specifically, it helps with the final stretch of a task, where the reward has gone and a new idea is competing for attention." },
  { 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 moment it's finally done. They don't chase you or nag you. The things that get finished usually have someone waiting, so having one person makes the finish far more likely. 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 me finish things if I have ADHD?", a: "It gives you one specific action each day on the thing that's closest to done, keeps it visible when a new idea pulls at you, and coaches you through the unrewarding final part. It's designed for the finish, not the start." },
  { q: "Why do people with ADHD struggle to finish what they start?", a: "Starting produces a dopamine response and finishing rarely does. The final stretch of any task is the least novel and least stimulating part, so the brain stops supplying the motivation that made starting easy. Add the pull of new ideas and the lack of an external deadline, and the end becomes far harder than the beginning." },
  { q: "Is this different from a to-do app?", a: "Yes. A to-do app shows you everything unfinished, which for many ADHD brains adds to the overwhelm. Loops gives you one action on one thing, so finishing feels possible rather than buried under everything else you haven't done." },
  { 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 if I keep getting pulled toward new projects?", a: "That's expected, and Loops is built for it. It keeps the nearly-done thing in front of you so the next idea doesn't quietly replace it. You can capture the new idea for later without abandoning the current finish." },
  { 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 action toward finishing is still there, still small, and still designed to be the easiest possible step back in." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

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

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

const FinFinalCTA = () => (
  <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>One thing, finished</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]">
            Pick one nearly-done thing and actually finish it.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not all of them. Not perfectly. Just one, carried all the way to done, so it stops sitting there, and, if you want, one person waiting at the finish.
          </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 FIN_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Functional Impairment and Quality of Life in Newly Diagnosed Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/38755511/" },
  { t: "Executive Functioning in Adult ADHD: A Meta-Analytic Review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/16116936/" },
  { t: "Complex Prospective Memory in Adults With Attention Deficit Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3590133/" },
  { t: "Increased Default-Mode Variability Is Related to Reduced Task Engagement — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5568884/" },
  { t: "The Important Role of Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "Emotional Dysregulation and Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" },
  { 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 Lived Experiences of Adults With Attention-Deficit/Hyperactivity Disorder: A Rapid Review of Qualitative Evidence — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.949321/full" },
  { t: "Adult ADHD-Related Poor Quality of Life: Investigating the Role of Procrastination — ResearchGate", u: "https://www.researchgate.net/publication/390729095_Adult_ADHD-Related_Poor_Quality_of_Life_Investigating_the_Role_of_Procrastination" },
  { t: "A Systematic Review and Component Network Meta-Analysis of ADHD Interventions — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39701638/" },
  { t: "Short-Term and Long-Term Effect of Non-Pharmacotherapy for Adults With ADHD: A Systematic Review and Network Meta-Analysis — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2025.1516878/full" },
  { t: "Evaluating the Evidence: A Systematic Review of Reviews of Digital Interventions for ADHD — Springer", u: "https://link.springer.com/article/10.1186/s12888-025-06825-0" },
  { t: "Coaching for Adults With ADHD: A Prospective Study — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC13031141/" },
  { t: "Why Doesn't a Planner Work? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/16amcz6/why_doesnt_a_planner_work/" },
  { t: "Proposing Body Doubling as a Continuum of Space/Time Co-presence — leyabreanna.com", u: "https://leyabreanna.com/papers/body_doubling.pdf" },
  { t: "Misinformation Mayhem: The Effects of TikTok Content on ADHD Knowledge and Confidence — Springer", u: "https://link.springer.com/article/10.1007/s00787-025-02769-8" },
  { t: "“Turning Intentions Into Actions” — J. Russell Ramsay, Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/1534650115611483" },
  { t: "Assessment of Goal-Directed Behavior and Prospective Memory in Adult ADHD With an Online 3D Videogame Simulating Everyday Tasks — Nature", u: "https://www.nature.com/articles/s41598-023-36351-6" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9821724/" },
  { t: "Experience of CBT in Adults With ADHD: A Mixed Methods Study — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2024.1341624/full" },
  { t: "Digital Health Technologies for Adults With ADHD: A Scoping Review — Frontiers", u: "https://www.frontiersin.org/journals/digital-health/articles/10.3389/fdgth.2026.1746732/full" },
  { t: "The Experience of Effort in ADHD: A Scoping Review — Frontiers", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2024.1349440/full" },
  { t: "My Childhood Bedroom Is a Graveyard of Unfinished Crafts... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/rmn59m/my_childhood_bedroom_is_a_graveyard_of_unfinished/" },
  { t: "Report of the Independent ADHD Taskforce: Part 2 — NHS England", u: "https://www.england.nhs.uk/long-read/report-of-the-independent-adhd-taskforce-part-2/" },
  { 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" },
];

const FinSources = () => (
  <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 executive function, emotion regulation and completion behaviour, and real accounts from people with a trail of unfinished work. Here's where it comes from.
        </p>
      </div>

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

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

function FinApp() {
  return (
    <main id="main">
      <FinNav />
      <FinHero />
      <FinWhatLoopsDoes />
      <FinRecognition />
      <FinWhyItHappens />
      <FinReframe />
      <FinWhyLoopsWorks />
      <FinHowItWorks />
      <FinWhatsInside />
      <FinSocialProof />
      <LoopsPricing bg="bg-soft" />
      <FinObjections />
      <FinFAQ />
      <FinFinalCTA />
      <FinSources />
      <Footer />
    </main>
  );
}

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