/* Loops — "Train for Something With ADHD" use-case page
   Wellbeing guardrails: no performance/finish-time promises, no injury or medication
   advice, Loops positioned alongside a training plan, overtraining acknowledged not glorified. */

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

const TRN_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 TrnNav = () => {
  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">
            {TRN_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">
              {TRN_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 TRN_HERO_BLOCKS = [
  {
    title: "Keep the next session visible",
    body: "One clear prompt so today's training doesn't get swallowed by the day.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
  {
    title: "Restart without shame",
    body: "Missed session is data point. Loops gives you next step, not a slate to rebuild.",
    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>),
  },
  {
    title: "Make the start line real",
    body: "A system built for imperfect training blocks, not perfect ones.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 9.176 7.14 8.96 6.5 8.96c-.696 0-1.667.193-2.492.417A18 18 0 0 0 3 9.6v5.9a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.847 0 1.548.28 2.158.525l.028.01C9.32.782 9.86.998 10.5.998c.696 0 1.667-.193 2.492-.417A18 18 0 0 0 14 .3l.008-.003.002-.001h.001"/></svg>),
  },
];

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

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[56px] fade-in-up delay-1">
          You signed up. You meant it. So why does the training keep 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">
          It's not a motivation problem. For people with ADHD, training plans fail for structural reasons that willpower was going to fix.
        </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 keeps the next session visible, takes the shame out of a missed one, and, if you want it, <span className="text-ink font-medium">gives you one person who's in it with you all the way to the start line.</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">
        {TRN_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 TrnWhatLoopsDoes = () => (
  <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 survives the weeks you didn't.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most training plans are built for someone with reliable self-regulation, consistent energy, and a linear relationship with motivation. That's not most people with ADHD.
          </p>
          <p>
            Loops gives you specific, low-friction actions each day. It keeps the goal visible when it feels abstract, helps you restart after a bad week, and coaches you through the moments when the plan usually breaks down.
          </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 TRN_RECOGNITION = [
  "You spent hours building the perfect training plan. Then you missed Tuesday, and somehow that was the end of it.",
  "You know the goal matters to you. But by Wednesday, race day feels too far away to feel real.",
  "The easy sessions are the hardest. A recovery run at conversational pace feels almost impossible to complete without surging.",
  "One missed session becomes two. Two becomes a shame spiral. Before you know it, you're wondering whether to pull out.",
  "You had a brilliant first three weeks. Then something came up, the plan broke, and starting again from scratch felt unbearable.",
  "You know training helps your ADHD. You know you feel better when you do it. That doesn't make it any easier to stay consistent.",
];

const TrnRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          You're not alone in this.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often when it comes to training for an event.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {TRN_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 means you're not a runner, a cyclist, or an athlete. It means you need a system built for how your brain actually handles long goals.
        </p>
      </div>

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

/* ---------------- Why it keeps happening (6 breakdown points) ---------------- */

const TRN_PATTERNS = [
  { title: "Goal-to-plan collapse", body: "Race day is compelling. Tuesday's tempo run is not. ADHD brains discount future rewards steeply, which means the emotional pull of the finish line fades fast once daily training starts." },
  { title: "Session initiation", body: "Knowing you have a run at 6pm and actually starting it are two different problems. Without a prompt that reaches you at the exact moment of action, good intentions get negotiated away on the sofa." },
  { title: "Boredom in low-stimulation work", body: "Easy runs are hard. Not physically. Mentally. Long, steady efforts at a controlled pace ask the brain to stay engaged with low reward for a sustained period, which is exactly what ADHD makes unreliable." },
  { title: "All-or-nothing relapse", body: "One missed session shouldn't end the block. For many people with ADHD, it does. Emotional dysregulation turns a skipped run into evidence of failure, and shame makes the next session harder to start, not easier." },
  { title: "Impulsive overreach", body: "The training problem isn't always avoidance. Sometimes it's going too hard, too often. Boredom on easy days, compensatory surges after missed sessions, and obsessive plan-building can all destabilise a training block just as reliably as avoidance." },
  { title: "Energy and timing mismatch", body: "A training plan designed for 6am doesn't work for a brain that isn't ready until noon. Sleep disturbance and delayed body clocks are common in ADHD and can quietly undermine morning session consistency throughout an entire training block." },
];

const TrnWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not a commitment problem. It's a structure problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Training blocks are hard for ADHD brains for specific, well-documented reasons. None of them are about how much you want it.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {TRN_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 built around all six of these failure points, not just the most obvious one.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Overreach reframe (unique to this page) ---------------- */

const TrnOverreach = () => (
  <Section id="overreach" className="bg-soft">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing before you try again</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          Not every ADHD training failure looks like giving up.
        </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 advice for ADHD and exercise assumes the problem is avoidance: not starting, not showing up, not trying. But a significant number of people with ADHD fail their training blocks in the opposite direction.
        </p>
        <p className="text-ink font-medium">
          They turn easy runs into efforts. They build elaborate plans and then can't sustain the ordinary version. They compensate for a missed session with something so ambitious it breaks the next week too. If you recognise that pattern, it's worth naming: the problem wasn't a lack of commitment. It was a system that couldn't protect you from your own enthusiasm on the wrong days.
        </p>
      </div>
    </Container>
  </Section>
);

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

const TRN_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you get back to it after a missed week, they see that too, and it's no big deal. They just get to watch you keep showing up, all the way to the start line." },
  { t: "They don't manage you", b: "They don't nag or remind you. They don't check your splits 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: "They keep the finish real", b: "When race day still feels far away, one person who's in it with you is what keeps it feeling real." },
];

const TrnWhyLoopsWorks = () => (
  <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>A training block is weeks of ordinary sessions for a day that still feels unreal. When race day is abstract and Tuesday's run is not, it's easy to let a session slide, and easy to let one slide become the end of the block.</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 you're training alongside, whoever it is. When you close a loop, they see it. When you get back to it after a missed week, 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">
        {TRN_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 TRN_STEPS = [
  { t: "Tell Loops what you're training for", b: "Name your event and your timeline in plain language. No complicated onboarding. No rebuilding a plan you've already got." },
  { 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 training for the same event." },
  { t: "Get small daily actions", b: "Each day, Loops gives you specific, low-friction prompts. It fits around your training plan and shows up when initiation is hardest. Close the loop, and your person sees it." },
  { t: "Get coaching through the hard moments", b: "Missed a session? Hit a wall mid-block? Loops gives you a clear, practical next step, not a reset that makes you feel further behind." },
  { t: "Arrive at the start line", b: "A training block with Loops isn't about a perfect log. It's about staying in it long enough to get there." },
];

const TrnHowItWorks = () => (
  <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 race sign-up to start line.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to rebuild your training from scratch. Loops works alongside whatever you're training for.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {TRN_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 clean week to start. You just need the next session.
      </p>
    </Container>
  </Section>
);

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

const TRN_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "Your event and your date, in your own words. Here the finish line is literal: it's real, and it's on the calendar. Loops keeps it visible for the weeks when race day still feels too far away to feel real." },
  { 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: start today's session, keep the easy run easy, lay your kit out the night before. A few connect to your training. Others are just life, like taking your meds before breakfast. A missed session is just a data point. Loops gives you the next step, not a clean slate to rebuild." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the times you get back on after a missed week. Support, without the nagging. On a Crew plan it can be more than one: your people, which suits a group training together." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: the first week you got back on after a bad one, the longest session done, the start line reached. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows your event and where your blocks tend to break, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 6pm, when the run is negotiable and the sofa is winning." },
];

const TrnWhatsInside = () => (
  <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">
        {TRN_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 TRN_TESTIMONIALS = [
  { quote: "I'd abandoned four training plans before I finished a race. The difference with Loops wasn't the training itself. It was having something that still knew what the next step was after I'd had a terrible week.", who: "Amateur triathlete", meta: "Diagnosed with ADHD at 31" },
  { quote: "I kept turning my easy runs into hard efforts and then wondering why I was exhausted. Loops helped me actually do the boring sessions. That sounds small but it completely changed how the block went.", who: "Recreational cyclist", meta: "Using Loops for 8 weeks" },
  { quote: "I'd always assumed I just wasn't the type of person who finishes things. I've now done two half marathons. The training wasn't perfect either time. But I got to the start line.", who: "Teacher and runner, London", meta: null },
];

const TrnSocialProof = () => (
  <Section id="stories" className="bg-soft">
    <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">
        {TRN_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 TRN_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the training.", 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 TrnPricing = () => (
  <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">
        {TRN_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>
);

/* ---------------- Objections (5) ---------------- */

const TRN_OBJECTIONS = [
  { q: "\u201CI've tried training plans before and always quit.\u201D", a: "That's the most common thing people say before they try Loops. Standard training plans don't account for the specific ways ADHD disrupts consistency. Loops is built for the pattern you're describing, not against it." },
  { 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'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: "\u201CI don't want another app telling me what to do.\u201D", a: "Loops gives you one thing. Not a dashboard. Not a streak to protect. One daily action, delivered when you need it. You decide whether to act." },
  { q: "\u201CWhat if my event is only a few weeks away?\u201D", a: "Start now, not when conditions are perfect. Loops works with whatever block you have left. Even four weeks of better-supported training is more than four weeks of managing it alone." },
];

const TrnObjections = () => (
  <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">
        {TRN_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 TRN_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 training specifically, it helps with session initiation, consistency through a block, and recovery after missed sessions." },
  { 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 get back on after a missed week, they see it. They don't manage you or nag you. They just get to watch you keep showing up, all the way to the start line. 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 training if you have ADHD?", a: "It gives you one low-friction prompt each day rather than leaving you to manage the plan alone. It also coaches you through the moments when training usually breaks down: the missed session, the bored easy run, the week where everything fell apart." },
  { q: "Why do people with ADHD struggle to follow training plans?", a: "The barriers are structural. Distant race-day rewards are hard for ADHD brains to use as day-to-day motivation. Session initiation is an executive function challenge. Boredom in low-stimulation training is a real problem. And one missed session can trigger shame that ends the whole block. None of this is about how much someone wants it." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "Can Loops replace a training plan or coach?", a: "No. Loops works alongside your training plan, not instead of it. It helps with the consistency and coaching layer, not the physiological design of your programme. A coach or structured plan is still a good idea if you have access to one." },
  { q: "What if I miss several sessions in a row?", a: "That's built into the design. Loops doesn't treat a missed week as a failure state. The next daily action is still there, and it's still designed to be the smallest useful step." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "What kind of events can I use Loops to train for?", a: "Loops is designed around any goal with a timeline: running, cycling, swimming, triathlon, team events, gym-based targets. If you've signed up for something and need help staying in the training block, Loops is built for that." },
];

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

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

const TrnFinalCTA = () => (
  <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>Get to the start line</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 start line is worth getting to.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need a perfect training block. You need one that doesn't fall apart when things go wrong, and it helps to have one person who's in it with you.
          </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 TRN_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Physical exercise as add-on treatment in adults with ADHD, the START study: a randomised controlled trial — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2025.1690216/full" },
  { t: "A Systematic Review and Meta-Analysis — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/38145491/" },
  { t: "Marathon and ADHD — r/Marathon_Training", u: "https://www.reddit.com/r/Marathon_Training/comments/194rhq5/marathon_and_adhd/" },
  { t: "Evidence of emotion dysregulation as a core symptom of adult ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36608036/" },
  { t: "Association of symptoms of attention-deficit/hyperactivity disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/25214027/" },
  { t: "Sleep disorders in patients with ADHD: impact and management — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/30588139/" },
  { t: "How Do You Stay Consistent at the Gym with ADHD? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1j5ca6y/how_do_you_stay_consistent_at_the_gym_with_adhd/" },
  { t: "Those of you who workout regularly, how do you manage to stay consistent? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1f32ckp/those_of_you_who_workout_regularly_how_do_you/" },
  { t: "Attitudes and preferences toward exercise interventions in adults with ADHD — King's College London", u: "https://kclpure.kcl.ac.uk/portal/en/publications/attitudes-and-preferences-toward-exercise-interventions-in-adults/" },
  { t: "ADHD, Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "7 Tips for Staying Consistent at the Gym with ADHD, According to an ADHD Psychologist — Verywell Mind", u: "https://www.verywellmind.com/working-out-with-adhd-11700238" },
  { t: "Tips for a newbie with ADHD? — r/XXRunning", u: "https://www.reddit.com/r/XXRunning/comments/1jhexqm/tips_for_a_newbie_with_adhd/" },
  { t: "People with ADHD, how do you remain consistent? — r/bodyweightfitness", u: "https://www.reddit.com/r/bodyweightfitness/comments/1puli17/people_with_adhd_how_do_you_remain_consistent/" },
  { t: "Behavior Change Techniques Improve Adherence to Physical Activity — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10024875/" },
  { t: "Exercise Dependency and Overuse Injuries in Attention-Deficit/Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/38412245/" },
  { t: "Effects of Physical Activity, Exercise and Sport on Executive Function in Adults Diagnosed with ADHD: A Systematic Review — MDPI", u: "https://www.mdpi.com/2673-5318/6/4/120" },
  { t: "Time Perception in Adult ADHD: Findings from a Decade — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36833791/" },
];

const TrnSources = () => (
  <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 adherence, executive function, and real accounts from people training for races and events. Here's where it comes from.
        </p>
      </div>

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

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

function TrnApp() {
  return (
    <main id="main">
      <TrnNav />
      <TrnHero />
      <TrnWhatLoopsDoes />
      <TrnRecognition />
      <TrnWhyItHappens />
      <TrnOverreach />
      <TrnWhyLoopsWorks />
      <TrnHowItWorks />
      <TrnWhatsInside />
      <TrnSocialProof />
      <LoopsPricing bg="bg-base" />
      <TrnObjections />
      <TrnFAQ />
      <TrnFinalCTA />
      <TrnSources />
      <Footer />
    </main>
  );
}

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