/* Loops — "Get Fit With ADHD" use-case page */

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

const FIT_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 FitNav = () => {
  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">
            {FIT_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">
              {FIT_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 HERO_BLOCKS = [
  {
    title: "Make starting easier",
    body: "One daily action so the gap between planning and going actually closes.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/></svg>),
  },
  {
    title: "Break the boom-bust cycle",
    body: "Coaching through missed days so a pause stays a pause, not the end.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/></svg>),
  },
  {
    title: "Built for the hard weeks",
    body: "A habit that survives when life gets in the way, because it always does.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793z"/></svg>),
  },
];

const FitHero = () => (
  <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">
          Starting a fitness routine isn't the problem. It's the staying consistent part that keeps falling apart.
        </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">
          If you've started and stopped more times than you can count, that's not a motivation problem. It's an ADHD problem.
        </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 makes showing up easier, takes the drama out of missing a day, and, if you want it, <span className="text-ink font-medium">gives you one person quietly cheering you on.</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">
        {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 WhatLoopsDoes = () => (
  <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]">
          Less friction before you start. Less drama when you stop.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The problem with most fitness approaches is that they're designed for people whose brains reliably convert intention into action. For ADHD brains, that gap between <span className="text-ink font-medium">"I'll go today"</span> and actually going is where everything gets lost.
          </p>
          <p>
            Loops gives you daily actions to keep your movement habit alive. It makes starting easier, keeps you going through the boring middle, and picks you back up after gaps without treating a missed week as a reason to start from scratch.
          </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 RECOGNITION = [
  "You start well. Two or three weeks in, something interrupts, and the whole thing quietly stops.",
  "The gym itself is fine. It's the getting there: the kit, the journey, the waiting, that feels disproportionately exhausting.",
  "You miss a few days and instead of just going back, you feel like you have to start completely over. So you don't go back at all.",
  "You've tried several formats: gym, running, home workouts, classes. Each one worked for a while and then stopped working.",
  "When you're exercising regularly, you feel noticeably better. But that knowledge alone isn't enough to keep you going.",
  "You don't need more information about what to do. You need something that makes you actually do it.",
];

const Recognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          You're not the only one who keeps starting over.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns that come up again and again for people with ADHD trying to build a fitness habit. If several of these feel familiar, you're in the right place.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {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 effort or desire. It's about what happens when ADHD meets a habit that requires daily self-regulation with no external structure holding it up.
        </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 PATTERNS = [
  {
    title: "The task-stack problem",
    body: "A 45-minute workout is rarely 45 minutes. In practice, it's finding the kit, the journey, the changing, the waiting, the shower, and getting back on track afterwards. For an ADHD brain, that hidden chain of steps before and after the actual session is often where the routine breaks down. The session itself is the easy part. Everything around it is where the friction lives.",
  },
  {
    title: "The delayed reward problem",
    body: "Exercise rewards are mostly slow, abstract, and invisible for weeks or months. The competing demands are immediate: the warmth of staying in, the effort of getting changed, the resistance of leaving a screen. Research consistently shows that ADHD brains discount delayed rewards more steeply than non-ADHD brains. That doesn't mean fitness goals aren't wanted. It means the brain's in-the-moment response is working against them.",
  },
  {
    title: "The boom-bust cycle",
    body: "A familiar pattern: going all in for a few weeks, then a disruption, travel, a difficult period, an illness, and somehow that break becomes permanent. The all-or-nothing thinking takes over: if the streak is broken, starting again feels like starting from zero. That cycle isn't a lack of commitment. It's a predictable response to how ADHD handles interruptions and loss of momentum.",
  },
  {
    title: "The boredom barrier",
    body: "ADHD brains are wired to seek novelty and stimulation. Repetitive exercise formats that stay exactly the same every week tend to lose their pull faster than they do for non-ADHD brains. What worked brilliantly in week two can feel almost impossible to drag yourself to by week eight. This isn't laziness. It's a mismatch between how the brain sustains engagement and what most fitness formats require.",
  },
  {
    title: "The shame spiral after stopping",
    body: "Each time the routine breaks down, a small amount of shame accumulates. The gym bag by the door. The running shoes that haven't moved. Over time, fitness can become an emotionally loaded category. Not just boring or inconvenient, but a reminder of a pattern of failure. That emotional weight makes starting again harder each time, which creates the next failure, which adds to the weight.",
  },
];

const WhyItHappens = () => (
  <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]">
          Getting fit is unusually hard to sustain with an ADHD brain.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          The evidence is clear on this: adults with ADHD commonly know what to do about fitness and genuinely want to do it. The barrier isn't knowledge or desire. It's the specific demands that exercise routines make on executive function, motivation, and emotional regulation: exactly the areas ADHD affects most.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {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">
        Every one of these patterns is predictable. <span className="font-semibold">Every one of them is something the right daily structure can make significantly easier.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Exercise as ADHD support ---------------- */

const ExerciseSupport = () => (
  <Section id="support" className="bg-soft">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          Movement doesn't just change your body. For ADHD brains, it can change your day.
        </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 fitness content talks about the long-term benefits: weight, strength, health over years. For someone with ADHD, that framing can actually make exercise harder to sustain, because the reward feels too far away to motivate action right now.
        </p>
        <p className="text-ink font-medium">
          Exercise can improve attention, mood, impulse control, and executive function. Not eventually, but on the same day, often within the same hour. For an ADHD brain, that's a completely different reason to move.
        </p>
        <p>
          A session isn't just something you do for future you. It's something that can make today more manageable. That shift in framing isn't a trick. It's what the evidence actually supports.
        </p>
      </div>
    </Container>
  </Section>
);

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

const FIT_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you come back after a gap, they see that too, and it's no big deal. They just get to watch you keep showing up, and cheer you on." },
  { t: "They don't manage you", b: "They don't nag or remind you. They don't check your workouts or tell you what to do. And they don't even need to pay. Their side is light on purpose." },
  { t: "You're always in control", b: "You choose who it is. You decide what they can see, and you can change it any time." },
  { t: "Someone quietly glad you went", b: "Someone quietly glad you went is often what gets you out the door on the day you'd otherwise stay in." },
];

const FitWhyLoopsWorks = () => (
  <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 hardest part of a fitness habit is that nobody notices if you don't go. It's just you, the kit by the door, and a quiet decision to stay in. That's a lot to hold up on your own.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, someone who moves too, whoever it is. When you close a loop, they see it. When you come back after a gap, they see that too, and it's no big deal. You decide 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">
        {FIT_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 STEPS = [
  { t: "Tell Loops what you're working towards", b: "Share a bit about what kind of movement you want to do more of and where things usually break down. No lengthy setup." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress. You decide what they can see, and you can change it any time. This is the step most people skip with other apps, and the one that makes Loops work. On a Crew plan you can choose more than one, which suits a group who move together." },
  { t: "Get small daily actions", b: "Each day, Loops shows you what's due and gives you specific, achievable things to do. Not a full programme. Not a target. Just the next right step for where you are today. Close the loop, and your person sees it." },
  { t: "Get coaching when the routine breaks", b: "Missed a week? Lost momentum? Bored of what you were doing? Loops provides practical, personalised coaching to help you get back in rather than treating a gap as a full stop." },
  { t: "Build a habit that survives real life", b: "Over time, the daily actions build into something that keeps going through the disruptions rather than collapsing under them. That's a different kind of fitness habit. It's the kind that actually lasts." },
];

const HowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Simple from day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new fitness plan. You need a system that makes showing up easier, and picks you back up when you don't.
        </p>
      </div>

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

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need a good week to start. You just need today.
      </p>
    </Container>
  </Section>
);

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

const FIT_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "Maybe a concrete one, like a 5k or a class you want to keep up. Maybe simply moving more, more consistently. With or without a finish line, whatever fits you. A goal your brain can hold on to." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose. Some run every day, some a few times a week: lay your kit out the night before, a short walk at lunch, one home workout, get to a class this week. A few connect to your goal. 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 times you come back after a gap. Support, without the nagging. On a Crew plan it can be more than one: your people, which works well for a group who move together." },
  { t: "Rewards you can feel", b: "Promise yourself something for the milestones that matter: a month of showing up, the first week you came back after a gap, the format you finally stuck with. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows what you're working towards and where your routine tends to break, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 11pm, right when you're about to talk yourself out of tomorrow." },
];

const FitWhatsInside = () => (
  <Section id="inside" className="bg-base">
    <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">
        {FIT_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 TESTIMONIALS = [
  { quote: "I had started and stopped about eight times. What changed with Loops was that stopping didn't feel like failing any more. It just felt like a pause. I came back faster each time.", who: "Graphic designer, Manchester", meta: "ADHD diagnosis at 26" },
  { quote: "The gym was never the problem. Getting to the gym was the problem. Loops helped me figure out a format that actually had less friction. I moved to home workouts and I've been consistent for four months.", who: "Software developer, Edinburgh", meta: null },
  { quote: "I needed something that treated missing a day as normal rather than a disaster. Once the shame was taken out of it, it got a lot easier to keep going.", who: "Teacher, Bristol", meta: null },
];

const SocialProof = () => (
  <Section id="stories" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>From people who recognise themselves in this</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 in good company.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {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>
);

/* ---------------- Objections (4) ---------------- */

const OBJECTIONS = [
  { q: "\u201CI have tried everything. Why would this be any different?\u201D", a: "Most fitness tools are designed for people who can reliably convert intention into action. They don't account for the specific ways ADHD disrupts that process: the task-stack friction, the boom-bust cycle, the all-or-nothing response to missing a day. Loops is designed around those patterns specifically. That's a structural difference, not just a different interface." },
  { 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: "\u201CWhat if I don't have a specific fitness goal?\u201D", a: "You don't need one. Moving more consistently is a complete goal in itself. Loops can help you build a habit around whatever kind of movement suits you, with or without a performance target at the end of it." },
  { q: "\u201CWhat if the gym just doesn't work for me?\u201D", a: "That's completely valid. The research is clear that many people with ADHD do better with formats that are more varied, more enjoyable, home-based, or social. Loops works with whatever kind of movement fits your actual life, not an idealised version of it." },
  { q: "\u201CWhat if I am not diagnosed?\u201D", a: "You don't need a diagnosis to use Loops. Many people using it are waiting for assessment, self-identifying, or finding that ADHD describes their experience without a formal label. If the patterns described on this page feel familiar, Loops is built for you." },
];

const Objections = () => (
  <Section id="objections" className="bg-soft">
    <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">
        {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 FIT_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, rewards, and progress tracking into one consistent system. For fitness, it provides the external structure and recovery support that ADHD brains need to keep showing up." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see your progress. When you close a loop or come back after a gap, they see it. They don't manage you or nag you. They just get to watch you keep showing up. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "Why do people with ADHD struggle to stick with exercise?", a: "The main barriers aren't lack of knowledge or desire. They're the executive function demands of building a routine: task initiation, managing the steps around the workout, sustaining effort when rewards feel distant, and recovering emotionally after interruptions without treating a missed week as total failure. Research consistently identifies these as the specific points where ADHD creates friction in fitness habits." },
  { q: "What is the boom-bust cycle in ADHD fitness?", a: "The boom-bust cycle is the pattern where someone goes all in on a fitness routine, sustains it for a few weeks, then hits a disruption and doesn't return. All-or-nothing thinking often reinforces it: if the streak is broken, starting again feels like starting from zero. Research and community accounts describe this as one of the most consistent ADHD fitness patterns. Designing around it, rather than hoping to avoid it, is the more realistic approach." },
  { q: "Does exercise actually help ADHD?", a: "Research supports exercise as a useful complement to other ADHD management, with adult studies showing improvements in attention, executive function, mood, and impulse control following aerobic activity. The adult evidence base is still growing, and exercise is best understood as a helpful adjunct rather than a standalone treatment. The particularly useful finding for ADHD is that some benefits appear on the same day as the session, which makes exercise a more immediately rewarding activity than most fitness content suggests." },
  { q: "What type of exercise is best for ADHD?", a: "Research doesn't firmly support one format over others. Community evidence and qualitative studies suggest that people with ADHD often do better with exercise that is enjoyable, social, varied, or cognitively engaging, rather than strictly repetitive formats. Walking, running programmes, dance, climbing, sport, yoga, and home workouts all appear in community discussions as formats that worked when gym-based routines didn't. The best exercise is the one you'll actually do consistently." },
  { q: "How does Loops help with building a fitness habit with ADHD?", a: "Loops gives you one daily action so you always know what to do next without having to plan the whole week. It provides coaching through the boom-bust cycle and the moments where gaps become permanent. And it's designed to make returning after a break feel like a continuation rather than a failure, which is the single biggest structural difference from most fitness apps." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described on this page feel familiar, Loops is built for you." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is built with UK users in mind." },
];

const FitFAQItem = ({ 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 FitFAQ = () => (
  <Section id="faq" className="bg-base">
    <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">
          {FIT_FAQS.map((f, i) => <FitFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const FitFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>Start with today</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            The goal isn't a perfect fitness routine. It's one that keeps going.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            More movement, more consistently, with less drama when life gets in the way. That's what Loops helps you build, and it helps to have one person who's glad when you show up.
          </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 FIT_SOURCES = [
  { t: "ADHD, Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "Acute Effects of Aerobic Exercise on Executive Function — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/30971959/" },
  { t: "Exploring Barriers and Facilitators to Physical Activity in Adults with ADHD: A Qualitative Investigation — Journal of Developmental and Physical Disabilities", u: "https://link.springer.com/article/10.1007/s10882-023-09908-6" },
  { t: "Motivation Deficit in ADHD is Associated with Dysfunction of the Dopamine Reward Pathway — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3010326/" },
  { t: "Time Perception in Adult ADHD: Findings from a Decade — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "Evidence of emotion dysregulation as a core symptom of adult ADHD — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" },
  { t: "ADHD as a circadian rhythm disorder: evidence and implications — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12728042/" },
  { t: "Exploring Barriers and Facilitators to Physical Activity in Adults with ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10156575/" },
  { t: "Breaking Down Barriers: Understanding Determinants of Exercise in Adults with ADHD Symptoms — Journal of Developmental and Physical Disabilities", u: "https://link.springer.com/article/10.1007/s10882-024-09994-0" },
  { t: "How do you stick to a routine of going to the gym every day? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1dht8ho/how_do_you_stick_to_a_routine_of_going_to_the_gym/" },
  { t: "I just can't stick to a regular exercise schedule — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/op6yoc/i_just_cant_stick_to_a_regular_exercise_schedule/" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Attention-deficit/hyperactivity disorder and impairment in organisation of time — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4226281/" },
  { t: "Physical activity guidelines for adults aged 19 to 64 — NHS", u: "https://www.nhs.uk/live-well/exercise/physical-activity-guidelines-for-adults-aged-19-to-64/" },
  { t: "The Effects of Different Exercise Approaches on Attention — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36829357/" },
  { t: "Psychosocial interventions for improving the physical health of young people and adults with ADHD: a scoping review — BMC Psychiatry", u: "https://link.springer.com/article/10.1186/s12888-024-06009-2" },
  { t: "The Effects of Physical Activity Interventions on the Core Symptoms of ADHD in Adults: A Systematic Review and Meta-Analysis — ResearchGate", u: "https://www.researchgate.net/publication/396780198_The_Effects_of_Physical_Activity_Interventions_on_the_Core_Symptoms_of_ADHD_in_Adults_A_Systematic_Review_and_Meta-Analysis" },
];

const FitSources = () => (
  <Section id="sources" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on research into ADHD, exercise, executive function, and real accounts from people trying to build a movement habit that sticks. Here's where it comes from.
        </p>
      </div>

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

/* ---------------- Pricing ---------------- */

const FIT_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, 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 FitPricing = () => (
  <Section id="pricing" className="bg-base">
    <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">
        {FIT_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-soft 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>
);

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

function FitApp() {
  return (
    <main id="main">
      <FitNav />
      <FitHero />
      <WhatLoopsDoes />
      <Recognition />
      <WhyItHappens />
      <ExerciseSupport />
      <FitWhyLoopsWorks />
      <HowItWorks />
      <FitWhatsInside />
      <SocialProof />
      <LoopsPricing bg="bg-base" />
      <Objections />
      <FitFAQ />
      <FitFinalCTA />
      <FitSources />
      <Footer />
    </main>
  );
}

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