/* Loops — "Learn Something Valuable With ADHD" use-case page
   Self-worth guardrails: enthusiasm validated as genuine (H1 + recognition close), every
   mechanism neurological, ADHD learning reframed as different not worse, shame framed as
   accumulated cost, winning honest+modest. Unique section: interest-based learning reframe. */

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

const LRN_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 LrnNav = () => {
  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">
            {LRN_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">
              {LRN_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 LRN_HERO_BLOCKS = [
  {
    title: "Get past the beginning",
    body: "The part where interest usually fades is the part Loops is built for.",
    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: "Let the learning stick",
    body: "Daily contact with the material, in a form the brain can actually sustain.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/></svg>),
  },
  {
    title: "Still going, six months from now",
    body: "Not mastery. Just: the thing you started, still there.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
];

const LrnHero = () => (
  <section id="top" aria-label="Hero" className="relative overflow-hidden">
    <div aria-hidden="true" className="absolute inset-0 -z-10 hero-halo"></div>
    <Container className="pt-14 lg:pt-20 pb-16 lg:pb-24">
      <div className="mx-auto max-w-3xl text-center">
        <div className="mb-7 flex justify-center fade-in-up">
          <span className="gradient-ring inline-flex items-center bg-white px-4 py-2 shadow-soft">
            <span className="text-[13px] sm:text-[13.5px] font-semibold text-ink">Designed for ADHD. Works for everyone.</span>
          </span>
        </div>

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[54px] fade-in-up delay-1">
          You start things with real enthusiasm. You keep losing them anyway.
        </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 motivation problem. For many people with ADHD, the enthusiasm is genuine. The structure around it just doesn't survive the part where the novelty wears off.
        </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 do with the material each day, coaching for when the interest dips, and, if you want it, <span className="text-ink font-medium">one person still paying attention when the novelty's gone.</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">
        {LRN_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 LrnWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
        <div className="lg:order-1 flex justify-center"><LoopsGalleryPhone /></div>
        <div className="max-w-prose lg:order-2">
        <Kicker>How Loops helps</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A daily system for the part of learning that enthusiasm can't carry.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most learning tools are excellent at the beginning. They're designed for the part that already works for ADHD brains: the novel, the stimulating, the new. What they're not designed for is the middle, where the material gets repetitive and the dopamine that made starting easy has moved on.
          </p>
          <p>
            Loops gives you specific learning actions each day, keeps the subject alive when interest naturally dips, and coaches you through the moments when the course usually gets quietly abandoned. Not a curriculum. A structure that survives.
          </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 LRN_RECOGNITION = [
  "You've bought courses you never finished. Some you never started. You were genuinely excited about all of them.",
  "You learned the first 30% quickly and well. The next 70% never happened.",
  "You've gone back to the same chapter or the same lesson several times because you can't retain what you covered before.",
  "Something clicked and you understood it completely. Two weeks later, it was gone.",
  "You've started to feel embarrassed about starting new things because you already know how it ends.",
  "You're genuinely curious and genuinely capable. You just can't seem to get from interested to actually knowing it.",
];

const LrnRecognition = () => (
  <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 learning something new.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {LRN_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">
          The enthusiasm was real. The problem isn't you. It's that learning something valuable requires sustaining engagement through a part that ADHD brains find genuinely difficult.
        </p>
      </div>

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

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

const LRN_PATTERNS = [
  { title: "The novelty fade", body: "The enthusiasm that made starting easy is neurological, not motivational. It doesn't last. ADHD brains are wired for immediate reward and stimulation. New learning produces a genuine dopamine response. That response fades as material becomes familiar, and the brain starts looking for something more interesting." },
  { title: "The working memory loop", body: "It's not just forgetting. It's going back to the same chapters because nothing is sticking. ADHD impairs working memory, which means information learned in one session doesn't reliably consolidate. Without a system that revisits material in the right way, the learning has to start over each time." },
  { title: "The overwhelm collapse", body: "A course that seemed manageable at sign-up feels impossible two weeks in. Once the initial structure of a course or programme runs out, or the material gets denser, the executive function demands of organising what to learn next often exceed what's available for actually learning it." },
  { title: "The shame-after-dropout spiral", body: "Each abandoned course makes the next one feel more dangerous to start. ADHD's emotional dysregulation means that giving up on a course doesn't just feel disappointing. It accumulates. Eventually the anticipation of failure becomes a reason to avoid starting at all." },
  { title: "The system-not-the-subject problem", body: "Finding a better topic doesn't fix the problem. It restarts the cycle. Many ADHD learners move between subjects looking for one that holds attention permanently. The research suggests the issue isn't the subject. It's the structure around the learning that needs to change." },
];

const LrnWhyItHappens = () => (
  <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 finding the right subject. It's about what happens after the excitement does.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Learning with ADHD breaks down through a specific set of mechanisms. The beginning is rarely the problem. The middle is where things fall apart.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {LRN_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 address all five of these failure points, not just the first one.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the interest-based learning reframe ---------------- */

const LrnReframe = () => (
  <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 about how ADHD brains actually learn</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]">
          ADHD brains don't learn worse. They learn differently. And that changes what structure should look like.
        </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>
          Standard learning advice assumes motivation is something you maintain through discipline. For ADHD brains, motivation is something the brain generates when the material connects to genuine interest or immediate application. Discipline doesn't substitute for that connection. It just makes the absence of it feel like a personal failing.
        </p>
        <p className="text-ink font-medium">
          This means the intervention isn't trying harder to concentrate. It's designing the learning so that interest keeps touching the material: small actions that feel connected to something real, visible progress that makes the effort feel worthwhile, and a structure that doesn't abandon you when the first wave of enthusiasm passes.
        </p>
      </div>
    </Container>
  </Section>
);

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

const LRN_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you come back after the interest dipped, they see that too, and it's no big deal. They just get to watch you keep turning up to the thing you're learning, and cheer you on." },
  { t: "They don't test you", b: "They don't have to nag you or quiz 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: "Still paying attention", b: "When the enthusiasm that started it has moved on, one person still paying attention is often what keeps you going." },
];

const LrnWhyLoopsWorks = () => (
  <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>Learning something on your own is quiet work. Nobody knows whether you opened the course today, and when the novelty fades, there's nobody to notice you've quietly stopped. So it's easy to.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, someone learning alongside you, whoever it is. When you close a loop, they see it. When you come back after the interest dipped, they see that too, and it's 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">
        {LRN_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 LRN_STEPS = [
  { t: "Tell Loops what you're learning", b: "Name the subject, the skill, the course. Plain language. No categories or setup. Whatever you're trying to learn, however far in you already are." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress. 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, which suits a group learning the same thing." },
  { t: "Get small daily actions", b: "Each day, Loops gives you specific, low-friction things to do with the material. Small enough to be possible on a tired day. Targeted enough to move the learning forward rather than just revisit what's already comfortable. Close the loop, and your person sees it." },
  { t: "Get coached through the fade", b: "Feeling like the interest has gone? Loops gives you something to do that keeps contact with the material, so the gap between sessions doesn't grow until returning feels impossible." },
  { t: "Build knowledge that actually stays", b: "Consistent small contact with material, over enough time, is how learning sticks. Loops is designed to make that consistency achievable rather than aspirational." },
];

const LrnHowItWorks = () => (
  <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 learning action. Every day. Through the difficult middle.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new course. You need something that keeps the one you already care about alive past the point where enthusiasm stops doing the work.
        </p>
      </div>

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

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need to feel enthusiastic to do today's action. That's the point.
      </p>
    </Container>
  </Section>
);

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

const LRN_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The subject, skill or course you want to learn, described your way, and how far in you already are. With or without a finish line, whatever fits. Just a clear picture of what you're working towards, so it stays real when the novelty fades." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, small enough for a tired day and targeted so it moves the learning forward rather than just revisiting what's comfortable. Some run every day, some a few times a week: one lesson, ten minutes of practice, review yesterday's notes. A few connect to what you're learning. 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 kept turning up to the material. Support, without the nagging or the testing. On a Crew plan it can be more than one: your people, which suits a group learning together." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: a month of daily contact, the difficult middle you pushed through, six months in and still going. 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 learning and where interest tends to dip, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when the novelty's gone and you can't face it, with something small that keeps contact with the material." },
];

const LrnWhatsInside = () => (
  <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">
        {LRN_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 LRN_TESTIMONIALS = [
  { quote: "I'd bought four language courses in two years. I'd finished none of them. I knew exactly what was going to happen and I kept doing it anyway. Loops was the first thing that gave me something to do with the material on the days when I didn't feel like it.", who: "Software engineer", meta: "Self-identified ADHD" },
  { quote: "I kept going back to the same chapters because nothing was sticking. I thought it was a memory problem. It wasn't. I just didn't have anything keeping regular contact with the material. Loops fixed that.", who: "Nurse returning to education", meta: "Using Loops for 10 weeks" },
  { quote: "Six months in. Still going. I've never said that about anything I've tried to learn before.", who: "Graphic designer learning music theory, London", meta: null },
];

const LrnSocialProof = () => (
  <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">
        {LRN_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 LRN_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the learning.", 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 LrnPricing = () => (
  <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">
        {LRN_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. subject-switching) ---------------- */

const LRN_OBJECTIONS = [
  { q: "\u201CI've started things before and always abandoned them.\u201D", a: "That's the pattern Loops is specifically built for. The abandonment usually happens at the point where novelty fades and the structure around the learning runs out. Loops provides the structure for that part, not just the beginning." },
  { 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. You decide what your person sees, and you can change it any time. You can add them whenever you're ready." },
  { q: "\u201CI just need to find a subject I'm more interested in.\u201D", a: "Interest matters. But the research suggests structure matters more. ADHD learners who change subjects frequently are usually solving a structure problem with a content solution. The new subject produces a few weeks of enthusiasm before the same pattern reasserts itself. Loops is designed around the pattern, not the subject." },
  { q: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns here feel familiar. If that's you, Loops is built for you." },
  { q: "\u201CWon't one daily action feel too slow?\u201D", a: "It might at first. That changes. One daily action, sustained over weeks, produces more genuine learning than intense bursts that don't repeat. Loops is designed for the pace that actually gets you somewhere, not the pace that feels impressive at the start." },
];

const LrnObjections = () => (
  <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">
        {LRN_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 LRN_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 learning specifically, it helps with consistency through the phases where interest naturally dips and the course usually gets abandoned." },
  { 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 kept turning up to the material. They don't test you or nag you. When the enthusiasm that started it has moved on, one person still paying attention is often what keeps you going. 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 learning if you have ADHD?", a: "It gives you one specific action each day with your chosen material, sized to be possible on a tired or uninterested day. It also coaches you through the gaps so that a low-motivation week doesn't turn into a full dropout." },
  { q: "Why do people with ADHD struggle to finish courses and learning projects?", a: "The beginning is rarely the problem. ADHD brains respond strongly to novelty, which makes starting feel natural. The difficulty is the middle: when material becomes familiar, the dopamine response that made starting easy is no longer there, and the working-memory and executive-function demands of organising further learning often exceed what's available." },
  { 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: "Can Loops work for any subject?", a: "Yes. Loops works alongside whatever you're learning: languages, instruments, professional skills, academic subjects, creative practices. You tell Loops what you're working on, and it gives you a daily action specific to that." },
  { q: "What if I'm starting from scratch with no course?", a: "Loops works best alongside existing learning material. If you haven't chosen something yet, start with whatever you've been most interested in longest. Loops will help you go further with it than you have before." },
  { q: "What if I lose interest completely?", a: "That's worth treating as information rather than failure. If interest genuinely doesn't return after a few weeks of small daily actions, it might be right to redirect. Loops can help with the next thing too." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

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

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

const LrnFinalCTA = () => (
  <Section id="start" className="bg-base">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>The learning that stays</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]">
            Six months from now, actually knowing it.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not every course finished. Not every topic mastered. Just one thing you started, still going, with something to show for it, and, if you want, one person who kept you company through the middle.
          </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 LRN_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "ADHD Statistics, May 2025 — NHS Digital", u: "https://digital.nhs.uk/data-and-information/publications/statistical/mi-adhd/may-2025" },
  { t: "The Important Role of Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "ADHD Folks, How Do You Deal With the “I Can't Start” Feeling? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1oxv0da/adhd_folks_how_do_you_deal_with_the_i_cant_start/" },
  { t: "Mechanisms of Learning in Adults With ADHD During an Ecologically-Valid Visual Discrimination Task — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12686185/" },
  { t: "Motivation Deficit in ADHD Is Associated With Dysfunction of the Dopamine Reward Pathway — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3010326/" },
  { t: "ADHD and Academic Performance in College Students — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39668738/" },
  { t: "Emotion Dysregulation in Adults With Attention Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/32164655/" },
  { t: "Self-Esteem in Adults With ADHD Using the Rosenberg Scale — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/38491855/" },
  { t: "Latent Profile Analysis of Impulsivity and Perfectionism in ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33578341/" },
  { t: "Sleep in Adults With ADHD: Systematic Review and Meta-Analysis — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/29477617/" },
  { t: "Adult Psychiatric Morbidity Survey 2023/24: Attention-Deficit Hyperactivity Disorder — NHS Digital", u: "https://digital.nhs.uk/data-and-information/publications/statistical/adult-psychiatric-morbidity-survey/survey-of-mental-health-and-wellbeing-england-2023-24/attention-deficit-hyperactivity-disorder" },
  { t: "Skills and Compensation Strategies in Adult ADHD: A Qualitative Study — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5617155/" },
  { t: "Strategies for Coping With Time-Related and Productivity Challenges of Young People With Learning Disabilities and ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC6406620/" },
  { t: "I Spent 6 Months Failing at To-Do Lists Before... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1n2l6um/i_spent_6_months_failing_at_todo_lists_before/" },
  { t: "A Meta-Analysis of Randomized Controlled Trials on Adult ADHD Treatment — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36794797/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — Frontiers", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" },
  { t: "Silver Linings of ADHD: A Thematic Analysis of Adults' Positive Experiences With Living With ADHD — BMJ Open", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10551976/" },
  { t: "A Systematic Review and Component Network Meta-Analysis of ADHD Interventions — The Lancet Psychiatry", u: "https://www.thelancet.com/journals/lanpsy/article/PIIS2215-0366%2824%2900360-2/fulltext" },
  { t: "CBT for Adult ADHD: From Intention to Action — Psychwire", u: "https://psychwire.com/free-resources/q-and-a/15i4yzk/cbt-for-adult-adhd-from-intention-to-action" },
  { t: "NHS England Responds to ADHD Taskforce Interim Report — NHS England", u: "https://www.england.nhs.uk/2025/06/nhs-england-responds-to-adhd-taskforce-interim-report/" },
];

const LrnSources = () => (
  <Section id="sources" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on ADHD clinical guidelines, research into working memory, reward processing and learning motivation, and real accounts from people who start learning with real enthusiasm and keep losing it. Here's where it comes from.
        </p>
      </div>

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

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

function LrnApp() {
  return (
    <main id="main">
      <LrnNav />
      <LrnHero />
      <LrnWhatLoopsDoes />
      <LrnRecognition />
      <LrnWhyItHappens />
      <LrnReframe />
      <LrnWhyLoopsWorks />
      <LrnHowItWorks />
      <LrnWhatsInside />
      <LrnSocialProof />
      <LoopsPricing bg="bg-soft" />
      <LrnObjections />
      <LrnFAQ />
      <LrnFinalCTA />
      <LrnSources />
      <Footer />
    </main>
  );
}

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