/* Loops — "Build Something Meaningful With ADHD" use-case page
   Pattern-level (not single project) builder. Wry exhausted self-awareness; accumulated shame.
   Five stages: start trap / novelty cliff / invisible middle / restart barrier / shame spiral.
   Unique section: finishing as a distinct mode. Unique objection: deadline-only working.
   CTA is a permission, not a challenge. */

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

const MNG_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 MngNav = () => {
  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">
            {MNG_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">
              {MNG_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 MNG_HERO_BLOCKS = [
  {
    title: "Make starting easier",
    body: "One small action today, not a project plan that never happens.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/></svg>),
  },
  {
    title: "Survive the hard middle",
    body: "Coaching built for the moment novelty fades and motivation disappears.",
    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: "Actually finish things",
    body: "A system designed to keep moving, even after a week of doing nothing.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/></svg>),
  },
];

const MngHero = () => (
  <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">ADHD &amp; long-term projects</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 know what you want to build. You just can't seem to keep going.
        </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 lack of ideas. It's not laziness. For people with ADHD, finishing is a specific kind of hard.
        </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 actions toward the thing you're building each day, coaching for the hard middle, and, if you want it, <span className="text-ink font-medium">one person who makes a deadline-less project feel real.</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">
        {MNG_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 MngWhatLoopsDoes = () => (
  <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 built for how ADHD actually works.
        </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 assume you can sustain effort through sheer importance. For ADHD brains, that's rarely enough. Loops is built around the real pattern: interest spikes, motivation dips, and life gets in the way.
          </p>
          <p>
            It gives you small actions each day, coaching when things stall, and a structure that makes returning after a gap feel normal, not shameful.
          </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 MNG_RECOGNITION = [
  "You start strong. Then the exciting part ends and the whole thing quietly disappears.",
  "You've got five projects on the go. None of them are done. You're not sure which one is even current any more.",
  "You work in bursts when the deadline is real. On personal projects, the deadline never feels real enough.",
  "You know exactly what to do. You just can't seem to actually start doing it.",
  "Falling behind for a few days doesn't feel recoverable. So you quietly give up instead.",
  "You have dozens of half-finished things and a private sense that you'll never be someone who completes things.",
];

const MngRecognition = () => (
  <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 the only one who keeps almost finishing.
        </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 building something meaningful.
        </p>
      </div>

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

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          None of this is a character flaw. It's a pattern. And patterns can change with the right structure.
        </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 stages) ---------------- */

const MNG_PATTERNS = [
  { title: "The start trap", body: "Starting a meaningful project is the hardest single thing ADHD brains do. Without a looming deadline or a spike of excitement, the brain doesn't generate a strong enough signal to begin. The project stays vivid in your mind and motionless in reality." },
  { title: "The novelty cliff", body: "The exciting part ends. So does the momentum. ADHD brains are wired to seek novelty. Once a project moves from \u201Cnew idea\u201D to \u201Congoing responsibility,\u201D the same work that felt electric starts to feel like pulling teeth." },
  { title: "The invisible middle", body: "Nobody talks about how long the middle takes. ADHD makes it feel endless. Time blindness means future progress doesn't feel real. The gap between where you are and where you want to be feels fixed, not closeable." },
  { title: "The restart barrier", body: "Missing a few days doesn't just pause a project. It restarts the starting problem from scratch. For ADHD brains, re-entry after a gap costs the same activation energy as beginning. So gaps become stops." },
  { title: "The shame spiral", body: "Every unfinished thing becomes evidence of something you've decided about yourself. That accumulated evidence makes it harder to start the next thing, even when you genuinely want to." },
];

const MngWhyItHappens = () => (
  <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 a motivation problem. It's a structure problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most advice about building things assumes you can sustain effort through sheer importance or willpower. ADHD changes that equation entirely.
          </p>
          <p>
            The ADHD brain needs novelty, urgency, or genuine interest to activate. When those run out, work stalls. Not because you don't care, but because caring isn't enough.
          </p>
        </div>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {MNG_PATTERNS.map((p, i) => (
          <li key={p.title} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex flex-col gap-4 sm:flex-row sm:gap-7">
              <span className="text-[40px] font-semibold tracking-tight3 text-brand-deep tnum leading-none sm:w-16 sm:shrink-0">{String(i + 1).padStart(2, "0")}</span>
              <div className="max-w-prose">
                <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">{p.title}</h3>
                <p className="mt-2.5 text-[15.5px] sm:text-[16px] leading-[1.65] text-ink-2 text-pretty">{p.body}</p>
              </div>
            </div>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">Loops is built around all five of these stages. Not to eliminate them, but to make moving through them possible.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: finishing as a distinct mode ---------------- */

const MngReframe = () => (
  <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</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 is a completely different skill to building.
        </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>
          Most people assume they failed at finishing because they're bad at the project. In reality, finishing requires a different mode: lower novelty, lower stakes, more repetition. For ADHD brains, that shift is genuinely hard. It's not the same as the work that came before.
        </p>
        <p className="text-ink font-medium">
          Understanding this changes what you need. Not more motivation to push through. A system that makes the finishing mode sustainable. That's what Loops is built to do.
        </p>
      </div>
    </Container>
  </Section>
);

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

const MNG_WITNESS_CARDS = [
  { t: "The deadline a private project lacks", b: "A personal project has no one waiting, so there's nothing outside your own fading interest holding it up. One person who's glad it's happening is the deadline that never felt real, made real." },
  { 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: "Returning is no big deal", b: "When you come back after a gap, they see that too, and it's genuinely no big deal. They just get to watch the thing slowly become real, and cheer you on." },
];

const MngWhyLoopsWorks = () => (
  <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>Notice the pattern the page names: you work when the deadline is real, and on a personal project the deadline never feels real enough. That's the heart of it. A private project has no one waiting, so there's nothing outside your own fading interest holding it up.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going, and it's the exact thing a deadline-less 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 you come back after a gap, they see that too, and it's genuinely no big deal. 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">
        {MNG_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 MNG_STEPS = [
  { t: "Name what you're building", b: "Tell Loops what you want to create. No long forms. Just what it is and why it matters to you." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress, so the project has someone waiting, not just you tracking it. 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 things to do today", b: "Each day, Loops gives you specific, manageable actions. Small enough to actually start. Meaningful enough to move the project forward. Close the loop, and your person sees it." },
  { t: "Get coaching through the hard middle", b: "When novelty fades and motivation dips, Loops gives you practical support to keep going. No willpower required." },
  { t: "See it becoming real", b: "Progress builds visibly over time. Your project stops being an idea in your head and becomes something you've actually made." },
];

const MngHowItWorks = () => (
  <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]">
          Simple from day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to overhaul your process to start making progress. Loops fits around what you're already doing.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {MNG_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 a perfect week to make it work. You just need today.
      </p>
    </Container>
  </Section>
);

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

const MNG_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The thing you want to build, in your own words: what it is and why it matters to you. Loops keeps that finish line in view through the long middle, when time blindness makes it feel like it's not getting any closer." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, small enough to actually start and meaningful enough to move the project forward. Some run every day, some a few times a week: the next paragraph, one small build, fifteen minutes on the hard part. A few connect to what you're building. Others are just life, like taking your meds before breakfast. A missed one doesn't wipe you out. You can repair a streak simply by showing up again." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the days you come back after a gap. The someone-waiting a personal project usually lacks. 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 you kept going, the hard middle survived, the thing finally finished. 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 building and where it tends to stall, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when novelty fades or a gap has opened up, with a calm way back in, not a reminder of the days you missed." },
];

const MngWhatsInside = () => (
  <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">
        {MNG_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 MNG_TESTIMONIALS = [
  { quote: "I have a graveyard of unfinished projects. I always assumed I was just bad at follow-through. Loops made me realise I'd been trying to use the wrong system, not that I was the wrong person.", who: "Freelance designer", meta: "Diagnosed with ADHD at 31, Birmingham" },
  { quote: "I'd been trying to write the same book for three years. Getting one tiny action a day felt almost too small. Two months later I had a first draft. I genuinely didn't think I was capable of that.", who: "Primary school teacher", meta: "Using Loops for six months" },
  { quote: "The bit that changed things was realising Loops doesn't punish you for a bad week. You just pick it back up. I'd never had a system that did that before.", who: "Software developer", meta: "Self-identifying ADHD, Manchester" },
];

const MngSocialProof = () => (
  <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've been stuck in the same place.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {MNG_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 MNG_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the thing you're building.", 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 MngPricing = () => (
  <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">
        {MNG_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. deadline-only + share) ---------------- */

const MNG_OBJECTIONS = [
  { q: "\u201CI've started so many things. Why would this be different?\u201D", a: "Most systems aren't built for what happens after the first week. Loops is. It's designed specifically for the novelty cliff and the restart barrier, not just for helping you begin. The daily action structure stays relevant even when the project feels stuck." },
  { 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, because a personal project with someone waiting is far more likely to get finished. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI only work well with a real deadline. This has no deadline.\u201D", a: "Loops creates the structure that deadlines usually provide, so you don't need the panic. The daily action, and one person who can see it, give you the kind of external pressure that ADHD brains respond to, without waiting until the last minute to generate it." },
  { q: "\u201CI'm not diagnosed. Is this still for me?\u201D", a: "You don't need a diagnosis. Many people using Loops are still waiting for assessment or simply recognise the patterns without a formal label. If the experiences described on this page feel familiar, Loops is built for you." },
  { q: "\u201CI'm not sure I can commit to one more thing right now.\u201D", a: "That's exactly why Loops is built around one small daily action, not a system to maintain. You don't need a perfect week. You need one thing today. That's genuinely it." },
];

const MngObjections = () => (
  <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">
        {MNG_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 MNG_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, accountability, and progress tracking into one system. For long-term projects specifically, it helps you break big goals into daily steps, stay consistent through the difficult middle stages, and recover from gaps without starting from zero." },
  { 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 days you come back after a gap. They don't chase you or nag you. A personal project has no one waiting, and one person who's glad it's happening is the deadline that never felt real, made real. 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: "Why do people with ADHD struggle to finish personal projects?", a: "The barriers aren't effort or creativity. They're specific executive function challenges: difficulty initiating tasks, time blindness, rapid loss of interest once novelty fades, and trouble recovering from setbacks. These challenges respond well to the right structure. Loops provides that structure so you don't have to rely on motivation alone." },
  { q: "Can Loops help with any kind of project?", a: "Yes. Loops works across creative projects, business ideas, learning goals, personal endeavours, and anything else you're trying to build consistently over time. You tell it what you're working on, and it gives you one daily action specific to that goal." },
  { 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 on this page feel familiar, Loops is built for you." },
  { q: "What happens when I miss a few days?", a: "You pick it back up. There's no punishment, no guilt, no streak that resets and makes you feel like you've failed. Loops is designed around the reality that gaps happen, especially for ADHD brains. Returning should feel easy, not shameful." },
  { q: "Is Loops just another productivity app?", a: "No. Most productivity apps focus on task completion and assume you can maintain motivation through the boring parts. Loops focuses on sustainable progress and coaching, especially for the moments when things go off course. It's designed to flex when life gets complicated, not to make you feel like a failure when it does." },
  { q: "How long does it take to see progress?", a: "Some people notice a difference within the first couple of weeks. Building something meaningful typically takes longer, and Loops is designed to make that consistency achievable rather than just aspirational." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK. It's built with UK users in mind, including context and guidance relevant to UK-based support for ADHD." },
];

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

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

const MngFinalCTA = () => (
  <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>Permission granted</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]">
            You're allowed to actually finish this one.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You've got the idea. You've got the ability. The piece that's been missing is a system that works with your brain, not against it, and, if you want, one person waiting to see it made real.
          </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 MNG_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Experiences of Criticism in Adults With ADHD: A Qualitative Study — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/35180241/" },
  { t: "The Lived Experiences of Adults With Attention-Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36032220/" },
  { t: "Executive Functioning in Adult ADHD: A Meta-Analytic Review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/16116936/" },
  { t: "The Experiences of Adults With ADHD in Interpersonal Relationships and Online Communities — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10399076/" },
  { t: "A Meta-Analytic and Theoretical Review of Quintessential Self-Regulatory Failure — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/17201571/" },
  { t: "Delay Aversion and Executive Functioning in Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC6209856/" },
  { t: "Time Perception in Adult ADHD: Findings From a Decade, A Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36608036/" },
  { t: "Strengths and Challenges to Embrace Attention-Deficit Hyperactivity Disorder — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/27546330241287655" },
  { t: "Miss. Diagnosis: A Systematic Review of ADHD in Adult Women — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10173330/" },
  { t: "As a Person With ADHD I Am Really Struggling to Find a Daily... — r/productivity", u: "https://www.reddit.com/r/productivity/comments/1jcmu9t/i_think_i_need_your_help_as_a_person_with_adhd_i/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9443814/" },
  { t: "A Systematic Review and Component Network Meta-Analysis of ADHD Interventions — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39701638/" },
  { t: "A Meta-Analysis of Randomized Controlled Trials on Adult ADHD Treatment — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36794797/" },
  { t: "Coaching for Adults With ADHD: A Prospective Study — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/41909194/" },
  { t: "An Investigation of Body Doubling With Neurodivergent Users — ACM", u: "https://dl.acm.org/doi/full/10.1145/3689648" },
  { t: "Attention Deficit Hyperactivity Disorder (Update): Evidence Review — NICE", u: "https://www.nice.org.uk/guidance/ng87/documents/evidence-review-7" },
  { t: "Summary of Recommendations — Australian ADHD Clinical Practice Guideline", u: "https://adhdguideline.aadpa.com.au/wp-content/uploads/2022/10/ADHD-Clinical-Practice-Guide-Summary-of-Recommendations-031022.pdf" },
  { t: "Systematic Review of Quality of Life and Functional Outcomes in Adult ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5656703/" },
  { t: "Executive Function Skills — CHADD", u: "https://chadd.org/about-adhd/executive-function-skills/" },
  { t: "Now That I Have the To-Do Lists, How Do I Manage...? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1gypwgx/now_that_i_have_the_to_do_lists_how_do_i_manage/" },
  { t: "Reward Processing in Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12437619/" },
];

const MngSources = () => (
  <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 reward processing, and real accounts from people with a private tally of quietly shelved projects. Here's where it comes from.
        </p>
      </div>

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

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

function MngApp() {
  return (
    <main id="main">
      <MngNav />
      <MngHero />
      <MngWhatLoopsDoes />
      <MngRecognition />
      <MngWhyItHappens />
      <MngReframe />
      <MngWhyLoopsWorks />
      <MngHowItWorks />
      <MngWhatsInside />
      <MngSocialProof />
      <LoopsPricing bg="bg-soft" />
      <MngObjections />
      <MngFAQ />
      <MngFinalCTA />
      <MngSources />
      <Footer />
    </main>
  );
}

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