/* Loops — "Navigating Big Life Changes With ADHD" use-case page
   Disoriented dread that the coping self has quietly stopped working. Framed around lost
   scaffolding, not lost capability. Five gaps: scaffold / initiation / reward / emotional /
   admin. Unique section: you don't need a new identity, you need a way to restart. Unique
   objection: "was I ever really managing" (answered honestly). CTA: one steady week. */

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

const LFC_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 LfcNav = () => {
  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">
            {LFC_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">
              {LFC_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 LFC_HERO_BLOCKS = [
  {
    title: "Rebuild your footing",
    body: "Small daily structure to replace what the change took away.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z"/></svg>),
  },
  {
    title: "Restart, not just start",
    body: "Support designed for picking things back up, not only beginning fresh.",
    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: "Catch the hidden admin",
    body: "Help with the small maintenance tasks that quietly pile up during change.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
];

const LfcHero = () => (
  <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.05] text-[32px] sm:text-[44px] lg:text-[52px] fade-in-up delay-1">
          You were managing. Then everything changed, and suddenly you're not.
        </h1>

        <p className="mx-auto mt-7 max-w-2xl text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
          It's not that you've lost the ability to cope. The routines and structure that used to hold things together often disappear in a big life change, and they take your footing with them.
        </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 a small amount of steady structure while the rest settles, support for restarting when a routine slips, 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">
        {LFC_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 LfcWhatLoopsDoes = () => (
  <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 part after everything changes.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            You don't need a brand new life plan. You need a small amount of steady structure while the rest of your world is still settling.
          </p>
          <p>
            Loops gives you small daily actions, support for restarting after a routine falls apart, and help catching the admin that tends to drift during a big change.
          </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 LFC_RECOGNITION = [
  "A routine that worked for years has quietly stopped working since things changed.",
  "You're behind on appointments, renewals, or admin you used to keep on top of.",
  "You wonder whether you were ever really managing, or just lucky with how things were set up before.",
  "Small daily things feel harder than they should, and you can't quite explain why.",
  "You've tried to rebuild structure a few times since the change and it hasn't stuck yet.",
  "Part of you is waiting for things to go back to how they were, even though they probably won't.",
];

const LfcRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          You're not alone in this.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often during big life changes. 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">
        {LFC_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've gone backwards as a person. It means the structure around you changed, and structure was doing more of the work than it looked like.
        </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 LFC_PATTERNS = [
  { title: "The scaffold gap", body: "A lot of stability comes from the environment, not just the person. When a job, home, or relationship changes, the cues that used to prompt action often disappear with it." },
  { title: "The initiation gap", body: "Knowing what you should do isn't the same as being able to start doing it. That gap tends to widen during disorientation, when everything feels slightly unfamiliar." },
  { title: "The reward gap", body: "Big changes are full of distant, abstract payoffs. When the benefit of a new routine feels far away, it's normal for today's effort to lose out to whatever feels more immediate." },
  { title: "The emotional gap", body: "A setback during a transition can trigger shame, grief, or panic far beyond the task itself. That emotional weight then makes the next attempt harder to start." },
  { title: "The admin gap", body: "Maintenance tasks like appointments, renewals, and paperwork quietly pile up during change. They're rarely urgent on any single day, which is exactly why they're easy to lose track of." },
];

const LfcWhyItHappens = () => (
  <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 personal collapse. It's a scaffolding problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Big changes strip away routines, cues, and accountability all at once. What looked like steady coping was often leaning on structure that's no longer there.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {LFC_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 starting from zero as a person. They mean the structure needs rebuilding, piece by piece.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: restart, not new identity ---------------- */

const LfcReframe = () => (
  <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]">
          You don't need a new identity. You need a way to restart.
        </h2>
      </div>
      <div className="mx-auto mt-8 max-w-prose space-y-5 text-[17px] sm:text-[18px] leading-[1.75] text-ink-2 text-pretty">
        <p>
          Most advice about getting through change focuses on starting fresh: new habits, a new mindset, a clean slate. For a lot of people with ADHD, the harder moment isn't starting. It's the third or fourth time a routine falls apart after the change, and needing to pick it back up again without it feeling like proof of failure.
        </p>
        <p className="text-ink font-medium">
          Restarting after a setback is a different skill from starting in the first place. It deserves its own support, especially during a period that's already asking a lot of you.
        </p>
      </div>
    </Container>
  </Section>
);

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

const LFC_WITNESS_CARDS = [
  { t: "A scaffold that travels with you", b: "Most of your stability lived in the structure around you, and a change takes that with it. One piece of it can be a person, and a person travels with you through whatever changes next." },
  { t: "They don't manage you", b: "They don't nag, they don't manage you, they don't even pay. This is one steady presence, not another routine to keep up." },
  { 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 steadier place to start from", b: "When you restart after a routine slips, they see that too, and it's genuinely no big deal. When the old scaffolding is gone, one person still there is a steadier place to start from." },
];

const LfcWhyLoopsWorks = () => (
  <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 steady themselves through people, not through apps.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>The page names it exactly: a lot of your stability lived in the structure around you, and a big change took that structure with it. Rebuilding it all at once isn't realistic. But one piece of it can be a person, and a person travels with you through whatever changes next.</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, and it can be the one steady presence through a time when little else is. When you close a loop, they see it. When you restart after a routine slips, they see that too, and it's genuinely no big deal. You decide exactly what they can see, and you can change it any time.</p>
          <p><span className="text-ink font-medium">This is the step most people skip with other apps. It's also the one that makes Loops work.</span></p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {LFC_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 LFC_STEPS = [
  { t: "Tell Loops what's changed", b: "Name the transition and what's felt hardest to keep up with since it happened." },
  { t: "Choose your person, if you want one", b: "Optional, and easy to skip for now. If you'd like someone alongside you, pick one person you trust to see the small steps you're taking, a steady presence while the rest is unsettled. 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 steps to rebuild structure, without needing a finished plan first. Close the loop, and your person sees it." },
  { t: "Get support when a routine slips", b: "A quick way to restart, rather than treating a missed day as the whole system failing." },
  { t: "Catch the hidden admin before it piles up", b: "Gentle prompts for the maintenance tasks that tend to drift during change." },
];

const LfcHowItWorks = () => (
  <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 life at once. Loops fits around the change you're already going through.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {LFC_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 to have it all figured out yet. You just need today's step.
      </p>
    </Container>
  </Section>
);

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

const LFC_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The change you're going through and what's felt hardest to keep up with since, described your way. No categories. Just a clear sense of where you want a bit of footing back, so it's easy to aim at." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, small enough for an unsettled week. Some run every day, some a few times a week: one anchor in the morning, the renewal you've been putting off, a single appointment booked. A few connect to the change you're navigating. 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: the loops you close and the times you restart after a slip. A steady presence when the old structure is gone. 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 week that felt a little steadier, an anchor that held, the admin pile you finally caught up on. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows what's changed and what you're rebuilding, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when a routine has slipped again, with a calm way to restart, not a reminder that it's the third time." },
];

const LfcWhatsInside = () => (
  <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">
        {LFC_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 LFC_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the footing you're rebuilding.", 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.", featured: true },
];

const LfcPricing = () => (
  <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. 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">
        {LFC_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 LFC_TESTIMONIALS = [
  { quote: "After my divorce, every routine I had just stopped existing overnight. I felt like I was going backwards as a person. Rebuilding one small thing at a time made it feel possible again.", who: "Going through a major life change", meta: "Diagnosed with ADHD at 38" },
  { quote: "Starting a new job undid years of systems I didn't even realise were propping me up. This helped me notice what had quietly fallen apart and pick it back up.", who: "After a career change", meta: "Using Loops for 4 months" },
  { quote: "I kept waiting to feel normal again after moving house. Turns out I needed new structure, not just time.", who: "Parent of one, Cardiff", meta: null },
];

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

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {LFC_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. "was I ever managing" 1st) ---------------- */

const LFC_OBJECTIONS = [
  { q: "\u201CWhat if this is revealing that I was never really managing in the first place?\u201D", a: "That fear is understandable, but it's usually the wrong conclusion. What looked like managing was often supported by routines and circumstances that quietly did a lot of the work. Losing them isn't proof you were faking it." },
  { 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 add nothing for you to keep up, they just see the small steps you choose to share. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI'm not sure what I even need right now, everything feels unsettled.\u201D", a: "That's completely normal during a big change. Loops doesn't need a finished plan from you. It starts with one small thing, even before the bigger picture feels clear." },
  { q: "\u201CI've tried rebuilding routines before and they didn't stick.\u201D", a: "Most rebuilding attempts focus on starting, not restarting after the next slip. Loops is built around picking things back up easily, since most transitions involve more than one false start." },
  { q: "\u201CI don't have the energy to learn something new right now.\u201D", a: "You don't need to. Setup takes a few minutes, and each day asks for one small, specific action, not a new system to master while everything else feels overwhelming." },
];

const LfcObjections = () => (
  <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">
        {LFC_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 LFC_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. During big life changes, it focuses on small daily actions, one person who can be a steady presence when the old structure is gone, easy restarts after a routine slips, and help catching admin that drifts during transitions." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see the small steps you're taking: the loops you close and the times you restart after a slip. When a change strips away the structure you leaned on, one person is a piece of scaffolding that travels with you. They don't nag or manage you. 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 big life changes if you have ADHD?", a: "It helps rebuild structure in small steps, supports you in restarting after a setback rather than starting completely over, and helps catch maintenance tasks that tend to slip during disruption." },
  { q: "Why do things fall apart during big life changes even when I was coping before?", a: "Stability often relies on routines, cues, and accountability built into a specific context. When that context changes, those supports disappear too, which can make coping feel like it's vanished, even though the underlying capability hasn't." },
  { 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 fix everything that's changed?", a: "No, and it wouldn't be honest to promise that. Loops is built to help you rebuild small, steady structure while the rest of the change settles, not to solve the change itself." },
  { q: "What if I go through another transition later?", a: "That's expected, not a failure of the system. Loops is built around restarting, so it can support you again whenever structure needs rebuilding." },
  { q: "How long does it take to see results?", a: "Some people notice a difference in how the day feels within the first couple of weeks. A steadier sense of footing usually builds over a few months." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

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

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

const LfcFinalCTA = () => (
  <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 steady week</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 steady week. Not a whole new life.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need to have everything figured out yet. You need a small amount of structure while the rest settles, 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 LFC_SOURCES = [
  { t: "Digital Health Technologies for Adults With ADHD: A Scoping Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12969067/" },
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Executive Functions: What They Are, How They Work, and Why They Evolved — Russell Barkley", u: "https://books.google.com/books/about/Executive_Functions.html?id=TS6pgND1xdoC" },
  { t: "The Lived Experiences of Adults With ADHD: A Rapid Review of Qualitative Evidence — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.949321/full" },
  { t: "Time Perception in Adult ADHD: Findings From a Decade — A Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9821724/" },
  { t: "Adult Diagnosis of ADHD in Women: A Mixed Methods Investigation — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/10870547241297897" },
  { t: "Understand Your Brain, Get More Done: The ADHD Executive Functions Workbook — Ari Tuckman", u: "https://books.google.com/books/about/Understand_Your_Brain_Get_More_Done.html?id=BBUHywAACAAJ" },
  { t: "How Do So Many ADHD People Hold Down Jobs? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/102fgmg/how_the_fuck_do_so_many_adhd_people_hold_down_jobs/" },
  { t: "What Makes Work Sustainable for Adults With ADHD? Interpreting Workplace Strain and Support Through Reddit Data — Frontiers in Psychology", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2026.1820248/full" },
  { t: "Financial Judgment Determination in Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC8295146/" },
  { t: "Plain English Summary of the ADHD Taskforce Report — NHS England", u: "https://www.england.nhs.uk/long-read/plain-english-summary-of-the-adhd-taskforce-report/" },
  { t: "Non-Pharmacological ADHD Treatment — Australian ADHD Clinical Practice Guideline", u: "https://adhdguideline.aadpa.com.au/non-pharmacological/" },
  { t: "A Randomized Controlled Trial of CBT Therapy for Adults With ADHD With and Without Medication — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3414742/" },
  { t: "Misinformation Mayhem: The Effects of TikTok Content on ADHD Knowledge, Stigma, and Treatment-Seeking Intentions — European Child & Adolescent Psychiatry", u: "https://link.springer.com/article/10.1007/s00787-025-02769-8" },
  { t: "Anyone With ADHD Who Managed to Accomplish Ambitious Things? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1jh4syu/anyone_with_adhd_who_managed_to_accomplish/" },
  { t: "“Young Adults With ADHD and Their Involvement in Online Communities” — Callie Marie Ginapp, Yale", u: "https://elischolar.library.yale.edu/ymtdl/4179/" },
];

const LfcSources = () => (
  <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 ADHD clinical guidance, research into executive function and time perception during periods of change, and real accounts from people rebuilding structure after their world shifted. Here's where it comes from.
        </p>
      </div>

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

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

function LfcApp() {
  return (
    <main id="main">
      <LfcNav />
      <LfcHero />
      <LfcWhatLoopsDoes />
      <LfcRecognition />
      <LfcWhyItHappens />
      <LfcReframe />
      <LfcWhyLoopsWorks />
      <LfcHowItWorks />
      <LfcWhatsInside />
      <LfcSocialProof />
      <LoopsPricing bg="bg-base" />
      <LfcObjections />
      <LfcFAQ />
      <LfcFinalCTA />
      <LfcSources />
      <Footer />
    </main>
  );
}

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