/* Loops — "Actually Finish What You Start With ADHD" use-case page
   Quiet self-distrust from an accumulating pile. Five gaps: starting / time / resumption /
   shame / finish line. Unique section: starting and finishing are different skills. Unique
   objection: "I already know what to do". CTA lowest promise: finish one thing. */

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

const AFN_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 AfnNav = () => {
  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">
            {AFN_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">
              {AFN_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 AFN_HERO_BLOCKS = [
  {
    title: "Pick the thread back up",
    body: "A clear way back in after life pulls you away mid-task.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/></svg>),
  },
  {
    title: "Get a real read on time",
    body: "Support for the part of your brain that keeps misjudging how long things take.",
    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>),
  },
  {
    title: "Cross the actual finish line",
    body: "Help defining what \u201Cdone\u201D means, so things stop hovering at ninety percent.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 9.176 7.14 8.96 6.5 8.96c-.696 0-1.667.193-2.492.417A18 18 0 0 0 3 9.6v5.9a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.847 0 1.548.28 2.158.525l.028.01C9.32.782 9.86.998 10.5.998c.696 0 1.667-.193 2.492-.417A18 18 0 0 0 14 .3l.008-.003.002-.001h.001"/></svg>),
  },
];

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

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[54px] fade-in-up delay-1">
          You always start. The hard part is everything after that.
        </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">
          Starting isn't really your problem. It's the middle, the gap after an interruption, and the final stretch that quietly undo things, again and again.
        </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, an easy way back in after a gap, a clear sense of what done looks like, and, if you want it, <span className="text-ink font-medium">one person waiting to see it finished.</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">
        {AFN_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 AfnWhatLoopsDoes = () => (
  <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 the start.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most advice focuses on getting going. Loops focuses on what happens next: staying with a task once the novelty fades, finding your way back after an interruption, and recognising when something is actually finished.
          </p>
          <p>
            It gives you small daily actions, a way to pick things back up without starting over, and a clearer sense of what done actually looks like.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person who sees you doing it.</span> More on that just below.
          </p>
        </div>
        <div className="mt-8">
          <Button variant="primary" size="md" href="#start">Get Early Access</Button>
        </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Recognition (6 cards) ---------------- */

const AFN_RECOGNITION = [
  "You start strong, then a few days later you can't quite remember where you left off.",
  "Something is ninety percent done and has been for weeks. The last ten percent never happens.",
  "You genuinely thought you had more time than you did, again.",
  "A task gets interrupted and somehow never reopens.",
  "You finish in a last-minute sprint and feel both relieved and ashamed about how it happened.",
  "Every unfinished thing feels like more proof you can't be trusted to follow through.",
];

const AfnRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          You're not alone in this.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often when things don't get finished. 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">
        {AFN_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 care enough. It means the part after starting needs its own kind of support.
        </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 AFN_PATTERNS = [
  { title: "The starting gap", body: "A vague task is much harder to begin than a specific one. Until a task has a clear, small first move, it's reasonable for it to sit untouched." },
  { title: "The time gap", body: "Estimating how long something will take is genuinely harder for ADHD brains. That's why deadlines arrive feeling sudden, even when they were marked weeks in advance." },
  { title: "The resumption gap", body: "Picking a task back up after an interruption is its own separate skill. Losing the thread isn't carelessness. It's a known weak point in how ADHD affects working memory." },
  { title: "The shame gap", body: "Unfinished tasks tend to get filed away as proof of a personal flaw. That belief makes the next attempt feel riskier, which makes starting again even harder." },
  { title: "The finish line gap", body: "\u201CDone\u201D is often less obvious than it sounds. Without a clear definition, tasks can hover at nearly finished indefinitely." },
];

const AfnWhyItHappens = () => (
  <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 willpower problem. It's a chain with several weak links.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Finishing something asks for more than starting it. It asks you to keep going once it's no longer new, find your way back after a break, and recognise the moment it's actually over.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {AFN_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 something is wrong with you. They mean the chain needs support at more than one point.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: starting and finishing are different skills ---------------- */

const AfnReframe = () => (
  <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]">
          Starting and finishing are not the same skill.
        </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 assumes that once you've started, the rest takes care of itself. For a lot of people with ADHD, that's exactly backwards. The hardest moments are often in the middle, after the first burst of focus fades, or right at the end, when a task is nearly done but doesn't feel finished yet.
        </p>
        <p className="text-ink font-medium">
          That's why tips about getting started can work brilliantly and still leave the actual problem untouched. Finishing needs its own support, built for the messy middle and the final stretch, not just the first five minutes.
        </p>
      </div>
    </Container>
  </Section>
);

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

const AFN_WITNESS_CARDS = [
  { t: "The someone-waiting a task lacks", b: "A task only you are tracking has nothing outside your own fading interest holding it to the end. When you close a loop, they see it. When the thing is finally done, they see that too." },
  { t: "They don't chase you", b: "They don't have to nag you or chase you. 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: "The finish isn't only yours", b: "Suddenly the finish isn't only yours to hold, and someone waiting is often the difference between ninety percent and finished." },
];

const AfnWhyLoopsWorks = () => (
  <Section id="being-seen" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>The part most apps miss</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Brains finish for people, not for apps.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>Look at the last gap on that list: things hover at ninety percent because nobody is waiting for the finished version. A task only you are tracking has nothing outside your own fading interest holding it to the end.</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 it is. When you close a loop, they see it. When the thing is finally done, they see that too. When you pick it back up after a gap, that's seen as well, and it's 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">
        {AFN_WITNESS_CARDS.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.b}</p>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          You can start on your own if you'd rather. It still works. It just works better when someone can see you.
        </p>
      </div>
    </Container>
  </Section>
);

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

const AFN_STEPS = [
  { t: "Tell Loops what you're trying to finish", b: "Name the task in plain language, however unfinished or messy it currently is." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress, so the finish has someone waiting, not just you tracking it. You decide what they can see, and you can change it any time. This is the step most people skip with other apps, and the one that makes Loops work. On a Crew plan you can choose more than one." },
  { t: "Get one small daily action", b: "A short, specific next step each day. No need to plan the whole thing in advance. Close the loop, and your person sees it." },
  { t: "Pick it back up easily after a gap", b: "A missed day or a derailed week doesn't mean starting from scratch. Loops helps you find your way back in." },
  { t: "Know when it's actually done", b: "Loops helps you define what finished looks like before you start, so the last stretch doesn't drag on forever." },
];

const AfnHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Simple from day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new system for every task. Loops fits around what you're already trying to finish.
        </p>
      </div>

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

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

const AFN_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The task you're trying to finish, in your own words, however messy it is right now, along with what \u201Cdone\u201D actually means for it. Defining the finish line up front is what stops things hovering at ninety percent." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, giving you a clear next step so you never have to plan the whole thing in advance. Some run every day, some a few times a week: the next specific step, fifteen minutes on the last ten percent, reopening the thing you got interrupted on. A few connect to what you're finishing. 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 your progress: the loops you close, the moment it's done, and the times you pick it back up after a gap. The someone-waiting an unfinished task usually lacks. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: the interrupted thing reopened, the last ten percent finally done, a finish that wasn't a last-minute sprint. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows what you're finishing and where the chain tends to break, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when you've lost the thread or the last stretch has stalled, with the next small step, not a reminder of how long it's been sitting." },
];

const AfnWhatsInside = () => (
  <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">
        {AFN_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 AFN_TESTIMONIALS = [
  { quote: "I had three things at ninety percent for over a year. Having a clear sense of what 'done' meant for each one was what finally moved them.", who: "Graphic designer", meta: "Diagnosed with ADHD at 31" },
  { quote: "I used to lose a project completely if I got interrupted halfway through. Now I have a way back in, instead of starting over every time.", who: "University student", meta: "Using Loops for 4 months" },
  { quote: "I always knew what to do. I just couldn't seem to keep going once the new feeling wore off. This helped with the middle, not just the start.", who: "Operations manager, Leeds", meta: null },
];

const AfnSocialProof = () => (
  <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">
        {AFN_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 AFN_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the thing you're finishing.", 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 AfnPricing = () => (
  <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. Built for it.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {AFN_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-white p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          <span className="font-semibold text-ink">Prefer to pay yearly?</span> A year of it, together, with two months free. Every plan starts with a 7-day free trial. On iOS for now.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Objections (5, incl. 'I already know what to do' + share) ---------------- */

const AFN_OBJECTIONS = [
  { q: "\u201CI already know what I need to do. Knowing isn't the problem.\u201D", a: "You're right, and that's exactly what this is built around. Loops doesn't focus on teaching you what to do. It focuses on the gap between knowing and actually following through." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", a: "No. Solo works perfectly well on its own. But most people find it works better when one person can see them, because a finish with someone waiting is far more likely to happen. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI've tried tips for starting tasks before. They didn't help.\u201D", a: "Most advice stops at the first five minutes. Loops is built around the middle and the end too, where a lot of ADHD finishing problems actually happen." },
  { q: "\u201CWhat if I get derailed again halfway through?\u201D", a: "That's expected, not a failure. Loops is designed to help you pick a task back up easily, rather than assuming you'll never get interrupted." },
  { q: "\u201CI don't have time to learn another system.\u201D", a: "There's no system to learn. Setup takes a few minutes, and each day asks for one small, specific action." },
];

const AfnObjections = () => (
  <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">
        {AFN_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 AFN_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. For finishing things, it focuses on one small daily action, one person who sees your progress, easy resumption after interruptions, and a clear sense of what done looks like." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see your progress: the loops you close, the moment it's done, and the times you pick it back up after a gap. They don't chase you or nag you. Things hover at ninety percent because nobody is waiting, and one person waiting is often the difference between ninety percent and finished. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with finishing things if you have ADHD?", a: "It breaks a task into one small daily step, helps you find your way back in after a gap or interruption, and helps you define what finished actually means before you start." },
  { q: "Why is finishing harder than starting with ADHD?", a: "Finishing asks for sustained attention, accurate time judgement, and the ability to resume after interruption. Each of these is affected by how ADHD impacts working memory, time perception, and motivation, separately from the act of starting." },
  { 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 me needing last-minute sprints altogether?", a: "We can't promise that entirely, but Loops is built to reduce how often you rely on one, by supporting the steady middle stretch rather than only the deadline." },
  { q: "What if I've already tried lots of productivity apps?", a: "That's common. Loops is built around the specific gaps that tend to break ADHD follow-through, like resumption and defining done, rather than general task management." },
  { q: "How long does it take to see results?", a: "Some people notice a difference in how a task feels within the first week or two. Finishing larger or longer-running things usually takes a few consistent weeks." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

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

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

const AfnFinalCTA = () => (
  <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>Finish one thing</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]">
            Finish one thing. Not everything.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need a complete overhaul of how you work. You need today's step on one thing that's been waiting, and, if you want, one person waiting to see it done.
          </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 AFN_SOURCES = [
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/Recommendations" },
  { 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: "Emotion Dysregulation in Adults With ADHD: A Meta-Analysis — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/32164655/" },
  { t: "Using the Temporal Motivation Theory to Explain the Relation Between ADHD and Procrastination — Australian Psychologist", u: "https://www.researchgate.net/publication/375770156_Using_the_temporal_motivation_theory_to_explain_the_relation_between_ADHD_and_procrastination" },
  { t: "Stress and Work-Related Mental Illness Among Working Adults With ADHD: A Qualitative Study — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36451126/" },
  { t: "The Relation Between Procrastination and Symptoms of ADHD in Undergraduate Students — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/24992694/" },
  { t: "Time Perception in Adult ADHD: Findings From a Decade — A Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "ADHD, Executive Function and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "Experiences of Criticism in Adults With ADHD: A Qualitative Study — White Rose Research Online", u: "https://eprints.whiterose.ac.uk/id/eprint/183986/1/journal.pone.0263366.pdf" },
  { t: "Favourite Strategies for Initiating Tasks With ADHD — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/12r51k7/what_are_your_favorite_strategies_for_initiating/" },
  { t: "Cognitive-Behavioural and Skills-Based Intervention Research in ADHD — Journal of the American Academy of Child & Adolescent Psychiatry", u: "https://www.jaacap.org/article/S0890-8567(24)00304-6/fulltext" },
  { t: "Effectiveness of Cognitive Behavioural-Based Interventions for Adults With ADHD Extends Beyond Core Symptoms: A Meta-Analysis of RCTs — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36794797/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — Frontiers in Psychology", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" },
  { t: "Evaluating the Evidence: A Systematic Review of Reviews of the Effectiveness and Safety of Digital Interventions for ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12016436/" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD: A Systematic Review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36608036/" },
];

const AfnSources = () => (
  <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 clinical guidance, research into executive function, time perception and emotion regulation, and real accounts from people with a habit of finishing things at the last possible minute. Here's where it comes from.
        </p>
      </div>

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

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

function AfnApp() {
  return (
    <main id="main">
      <AfnNav />
      <AfnHero />
      <AfnWhatLoopsDoes />
      <AfnRecognition />
      <AfnWhyItHappens />
      <AfnReframe />
      <AfnWhyLoopsWorks />
      <AfnHowItWorks />
      <AfnWhatsInside />
      <AfnSocialProof />
      <LoopsPricing bg="bg-soft" />
      <AfnObjections />
      <AfnFAQ />
      <AfnFinalCTA />
      <AfnSources />
      <Footer />
    </main>
  );
}

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