/* Loops — "Make Learning a Habit With ADHD" use-case page
   Self-worth/identity guardrails: dopamine-economy framing removes blame from sentence one,
   every mechanism structural, Card 6 identity doubt rebutted, overplanning named as design
   flaw, winning modest (still going next month). Unique section: habit stacking over memory. */

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

const HAB_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 HabNav = () => {
  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">
            {HAB_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">
              {HAB_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 HAB_HERO_BLOCKS = [
  {
    title: "Small wins that count now",
    body: "Each daily action produces something the brain can feel, not just log.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935"/></svg>),
  },
  {
    title: "Attached to what already happens",
    body: "Loops fits into your day rather than requiring a new slot for it.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/></svg>),
  },
  {
    title: "Restarts without shame",
    body: "A missed day is a reset point. The habit doesn't end when it's not done.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg>),
  },
];

const HabHero = () => (
  <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.06] text-[30px] sm:text-[40px] lg:text-[48px] fade-in-up delay-1">
          It's not that you're not interested. It's that your brain doesn't make routine learning feel worth repeating.
        </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">
          ADHD brains run on a dopamine economy. Habits form when an activity gets tagged as rewarding. Routine learning, by design, rarely does. That's not a willpower problem. It's a structural one.
        </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 learning actions a day, attached to something you already do, and, if you want it, <span className="text-ink font-medium">one person whose attention adds a little of the reward back.</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">
        {HAB_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 HabWhatLoopsDoes = () => (
  <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 that works with the dopamine economy, not against it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most learning habit advice assumes the brain will start tagging the habit as automatic after enough repetition. For ADHD brains, that tagging mechanism works differently. Repetition alone doesn't make learning feel worth doing. Reward does.
          </p>
          <p>
            Loops gives you specific learning actions each day, sized to produce a small win your brain can feel right now. It keeps the habit anchored to something that already exists in your day, so it doesn't depend on memory or motivation to show up. And when you miss a day, it gives you a calm step back in rather than a broken streak to mourn.
          </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 HAB_RECOGNITION = [
  "You've started more learning habits than you can count. They always start well. They rarely make it past two weeks.",
  "You built a detailed study plan. Maybe a Notion board. You used it for four days and then it became another thing you hadn't done.",
  "You're genuinely interested in the subject. You just can't make yourself sit with it regularly when there's nothing urgent about it.",
  "You had a great session, then a crash. Then guilt about the crash made starting again feel harder, not easier.",
  "You've spent money on courses you haven't finished. The spending wasn't the problem. The finishing was.",
  "You've told yourself it's fine, you'll find the right system eventually. But you're starting to wonder if the system is the problem or whether you are.",
];

const HabRecognition = () => (
  <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 trying to make learning a regular part of their life.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {HAB_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">
          It's the system. ADHD brains need a different kind of structure to make learning stick. Not more of the same.
        </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 HAB_PATTERNS = [
  { title: "The dopamine economy problem", body: "Studying feels as hard on day 30 as on day 1 because the ADHD brain never tags it as worth repeating. Habit formation normally works by the brain marking a repeated activity as rewarding. ADHD dopamine dysregulation means routine learning doesn't produce that marking reliably, so every session requires the same effort to start as the first one did." },
  { title: "Boredom as a dead end", body: "If the topic isn't immediately compelling, the ADHD brain treats it as not worth doing, regardless of how much you actually want to learn it. ADHD is interest-driven, not importance-driven. The value of learning something for the future doesn't compete with the immediate pull of something more stimulating, even when you genuinely care about the subject." },
  { title: "The overplanning trap", body: "The beautiful study plan becomes another abandoned project. ADHD executive dysfunction makes elaborate systems backfire: building the plan satisfies the urge to act, and then the plan itself becomes a to-do item that never gets done. Simpler, more visible, more immediate cues consistently outperform complex digital systems." },
  { title: "The binge-crash cycle", body: "An intense hyperfocus session doesn't build a habit. It often prevents one. Binge-studying followed by burnout and then a week of avoidance is a common ADHD pattern. A stable learning habit needs to tolerate low-intensity days, which the crash-and-restart cycle never allows." },
  { title: "The shame-restart barrier", body: "Every failed habit attempt adds emotional weight to the next one. When guilt and self-blame follow each lapse, restarting becomes harder rather than easier. Each new attempt begins with the accumulated evidence of previous failures sitting behind it, making the start feel heavier than it should." },
];

const HabWhyItHappens = () => (
  <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 motivation. It's what ADHD does to the way habits form.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Learning habits break down for ADHD brains through a specific set of mechanisms. Understanding them matters because they need different solutions than standard habit advice provides.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {HAB_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 work with all five of these failure points rather than assume they don't apply to you.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: habit stacking over memory ---------------- */

const HabReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>The insight that changes what building a learning habit actually looks like</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The habit doesn't need its own slot in your day. It needs a trigger that already exists.
        </h2>
      </div>
      <div className="mx-auto mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          Most learning advice focuses on carving out dedicated time: block off 7-8am, protect it, treat it as non-negotiable. For ADHD brains, that approach competes with everything else for a slot and then depends on memory to fill it. Both of those are losing bets.
        </p>
        <p className="text-ink font-medium">
          What works better is anchoring the learning to something that already happens: after the morning coffee, during the commute, while dinner cooks. The new habit parasitises the existing one rather than fighting for its own place. This isn't a workaround. It's how ADHD habit formation actually works. The trigger already fires. The habit just needs to attach to it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const HAB_WITNESS_CARDS = [
  { t: "Being seen is its own reward", b: "When you close a loop, they see it, and being seen is a small, immediate reward, the kind routine learning so rarely gives you. When you come back after a miss, they see that too, and it's no big deal." },
  { t: "They don't quiz 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: "A little of the reward back", b: "On a habit the brain doesn't reward on its own, one person paying attention adds a little of the reward back." },
];

const HabWhyLoopsWorks = () => (
  <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>The trouble with a private learning habit is that the only person who ever knows whether you did it is you. When there's no reward in the task and no one watching either, there's very little holding it in place.</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, whoever it is. When you close a loop, they see it, and being seen is its own small reward, the kind routine learning so rarely gives you. When you come back after a miss, 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">
        {HAB_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 HAB_STEPS = [
  { t: "Tell Loops what you're learning and when", b: "Name the subject and one moment in your day that already happens reliably. After coffee. During lunch. Before bed. Loops anchors your daily learning action to that moment." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress, so being seen adds a little of the reward the habit doesn't give on its own. You decide what they can see, and you can change it any time. This is the step most people skip with other apps, and the one that makes Loops work. On a Crew plan you can choose more than one." },
  { t: "Get specific actions each day", b: "Each day, Loops gives you small, concrete learning tasks. Sized to produce a genuine sense of progress right now, not just logged for future you to feel good about. Close the loop, and your person sees it." },
  { t: "Get coached back in after a miss", b: "Missed a day? A week? Loops gives you a calm, specific step back in. No accounting for the gap. No requirement to catch up. Just the next smallest action." },
  { t: "Build something that lasts", b: "A habit that resets rather than ends, attached to a trigger that already fires, producing a small win each day. That's what a sustainable ADHD learning habit actually looks like." },
];

const HabHowItWorks = () => (
  <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. Attached to your day. Today.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new routine. You need a small action that connects to one you already have.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {HAB_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">
        The habit doesn't have to be impressive to be real. It just has to keep happening.
      </p>
    </Container>
  </Section>
);

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

const HAB_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The thing you want to learn, described your way, and the moment in your day it can attach to. Not a big goal. Just what you're building the habit around, so it stays real." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, anchored to something that already happens in your day: after your morning coffee, on the commute, while dinner cooks. Small enough to produce a win you can feel now, not just log. Some run every day, some a few times a week. A few connect to what you're learning. Others are just life, like taking your meds before breakfast. A missed day is a reset point, not a broken streak to mourn. The next small action is still there whenever you come back." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the days you turned up. Being seen is its own small reward, the kind routine learning rarely gives. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Because your brain doesn't hand out the reward on its own, you promise yourself one for the moments that matter: a fortnight of turning up, the habit that survived a bad week, still going next month. 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 the habit tends to crash, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there after a binge-and-crash or a week away, with a calm step back in and the next small action." },
];

const HabWhatsInside = () => (
  <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">
        {HAB_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 HAB_TESTIMONIALS = [
  { quote: "I'd bought three language courses and finished none. Not because I stopped caring but because nothing made the daily practice feel like it mattered right now. Loops fixed that. Small action, immediate win. Something my brain could actually use.", who: "IT consultant", meta: "Self-identified ADHD" },
  { quote: "I stopped making study plans the moment I realised they were the problem. Loops gave me one thing to do after my morning coffee. That's it. Four months later I'm still doing it.", who: "Graphic designer", meta: "Diagnosed with ADHD at 34" },
  { quote: "Nineteen missed days. Still going. That's the first time I've ever been able to say that about a learning habit.", who: "Teacher, Leeds", meta: null },
];

const HabSocialProof = () => (
  <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">
        {HAB_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 HAB_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the habit.", 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 HabPricing = () => (
  <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">
        {HAB_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. abandonment) ---------------- */

const HAB_OBJECTIONS = [
  { q: "\u201CI've made elaborate study plans and they always fall apart.\u201D", a: "That's the overplanning trap, and it's a design flaw, not a personal one. ADHD executive dysfunction means complex systems become their own abandoned tasks. Loops is deliberately simple: one action, attached to something that already happens, with no system to maintain." },
  { 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, partly because being seen adds a little of the reward the habit doesn't give on its own. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI need to find the right system before I can commit to anything.\u201D", a: "There isn't a right system. There's only a small enough one. The research on ADHD and learning habits is consistent: the more elaborate the setup, the faster the abandonment. Loops is designed to be the opposite of elaborate." },
  { 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 I just stop checking Loops the way I stop checking everything else?\u201D", a: "Loops is designed for that specific risk. It attaches to something you already do rather than waiting to be remembered. You don't have to remember to use it. It shows up when the trigger does." },
];

const HabObjections = () => (
  <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">
        {HAB_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 HAB_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 habits specifically, it keeps the practice going by attaching small daily actions to existing triggers and treating missed days as reset points rather than failures." },
  { 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. Being seen is its own small reward, the kind routine learning rarely gives, which is part of why it helps. They don't quiz you or nag you. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with building a learning habit if you have ADHD?", a: "It removes two of the biggest barriers: the need to remember and the need to motivate. Each daily action is anchored to something that already happens in your day, and sized to produce a small win right now rather than a logged step toward a future goal." },
  { q: "Why do ADHD brains struggle to make learning a habit?", a: "ADHD dopamine dysregulation means routine learning doesn't get tagged as worth repeating the way other habits do. This means every session requires the same effort to start as the first one did. Without something that produces an immediate reward, the habit doesn't stick regardless of how much you want it to." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "What is habit stacking and how does Loops use it?", a: "Habit stacking means attaching a new habit to an existing trigger rather than carving out a dedicated time slot. Loops asks you to name a moment that already happens in your day, then anchors your daily learning action to that moment. The trigger fires and the habit goes with it." },
  { q: "What if I miss several days?", a: "A missed day is a reset point. Loops doesn't treat it as a failure state or require catch-up. The next daily action is still there, still small, still attached to the same trigger." },
  { q: "How long before the habit feels established?", a: "Most people notice a shift within three to four weeks. Not a sense of the habit being automatic, but a sense of it being part of the day. A habit that feels genuinely durable usually takes longer, and Loops is designed to make that achievable rather than aspirational." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

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

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

const HabFinalCTA = () => (
  <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>Still going</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]">
            Still going next month. That's all.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not every day ticked off. Not a perfect record. Just the learning still happening, a habit that didn't collapse when the first hard week arrived, and, if you want, one person still there, still glad you're at it.
          </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 HAB_SOURCES = [
  { t: "Executive Function Skills — CHADD", u: "https://chadd.org/about-adhd/executive-function-skills/" },
  { t: "How Habits Are Formed: Modelling Habit Formation in the Real World — Emotional First Aid Academy", u: "https://emotionalfirstaidacademy.com/wp-content/uploads/2023/10/How-habits-are-formed.pdf" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "The Experiences of Adults With ADHD in Interpersonal Relationships and Online Communities: A Qualitative Study — ScienceDirect", u: "https://www.sciencedirect.com/science/article/pii/S2667321523000070" },
  { t: "How Do You Make Studying a Habit Instead of a One-Time Thing? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1qdzcus/how_do_you_make_studying_a_habit_instead_of_a/" },
  { t: "Delay Discounting in Attention-Deficit/Hyperactivity Disorder: A Meta-Analysis — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5049699/" },
  { t: "Time Perception in Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/26361052/" },
  { t: "Emotion Dysregulation in Adults With ADHD — Scientific Reports", u: "https://www.nature.com/articles/s41598-019-42018-y" },
  { t: "Experiences of Criticism in Adults With ADHD: A Qualitative Study — Europe PMC", u: "https://europepmc.org/article/pmc/pmc8856522" },
  { t: "Self-Compassion and Perceived Criticism in Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10400449/" },
  { t: "Perfectionism and All-or-Nothing Thinking in Adult ADHD — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/10870547241306554" },
  { t: "How Do You Study? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/rlllkf/how_do_you_study/" },
  { t: "What Actually Helped You Build a Consistent Habit? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1t0tcab/what_actually_helped_you_build_a_consistent/" },
  { t: "Proposing Body Doubling as a Continuum of Space/Time Co-Presence — leyabreanna.com", u: "https://leyabreanna.com/papers/body_doubling.pdf" },
  { t: "Taking Charge of Adult ADHD — Russell A. Barkley", u: "https://www.ibs.it/taking-charge-of-adult-adhd-libro-inglese-russell-a-barkley/e/9781462546855" },
  { t: "Executive Function Coaching for College Students With ADHD — ScienceDirect", u: "https://www.sciencedirect.com/science/article/abs/pii/S1077722920301061" },
  { t: "New Study Finds That Both Stimulant and Non-Stimulant Medications Improve Cognition in ADHD — King's College London", u: "https://www.kcl.ac.uk/news/new-study-finds-that-both-stimulant-and-non-stimulant-medications-improves-cognition-in-adhd" },
  { t: "Plain English Summary of the ADHD Taskforce Report — NHS England", u: "https://www.england.nhs.uk/long-read/plain-english-summary-of-the-adhd-taskforce-report/" },
  { t: "The Fogg Behavior Model — BJ Fogg", u: "https://www.behaviormodel.org/" },
  { t: "Stuck in an All-or-Nothing Mindset With Uncompleted Projects — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1nuiczz/stuck_in_an_allornothing_mindset_with_uncompleted/" },
  { t: "Executive Functioning in Adult ADHD: A Meta-Analytic Review — VU Research Portal", u: "https://research.vu.nl/en/publications/executive-functioning-in-adult-adhd-a-meta-analytic-review/" },
  { 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" },
];

const HabSources = () => (
  <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 dopamine, habit formation and time perception, and real accounts from people who've built and abandoned more learning habits than they can count. Here's where it comes from.
        </p>
      </div>

      <ol className="mt-10 grid gap-x-8 gap-y-0 sm:grid-cols-2">
        {HAB_SOURCES.map((s, i) => (
          <li key={i} className="flex gap-3.5 border-t border-line py-3.5">
            <span aria-hidden="true" className="mt-0.5 text-[12px] font-semibold text-ink-3 tnum tabular-nums w-5 shrink-0">{String(i + 1).padStart(2, "0")}</span>
            <a href={s.u} target="_blank" rel="noopener noreferrer" className="focus-ring rounded-md text-[13.5px] leading-[1.55] text-ink-2 hover:text-brand-deep hover:underline text-pretty transition-colors">{s.t}</a>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[13px] leading-[1.6] text-ink-3 text-pretty">
        Loops is a daily coaching app, not a medical or clinical service. These sources inform how we think about ADHD and building habits; they are not an endorsement of Loops by their authors.
      </p>
    </Container>
  </Section>
);

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

function HabApp() {
  return (
    <main id="main">
      <HabNav />
      <HabHero />
      <HabWhatLoopsDoes />
      <HabRecognition />
      <HabWhyItHappens />
      <HabReframe />
      <HabWhyLoopsWorks />
      <HabHowItWorks />
      <HabWhatsInside />
      <HabSocialProof />
      <LoopsPricing bg="bg-soft" />
      <HabObjections />
      <HabFAQ />
      <HabFinalCTA />
      <HabSources />
      <Footer />
    </main>
  );
}

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