/* Loops — "Managing Weight With ADHD" use-case page
   Wellbeing guardrails applied: no weight-loss promise, no dietary advice,
   eating disorder signpost (Beat) in objections, FAQ, and a footer support note. */

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

const WT_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 WtNav = () => {
  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">
            {WT_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">
              {WT_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 WT_HERO_BLOCKS = [
  {
    title: "Keep moving forward",
    body: "One daily action towards your goal, without having to plan the whole week.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07z"/></svg>),
  },
  {
    title: "Recover without shame",
    body: "Coaching through hard days so difficult moments don't undo everything.",
    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: "Stay in it for the long run",
    body: "A system that picks up where you left off, however long the gap.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.101.5.101.5-.1.5-.1v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z"/></svg>),
  },
];

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

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.06] text-[30px] sm:text-[42px] lg:text-[50px] fade-in-up delay-1">
          You want to feel better in your body. That's a completely valid thing to want. And ADHD makes it genuinely harder than it should be.
        </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">
          Not because you lack willpower or knowledge. Because the way most weight-loss approaches work doesn't fit how your brain works.
        </p>

        <p className="mx-auto mt-4 max-w-2xl text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-2">
          Loops is a daily coaching app for people with ADHD. It gives you small daily actions, coaching through the hard days, and, if you want it, <span className="text-ink font-medium">one person who gently cheers 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">
        {WT_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>
    </Container>
  </section>
);

/* ---------------- What Loops does ---------------- */

const WtWhatLoopsDoes = () => (
  <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]">
          You deserve support that actually works for the way your brain is wired.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Wanting to lose weight, feel healthier, or have a more consistent relationship with food are all completely valid goals. The difficulty isn't the goal. It's that almost every tool designed to help with it assumes a kind of consistent self-regulation that ADHD makes genuinely hard.
          </p>
          <p>
            Loops gives you small daily actions to keep moving towards what you're working on. It helps you build the habits that matter, recover without shame when things go off track, and keep going through the weeks when that feels hardest.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person who gently 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 WT_RECOGNITION = [
  "You've tried more approaches than most people. You have the knowledge. The consistency is what keeps breaking down.",
  "You eat brilliantly for a week or two, then something happens and the whole thing collapses. Starting again feels harder each time.",
  "Meal planning, calorie tracking, and food prep sound reasonable in principle. In practice, they become another thing you can't keep up with.",
  "Sometimes eating feels like the one reliable way to feel better when you're bored, stressed, or overwhelmed. Sometimes you forget to eat at all.",
  "By the time evening comes, you're so depleted that any attempt at choosing well feels impossible. The craving wins not because you don't care, but because there's nothing left.",
  "You don't feel lazy. You feel like you're constantly fighting something that other people seem to manage effortlessly.",
];

const WtRecognition = () => (
  <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 finds this harder than it should be.
        </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 most often for people with ADHD around eating and weight. ADHD affects people differently, so not all of these will apply. But if several 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">
        {WT_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 lacking commitment or not wanting it enough. It's what happens when a real goal meets a system that wasn't built for your brain.
        </p>
      </div>

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

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

const WT_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you get back up after a hard day, they see that too. They just get to see you keep showing up, and cheer you on." },
  { t: "Not monitoring, just encouragement", b: "They are not there to check what you ate or watch a number. They don't nag, they don't manage you, they don't even pay. Gentle encouragement, on the days it's hardest to give it to yourself." },
  { t: "You're always in control", b: "You choose who it is. You decide exactly what they can see, and you can change it any time. It can be as much or as little as you like." },
  { t: "Or keep it entirely private", b: "If this feels too private to share, that's completely fine. Solo works on its own, and you can keep everything to yourself. Your person is there for if and when you want it." },
];

const WtWhyLoopsWorks = () => (
  <Section id="being-seen" className="bg-base">
    <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>This is the kind of goal you can chip away at for years, quietly, with nobody knowing. And when a hard day comes, it's easy to let it go when no one would ever notice.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, whoever feels safe. When you close a loop, they see it. When you get back up after a hard day, they see that too. You decide exactly what they can see, and you can change it any time.</p>
          <p><span className="text-ink font-medium">This is the step most people skip with other apps. It's also the one that makes Loops work.</span></p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {WT_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>

    </Container>
  </Section>
);

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

const WT_PATTERNS = [
  {
    title: "The executive function burden",
    body: "Standard eating approaches ask for months of consistent planning, tracking, and cooking. Each step is an executive function task, and for many people with ADHD, the chain holds for a week or two and then breaks. Not from lack of desire, but because the cognitive load was always too high to sustain.",
  },
  {
    title: "Delayed rewards versus immediate ones",
    body: "Health changes are slow and invisible. Food is immediate, sensory, and reliable. When stressed, bored, or emotionally flat, the brain's in-the-moment response consistently wins against a goal that feels far away.",
  },
  {
    title: "Eating as regulation",
    body: "For many people with ADHD, eating isn't purely about hunger. It's about state management. Food is a fast, reliable way to manage overwhelm, boredom, or under-stimulation, which means many \u201Cdiet failures\u201D are better understood as attempts at self-regulation than as failures of discipline.",
  },
  {
    title: "The all-or-nothing cycle",
    body: "Strict rules feel manageable until they break. Then abandonment feels inevitable. The cycle of high restriction followed by giving up entirely is extremely common in ADHD and is better understood as a coping pattern than a character flaw.",
  },
  {
    title: "The timing and energy problem",
    body: "The hardest eating moments are predictable: late evenings, after skipped meals, when medication wears off. By those points, self-regulation is genuinely depleted. Not because of poor commitment, but because the system was never designed for those moments.",
  },
];

const WtWhyItHappens = () => (
  <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]">
          Repeated failure is usually a mismatch problem, not a motivation problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            You want this. What keeps going wrong isn't desire. It's that standard weight-loss approaches were built around consistent self-regulation, and ADHD makes that genuinely difficult.
          </p>
          <p>
            Research consistently finds that adults with ADHD have more previous weight-loss attempts, not fewer, and worse outcomes on standard programmes despite that greater effort. That's not a personal failing. It's a pattern.
          </p>
        </div>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {WT_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">
        Understanding where things predictably go wrong is the beginning of designing around them. <span className="font-semibold">That's what Loops helps you do.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- How it works (4 steps) ---------------- */

const WT_STEPS = [
  { t: "Tell Loops where you are", b: "Share a little about your eating patterns and what you're trying to change. No judgement. No long forms." },
  { t: "Choose your person, if you want one", b: "Pick one person you trust to see your progress. You decide exactly what they can see, and you can change it any time, so it can be as much or as little as you like. This is the step most people skip with other apps, and the one that makes Loops work. It's entirely optional, and because this can feel private, you can keep everything to yourself. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Each day, Loops shows you what's due and gives you specific, achievable things to do. Not a meal plan. Not a calorie target. Just the next right action for where you are right now. Close the loop, and your person sees it." },
  { t: "Get coaching when you need it", b: "At the difficult moments: the evening cravings, the days when the wheels came off, the point where you would usually give up, Loops is there with practical, personalised coaching to help you keep going rather than starting over." },
  { t: "Build steadiness over time", b: "Progress in this area is rarely a straight line. Loops is designed for that reality. It keeps the thread alive through the messy weeks, so that the good days and the difficult ones both count." },
];

const WtHowItWorks = () => (
  <Section id="how" className="bg-soft">
    <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 to overhaul your relationship with food overnight. You need a system that makes steady progress possible, and that picks you back up when things go off course.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {WT_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">
        There's no perfect entry point. Wherever you are right now is a fine place to start.
      </p>
    </Container>
  </Section>
);

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

const WT_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "What you're really after, described your way: to feel better in your body, to have a steadier relationship with food, to feel healthier. Not a number on a scale. Loops doesn't set weight targets. Just a clear sense of what you're moving towards, so your brain can hold on to it." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose. Gentle and doable, never a rule to break. Some run every day, some a few times a week: a short walk after dinner, a glass of water when you wake up, eating something before you get too hungry. 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 get back up. You decide what they see, so it can be as much or as little as you like. Support, without the nagging or the monitoring. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something kind for the moments that matter: a fortnight of showing up, a hard evening you got through, a week where a bad day didn't become a bad month. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows where you are and what you're working on, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there in the moments that are hardest: the late evening, the day the wheels came off, the point where you'd usually start over." },
];

const WtWhatsInside = () => (
  <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">
        {WT_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 WT_TESTIMONIALS = [
  { quote: "I had tried six or seven different approaches before Loops. What was different was that it didn't treat a bad day as a failure. It just asked what I was doing next. That changed how I thought about the whole thing.", who: "Teacher, Birmingham", meta: "ADHD diagnosis at 29" },
  { quote: "I used to think I was just bad at this. Finding out there was a reason why the evening was always the hardest time, and having something that specifically helped with that, made a real difference.", who: "Project manager, Leeds", meta: null },
  { quote: "The part that helped most was consistency rather than perfection. I stopped seeing imperfect weeks as wasted weeks. Things started to feel more stable.", who: "Freelancer, Bristol", meta: null },
];

const WtSocialProof = () => (
  <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">
        {WT_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 WT_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the work.", 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 WtPricing = () => (
  <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">
        {WT_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 (incl. Beat signpost) ---------------- */

const WtObjections = () => (
  <Section id="objections" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>A few things worth knowing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Common questions before you start
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        <article 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">&ldquo;I've tried so many things. Why would this be different?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Most approaches to eating and weight aren't designed for ADHD brains. They assume consistent motivation and smooth recovery from setbacks. Loops is built around the opposite: inconsistent motivation, high cognitive load days, and a system that meets you where you are rather than where you wish you were.</p>
        </article>
        <article 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">&ldquo;Do I have to share my progress with anyone?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">No. Solo works perfectly well on its own, and this can stay completely private. If you'd like someone alongside you, you decide exactly what your person sees, and you can change it any time. You can add them whenever you're ready.</p>
        </article>
        <article 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">&ldquo;What if I'm not diagnosed?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or finding that ADHD describes their experience without a formal label. If the patterns on this page feel familiar, Loops is built for you.</p>
        </article>
        <article 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">&ldquo;Is Loops a diet or weight-loss programme?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">No. Loops is a daily coaching app for people with ADHD. It doesn't prescribe diets, set calorie targets, or promise specific weight outcomes. It helps you build the consistency, structure, and recovery habits that make any approach to eating more sustainable for an ADHD brain.</p>
        </article>
        <article className="rounded-card border border-brand/25 bg-brand-soft/50 p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;What if my relationship with food feels more serious than this?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">If your relationship with food is causing significant distress, affecting your daily life, or involves patterns like loss-of-control eating that feel very difficult to manage, please speak with your doctor or a qualified professional first. Loops isn't a substitute for clinical support.</p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/support/find-help/">Find help now</Button></div>
        </article>
      </div>
    </Container>
  </Section>
);

/* ---------------- FAQ accordion ---------------- */

const WT_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 people managing their relationship with eating and weight, it provides the daily structure and recovery support that standard approaches rarely offer." },
  { 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 up after a hard day, they see it. They are not there to monitor you or check what you ate. They don't nag or manage you. They just get to see you keep showing up. Because this can feel private, it's entirely optional: Solo works perfectly well on its own, and you decide exactly what they see. On a Crew plan it can be more than one: your people." },
  { q: "Why do people with ADHD struggle with weight management?", a: "Adults with ADHD have higher rates of overweight and obesity, more previous weight-loss attempts, and worse outcomes on standard programmes. The main reasons aren't lack of knowledge: they're the executive function demands of standard approaches, how ADHD affects motivation under delayed reward, the role food plays in emotional regulation, and the all-or-nothing patterns that build up after repeated failed attempts." },
  { q: "Why do diets keep failing for people with ADHD?", a: "Standard diets ask for consistent meal planning, tracking, cooking, and long-term behavioural change. All of these are high executive function tasks. Research shows that self-monitoring adherence falls quickly even in the general population; for people with ADHD, that drop tends to be faster and more complete. The failure is usually not a loss of desire. It's a mismatch between what the programme demands and what ADHD makes reliably possible." },
  { q: "Is it normal to use food to manage emotions or boredom with ADHD?", a: "Yes, and it's well documented. For many people with ADHD, eating is a fast, reliable way to manage overwhelm, under-stimulation, or emotional distress. This isn't a character weakness. It's a predictable response to an ADHD nervous system seeking regulation." },
  { q: "Does Loops tell me what to eat?", a: "No. Loops doesn't prescribe diets, recommend specific foods, set calorie targets, or promise weight outcomes. It helps you build the consistency and structure that make your own approach to eating more sustainable." },
  { q: "What if I have an eating disorder?", a: "Loops isn't a treatment for eating disorders and isn't a substitute for clinical support. If you are experiencing significant distress around eating, loss-of-control eating, restriction, or any pattern that feels difficult to manage, please speak with your GP. In the UK, Beat (beateatingdisorders.org.uk) provides free information, helplines, and support for anyone affected by eating disorders.", beat: true },
  { 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 health guidance and support resources in mind." },
];

const WtFAQItem = ({ q, a, beat, 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">
        {beat
          ? <>Loops isn't a treatment for eating disorders and isn't a substitute for clinical support. If you are experiencing significant distress around eating, loss-of-control eating, restriction, or any pattern that feels difficult to manage, please speak with your doctor. You can find crisis lines and specialist support on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.</>
          : a}
      </p>
    </div>
  </details>
);

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

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

const WtFinalCTA = () => (
  <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>Make the trying work</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]">
            You've been trying for a long time. Let's make the trying actually work.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            The goal is real. The difficulty is real too. Loops is built to help with the second part, so the first part finally has a chance. And if you want, one person quietly in your corner.
          </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>
);

/* ---------------- Support note (wellbeing signpost above footer) ---------------- */

const WtSupportNote = () => (
  <aside aria-label="Support" className="bg-soft border-t border-line">
    <Container className="py-7">
      <div className="mx-auto flex max-w-3xl items-start gap-3.5 text-[13.5px] sm:text-[14px] leading-[1.6] text-ink-2 text-pretty">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="mt-0.5 shrink-0 text-brand-deep">
          <circle cx="12" cy="12" r="9" strokeWidth="1.6" stroke="currentColor" />
          <path d="M12 11v5" strokeWidth="1.8" stroke="currentColor" strokeLinecap="round" />
          <circle cx="12" cy="7.8" r="1" fill="currentColor" />
        </svg>
        <p>
          If your relationship with food is causing you distress, you deserve proper support. Please speak with your doctor. You can find crisis lines and specialist support on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>. Loops is a daily coaching app, not a substitute for clinical care.
        </p>
      </div>
    </Container>
  </aside>
);

/* ---------------- Sources ---------------- */

const WT_SOURCES = [
  { t: "Association Between ADHD and Obesity: A Systematic Review and Meta-Analysis — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/26315982/" },
  { t: "Weight loss following a clinic-based weight loss programme — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/21150252/" },
  { t: "Adult ADHD, not ‘just a trend’ — British Dietetic Association", u: "https://www.bda.uk.com/resource/adult-adhd-not-just-a-trend.html" },
  { t: "Overweight and obesity management — NICE guidance", u: "https://www.nice.org.uk/guidance/ng246/chapter/Planning-and-delivering-overweight-and-obesity-services-and-interventions" },
  { t: "Attention-Deficit/Hyperactivity Disorder and Monetary Delay Discounting — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5049699/" },
  { t: "Attention Deficit Hyperactivity Disorder (ADHD) and disordered eating — University of Birmingham research", u: "https://research.birmingham.ac.uk/en/publications/attention-deficit-hyperactivity-disorder-adhd-and-disordered-eati/" },
  { t: "Circadian rhythm disruption as a link between ADHD and obesity — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/26526321/" },
  { t: "Having ADHD and losing weight feels IMPOSSIBLE sometimes — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1m7yn8l/having_adhd_and_losing_weight_feels_impossible/" },
  { t: "Counting calories with executive dysfunction — r/loseit", u: "https://www.reddit.com/r/loseit/comments/16bb32e/counting_calories_with_executive_dysfunction/" },
  { t: "An ADHD-Friendly Way to Lose Weight? Yes! — ADDA", u: "https://add.org/adhd-friendly-way-to-lose-weight/" },
  { t: "How do I stop f***ing eating? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1kuevbt/how_do_i_stop_fing_eating/" },
  { t: "Tirzepatide for managing overweight and obesity — NICE guidance", u: "https://www.nice.org.uk/guidance/ta1026" },
  { t: "Self-Monitoring in Weight Loss: A Systematic Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3268700/" },
  { t: "Eating disorders: recognition and treatment — NICE guidance", u: "https://www.nice.org.uk/guidance/ng69/ifp/chapter/Binge-eating-disorder" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/resources/attention-deficit-hyperactivity-disorder-diagnosis-and-management-pdf-1837699732933" },
  { t: "Consistency With and Disengagement From Self-monitoring in a Technology-Based Weight Loss Programme — JMIR Formative Research", u: "https://formative.jmir.org/2022/2/e33603/" },
  { t: "The impact of physical activity on inhibitory control of adults with ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/40084538/" },
  { t: "Taking Charge of Adult ADHD, Second Edition — Russell Barkley", u: "https://www.guilford.com/books/Taking-Charge-of-Adult-ADHD/Russell-Barkley/9781462546855" },
  { t: "A nurse-led lifestyle intervention for adult persons with ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/32493144/" },
];

const WtSources = () => (
  <Section id="sources" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Our sources</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Where this comes from
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          This page draws on research into ADHD, weight, eating patterns, and executive function, alongside real accounts from people who have tried repeatedly to manage their weight. Here's where it comes from.
        </p>
      </div>

      <div className="mt-6 max-w-prose rounded-card border border-brand/25 bg-brand-soft/50 p-5 sm:p-6">
        <p className="text-[14.5px] leading-[1.6] text-ink-2 text-pretty">
          If your relationship with food is causing significant distress, please speak with your doctor or a qualified professional. You can also find crisis lines and specialist support on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.
        </p>
      </div>

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

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

function WtApp() {
  return (
    <main id="main">
      <WtNav />
      <WtHero />
      <WtWhatLoopsDoes />
      <WtRecognition />
      <WtWhyItHappens />
      <WtWhyLoopsWorks />
      <WtHowItWorks />
      <WtWhatsInside />
      <WtSocialProof />
      <LoopsPricing bg="bg-base" />
      <WtObjections />
      <WtFAQ />
      <WtFinalCTA />
      <WtSources />
      <Footer />
    </main>
  );
}

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