/* Loops — "Stop Procrastinating With ADHD" use-case page
   Shame/self-worth guardrails: "lazy" explicitly rejected, every mechanism framed as
   neurological/structural never characterological, shame named as compounding not deserved.
   Unique section: the productivity tool trap. */

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

const PRC_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 PrcNav = () => {
  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">
            {PRC_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">
              {PRC_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 PRC_HERO_BLOCKS = [
  {
    title: "Make starting possible",
    body: "One clear action, designed for the moment when starting feels impossible.",
    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: "Break the shame spiral",
    body: "Because guilt makes procrastination worse, not better.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>),
  },
  {
    title: "Build momentum that lasts",
    body: "Small consistent steps, not heroic sessions that burn out.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z"/></svg>),
  },
];

const PrcHero = () => (
  <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 know exactly what you need to do. So why can't you make yourself start?
        </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 laziness. It's not a lack of willpower. For many people with ADHD, the block between knowing and starting is neurological. It doesn't respond to trying harder.
        </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 things to start, coaching for the moment the block hits, and, if you want it, <span className="text-ink font-medium">one person who makes starting easier just by being there.</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">
        {PRC_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 PrcWhatLoopsDoes = () => (
  <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 system that works at the moment starting usually fails.
        </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 the problem is organisation. They give you lists, timers, and dashboards. But the problem isn't knowing what to do. It's the neurological block that makes starting feel impossible even when the task is simple and the stakes are low.
          </p>
          <p>
            Loops works differently. It gives you specific actions each day, meets you at the exact moment starting usually fails, and coaches you through what comes after a bad day. Without adding more to manage.
          </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 PRC_RECOGNITION = [
  "You've had the same task on your list for two weeks. You know exactly what it involves. You still haven't started.",
  "You can spend an hour organising your to-do list and come away feeling like you've done something. The actual tasks are still there.",
  "You work brilliantly under pressure. But that means you also regularly destroy yourself finishing things at the last possible moment.",
  "You've tried productivity apps. They worked for about a week. Then managing the app became another thing you weren't doing.",
  "The harder you try to force yourself to start, the more impossible it feels. Guilt makes it worse, not better.",
  "You don't think you're lazy. You know you're not lazy. But you can't explain to anyone why you still haven't done the thing.",
];

const PrcRecognition = () => (
  <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 procrastination.
        </p>
      </div>

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

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          This isn't a motivation problem. It's a neurological one. And it responds to a very different kind of support.
        </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 mechanisms) ---------------- */

const PRC_PATTERNS = [
  { title: "The dopamine timing mismatch", body: "ADHD brains don't get the reward signal at the start of a task. They get it, if at all, at the end. This means routine tasks feel genuinely unrewarding to begin, not because they don't matter, but because the brain isn't wired to feel the pull of them until they're almost done." },
  { title: "The knowing-doing gap", body: "Understanding what you need to do and being able to start it are two completely separate problems. ADHD affects task initiation at a neurological level, which is why explaining the task more clearly, or caring about it more, rarely makes starting any easier." },
  { title: "The shame spiral", body: "Guilt about procrastinating doesn't motivate. It makes the next attempt harder. Shame and anxiety around an undone task actively increase the emotional weight of starting it, creating a loop where the longer something sits undone, the more impossible it feels." },
  { title: "Planning paralysis", body: "Trying to fix procrastination with a better system can create more procrastination. The effort of building to-do lists, setting up apps, and organising tasks uses exactly the executive function resources that are already depleted. Less capacity is left for the actual work." },
  { title: "The urgency cycle", body: "Deadline pressure works. But the pattern it creates is exhausting and unsustainable. Repeatedly relying on last-minute adrenaline erodes trust in your own ability to manage things, and the crash after each sprint makes the next task harder to start." },
];

const PrcWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not about trying harder. It's about how ADHD changes the way starting works.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Procrastination in ADHD isn't the same as ordinary delay. It has specific neurological causes that make standard advice not just unhelpful, but sometimes actively counterproductive.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {PRC_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 interrupt these patterns from the outside, so you don't have to rely on willpower to break them from the inside.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the productivity tool trap ---------------- */

const PrcToolTrap = () => (
  <Section id="trap" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth naming before you try again</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The tool you use to fix procrastination can become something you procrastinate on.
        </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 productivity systems are built for brains that find organisation relatively low-effort. For ADHD brains, setting up a project board, maintaining a task tracker, or building a Notion template requires exactly the kind of sustained executive function that the procrastination problem already depleted.
        </p>
        <p className="text-ink font-medium">
          This is why so many productivity tools work for two weeks and then get abandoned. It's not lack of commitment. The system became a task in itself, a low-reward one at that. A solution that adds cognitive load is, for an ADHD brain, part of the problem it was supposed to solve.
        </p>
      </div>
    </Container>
  </Section>
);

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

const PRC_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you start the thing you'd been avoiding, they see that too. They just get to see you start, and cheer you on." },
  { t: "Not another thing to manage", b: "They don't judge the pile or ask why it took so long. They don't nag, they don't manage you, they don't even pay. Your person simply sees what you already do." },
  { t: "You're always in control", b: "You choose who it is. You decide exactly what they can see, and you can change it any time." },
  { t: "One person on the outside", b: "For a block that lives inside your own head, one person on the outside is often what breaks it." },
];

const PrcWhyLoopsWorks = () => (
  <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>Procrastination is a strangely lonely thing. The task sits there, you can't explain why you haven't started, and that quiet shame is easier to hide than to talk about. So it stays hidden, and it stays undone.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>There's a reason that simply having someone there helps you start when nothing else does. You choose one person you trust. Your partner, a friend, whoever feels safe. When you close a loop, they see it. When you start the thing you'd been avoiding, 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">
        {PRC_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">
          And it's not another thing to manage. Your person simply sees what you already do. If you'd rather keep it to yourself, Solo works on its own, and you can add them whenever you want.
        </p>
      </div>
    </Container>
  </Section>
);

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

const PRC_STEPS = [
  { t: "Tell Loops what you're working on", b: "Name your goal or the task that keeps not getting done. Plain language. No categories, no priority rankings, no setup that becomes its own project." },
  { t: "Choose your person, if you want one", b: "Pick one person you trust to see your progress. You decide exactly what they can see, and you can change it any time. It's not another thing to manage: they simply see what you already do. This is the step most people skip with other apps, and the one that makes Loops work. It's entirely optional. On a Crew plan you can choose more than one." },
  { t: "Get actions today", b: "Each day, Loops gives you specific, low-friction things to do. Not a list. Not a plan. One thing, chosen to be as easy as possible to start. Close the loop, and your person sees it." },
  { t: "Get coaching when the block hits", b: "Can't face it today? Loops gives you a practical next step, not a reminder of what you should have done already." },
  { t: "Build something that compounds", b: "One small completed action makes the next one easier. Over time, that changes what starting feels like." },
];

const PrcHowItWorks = () => (
  <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 thing. That's it.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new system. You need something that meets you where starting usually fails.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {PRC_STEPS.map((s, i) => (
          <li key={s.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center rounded-pill bg-brand text-white text-[14px] font-bold tnum shadow-cta">{i + 1}</span>
              <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-brand-deep">Step {i + 1}</span>
            </div>
            <h3 className="mt-4 text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{s.t}</h3>
            <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.b}</p>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need to be ready. Starting small is the point.
      </p>
    </Container>
  </Section>
);

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

const PRC_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "Your goal, or the one task that keeps not getting done, in your own words. No categories, no priority rankings. Just the thing you want to stop avoiding, clear enough that your brain has somewhere to start." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, chosen to be as easy as possible to start. Some run every day, some a few times a week: the first two minutes of the thing you're avoiding, open the document, send the one email you've been putting off. A few connect to your goal. Others are just life, like taking your meds before breakfast. Miss one and nothing is wiped out. The next action is still there, still small, still possible." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the things you finally start. It's not another thing to manage, they simply see what you already do. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: the thing you'd put off for weeks, finally done; a week you kept starting; a deadline you didn't leave to the last night. 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 working on and what you keep avoiding, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at the exact moment you're stuck, with one small way in, not a reminder of what you should have done already." },
];

const PrcWhatsInside = () => (
  <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">
        {PRC_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 PRC_TESTIMONIALS = [
  { quote: "I'd tried every productivity system going. They all worked for about ten days. Loops was the first thing that didn't feel like another task to manage on top of the tasks I was already avoiding.", who: "Graphic designer", meta: "Diagnosed with ADHD at 27" },
  { quote: "The shame about procrastinating was almost worse than the procrastinating itself. Loops didn't fix everything but it gave me something to do that wasn't 'try harder'. That was the difference.", who: "Researcher", meta: "Using Loops for 7 weeks" },
  { quote: "I've spent years assuming I was just lazy. I wasn't. I needed a completely different kind of support.", who: "Project coordinator, Manchester", meta: null },
];

const PrcSocialProof = () => (
  <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">
        {PRC_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 PRC_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the thing you've been putting off.", 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 PrcPricing = () => (
  <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">
        {PRC_PRICING.map((p) => (
          <article key={p.name} className={`relative flex flex-col rounded-card border bg-white p-6 sm:p-7 ${p.featured ? "border-brand shadow-card ring-1 ring-brand/20" : "border-line shadow-soft"}`}>
            {p.tag ? <span className="absolute -top-3 left-6 rounded-pill bg-brand px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-white shadow-cta">{p.tag}</span> : null}
            <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
            <div className="mt-3 flex items-baseline gap-1">
              <span className="text-[32px] font-bold tracking-tight3 text-ink tnum">{p.price}</span>
              <span className="text-[15px] text-ink-3">{p.per}</span>
            </div>
            <p className="mt-4 flex-1 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{p.blurb}</p>
            <div className="mt-6">
              <Button variant={p.featured ? "primary" : "secondary"} size="md" href="#start">Get Early Access</Button>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-white p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          <span className="font-semibold text-ink">Prefer to pay yearly?</span> A year of it, together, with two months free. Every plan starts with a 7-day free trial. On iOS for now.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Objections (5, incl. unique) ---------------- */

const PRC_OBJECTIONS = [
  { q: "\u201CI work fine under pressure. I just need a deadline.\u201D", a: "That's real. But the urgency cycle has a cost that compounds over time. Repeatedly finishing things at the last minute works in the short term and erodes trust in yourself over the long one. Loops is designed to make the ordinary days work, not just the deadline days." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", a: "No. Solo works perfectly well on its own. But most people find it works better when one person can see them, and because it's just a view of what you already do, it never becomes another thing to manage. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI've tried everything. Nothing sticks.\u201D", a: "Most things you've tried were designed for a different kind of brain. Loops is built specifically around the neurological patterns that make procrastination so persistent in ADHD, not around the assumption that more discipline or better organisation is the answer." },
  { 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 deeply familiar. If that's you, Loops is built for you." },
  { q: "\u201CWon't Loops just become another thing I procrastinate on?\u201D", a: "That's exactly what it's designed not to be. One action. No setup to maintain. No system to manage. If you miss a day, the next action is still there, still small, still possible." },
];

const PrcObjections = () => (
  <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">
        {PRC_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 PRC_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 procrastination specifically, it helps with task initiation, breaking the shame spiral, and building momentum after a run of bad days." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see your progress: the loops you close and the things you finally start. It's not another thing to manage, they simply see what you already do. They don't judge the pile or nag you. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with procrastination if you have ADHD?", a: "It removes the decision about what to do next by giving you one specific, low-friction action each day. It also coaches you through the moments when the block hits, so a bad day doesn't have to become a bad week." },
  { q: "Why is procrastination so much harder to overcome with ADHD?", a: "ADHD changes how the brain processes rewards at the start of a task, which means routine work feels genuinely unrewarding to begin. Add the shame spiral, planning paralysis, and the urgency cycle, and you have a set of compounding patterns that standard productivity advice wasn't designed to address." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "Is Loops just another productivity app?", a: "No. Most productivity apps focus on organisation and task management. Loops focuses on the moment starting fails. It gives you one action, coaches you through resistance, and treats a missed day as a starting point, not a failure." },
  { q: "What if I miss several days in a row?", a: "That's built into the design. Loops doesn't treat a missed week as a reason to restart from scratch. The next action 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." },
  { q: "How long before I notice a difference?", a: "Many people notice a shift within the first two weeks, not in how much they get done, but in how it feels to start. Building consistent momentum usually takes longer, and Loops is designed to make that achievable rather than aspirational." },
];

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

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

const PrcFinalCTA = () => (
  <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>Start with one task</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            The thing that's been sitting there can get done today.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not because conditions are perfect. Because you've got one small place to start, and, if you want, one person who makes starting a little easier.
          </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 PRC_SOURCES = [
  { t: "A meta-analytic and theoretical review of quintessential self-regulatory failure — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/17201571/" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/resources/attention-deficit-hyperactivity-disorder-diagnosis-and-management-pdf-1837699732933" },
  { t: "The relation between procrastination and symptoms of attention-deficit hyperactivity disorder (ADHD) in undergraduate students", u: "https://www.epanlab.nl/wp-content/uploads/2017/05/Niermann-Scheres-2014.pdf" },
  { t: "Evidence of emotion dysregulation as a core symptom of adult ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36608036/" },
  { t: "Using the temporal motivation theory to explain the relation between ADHD and procrastination — ResearchGate", u: "https://www.researchgate.net/publication/375770156_Using_the_temporal_motivation_theory_to_explain_the_relation_between_ADHD_and_procrastination" },
  { t: "Avoidant Automatic Thoughts Are Associated With Task Avoidance — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39878297/" },
  { t: "Bedtime procrastination and ADHD study — dergipark.org.tr", u: "https://dergipark.org.tr/en/download/article-file/2918975" },
  { t: "The difference between lazy procrastination and ADHD procrastination — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/b5gure/the_difference_between_lazy_procrastination_and/" },
  { t: "ADHD procrastination, I read 200+ of your comments on my post — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1mwxg3g/adhd_procrastination_i_read_200_of_your_comments/" },
  { t: "“Procrastivity” and Implementation Focused CBT for Adult ADHD — ADDA", u: "https://add.org/course/procrastivity-and-implementation-focused-cbt-for-adult-adhd/" },
  { t: "Why don't y'all use planners? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/p4ut43/why_dont_yall_use_planners/" },
  { t: "What apps actually help you manage daily life? Looking for real experiences — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1iwc3z3/what_apps_actually_help_you_manage_daily_life/" },
  { t: "Body Doubling is Magic! — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1grc6q5/body_doubling_is_magic_35_yo_struggled_most_of_my/" },
  { t: "Cognitive-Behavioral Therapy for Adult ADHD — Mary Solanto", u: "https://www.guilford.com/books/Cognitive-Behavioral-Therapy-for-Adult-ADHD/Mary-Solanto/9781462509638" },
  { t: "ADHD, Procrastination, and What You Can Do About It — Hallowell Todaro ADHD & Behavioral Health Center", u: "https://hallowelltodaro.com/blog-raw-feed/2023/4/17/the-so-called-power-of-procrastination-and-what-you-can-do-about-it" },
  { t: "Cognitive-behavioural therapy for attention deficit hyperactivity disorder (ADHD) in adults — Cochrane", u: "https://www.cochrane.org/evidence/CD010840_cognitive-behavioural-therapy-attention-deficit-hyperactivity-disorder-adhd-adults" },
  { t: "Prospective memory (partially) mediates the link between ADHD symptoms and procrastination — Springer Nature", u: "https://link.springer.com/article/10.1007/s12402-018-0273-x" },
  { t: "Non-Pharmacological ADHD Treatment — Australian ADHD Clinical Practice Guideline", u: "https://adhdguideline.aadpa.com.au/non-pharmacological/" },
];

const PrcSources = () => (
  <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 research into ADHD, procrastination, executive function and delay sensitivity, alongside real accounts from people who know exactly what they need to do and still can't start. Here's where it comes from.
        </p>
      </div>

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

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

function PrcApp() {
  return (
    <main id="main">
      <PrcNav />
      <PrcHero />
      <PrcWhatLoopsDoes />
      <PrcRecognition />
      <PrcWhyItHappens />
      <PrcToolTrap />
      <PrcWhyLoopsWorks />
      <PrcHowItWorks />
      <PrcWhatsInside />
      <PrcSocialProof />
      <LoopsPricing bg="bg-soft" />
      <PrcObjections />
      <PrcFAQ />
      <PrcFinalCTA />
      <PrcSources />
      <Footer />
    </main>
  );
}

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