/* Loops — "Parenting With ADHD When The Same Problems Keep Happening" use-case page
   Moralised, relational shame + exhaustion. Five gaps: transition / regulation / chaos /
   shame / repair. Unique section: the parent's plan before the child's plan. Unique objection
   validates ("what if the problem is actually me") rather than deflecting. CTA lowest bar. */

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

const PAR_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 ParNav = () => {
  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">
            {PAR_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">
              {PAR_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 PAR_HERO_BLOCKS = [
  {
    title: "Get through transitions",
    body: "Mornings, bedtime, and leaving the house, with less friction each time.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/></svg>),
  },
  {
    title: "Come down faster",
    body: "Support for the moments where it's hardest to stay calm.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>),
  },
  {
    title: "Repair without spiralling",
    body: "A way back in after a hard moment, without days of guilt attached.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>),
  },
];

const ParHero = () => (
  <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">
          Same morning. Same meltdown. You're not a bad parent. You're running on the wrong system.
        </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">
          Parenting asks for steady structure, patience under pressure, and a calm household. ADHD makes all three genuinely harder to deliver, no matter how much you care.
        </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, support for the moments where calm is hardest, and, if you want it, <span className="text-ink font-medium">one person quietly in your corner.</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">
        {PAR_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 ParWhatLoopsDoes = () => (
  <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 built for the moments that actually break.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            You already know what good mornings and calm bedtimes look like. The gap isn't knowledge. It's holding that structure together when the house is loud, the child is dysregulated, and you're already behind.
          </p>
          <p>
            Loops gives you small daily actions, support for the moments where calm is hardest to find, and a quick way to repair after things go wrong, instead of carrying it for days.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person quietly alongside you.</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 PAR_RECOGNITION = [
  "Mornings feel like a sprint from the moment you wake up, every single day.",
  "You've raised your voice and regretted it before you'd even finished the sentence.",
  "The house can stay tidy for about ten minutes before it tips back into chaos.",
  "You've tried charts, alarms, and routines that worked for a week and then quietly fell apart.",
  "Bedtime regularly turns into a battle neither of you wanted.",
  "After a hard moment, the guilt sticks around far longer than the moment itself did.",
];

const ParRecognition = () => (
  <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 parents with ADHD describe most often. If you see yourself here, 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">
        {PAR_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 don't love them enough. It means you're parenting with a system that wasn't built for how your brain runs.
        </p>
      </div>

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

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

const PAR_PATTERNS = [
  { title: "The transition gap", body: "Mornings, bedtime, and leaving the house all demand several executive steps in a row. Each handoff is a place where the whole sequence can quietly fall apart." },
  { title: "The regulation gap", body: "Staying calm under repeated demands is harder when emotional regulation itself is affected. A rushed, loud moment isn't a lack of love. It's a nervous system reaching its limit." },
  { title: "The chaos gap", body: "A disorganised home keeps generating more things to notice and decide about. That constant low-level overload makes everything else, including patience, harder to sustain." },
  { title: "The shame gap", body: "A hard moment with your child can quickly turn into proof of being a bad parent. That belief adds pressure that makes the next hard moment more likely, not less." },
  { title: "The repair gap", body: "Coming back together after a difficult moment is its own skill, separate from avoiding it in the first place. Without a clear way to repair, the guilt tends to outlast the moment itself." },
];

const ParWhyItHappens = () => (
  <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 parenting skills problem. It's an execution problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Parenting leans heavily on exactly the things ADHD makes less reliable: steady transitions, calm under pressure, and a settled home. Knowing what good parenting looks like has rarely been the missing piece.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {PAR_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">None of these gaps mean you're failing your child. They mean the system around you needs support at more than one point.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: parent's plan before the child's plan ---------------- */

const ParReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The parent's plan has to work before the child's plan can.
        </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 parenting advice, and most parenting support for children with ADHD, focuses on the child. That makes sense, but it quietly assumes the parent can reliably deliver the plan. When the parent also has ADHD, that assumption often doesn't hold, and a perfectly good routine can fail simply because it was never built around how the parent's own brain works.
        </p>
        <p className="text-ink font-medium">
          This isn't about blaming the child's plan or the parent. It's about recognising that support which only looks at the child is solving half the problem. Getting some structure around your own follow-through often does more for the whole household than another chart on the fridge.
        </p>
      </div>
    </Container>
  </Section>
);

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

const PAR_WITNESS_CARDS = [
  { t: "They see the steps, not the meltdowns", b: "When you close a loop, they see it. Not the meltdowns, not a scorecard of your parenting, just the small steps you're taking. When you pick things back up after a hard day, that's seen too, and it's no big deal." },
  { t: "Not a monitor of your parenting", b: "They don't judge how you parent or keep count of the hard days. They don't manage you, they don't even pay. Their side is light on purpose." },
  { t: "You're always in control", b: "You choose who it is. You decide exactly what they can see, and you can change it any time." },
  { t: "A little of the weight, shared", b: "On the days the guilt is loud, one person quietly in your corner takes a little of the weight off. You don't have to hold all of it alone." },
];

const ParWhyLoopsWorks = () => (
  <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 cope better with people, not with apps.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>Parenting with ADHD can be quietly isolating. The hard mornings happen behind closed doors, the guilt gets carried alone, and there's rarely anyone who simply sees how hard you're trying.</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. Not the meltdowns, not a scorecard of your parenting, just the small steps you're taking. 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">
        {PAR_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">
          And if you'd rather keep this to yourself, that's completely fine. Solo works on its own. Your person is there for if and when you want it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const PAR_STEPS = [
  { t: "Tell Loops what keeps breaking down", b: "Name the moment, whether that's mornings, bedtime, or something else, in plain language." },
  { t: "Choose your person, if you want one", b: "This one is optional, and it's fine to skip it for now. If you'd like someone alongside you, pick one person you trust to see the small steps you're taking, not the hard moments. You decide exactly what they can see, and you can change it any time. There's nothing for them to manage, and nothing for you to keep up. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Short, specific things to try each day. No need to overhaul the whole routine at once. Close the loop, and your person sees it." },
  { t: "Get support in the harder moments", b: "Quick, in-the-moment prompts for the times calm is hardest to find." },
  { t: "Repair quickly, without the guilt spiral", b: "A simple way back in after a hard moment, so it doesn't shadow the rest of your day." },
];

const ParHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Simple from day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to rebuild your whole household. Loops fits around the routines you're already trying to hold together.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {PAR_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 perfect day. You just need today's small step.
      </p>
    </Container>
  </Section>
);

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

const PAR_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The moment that keeps breaking down, described your way: mornings, bedtime, leaving the house, whatever it is. No categories. Just a clear sense of where you want things to feel calmer." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, small enough to try on a hard morning. Some run every day, some a few times a week: lay tomorrow's clothes out tonight, one calm warning before a transition, a two-minute reset when you feel your fuse getting short. A few connect to the moment you're working on. Others are just life, like taking your meds before breakfast. Miss one and nothing is wiped out. The next action is still there, still small, still doable." },
  { t: "Your person", b: "The one you choose to see the small steps you're taking. Not the meltdowns, not a scorecard, and not there to judge how you parent. 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 calmer morning, a bedtime that didn't become a battle, a hard moment you repaired the same evening. 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 which moments keep breaking down for your family, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when calm is hardest to find, and after a hard moment, with a simple way to repair rather than a reminder of what went wrong." },
];

const ParWhatsInside = () => (
  <Section id="inside" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>What's inside Loops</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Five simple things, working together.
        </h2>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {PAR_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>
);

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

const PAR_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the moments you're working on.", 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 a little easier. A natural fit for two parents in the same house.", featured: true },
];

const ParPricing = () => (
  <Section id="pricing" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Pricing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Better with your person. And you can start alone.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {PAR_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>
);

/* ---------------- Social proof ---------------- */

const PAR_TESTIMONIALS = [
  { quote: "Mornings used to end the same way most days, with me shouting and then feeling sick about it by the school gate. Having one small thing to focus on changed how often that happened.", who: "Parent of two", meta: "Diagnosed with ADHD at 36" },
  { quote: "I'd tried every chart going. What actually helped was something that supported me, not just the kids.", who: "Single parent", meta: "Using Loops for 6 months" },
  { quote: "The repair part mattered most. I used to carry guilt for days after a bad moment. Now I can come back from it the same evening.", who: "Father of one, Manchester", meta: null },
];

const ParSocialProof = () => (
  <Section id="stories" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What people say</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          From people who recognise themselves in this.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {PAR_TESTIMONIALS.map((t, i) => (
          <figure key={i} className="flex h-full flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="text-brand/30">
              <path d="M10 7c-3 0-5 2-5 5v5h5v-5H7c0-2 1.5-3 3-3V7Zm9 0c-3 0-5 2-5 5v5h5v-5h-3c0-2 1.5-3 3-3V7Z" fill="currentColor" />
            </svg>
            <blockquote className="mt-4 flex-1 text-[15.5px] sm:text-[16px] leading-[1.65] text-ink text-pretty">{t.quote}</blockquote>
            <figcaption className="mt-5 border-t border-line pt-4">
              <div className="text-[14px] font-semibold text-ink">{t.who}</div>
              {t.meta ? <div className="mt-0.5 text-[13px] text-ink-3">{t.meta}</div> : null}
            </figcaption>
          </figure>
        ))}
      </div>
    </Container>
  </Section>
);

/* ---------------- Objections (4, incl. validating "is it me" 1st) ---------------- */

const PAR_OBJECTIONS = [
  { q: "\u201CWhat if the problem is actually me, not my system?\u201D", a: "It's worth taking seriously, and the honest answer is that it's usually both. Your effort and care are real, and the system around you can still be making things harder than they need to be." },
  { q: "\u201CDo I have to share any of this with anyone?\u201D", a: "No. Solo works perfectly well on its own, and this can stay completely private. If you'd like someone alongside you, they only ever see the small steps you choose to share, never the hard moments, and it's never a judgement on your parenting. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI don't have time to add another thing to manage.\u201D", a: "This isn't another thing to manage. Loops asks for one small daily action, not a new routine to maintain on top of everything else." },
  { q: "\u201CMy child also has ADHD. Will this even help?\u201D", a: "It often helps more, not less. A lot of family routines depend on the parent's follow-through, so support for you can make the whole household steadier, alongside any support your child is getting." },
  { q: "\u201CI've tried charts and routines before. They didn't last.\u201D", a: "Most charts assume steady follow-through from the parent. Loops is built around the parent's own consistency, not just the visual reminder on the wall." },
];

const ParObjections = () => (
  <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">
        {PAR_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 PAR_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. For parenting, it focuses on small daily actions, one person who can quietly see the small steps you're taking, support in high-pressure moments, and quick repair after things go wrong." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is someone you choose to see the small steps you're taking, never the meltdowns or a scorecard of your parenting. They don't judge how you parent or keep count of the hard days, and on the days the guilt is loud, one person quietly in your corner takes a little of the weight off. You don't need one to start, and this can stay completely private. Your person is there for if and when you want it. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with parenting if you have ADHD?", a: "It breaks the hardest parts of the day into one manageable step, offers support in the moments calm is hardest to hold onto, and helps you repair quickly after a difficult moment so guilt doesn't linger." },
  { q: "Why is parenting harder with ADHD even when you love your child deeply?", a: "Parenting relies heavily on steady transitions, calm under pressure, and household organisation, all areas ADHD affects. The struggle isn't a lack of care. It's a mismatch between the demands of parenting and how ADHD affects follow-through and regulation." },
  { 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 patterns on this page feel familiar, Loops is built for you." },
  { q: "Will this stop the hard moments happening altogether?", a: "No, and it wouldn't be honest to promise that. Loops is built to help mornings and bedtimes go a little more smoothly, and to help you recover faster when a hard moment does happen." },
  { q: "Is this instead of getting support for my child?", a: "No. Loops supports you alongside any support your child is receiving. Many families find that support for the parent makes the child's plan easier to follow through on too." },
  { q: "How long does it take to see results?", a: "Some parents notice a difference in how mornings or bedtime feel within the first couple of weeks. Steadier patterns across the household usually build over a few months." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

const ParFAQItem = ({ 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 ParFAQ = () => (
  <Section id="faq" className="bg-soft">
    <Container>
      <div className="grid gap-10 lg:gap-16 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <Kicker>FAQ</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
            Questions people often ask
          </h2>
          <p className="mt-5 text-[16px] leading-[1.65] text-ink-2 max-w-md">
            Still wondering if Loops fits how your brain works? <a href="/contact/" className="text-brand-deep font-semibold hover:underline">Contact us</a>. A real person will reply.
          </p>
        </div>
        <div className="lg:col-span-8 flex flex-col gap-3">
          {PAR_FAQS.map((f, i) => <ParFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const ParFinalCTA = () => (
  <Section id="start" className="bg-base">
    <Container>
      <div className="relative overflow-hidden rounded-card border border-line bg-white p-8 sm:p-12 lg:p-16 shadow-card text-center">
        <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-0 soft-halo"></div>
        <div className="relative z-10 mx-auto max-w-2xl">
          <div className="flex justify-center"><Kicker>One calmer morning</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]">
            One calmer morning. Not a different household.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need to become a different kind of parent. You need a bit more support around the moments that keep going wrong, 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>
);

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

const PAR_SOURCES = [
  { t: "Parent ADHD and Evidence-Based Treatment for Their Children — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5357146/" },
  { t: "ADHD in Adults — NHS", u: "https://www.nhs.uk/conditions/adhd-adults/" },
  { t: "Parent Training Tailored for Parents With ADHD: A Randomized Controlled Trial — BMC Psychiatry", u: "https://link.springer.com/article/10.1186/s12888-025-07166-8" },
  { t: "“Dysregulated Not Deficit”: A Qualitative Study on Symptomatology of ADHD in Young Adults — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0292721" },
  { t: "Parenting Stress in Families of Children With ADHD — Sage Journals", u: "https://journals.sagepub.com/doi/abs/10.1177/1063426610387433" },
  { t: "Stigma in Adults With ADHD: A Systematic Review of Types, Experiences, and Potential Implications for Quality of Life — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2026.1783271/full" },
  { t: "Identifying the Information Needs and Format Preferences for Web-Based Content Among Adults With or Parents of Children With ADHD — JMIR Formative Research", u: "https://formative.jmir.org/2023/1/e47409" },
  { t: "Any ADHD Parents Here? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/15bvr7d/any_adhd_parents_here/" },
  { t: "ADHD Parents and Making Children Do Chores — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/r91ngj/adhd_parents_and_making_children_do_chores/" },
  { t: "Ritalin Makes Me Feel Like the Father I Always Wanted to Be — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/44b905/ritalin_makes_me_feel_like_the_father_i_always/" },
  { t: "Dr. Russell A. Barkley — Dedicated to Education and Research", u: "https://www.russellbarkley.org/" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD: A Systematic Review — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" },
  { t: "Parents of ADHD Kids, How Do You Not Lose It on Your Kids? — r/Parenting", u: "https://www.reddit.com/r/Parenting/comments/1cmnk29/parents_of_adhd_kids_how_do_you_not_loose_it_on/" },
  { t: "Attention-Deficit/Hyperactivity Disorder: AAP Updates Guideline for Diagnosis and Management — American Family Physician", u: "https://www.aafp.org/afp/2020/0701/p58" },
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Mom Guilt: Son Diagnosed With ADHD — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/tedjm8/mom_guilt_son_diagnosed_with_adhd/" },
  { t: "Parent Training Tailored to Parents With ADHD: Development of the IPSA Program — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/10870547231217090" },
  { t: "ADHD Mamas, Have You Tried Minimalism? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/11sultf/adhd_mamas_have_you_tried_minimalism_did_this/" },
  { t: "ADHD Misinformation on TikTok Is Shaping Young Adults' Perceptions — UBC News", u: "https://news.ubc.ca/2025/03/adhd-misinformation-on-tiktok/" },
  { t: "“Set an Alarm on Your Phone” — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1hc52zn/set_an_alarm_on_your_phone/" },
  { t: "Parental ADHD in Pregnancy and the Postpartum Period — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33516734/" },
  { t: "Females With ADHD: An Expert Consensus Statement — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC7422602/" },
  { t: "Associations Between Self-Reported ADHD Symptoms and Perinatal Outcomes — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/40044079/" },
  { t: "Study Examines Effects of Mothers' Use of ADHD Medication vs. Behavioral Training — Duke Department of Psychiatry & Behavioral Sciences", u: "https://psychiatry.duke.edu/duke-center-girls-women-adhd/research/research-spotlights/study-examines-effects-mothers-use-adhd" },
  { t: "The Lived Experiences of Adults With ADHD: A Rapid Review of Qualitative Evidence — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9403235/" },
];

const ParSources = () => (
  <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 parenting research, adult ADHD and emotion regulation studies, and real accounts from parents managing the same hard mornings on repeat. Here's where it comes from.
        </p>
      </div>

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

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

function ParApp() {
  return (
    <main id="main">
      <ParNav />
      <ParHero />
      <ParWhatLoopsDoes />
      <ParRecognition />
      <ParWhyItHappens />
      <ParReframe />
      <ParWhyLoopsWorks />
      <ParHowItWorks />
      <ParWhatsInside />
      <ParSocialProof />
      <LoopsPricing bg="bg-soft" />
      <ParObjections />
      <ParFAQ />
      <ParFinalCTA />
      <ParSources />
      <Footer />
    </main>
  );
}

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