/* Loops — "Stay Focused Long Enough to Make Progress With ADHD" use-case page
   Self-awareness/competence guardrails: "You can focus" in H1 before any failure, every
   mechanism neurological, active avoidance framed as often involuntary, interest-based focus
   agreed with then contextualised, winning proportionate. Unique section: externalise focus. */

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

const FOC_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 FocNav = () => {
  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">
            {FOC_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">
              {FOC_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 FOC_HERO_BLOCKS = [
  {
    title: "Start the session",
    body: "One specific, low-friction way in, for the days when starting feels impossible.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/></svg>),
  },
  {
    title: "Build conditions that help",
    body: "External structure rather than willpower. The kind that works even when motivation doesn't.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.263 63 63 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793z"/></svg>),
  },
  {
    title: "Make something real",
    body: "A session where something existed at the end that didn't at the beginning.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .472-.696L7.4.184l.001-.001.011-.005.014-.005.013-.005.011-.004.012-.004.014-.004.014-.004.011-.003.013-.003.013-.003.011-.002.014-.002.014-.002.011-.001L8.096 0h.088l.011.001.014.002.014.002.011.002.013.003.013.003.011.003.014.004.014.004.012.004.011.004.013.005.014.005.011.005.001.001zM8 4.577 5.771 5.7 2.545 3.9l2.005-.802zm-6.545 6.19v-6.19L8 7.5v6.19z"/></svg>),
  },
];

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

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[46px] lg:text-[56px] fade-in-up delay-1">
          You can focus. You just can't make it happen when you need it.
        </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">
          ADHD attention doesn't disappear. It arrives and leaves on its own schedule. The problem isn't concentration. It's that concentration won't come when called.
        </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 low-friction ways into the work each day, coaching for when the session stalls, and, if you want it, <span className="text-ink font-medium">one person whose quiet attention makes the session more likely to happen.</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">
        {FOC_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 FocWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="grid items-center gap-10 lg:grid-cols-2 lg:gap-14">
        <div className="lg:order-1 flex justify-center"><LoopsGalleryPhone /></div>
        <div className="max-w-prose lg:order-2">
        <Kicker>How Loops helps</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          A daily system that builds the conditions for focus, rather than relying on it showing up.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most focus advice assumes the problem is distraction. Remove the phone, close the tabs, find a quiet room. For ADHD brains, the problem is more specific: attention doesn't respond reliably to conditions. It responds to interest, urgency, and novelty. When none of those are present, the session doesn't happen regardless of how distraction-free the environment is.
          </p>
          <p>
            Loops gives you specific session prompts each day, structures the entry point so that starting doesn't require a decision, and coaches you through the moments when the work usually stops. Not a focus hack. A daily structure that makes the session more likely to happen and more likely to produce something.
          </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 FOC_RECOGNITION = [
  "You sat down to work an hour ago. You've produced nothing. You're not sure where the time went.",
  "When you're interested, you're completely absorbed. When you're not, you can't manufacture even ten minutes of useful concentration.",
  "You opened a browser tab to look one thing up. Forty minutes later, you're not sure how you got here.",
  "You started cleaning instead. You knew what you were doing. You did it anyway.",
  "You have the skills. You have the knowledge. You have everything you need except the ability to sit with the work long enough to use any of it.",
  "You've watched other people settle into sustained work and thought: genuinely, how do they do that?",
];

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

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {FOC_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">
          This isn't a focus deficit. It's a focus regulation problem. And it responds to a very different kind of support than "try harder."
        </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 patterns) ---------------- */

const FOC_PATTERNS = [
  { title: "Moment-to-moment variability", body: "ADHD attention doesn't stay flat. It spikes and crashes independent of effort or intention. Research documents high moment-to-moment variability in ADHD attention and arousal. This explains why the same task can feel manageable one hour and completely impossible the next, without anything external having changed." },
  { title: "Interest as the only reliable fuel", body: "ADHD brains run on interest, novelty, and urgency. When none of those are present, focus doesn't activate regardless of how important the task is. This is the fundamental mismatch between ADHD attention and most work: importance doesn't motivate the way urgency does, and significance tomorrow doesn't compete with stimulation now." },
  { title: "Active avoidance", body: "When a task feels too difficult to start, the brain switches to something easier. Not passively. Actively. The research names this specifically: cleaning, browsing, and reorganising are common ADHD avoidance responses to difficulty. The switch feels involuntary because it often is." },
  { title: "The competency ceiling", body: "\u201CIf I can't do it immediately, what's the point?\u201D isn't perfectionism. It's delay aversion. ADHD brains discount future rewards steeply, which means the effort of a hard session feels disproportionate to benefits that won't arrive for days or weeks. The result is a specific kind of stalling that looks like procrastination but has a different cause." },
  { title: "The session guilt loop", body: "A lost session doesn't just waste time. It makes the next session harder to start. When a work session fails to produce output, the guilt and shame that follow add emotional weight to every subsequent attempt. The task gains a reputation as something that goes badly, making entry harder each time." },
];

const FocWhyItHappens = () => (
  <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 distraction. It's variability. And the difference matters.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          ADHD attention doesn't work the way most focus advice assumes. Understanding the specific mechanisms changes what actually helps.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {FOC_PATTERNS.map((p, i) => (
          <li key={p.title} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex flex-col gap-4 sm:flex-row sm:gap-7">
              <span className="text-[40px] font-semibold tracking-tight3 text-brand-deep tnum leading-none sm:w-16 sm:shrink-0">{String(i + 1).padStart(2, "0")}</span>
              <div className="max-w-prose">
                <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">{p.title}</h3>
                <p className="mt-2.5 text-[15.5px] sm:text-[16px] leading-[1.65] text-ink-2 text-pretty">{p.body}</p>
              </div>
            </div>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">Loops is designed to interrupt these patterns before they compound into another empty afternoon.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: externalise focus ---------------- */

const FocReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>The insight that changes what preparing for a session looks like</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 most effective focus support isn't trying harder. It's building better conditions.
        </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 focus advice is about generating focus from the inside: remove distractions, sit down, try harder. For ADHD brains, this approach competes directly with internal motivation that is unreliable by design. When the motivation isn't there, trying harder to generate focus through willpower is precisely the most effortful and least effective intervention available.
        </p>
        <p className="text-ink font-medium">
          What works better is externalising the conditions that produce focus: a prompt that shows up at the right moment, a structure that makes entry low-friction, a session size calibrated to what's actually possible today. The environment does the work that motivation can't. This isn't a workaround. It's how ADHD focus actually functions when it functions well.
        </p>
      </div>
    </Container>
  </Section>
);

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

const FOC_WITNESS_CARDS = [
  { t: "A person is external structure", b: "Focus responds to conditions, not willpower, and another person is one of the strongest conditions there is. When someone can see the session happen, the work stops being purely internal, which is exactly where ADHD attention struggles." },
  { t: "They don't supervise you", b: "They don't have to nag you or check your output. 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: "It's body doubling, built in", b: "The thing that makes body doubling work, someone else present while you work, without needing to book a call or share a room. One person whose quiet attention makes the session more likely." },
];

const FocWhyLoopsWorks = () => (
  <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>There's a reason so many people with ADHD get more done in a café, on a call with the camera on, or sitting near someone else working. It's called body doubling, and it works because another person is external structure the brain can borrow when its own won't switch on.</p>
          <p>So Loops builds that in. 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 you get back to the work after a stalled day, they see that too, 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">
        {FOC_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 FOC_STEPS = [
  { t: "Tell Loops what you're working on", b: "Name the task or project. How much time you have. What a productive session looks like for today, not the ideal version. Plain language. No setup." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress, so the session has a bit of built-in body doubling. 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: a small body-doubling pod." },
  { t: "Get specific session prompts", b: "Each day, Loops gives you specific, low-friction ways into the work. Something concrete enough to start on immediately, sized to the day you're actually having rather than the day you planned. Close the loop, and your person sees it." },
  { t: "Get coached through the stall", b: "Session grinding to a halt? Loops gives you a practical next action rather than a reminder of what you haven't done. Not motivation. Just the next smallest thing." },
  { t: "End the session with something real", b: "Not a perfect output. Not everything done. Something that existed at the end that didn't at the beginning. That's enough." },
];

const FocHowItWorks = () => (
  <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]">
          One session. Made as easy as possible to enter. Today.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to wait until you feel ready. Loops is designed to make the session possible from exactly where you are.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {FOC_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 focus to show up before you start. You need a structure that makes starting possible. That's what Loops is for.
      </p>
    </Container>
  </Section>
);

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

const FOC_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The task or project you're trying to focus on, described your way, and what a good enough session looks like today. Not the ideal version. Just a clear target, so each session has somewhere to point." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, built as a low-friction way into the work rather than a block of willpower. Some run every day, some a few times a week: open the file and write one line, fifteen minutes on the hard thing, one session before lunch. A few connect to the work. Others are just life, like taking your meds before breakfast. A stalled day is a data point, not a failure. The next small entry point is still there whenever you come back." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the sessions that happened. Built-in body doubling, the thing that makes working near someone else work, without booking a call or sharing a room. On a Crew plan it can be more than one: a small body-doubling pod." },
  { t: "Rewards you can feel", b: "Because the payoff of a session can feel days away, you promise yourself something for the moments that matter: a week of sessions that actually happened, the hard thing finally started, a run of focused days. 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 working on and where your sessions tend to stall, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when you've been staring at the screen for an hour, with a concrete way back in rather than a lecture." },
];

const FocWhatsInside = () => (
  <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">
        {FOC_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 FOC_TESTIMONIALS = [
  { quote: "I spent two years thinking the problem was distraction. I removed every distraction I could find. The sessions still didn't happen. Loops helped me understand the problem was the entry point, not the environment. Now I have one.", who: "Freelance writer", meta: "Diagnosed with ADHD at 28" },
  { quote: "I can hyperfocus for six hours on something I love. I couldn't get twenty minutes on something I needed. Loops didn't fix that gap. It gave me a structure for the need-to side that didn't depend on the love-to side.", who: "Data analyst", meta: "Using Loops for 9 weeks" },
  { quote: "A session that actually produced something. That's all I wanted. Loops helped me make that happen more consistently than I ever have before.", who: "Architect, Birmingham", meta: null },
];

const FocSocialProof = () => (
  <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">
        {FOC_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 FOC_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the work.", featured: false },
  { name: "Duo", price: "\u00A312.99", per: "/mo", tag: "The one we'd pick", blurb: "Everything, for two. You and your person, both with the full app, on one bill. Three pounds more than going alone, for the thing that makes it work.", featured: true },
];

const FocPricing = () => (
  <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">
        {FOC_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. interest-based focus 1st) ---------------- */

const FOC_OBJECTIONS = [
  { q: "\u201CI focus fine when I'm interested. The problem is boring tasks.\u201D", a: "That's exactly right. And it's exactly the problem Loops is built for. Interest-based focus is real and valuable. But the tasks that matter most often don't self-select for interest. Loops gives you the entry structure for the sessions where interest isn't enough to get you started." },
  { 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, partly because that quiet attention is body doubling built in. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI just need to remove distractions. That's all.\u201D", a: "Distraction removal helps. It doesn't solve the entry problem. ADHD attention doesn't respond to a distraction-free environment the way other brains do. External structure that prompts and scaffolds the session works better than willpower-based distraction management." },
  { q: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns here feel familiar. If that's you, Loops is built for you." },
  { q: "\u201CWhat if I just can't focus today at all?\u201D", a: "That's what the session prompt is sized for. On days when focus isn't available, Loops gives you something small enough to be possible anyway. Even a very small session produces more than no session, and it keeps the work accessible for tomorrow." },
];

const FocObjections = () => (
  <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">
        {FOC_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 FOC_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. It combines personalised coaching, daily micro-actions, one person who sees your progress, and accountability in one system. For focus specifically, it provides the entry structure for work sessions that ADHD makes difficult to initiate and sustain." },
  { 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 and the sessions that happened. It's body doubling built in, the reason so many people with ADHD focus better near someone else, without booking a call or sharing a room. They don't supervise you or nag you. 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: a small body-doubling pod." },
  { q: "How does Loops help with focus if you have ADHD?", a: "It removes the decision of how to enter the work by giving you one specific, low-friction session prompt each day. It also coaches you through the moments when the session stalls, so a difficult start doesn't mean an empty afternoon." },
  { q: "Why does ADHD make focus so unpredictable?", a: "ADHD involves high moment-to-moment variability in attention and arousal that isn't under voluntary control. Focus activates reliably in response to interest, novelty, and urgency, but not in response to importance or intention. This is why the same task can feel possible one day and completely unmanageable the next." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the experiences described here feel familiar, Loops is built for you." },
  { q: "Is Loops a focus app like a Pomodoro timer?", a: "No. Pomodoro timers structure time once you're already in the work. Loops addresses what happens before that: the entry point, the session prompt, and the coaching when things stall. It works well alongside a timer if that helps you once you're started." },
  { q: "What if a session produces very little?", a: "A small output is still an output. Loops is designed to keep the work accessible rather than optimal, so a low-productivity session doesn't become a reason to avoid the next one." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "How long before focus sessions start going better?", a: "Most people notice a shift within two to three weeks, less in how focused they feel and more in how often sessions actually happen. Improved session quality usually comes later, as the structure becomes more established." },
];

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

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

const FocFinalCTA = () => (
  <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>A session that happened</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]">
            A session where something gets done. That's enough to start.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not sustained flow. Not a perfect afternoon. Just the work moving forward, in a session that happened rather than one that didn't, and, if you want, one person who makes that session a little more likely.
          </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 FOC_SOURCES = [
  { t: "208 Evidence-Based Conclusions About the Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33549739/" },
  { t: "Attention-Deficit/Hyperactivity Disorder (ADHD) in Adults — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12434367/" },
  { t: "Benefits and Harms of ADHD Interventions — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/41297970/" },
  { t: "Attention-Deficit/Hyperactivity Disorder (ADHD) in Adults — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11500298/" },
  { t: "Executive Functioning Heterogeneity in Pediatric ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC6204311/" },
  { t: "Evaluating Dopamine Reward Pathway in ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC2958516/" },
  { 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: "The Experience of Effort in ADHD: A Scoping Review — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11184226/" },
  { t: "How Do You Manage Task Initiation Paralysis When... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1m7a38c/how_do_you_manage_task_initiation_paralysis_when/" },
  { t: "“My Only Productivity Comes From Panic.” — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/133v10m/my_only_productivity_comes_from_panic/" },
  { t: "Hyperfocus in ADHD: A Misunderstood Cognitive Phenomenon — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12437476/" },
  { t: "How Do You Get ANY Work Done? What's Your Strategy? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/qbx63y/how_do_you_get_any_work_done_whats_your_strategy/" },
  { t: "Experiences of Criticism in Adults With ADHD: A Qualitative Study — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC8856522/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9443814/" },
  { t: "Sleep Problems in Adults With ADHD: Prevalences and... — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/39354860/" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "A Systematic Review and Component Network Meta-Analysis of ADHD Interventions — The Lancet Psychiatry", u: "https://www.thelancet.com/journals/lanpsy/article/PIIS2215-0366%2824%2900360-2/fulltext" },
  { t: "Coaching for Adults With ADHD: A Prospective Study — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC13031141/" },
  { t: "Evaluating the Evidence: A Systematic Review of Digital Interventions for ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12016436/" },
  { t: "Systematic Review and Meta-Analysis: Do White Noise or Pink Noise Improve Attention in ADHD? — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/38428577/" },
  { t: "ADHD Management Information, May 2025 — NHS Digital", u: "https://digital.nhs.uk/data-and-information/publications/statistical/mi-adhd/may-2025" },
  { t: "Living Well With Adult ADHD: Practical Strategies for Improving Your Daily Life — Knouse & Barkley, Routledge", u: "https://www.routledge.com/Living-Well-with-Adult-ADHD-Practical-Strategies-for-Improving-Your-Daily-Life/Knouse-Barkley/p/book/9781462555123" },
  { t: "Motivation Deficit in ADHD Is Associated With Dysfunction of the Dopamine Reward Pathway — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3010326/" },
  { t: "Moderating Effect of Attention Deficit Hyperactivity Disorder... — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10070913/" },
  { t: "Self-Compassion in University Students With ADHD — Sage Journals", u: "https://journals.sagepub.com/doi/full/10.1177/21676968261417727" },
  { t: "If I Read “Try the Pomodoro Method” One More Time I'm Going... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/ord1y1/if_i_read_try_the_pomodoro_method_one_more_time/" },
  { t: "Work-MAP Telehealth Metacognitive Work-Performance Intervention — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC10336612/" },
  { t: "Adult ADHD Assessments and Diagnosis — PREPARE, University of York", u: "https://www.york.ac.uk/media/healthsciences/images/research/prepare/reportsandtheircoverimages/Adult-ADHD-Assessments-PREPARE-May-2025.pdf" },
  { t: "What Can Adults With ADHD Tell Us About Their Experiences? A Review of Qualitative Methods to Map a New Research Agenda — Unbound Medicine", u: "https://www.unboundmedicine.com/medline/citation/40685894/What_Can_Adults_With_ADHD_Tell_Us_About_Their_Experiences__A_Review_of_Qualitative_Methods_to_Map_a_New_Research_Agenda" },
  { t: "CBT for Adult ADHD: From Intention to Action — Psychwire", u: "https://psychwire.com/free-resources/q-and-a/15i4yzk/cbt-for-adult-adhd-from-intention-to-action" },
];

const FocSources = () => (
  <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 ADHD clinical guidelines, research into attention variability, reward processing and time perception, and real accounts from people who can focus completely on some things and not at all on others. Here's where it comes from.
        </p>
      </div>

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

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

function FocApp() {
  return (
    <main id="main">
      <FocNav />
      <FocHero />
      <FocWhatLoopsDoes />
      <FocRecognition />
      <FocWhyItHappens />
      <FocReframe />
      <FocWhyLoopsWorks />
      <FocHowItWorks />
      <FocWhatsInside />
      <FocSocialProof />
      <LoopsPricing bg="bg-soft" />
      <FocObjections />
      <FocFAQ />
      <FocFinalCTA />
      <FocSources />
      <Footer />
    </main>
  );
}

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