/* Loops — "Pass the Exam With ADHD" use-case page
   Academic-anxiety guardrails: student support service + GP signposted in anxiety FAQ,
   underperformance never framed as effort, every mechanism executive-function, shame framed
   as dysregulation, winning is honest (a fair result). Unique section: the study-backwards trap. */

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

const EXM_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 ExmNav = () => {
  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">
            {EXM_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">
              {EXM_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 EXM_HERO_BLOCKS = [
  {
    title: "Start the revision",
    body: "One specific action today, before the panic sets in.",
    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: "Study what actually needs covering",
    body: "Not just the parts that feel comfortable.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Walk in prepared",
    body: "A pattern that actually happened, not one that was planned and abandoned.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0zm3 1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .5.5"/><path fillRule="evenodd" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
];

const ExmHero = () => (
  <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-[56px] fade-in-up delay-1">
          You know the material. So why doesn't the exam show it?
        </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 knowledge problem. For many people with ADHD, the gap between understanding something and demonstrating it under exam conditions is structural. And it doesn't close with more revision.
        </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 tells you what to revise today, coaching for when the revision stalls, and, if you want it, <span className="text-ink font-medium">one person who helps keep the exam real.</span>
        </p>

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

      {/* Three icon blocks */}
      <p className="mt-14 lg:mt-16 text-center text-[12px] font-semibold uppercase tracking-[0.14em] text-brand-deep fade-in-up delay-4">Three things Loops does for you</p>
      <div className="mx-auto mt-6 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {EXM_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 ExmWhatLoopsDoes = () => (
  <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 weeks before the exam, not just the night before.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most exam prep advice assumes you'll follow a revision timetable you built yourself. For ADHD brains, building the timetable is often the most productive thing that happens, and then nothing else does.
          </p>
          <p>
            Loops gives you specific study actions each day, keeps the exam visible when it feels abstract, and coaches you through the moments when the revision usually stops for good. Not a plan to maintain. A prompt that shows up.
          </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 EXM_RECOGNITION = [
  "You understood it in the lecture. You understood it when you reviewed your notes. In the exam, it wasn't there.",
  "You've made a revision timetable. It's very detailed. You haven't followed it.",
  "You sat down to study. An hour passed. You're not sure what happened.",
  "You know you work best under pressure. But the pressure never seems to produce the result it should.",
  "You have extra time in exams. You're not sure you're using it well. You might be using it to second-guess yourself.",
  "You've explained the topic clearly to someone else. You couldn't write it down in the exam the same way.",
];

const ExmRecognition = () => (
  <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 studying and sitting exams.
        </p>
      </div>

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

      <div className="mt-10 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          None of this is about how much you care or how hard you try. ADHD creates specific barriers in exactly the conditions exams are designed around.
        </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 EXM_PATTERNS = [
  { title: "The starting problem", body: "Planning the revision is easier than starting it. So the planning keeps happening instead. Executive function deficits make task initiation difficult, which is why detailed revision timetables get built and not followed: building the timetable satisfies the urge to act without requiring the actual act." },
  { title: "Focus during study sessions", body: "Standard long study periods don't work for ADHD brains. Neither does trying harder to concentrate. Attention wanders, restlessness builds, and the material that was clear at the beginning of a session becomes noise by the end. The problem isn't effort. It's that the study session wasn't structured for how ADHD attention actually works." },
  { title: "The exam-room performance gap", body: "Extra time in exams helps with some things and not others. Impulsivity and poor self-monitoring cause errors that more time doesn't automatically fix. Research shows ADHD students often make more careless mistakes rather than working slower. Without a strategy for using exam time, extra time gets used to second-guess rather than to review." },
  { title: "Working memory under pressure", body: "Understanding something in a low-pressure context doesn't guarantee recall under exam pressure. ADHD impairs working memory, which means knowledge that feels secure during revision can become inaccessible in the exam room when cognitive load is high and stress is higher." },
  { title: "Emotional barriers after setbacks", body: "A difficult exam or a bad result doesn't just feel bad. It makes starting the next round of revision significantly harder. ADHD's emotional dysregulation means that academic setbacks often trigger avoidance that looks like giving up, when it's actually the shame response doing its job." },
];

const ExmWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not a revision problem. It's an executive function problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Exams test knowledge under time pressure, with no external structure, in a high-stress environment. These are exactly the conditions ADHD makes most difficult. Understanding where things break down changes what preparation looks like.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {EXM_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 support revision before all five of these failure points compound.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the study-backwards trap ---------------- */

const ExmReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing before you open the revision notes</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]">
          Most ADHD revision covers the wrong things first.
        </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>
          Familiar material feels rewarding to study. Difficult material feels aversive. For ADHD brains, where reward and aversion drive attention more powerfully than intention, this means revision sessions naturally drift toward what's already understood.
        </p>
        <p className="text-ink font-medium">
          The result is a revision block that felt productive, covered a lot of ground, and left the actual weak areas untouched. Not because the person avoided them deliberately, but because the brain kept finding reasons to return to what felt easier. Knowing this pattern exists is the first step to designing around it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const EXM_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you get back to it after a week off, they see that too, and it's no big deal. They just get to see you keep turning up to the revision, and cheer you on." },
  { t: "They don't quiz you", b: "They don't have to nag you or test 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: "They keep the exam real", b: "When the exam still feels far away and unreal, one person who knows you're working towards it helps keep it real." },
];

const ExmWhyLoopsWorks = () => (
  <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>Revision is a lonely stretch. The exam is weeks away and abstract, nobody's checking whether you studied today, and it's easy to let a day go, then a week, until the panic arrives all at once.</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, a coursemate, whoever it is. When you close a loop, they see it. When you get back to it after a week off, 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">
        {EXM_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 EXM_STEPS = [
  { t: "Tell Loops what you're preparing for", b: "Name your exam, your subject, your timeline. Plain language. No categories or complex setup. Loops works alongside whatever notes and materials you already have." },
  { 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 study group sitting the same exam." },
  { t: "Get one study action today", b: "Each day, Loops gives you one specific, low-friction revision task. Sized to be completable, targeted to move the needle, and chosen so you're not spending the study time deciding what to study. Close the loop, and your person sees it." },
  { t: "Get coached through the hard days", b: "Can't face it today? Fell off for a week? Loops gives you a calm way back in that doesn't require restarting from scratch or catching up everything at once." },
  { t: "Walk into the exam having actually prepared", b: "Not perfectly. Not with a pristine revision log. But with something real done on enough of the days between now and the exam." },
];

const ExmHowItWorks = () => (
  <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 study action. Every day. Before the panic.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a revision timetable. You need something that tells you what to do today, specifically, right now.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {EXM_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 ready to start. One action today is enough.
      </p>
    </Container>
  </Section>
);

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

const EXM_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "Your exam and its date, in your own words. Here the finish line is literal: it's real, and it's on the calendar. Loops keeps it visible through the weeks when the exam still feels abstract." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, sized to be completable and chosen to move the needle, including the topics you'd rather avoid. Some run every day, some a few times a week: one past paper question, twenty minutes on your weakest topic, redo the thing you got wrong. A few connect to the exam. 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 turned up to the revision. Support, without the nagging or the quizzing. On a Crew plan it can be more than one: your people, which suits a study group." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: a week you kept turning up, the weak topic finally faced, the exam done. 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 your exam and where your revision tends to stall, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when you sat down and lost the hour, or fell off for a week, with a calm way back in." },
];

const ExmWhatsInside = () => (
  <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">
        {EXM_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 EXM_TESTIMONIALS = [
  { quote: "I'd failed the same module twice. I knew the content. I just couldn't get it out in the exam the way I could in normal conversation. Loops didn't change the exam. It changed the two months before it.", who: "Nursing student", meta: "Diagnosed with ADHD at 22" },
  { quote: "I'd built revision timetables for every exam I'd ever sat. I'd never followed one. Loops was the first thing that gave me something to do today rather than a plan to follow tomorrow.", who: "Law student", meta: "Using Loops for 8 weeks" },
  { quote: "I passed. Not brilliantly. But I passed. And for the first time, the result actually felt like it reflected what I knew.", who: "Accountancy trainee, Birmingham", meta: null },
];

const ExmSocialProof = () => (
  <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">
        {EXM_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 EXM_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the revision.", 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 ExmPricing = () => (
  <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">
        {EXM_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. accommodation) ---------------- */

const EXM_OBJECTIONS = [
  { q: "\u201CI work better under pressure. I'll just revise closer to the exam.\u201D", a: "That's partly true. But last-minute cramming without structure produces exactly the error patterns ADHD creates in exam rooms. Pressure helps with starting. It doesn't help with the self-monitoring and working memory recall that exams also require. Loops builds the structure before the pressure arrives." },
  { 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 already have extra time as an accommodation.\u201D", a: "Extra time helps. Having a strategy for what to do with it helps more. Research shows ADHD students often use extra time to second-guess rather than to review. Loops helps you build the exam habits that make accommodations work as they're intended to." },
  { 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: "\u201CThe exam is soon. Is there still time?\u201D", a: "Start now, not when conditions are better. Even two weeks of daily, targeted revision is more useful than a plan that doesn't happen. Loops works with whatever time you have, not the time you wish you had." },
];

const ExmObjections = () => (
  <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">
        {EXM_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 EXM_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 exam preparation specifically, it helps with starting revision, staying consistent through the study period, and coaching through the moments when the pattern usually breaks down." },
  { 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 turned up to the revision. They don't quiz you or nag you. They just get to see you keep turning up, and cheer you on. 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, which suits a study group." },
  { q: "How does Loops help with exam preparation if you have ADHD?", a: "It removes the decision of what to study today by giving you one specific revision action each day. It also coaches you through the days when starting feels impossible, so a difficult week doesn't write off the whole study period." },
  { q: "Why do people with ADHD struggle in exams even when they know the material?", a: "ADHD impairs working memory, self-monitoring, and recall under pressure. It also makes it harder to plan revision effectively and to persist through the less interesting parts of a subject. The result is often a gap between what someone genuinely understands and what they can demonstrate in an exam environment." },
  { 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 replace a tutor or study group?", a: "No. Loops gives you daily structure and coaching. If you have access to a tutor, study group, or academic support service, those are worth using alongside it. Loops is designed to complement other support, not replace it." },
  { q: "What if my exam anxiety is significant?", a: "It's worth speaking to your GP or your institution's student support service. Anxiety and ADHD often overlap, and professional support can help in ways Loops can't. Loops is designed to reduce the pressure of the study period, but it's not a treatment for anxiety." },
  { q: "What if I miss several days of revision?", a: "That's built into the design. Loops doesn't treat a missed week as a reason to restart everything. The next daily action is still there, still specific, and still designed to be the easiest possible step back in." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

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

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

const ExmFinalCTA = () => (
  <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>A result that reflects what you know</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]">
            Walk out feeling like the result reflects what you know.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a perfect score. Just a fair one. The kind that comes from preparation that actually happened, and, if you want, one person who saw you put the work in.
          </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 EXM_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87" },
  { t: "ADHD and Achievement: A Meta-Analysis of the Child, Adolescent and Adult Literatures — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/17274547/" },
  { t: "Organizational-Skills Interventions in the Treatment of ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/18928347/" },
  { t: "The Relationships Among ADHD, Self-Esteem, and Test Anxiety — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/22930792/" },
  { t: "I Have Never, Ever, Studied Properly for an Exam — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/i92h42/i_have_never_ever_studied_properly_for_an_exam/" },
  { t: "A Systematic Review of Circadian Function, Chronotype and Sleep in ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/28064405/" },
  { t: "I'm Still a Failure — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1hragr0/im_still_a_failure/" },
  { t: "Daily Activities and Self-Esteem Among University Students With ADHD — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2025.1622354/full" },
  { t: "Validity of the Executive Function Theory of Attention-Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/15950006/" },
  { t: "Cognitive Neuroscience of Attention Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/29651240/" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36608036/" },
  { t: "University Students With Attention Deficit Hyperactivity Disorder (ADHD): A Consensus Statement From the UK Adult ADHD Network (UKAAN) — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/35459116/" },
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management (Resource PDF) — NICE", u: "https://www.nice.org.uk/guidance/ng87/resources/attention-deficit-hyperactivity-disorder-diagnosis-and-management-pdf-1837699732933" },
  { t: "Disabled Students Engaged With Support Services in Higher Education in Ireland 2023/24 — AHEAD", u: "https://www.ahead.ie/userfiles/files/shop/free/AHEAD%20Summary%20Report%2023-24_digital.pdf" },
  { t: "ADHD Planner — What Works? What Doesn't? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1h13wls/adhd_planner_what_works_what_doesnt/" },
  { t: "A Randomized Controlled Trial Examining CBT for College Students With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33507774/" },
  { t: "A Systematic Review of Distributed Practice and Retrieval Practice — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11078833/" },
  { t: "Voices in the Community — AHEAD", u: "https://www.ahead.ie/userfiles/files/shop/free/Voices%20in%20the%20community%20FINAL.pdf" },
  { t: "College Students With ADHD: A Selective Review of Challenges and Interventions — MDPI", u: "https://www.mdpi.com/2673-7272/4/3/41" },
  { t: "Exploring Female Students' Experiences of ADHD and Its Impact on Their Education — Sage Journals", u: "https://journals.sagepub.com/doi/abs/10.1177/10870547231168432" },
];

const ExmSources = () => (
  <Section id="sources" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on ADHD clinical guidelines, research into executive function, test anxiety and exam accommodations, and real accounts from people who know the material and still can't show it in the exam room. Here's where it comes from.
        </p>
      </div>

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

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

function ExmApp() {
  return (
    <main id="main">
      <ExmNav />
      <ExmHero />
      <ExmWhatLoopsDoes />
      <ExmRecognition />
      <ExmWhyItHappens />
      <ExmReframe />
      <ExmWhyLoopsWorks />
      <ExmHowItWorks />
      <ExmWhatsInside />
      <ExmSocialProof />
      <LoopsPricing bg="bg-soft" />
      <ExmObjections />
      <ExmFAQ />
      <ExmFinalCTA />
      <ExmSources />
      <Footer />
    </main>
  );
}

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