/* Loops — "Feel Less Overwhelmed With ADHD" use-case page
   Wellbeing guardrails: cognitive shutdown named without catastrophising, GP signpost in
   objection 4 + standalone FAQ, lowest-floor "can't face the one action" FAQ, nothing
   implies managing alone. Unique section: the decision load reframe. */

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

const OVW_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 OvwNav = () => {
  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">
            {OVW_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">
              {OVW_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 OVW_HERO_BLOCKS = [
  {
    title: "One thing at a time",
    body: "Not a list. One clear next action, chosen for you.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10m0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12"/><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/><path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></svg>),
  },
  {
    title: "Reduce the decision load",
    body: "Less time negotiating with yourself about where to start.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Get through the day",
    body: "Not perfectly. Just through it, with something real done.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/><path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0z"/></svg>),
  },
];

const OvwHero = () => (
  <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-[36px] sm:text-[50px] lg:text-[58px] fade-in-up delay-1">
          Everything feels urgent. So nothing gets done.
        </h1>

        <p className="mx-auto mt-7 max-w-2xl text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
          It's not a motivation problem. For many people with ADHD, overwhelm doesn't look like panic. It looks like paralysis. And it's caused by something more specific than having too much to do.
        </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 helps to make decisions for you each day, coaching for when the overwhelm wins, and, if you want it, <span className="text-ink font-medium">one person quietly in your corner.</span>
        </p>

        <div className="mt-9 flex flex-col items-center gap-3 fade-in-up delay-3">
          <Button variant="primary" size="lg" href="#start">
            Get Early Access
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Button>
          <span className="text-[13.5px] text-ink-3">Free for 7 days. No complicated setup. On iOS for now.</span>
        </div>
      </div>

      {/* Three icon blocks */}
      <p className="mt-14 lg:mt-16 text-center text-[12px] font-semibold uppercase tracking-[0.14em] text-brand-deep fade-in-up delay-4">Three things Loops does for you</p>
      <div className="mx-auto mt-6 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {OVW_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 OvwWhatLoopsDoes = () => (
  <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 makes one decision for you, so you can make the rest.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most solutions to overwhelm add more to manage: a better system, a clearer list, a more organised approach. For ADHD brains already at capacity, that's the last thing that helps.
          </p>
          <p>
            Loops works differently. It gives you specific actions each day, removes the decision of where to start, and coaches you through the moments when the overwhelm usually wins. Less to manage. More actually done.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person who gently sees you doing it.</span> More on that just below.
          </p>
        </div>
        <div className="mt-8">
          <Button variant="primary" size="md" href="#start">Get Early Access</Button>
        </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

const OVW_RECOGNITION = [
  "You know exactly what needs doing. You've known all morning. You still haven't started any of it.",
  "Everything feels equally urgent, so you can't work out what to do first, so you do something that doesn't matter instead.",
  "You spend an hour setting up a system to manage your tasks and then don't touch the actual tasks.",
  "You were fine until one thing went wrong. Then the whole day collapsed, and by evening you'd done almost nothing.",
  "You've tried the planners, the colour-coded calendars, the apps. They help for a few days. Then they become another thing you've abandoned.",
  "You know this isn't laziness. You just can't explain why you're still sitting here an hour later having not started.",
];

const OvwRecognition = () => (
  <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 overwhelm.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {OVW_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 willpower problem. ADHD changes how the brain prioritises under pressure, and most tools weren't built with that in mind.
        </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 OVW_PATTERNS = [
  { title: "Decision paralysis", body: "When everything feels urgent, the brain can't prioritise. So it stops. ADHD impairs the executive function needed to evaluate options and choose a starting point, which means a full to-do list often produces less action than an empty one." },
  { title: "Cognitive shutdown", body: "Overwhelm in ADHD doesn't always look like stress. It can look like nothing at all. When cognitive load exceeds capacity, ADHD brains can shift into a low-arousal shutdown state: not panicking, not avoiding, just frozen. This isn't a choice and it isn't laziness." },
  { title: "The failed-system guilt loop", body: "Trying a system that collapses under real life doesn't just waste time. It leaves shame behind. Each abandoned planner, app, or routine adds evidence to the internal story that the problem is personal rather than structural, making the next attempt feel higher stakes and harder to start." },
  { title: "Early cognitive fatigue", body: "ADHD brains work harder to filter and process the same information. They burn out sooner. What looks like an ordinary day from the outside can be genuinely exhausting by lunchtime, leaving less capacity for the afternoon's decisions than most people would expect." },
  { title: "The all-or-nothing day", body: "One disruption shouldn't end the day. With ADHD, it often does. A missed meeting, a difficult conversation, or a task that took twice as long can tip an already-stretched system into collapse, turning a hard morning into a lost day." },
];

const OvwWhyItHappens = () => (
  <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 too much to do. It's what happens when the brain can't sort it.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          ADHD overwhelm follows specific patterns that more effort and better systems don't fix. Each one has a structural cause.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {OVW_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 with the smallest possible intervention: one clear action, before the overwhelm sets in.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the decision load reframe ---------------- */

const OvwReframe = () => (
  <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 before anything else</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]">
          Deciding what to do next is itself the task that uses up the energy to do it.
        </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 for overwhelm adds a decision: choose a system, pick a method, prioritise your list. But for an ADHD brain already at capacity, the act of deciding what to do next is an executive function task that draws on exactly the same resources needed to do anything.
        </p>
        <p className="text-ink font-medium">
          This is why "just make a list" so often fails. The list creates new decisions. Deciding which item is most important, which is most urgent, which can wait, requires the kind of sustained cognitive effort that overwhelm has already depleted. The intervention that helps isn't a better list. It's one fewer decision to make before starting.
        </p>
      </div>
    </Container>
  </Section>
);

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

const OVW_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. The one real thing you did today, seen. They just get to see you get through the day with something done, and cheer you on." },
  { t: "Nothing to manage or decide", b: "They don't add a single thing for you to manage or decide. They don't nag, 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 weight eases", b: "On the days it all feels like too much, one person quietly in your corner takes a little of the weight off." },
];

const OvwWhyLoopsWorks = () => (
  <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>Overwhelm is quiet, and it's lonely. From the outside it can look like nothing at all, which makes it hard to explain and easy to carry by yourself. So you do, and the weight builds.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, whoever feels safe. When you close a loop, they see it. The one real thing you did today, seen. 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">
        {OVW_WITNESS_CARDS.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.b}</p>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          And if you'd rather keep this to yourself, that's completely fine. Solo works on its own. Your person is there for if and when you want it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const OVW_STEPS = [
  { t: "Tell Loops what's weighing on you", b: "Name the area where the overwhelm is worst: work tasks, home admin, personal commitments. Plain language. No categories to set up." },
  { t: "Choose your person, if you want one", b: "Pick one person you trust to see your progress. You decide exactly what they can see, and you can change it any time. They add nothing for you to manage or decide: they simply see what you already do. This is the step most people skip with other apps, and the one that makes Loops work. It's entirely optional. On a Crew plan you can choose more than one." },
  { t: "Get small things to do today", b: "Each day, Loops gives you specific, low-friction actions. Not a list to sort. Not a priority to determine. One thing, chosen to be as easy as possible to start right now. Close the loop, and your person sees it." },
  { t: "Get coached when the day goes sideways", b: "Something went wrong and the rest of the day is collapsing? Loops gives you one practical next step rather than a reminder of everything else you haven't done." },
  { t: "Get through the day with something real done", b: "One completed action makes the next one easier. Over time, that changes what a normal day feels like." },
];

const OvwHowItWorks = () => (
  <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 thing. Decided for you. Every day.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to fix the overwhelm before you start. Loops works in the middle of it.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {OVW_STEPS.map((s, i) => (
          <li key={s.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex items-center gap-3">
              <span className="flex h-9 w-9 items-center justify-center rounded-pill bg-brand text-white text-[14px] font-bold tnum shadow-cta">{i + 1}</span>
              <span className="text-[11px] font-semibold uppercase tracking-[0.1em] text-brand-deep">Step {i + 1}</span>
            </div>
            <h3 className="mt-4 text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{s.t}</h3>
            <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{s.b}</p>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need to be ready. One action today is enough.
      </p>
    </Container>
  </Section>
);

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

const OVW_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The area where the overwhelm is worst, described your way: work tasks, home admin, personal commitments. No categories. Just a clear sense of where you want the load to ease, so Loops knows where to point." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, decided for you so it's one fewer thing to work out. Some run every day, some a few times a week: the one email that's been hanging over you, ten minutes on the pile, the call you've been putting off. A few connect to what's weighing on you. 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 chosen for you." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the days you got through. They add nothing for you to manage, they simply see what you already do. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something kind for the moments that matter: a day you got through with something real done, a week you didn't lose to a single bad morning, the first time deciding didn't defeat you. Loops holds the promise and calls it in when you've earned it, and your person gets to see it too." },
  { t: "A coach who knows your whole story", b: "An AI coach built for ADHD. It already knows what's weighing on you and where the overwhelm tends to win, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when something's gone wrong and the whole day is tipping over, with one practical next step, not a reminder of everything else you haven't done." },
];

const OvwWhatsInside = () => (
  <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">
        {OVW_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 OVW_TESTIMONIALS = [
  { quote: "I used to spend half the morning deciding what to do and then feel too exhausted and guilty to do any of it. Loops taking that decision away from me was more useful than any system I'd ever tried.", who: "Freelance consultant", meta: "Diagnosed with ADHD at 36" },
  { quote: "I didn't understand why I kept freezing. I thought I just needed a better planner. It wasn't a planning problem. Loops helped me understand that and gave me something small enough to actually start.", who: "Secondary school administrator", meta: "Using Loops for 8 weeks" },
  { quote: "Getting to the end of a day with one real thing done, when before I'd have nothing, is bigger than it sounds.", who: "Writer and parent, Edinburgh", meta: null },
];

const OvwSocialProof = () => (
  <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">
        {OVW_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 OVW_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you, one thing at a time.", 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 OvwPricing = () => (
  <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">
        {OVW_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. GP signpost) ---------------- */

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

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;I've tried breaking tasks down and it still doesn't help.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Breaking tasks down is useful. But it doesn't remove the decision of which task to break down first. For many people with ADHD, the block isn't task size. It's the moment of choosing what to start. Loops removes that moment rather than improving what comes after it.</p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;Do I have to share my progress with anyone?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">No. Solo works perfectly well on its own, and this can stay completely private. If you'd like someone alongside you, they add nothing for you to manage, they just see what you already do. You decide what your person sees, and you can add them whenever you're ready.</p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;I'm just bad at managing my time.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Time management is an executive function skill. ADHD specifically impairs executive function. This isn't a character trait. The research is consistent that ADHD changes how the brain filters, prioritises, and sustains effort. A different kind of support is more useful than more discipline.</p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;What if I'm not diagnosed?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns here feel familiar. If that's you, Loops is built for you.</p>
        </article>
        <article className="rounded-card border border-brand/25 bg-brand-soft/50 p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;What if the overwhelm is more serious than this?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">It might be, and it's worth taking seriously. If you're experiencing persistent cognitive shutdown, burnout, or distress that's significantly affecting your daily life, speaking with your doctor is a genuinely good idea. Loops works well alongside professional support, but it's not a substitute for it.</p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/support/find-help/">Find help now</Button></div>
        </article>
      </div>
    </Container>
  </Section>
);

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

const OVW_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 overwhelm specifically, it helps by removing one key decision each day and coaching you through the moments when the overwhelm usually wins." },
  { 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 days you got through. They add nothing for you to manage or decide, they simply see what you already do. They don't nag or manage you. You don't have to add one to start, and this can stay completely private, 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 overwhelm if you have ADHD?", a: "It gives you one specific action each day rather than a list to sort. The decision of where to start has already been made. What's left is a single low-friction thing to do, sized for how the day is actually going." },
  { q: "Why does ADHD cause overwhelm even on ordinary days?", a: "ADHD impairs the executive functions needed to filter, prioritise, and begin. That means ordinary cognitive load, the kind most people manage without noticing, requires significantly more effort from an ADHD brain. The result isn't weakness. It's a system running at a higher baseline cost." },
  { 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: "Should I see a doctor or therapist as well?", a: "If the overwhelm is significantly affecting your daily life or feels unmanageable, yes. Loops is a daily coaching tool that works well alongside professional support, but it's not a replacement for it.", support: true },
  { q: "What if I can't even face the one action Loops gives me?", a: "That's useful information, not a failure. Loops can adjust to give you something smaller. There's no lower limit on how small a useful action can be." },
  { 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 the overwhelm starts to ease?", a: "Most people notice a shift within the first two weeks, less in how much they're getting done and more in how much of the day the frozen feeling takes up. Reducing the baseline level of overwhelm usually takes longer, and Loops is designed to make that achievable." },
];

const OvwFAQItem = ({ q, a, support, 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">{support ? <>{a} You can find crisis lines and support by country on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.</> : a}</p>
    </div>
  </details>
);

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

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

const OvwFinalCTA = () => (
  <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>Through today</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            One real thing done today.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a cleared inbox. Not a perfect day. Just through it, with something to show for it, and, if you want, one person who sees you get there.
          </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 OVW_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Taking Charge of Adult ADHD — Russell A. Barkley", u: "https://www.lehmanns.de/shop/sachbuch-ratgeber/40323187-9781606237113-taking-charge-of-adult-adhd" },
  { t: "How Do You Manage Task Initiation Paralysis? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1m7a38c/how_do_you_manage_task_initiation_paralysis_when/" },
  { t: "The Lived Experiences of Adults With Attention-Deficit/Hyperactivity Disorder: A Rapid Review of Qualitative Evidence — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.949321/full" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD: A Systematic Review — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" },
  { t: "Adult ADHD-Related Poor Quality of Life — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12423737/" },
  { t: "Time Perception in Adult ADHD: Findings From a Decade, A Review — ResearchGate", u: "https://www.researchgate.net/publication/368442242_Time_Perception_in_Adult_ADHD_Findings_from_a_Decade-A_Review" },
  { t: "'Do I Need to Become Someone Else?' A Qualitative Exploratory Study Into the Experiences and Needs of Adults With ADHD — ResearchGate", u: "https://www.researchgate.net/publication/270456117_%27Do_I_need_to_become_someone_else%27_A_qualitative_exploratory_study_into_the_experiences_and_needs_of_adults_with_ADHD" },
  { t: "“Then Just Get a Planner” — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/zhjv43/then_just_get_a_planner/" },
  { t: "Experience of CBT in Adults With ADHD: A Mixed Methods Study — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2024.1341624/full" },
  { t: "Australian Evidence-Based Clinical Practice Guideline for Attention Deficit Hyperactivity Disorder", u: "https://adhdguideline.aadpa.com.au/wp-content/uploads/2024/06/Australian-Clinical-Practice-Guideline-For-ADHD-June-2024.pdf" },
  { t: "Applications for the Management of Attention Deficit Hyperactivity Disorder: A Systematic Review — Frontiers", u: "https://www.frontiersin.org/journals/public-health/articles/10.3389/fpubh.2025.1483923/full" },
  { t: "I Wish There Was an App That Would Take the Mental Load Of... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1o01xfa/i_wish_there_was_an_app_that_would_take_the/" },
  { t: "A Systematic Review of Lived Experiences of Receiving a Diagnosis of ADHD — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/10870547261455946" },
];

const OvwSources = () => (
  <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 emotional regulation, time perception and executive function, and real accounts from people who know exactly what needs doing and still can't start. Here's where it comes from.
        </p>
      </div>

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

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

function OvwApp() {
  return (
    <main id="main">
      <OvwNav />
      <OvwHero />
      <OvwWhatLoopsDoes />
      <OvwRecognition />
      <OvwWhyItHappens />
      <OvwReframe />
      <OvwWhyLoopsWorks />
      <OvwHowItWorks />
      <OvwWhatsInside />
      <OvwSocialProof />
      <LoopsPricing bg="bg-soft" />
      <OvwObjections />
      <OvwFAQ />
      <OvwFinalCTA />
      <OvwSources />
      <Footer />
    </main>
  );
}

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