/* Loops — "/adhd/" recognition-first hub page */

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

const ADHD_NAV_LINKS = [
  { label: "Why it's different", href: "#why" },
  { label: "Find your page", href: "#directory" },
  { label: "Understand your ADHD", href: "#mechanisms" },
  { label: "How it works", href: "#how" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const AdhdNav = () => {
  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">
            {ADHD_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">
              {ADHD_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 ADHD_BLOCKS = [
  {
    title: "One thing. Not a system.",
    body: "No dashboard to maintain, no streak to protect. Small, specific daily actions, every day.",
    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: "Misses don't end it.",
    body: "A bad week isn't a failure state. Loops gives you a calm step back in, every time.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z" /><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466" /></svg>),
  },
  {
    title: "Designed for this brain.",
    body: "Not adapted. Not ADHD-friendly. Built from the start for how motivation actually works with ADHD.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z" /></svg>),
  },
];

const AdhdHero = () => (
  <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">A daily coaching app for ADHD brains</span>
          </span>
        </div>

        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.04] text-[34px] sm:text-[48px] lg:text-[58px] fade-in-up delay-1">
          Built for how ADHD actually works. Not how it's supposed to work.
        </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">
          You already know about ADHD. What you need to know is whether Loops is worth your time. It probably is. Here's why.
        </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">7-day free trial. No complicated setup.</span>
        </div>
      </div>

      {/* Three icon blocks */}
      <div className="mx-auto mt-14 lg:mt-16 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {ADHD_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 fade-in-up delay-4">Loops is a daily coaching app for people with ADHD.</p>
    </Container>
  </section>
);

/* ---------------- Recognition (9 cards) ---------------- */

const ADHD_RECOGNITION = [
  "You started the app with genuine intention. Eleven days later, one bad day broke the streak and suddenly the system you built to stay on top of things became one more thing you weren't managing.",
  "You know exactly what you need to do. But when your brain isn't interested, there is no bridge between knowing you should and actually starting.",
  "You've tried the planner, the whiteboard and the colour coded calendar. You're not looking for another productivity app. You're looking for something that actually works with your brain, not against it.",
  "A missed day doesn't feel like a missed day. It feels like proof of something. And the shame from the last thing that didn't work makes the next thing even harder to start.",
  "You can start things. You just can't finish them. Or you can finish them. You just can't make yourself do anything with them.",
  "The problem isn't that you don't care. The problem is that every system you've tried assumes motivation works differently from the way your brain does.",
];

const AdhdRecognition = () => (
  <Section id="recognition" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>You've probably been here before</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          If any of these sound familiar, Loops was built for you.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These aren't generic ADHD experiences. These are the specific patterns that standard tools were never designed for.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {ADHD_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">
      </div>

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

/* ---------------- Why Loops is different ---------------- */

const AdhdWhyDifferent = () => (
  <Section id="why" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What makes it work</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Standard tools fail ADHD brains for specific reasons. Loops doesn't have those reasons.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most habit tools are built on the assumption that you just need reminding. They give you a list, a streak, a notification. They assume motivation is stable and that missing one day is a blip.
          </p>
          <p>
            For ADHD brains, none of that is true. Motivation is interest-driven and unpredictable. One missed day can end a habit. Maintaining a system requires the exact executive function that ADHD makes unreliable. So the tool becomes another thing that isn't working.
          </p>
          <p>
            <span className="text-ink font-medium">Loops is designed around different assumptions.</span> Small actions a day, not a system. A coached step back in after every miss, not a broken streak. Daily actions sized to the day you're actually having, not the ideal version of it. And no shame when things go wrong. Just: the next smallest thing.
          </p>
        </div>
        <div className="mt-8">
          <Button variant="primary" size="md" href="#start">Get Early Access</Button>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Use case directory ---------------- */

const DIRECTORY = [
  {
    title: "Career & Work",
    icon: (<svg width="26" height="26" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5m1.886 6.914L16 6.844V12.5A1.5 1.5 0 0 1 14.5 14h-13A1.5 1.5 0 0 1 0 12.5V6.844l7.614 2.07a1.5 1.5 0 0 0 .772 0" /></svg>),
    items: [
      { label: "Get promoted", desc: "You've done the work. The recognition keeps going to someone else.", href: "/adhd/get-promoted/" },
      { label: "Find a new job", desc: "The applications are going out. The momentum keeps disappearing.", href: "/adhd/finding-a-new-job-with-adhd/" },
      { label: "Start a business", desc: "The idea is real. Getting the actual business running is another thing.", href: "/adhd/starting-a-business-with-adhd/" },
      { label: "Build a side project", desc: "You're serious about this one. Just like you were serious about the last one.", href: "/adhd/build-a-side-project-with-adhd/" },
      { label: "Become a leader", desc: "Managing yourself was hard enough. Now you're managing other people too.", href: "/adhd/becoming-a-leader-with-adhd/" },
    ],
  },
  {
    title: "Health & Fitness",
    icon: (<svg width="26" height="26" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.475 9C2.702 10.84 4.779 12.871 8 15c3.221-2.129 5.298-4.16 6.525-6H12a.5.5 0 0 1-.464-.314l-1.457-3.642-1.598 5.593a.5.5 0 0 1-.945.049L5.889 6.568l-.499 1.658A.5.5 0 0 1 4.911 9zm.982-8C1.11 1 0 2.291 0 3.885 0 5.09.309 6.145 1.055 7h3.514l.792-2.635a.5.5 0 0 1 .96.038l1.202 4.87 1.516-5.31a.5.5 0 0 1 .955-.033L12.293 7h2.652C15.691 6.145 16 5.09 16 3.885 16 2.292 14.89 1 13.293 1 12.14 1 11.242 1.5 10.5 2.5 9.758 1.5 8.86 1 7.5 1z" /></svg>),
    items: [
      { label: "Lose weight", desc: "It's not about knowing what to eat. It never was.", href: "/adhd/managing-weight-with-adhd/" },
      { label: "Get fit", desc: "You start well. Then one missed session and somehow that's the end of it.", href: "/adhd/get-fit/" },
      { label: "Train for something", desc: "You signed up. You meant it. The training keeps falling apart.", href: "/adhd/train-for-something-with-adhd/" },
      { label: "Recover and sleep better", desc: "You know all the sleep rules. You still wake up wrecked.", href: "/adhd/sleep-better-with-adhd/" },
      { label: "Reduce stress", desc: "It's not stress about one thing. It's stress about everything, all the time.", href: "/adhd/reduce-stress-with-adhd/" },
    ],
  },
  {
    title: "ADHD & Executive Function",
    icon: (<svg width="26" height="26" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0m-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z" /></svg>),
    items: [
      { label: "Stop procrastinating", desc: "You know exactly what you need to do. You still can't make yourself start.", href: "/adhd/stop-procrastinating-with-adhd/" },
      { label: "Build routines that survive bad days", desc: "You can build a routine. You just can't survive the first bad day.", href: "/adhd/build-routines-that-survive-bad-days/" },
      { label: "Get organised without relying on memory", desc: "You have the lists. You still forget things.", href: "/adhd/get-organised-with-adhd/" },
      { label: "Feel less overwhelmed", desc: "Everything feels urgent. So nothing gets done.", href: "/adhd/feel-less-overwhelmed-with-adhd/" },
      { label: "Recover from burnout and start again", desc: "This isn't just tired. This is the kind of tired that doesn't fix with rest.", href: "/adhd/recover-from-adhd-burnout/" },
    ],
  },
  {
    title: "Education & Learning",
    icon: (<svg width="26" height="26" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917zM8 8.46 1.758 5.965 8 3.052l6.242 2.913z" /><path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46z" /></svg>),
    items: [
      { label: "Pass the exam", desc: "You know the material. The exam just doesn't show it.", href: "/adhd/pass-exams-with-adhd/" },
      { label: "Learn something valuable", desc: "You start with real enthusiasm. You keep losing it anyway.", href: "/adhd/learn-something-valuable-with-adhd/" },
      { label: "Finish what you started", desc: "You start things well. You still end up with a trail of unfinished work.", href: "/adhd/finish-what-you-started-with-adhd/" },
      { label: "Make learning a habit", desc: "You love learning. You still can't make it stick.", href: "/adhd/make-learning-a-habit-with-adhd/" },
      { label: "Stay focused long enough to make progress", desc: "You can focus. You just can't make it happen when you need it.", href: "/adhd/stay-focused-with-adhd/" },
    ],
  },
  {
    title: "Personal Projects & Creativity",
    icon: (<svg width="26" height="26" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6" /></svg>),
    items: [
      { label: "Create more", desc: "You have the ideas. You have the graveyard to prove it.", href: "/adhd/create-more-with-adhd/" },
      { label: "Share your work", desc: "The work is done. You're still not sharing it.", href: "/adhd/share-your-work-with-adhd/" },
      { label: "Build something meaningful", desc: "You know what you want to build. You just can't keep going.", href: "/adhd/build-something-meaningful/" },
      { label: "Grow an audience around it", desc: "You've started before. More than once. It never quite sticks.", href: "/adhd/growing-an-audience-with-adhd/" },
      { label: "Actually finish what you start", desc: "You always start. The hard part is everything after that.", href: "/adhd/actually-finish-what-you-start/" },
    ],
  },
  {
    title: "Relationships & Life",
    icon: (<svg width="26" height="26" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" /></svg>),
    items: [
      { label: "Parenting with ADHD", desc: "Same morning. Same meltdown. You're not a bad parent.", href: "/adhd/parenting-with-adhd/" },
      { label: "Build better relationships", desc: "You care more than your follow-through shows.", href: "/adhd/building-better-relationships/" },
      { label: "Navigate big life changes", desc: "You were managing. Then everything changed.", href: "/adhd/navigating-big-life-changes/" },
      { label: "Heal after loss", desc: "You're not failing at grief. ADHD makes loss heavier to carry.", href: "/adhd/heal-after-loss/" },
      { label: "Build financial security", desc: "Avoiding your banking app doesn't mean you don't care about money.", href: "/adhd/build-financial-security/" },
    ],
  },
];

const DirectoryItem = ({ item }) => {
  if (item.soon) {
    return (
      <li className="flex items-center justify-between gap-3 rounded-tile px-3 py-2.5">
        <span className="text-[14.5px] font-medium text-ink-3">{item.label}</span>
        <span className="shrink-0 rounded-pill bg-soft px-2 py-0.5 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-ink-3">Soon</span>
      </li>
    );
  }
  const inner = (
    <>
      <div className="flex items-center gap-2">
        <span className="text-[15px] font-semibold tracking-tight2 text-ink">{item.label}</span>
        {item.href ? (
          <svg className="opacity-0 -translate-x-1 transition-all duration-200 group-hover/item:opacity-100 group-hover/item:translate-x-0 text-brand" width="14" height="14" 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>
        ) : null}
      </div>
      {item.desc ? <p className="mt-1 text-[13.5px] leading-[1.55] text-ink-2 text-pretty">{item.desc}</p> : null}
    </>
  );
  if (item.href) {
    return (
      <li>
        <a href={item.href} className="group/item focus-ring block rounded-tile px-3 py-2.5 transition-colors hover:bg-brand-soft/60">
          {inner}
        </a>
      </li>
    );
  }
  return <li className="group/item rounded-tile px-3 py-2.5">{inner}</li>;
};

const AdhdDirectory = () => (
  <Section id="directory" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Find your page</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Loops works for specific ADHD challenges. Find yours.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Each page is written for a particular experience. Pick the one that fits right now.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 md:grid-cols-2 lg:grid-cols-3">
        {DIRECTORY.map((box) => (
          <section key={box.title} className="flex flex-col rounded-card border border-line bg-white p-5 sm:p-6 shadow-soft">
            <div className="flex items-center gap-3">
              <span className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-tile bg-soft border border-line text-brand">{box.icon}</span>
              <h3 className="text-[17px] font-semibold tracking-tight2 text-ink leading-snug text-balance">{box.title}</h3>
            </div>
            <ul className="mt-4 -mx-3 flex flex-col gap-0.5">
              {box.items.map((it) => <DirectoryItem key={it.label} item={it} />)}
            </ul>
          </section>
        ))}
      </div>

      <p className="mt-10 text-center text-[15px] text-ink-2">
        Don't see yours? <a href="#start" className="font-semibold text-brand-deep hover:underline">Get Early Access</a> and tell us what you're working on.
      </p>
    </Container>
  </Section>
);

/* ---------------- Mechanisms directory (understand your ADHD) ---------------- */

const MECHANISMS = [
  { title: "The shame spiral", desc: "Why every restart feels heavier than the last attempt, and how to make it lighter.", href: "/adhd/shame-spiral-with-adhd/", icon: (<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/><path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/></svg>) },
  { title: "Body doubling", desc: "Why another person's presence makes starting easier, without arranging a favour.", href: "/adhd/body-doubling-with-adhd/", icon: (<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/><path fillRule="evenodd" d="M5.216 14A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1z"/><path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/></svg>) },
  { title: "Time blindness", desc: "Why deadlines feel sudden even when you saw them coming, and how to make time visible.", href: "/adhd/time-blindness-with-adhd/", icon: (<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z"/><path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5"/></svg>) },
  { title: "Rejection sensitive dysphoria", desc: "Why criticism and rejection can land so hard, and what actually helps.", href: "/adhd/rejection-sensitive-dysphoria-with-adhd/", icon: (<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314"/></svg>) },
  { title: "Hyperfocus", desc: "The real cost and benefit of deep, absorbed focus, and how to manage the bill.", href: "/adhd/hyperfocus-with-adhd/", icon: (<svg width="20" height="20" 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 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>) },
];

const AdhdMechanisms = () => (
  <Section id="mechanisms" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Why it happens</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Understand your ADHD
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Some ADHD struggles have names, patterns, and research behind them. Explore the mechanisms that shape everyday life and understand why things feel the way they do.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 md:grid-cols-2 lg:grid-cols-3">
        {MECHANISMS.map((m) => (
          <a key={m.title} href={m.href} className="group card-hover flex flex-col rounded-card border border-line bg-white p-5 sm:p-6 shadow-soft">
            <div className="flex items-center gap-3">
              <span className="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-tile bg-soft border border-line text-brand">{m.icon}</span>
              <h3 className="text-[17px] font-semibold tracking-tight2 text-ink leading-snug text-balance">{m.title}</h3>
            </div>
            <p className="mt-4 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{m.desc}</p>
            <span className="mt-4 inline-flex items-center gap-1.5 text-[13.5px] font-semibold text-brand-deep">
              Read more
              <svg className="transition-transform duration-200 group-hover:translate-x-0.5" width="14" height="14" 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>
            </span>
          </a>
        ))}
      </div>
    </Container>
  </Section>
);

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

const ADHD_STEPS = [
  { t: "Tell Loops what you're working on", b: "Name the goal, the problem, or the thing that keeps not happening. Plain language. No categories. No setup that becomes its own project." },
  { t: "Get small daily actions", b: "Each day, Loops gives you specific, low-friction things to do. Small enough to be possible on a bad day. Targeted enough to move things forward on a good one." },
  { t: "Get coached when things go wrong", b: "Missed a week? Lost the thread? Loops gives you a calm, specific step back in. Not a motivational speech. Just the next smallest thing." },
  { t: "Build something that actually sticks", b: "Not because you found the perfect system. Because the system was designed to survive the imperfect days, which are most of them." },
];

const AdhdHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>The system</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Small actions. Every day. Even the hard ones.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          Loops works the same way for every use case.
        </p>
      </div>

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

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.5] text-ink font-medium">
        You don't need a good day to start. You need one action. That's it.
      </p>
    </Container>
  </Section>
);

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

const ADHD_TESTIMONIALS = [
  { quote: "I've tried probably eight productivity apps. They all worked until they didn't. Loops is the first one where 'until it didn't' hasn't happened yet. Fourteen weeks in.", who: "Marketing manager", meta: "Diagnosed with ADHD at 31" },
  { quote: "One action. That's genuinely all it asks. I kept waiting for the catch. There isn't one.", who: "Freelance developer", meta: "Self-identified ADHD" },
  { quote: "I spent years thinking I was the problem. I wasn't. The tools were.", who: "Secondary school teacher", meta: "Bristol" },
];

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

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

/* ---------------- Objections (4) ---------------- */

const ADHD_OBJECTIONS = [
  { q: "\u201CI've tried apps before and they never stick past two weeks.\u201D", lead: "Most apps weren't built for what happens after week two.", a: "Loops was. Standard tools assume the problem is remembering. Loops assumes the problem is what happens when a miss makes the whole thing feel over. A different design for a different failure mode." },
  { q: "\u201COne action a day doesn't sound like enough.\u201D", lead: "It sounds like less than it is.", a: "Small actions, every day, for a month. That's thirty things that didn't happen before. For ADHD brains, the consistency of small and sustainable produces more than the intensity of good-weeks-only." },
  { q: "\u201CWhat if I'm not officially diagnosed?\u201D", lead: "You don't need a diagnosis.", a: "Many people using Loops are on waiting lists, self-identifying, or simply recognise that the patterns described here feel familiar. If that's you, Loops is built for you." },
  { q: "\u201CWhat if my thing isn't in the list?\u201D", lead: "Tell Loops what it is and it'll work with that.", a: "The use case pages cover the most common ADHD challenges. If yours isn't there, try Loops free and name what you're working on. The coaching system works with whatever it is." },
];

const AdhdObjections = () => (
  <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">
        {ADHD_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"><span className="font-semibold text-ink">{o.lead}</span> {o.a}</p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

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

const ADHD_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. Small specific actions each day, coaching when things go sideways, and a design that treats missed days as reset points rather than failures." },
  { q: "Why is Loops better for ADHD brains than standard apps?", a: "Standard apps assume consistent motivation and treat gaps as failures. Loops assumes inconsistency is the baseline and builds around it. Small actions rather than a system. Resets rather than broken streaks. Coaching rather than reminders." },
  { q: "Do I need a diagnosis to use Loops?", a: "No. Loops doesn't require a formal ADHD diagnosis. If the patterns described on this page feel familiar, Loops is built for you." },
  { q: "What does Loops actually give me each day?", a: "Small specific, low-friction actions toward your goals. Not a list. Not a schedule. One thing, sized to be possible on the kind of day you're actually having." },
  { q: "What happens when I miss a day?", a: "Nothing bad. The next daily action is still there, still small, still specific. Loops doesn't treat a missed day as a broken streak. It treats it as a reset point." },
  { q: "How is Loops different from a Pomodoro timer or a to-do app?", a: "Timers and to-do apps assume you're already in the work. Loops addresses what happens before that: deciding what to do, making starting possible, and getting back in after a gap. Different problem, different tool." },
  { 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 do I choose which use case page to start with?", a: "Pick the one that names your most pressing problem right now. If more than one fits, start with the one that's costing you the most. You can always explore others once you've started." },
];

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

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

const AdhdFinalCTA = () => (
  <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>Give it one month</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]">
            See what daily actions can actually do.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not a promise that everything will be different. Just small actions, every day, for thirty days. For ADHD brains, that's often enough to change what possible looks like.
          </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>
            <a href="#directory" className="text-[14.5px] font-medium text-brand-deep hover:underline">Or find your specific use case first</a>
            <span className="mt-1 text-[13.5px] text-ink-3">7-day free trial. No complicated setup.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

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

function AdhdApp() {
  return (
    <main id="main">
      <AdhdNav />
      <AdhdHero />
      <AdhdRecognition />
      <AdhdWhyDifferent />
      <AdhdDirectory />
      <AdhdMechanisms />
      <AdhdHowItWorks />
      <AdhdSocialProof />
      <AdhdObjections />
      <AdhdFAQ />
      <AdhdFinalCTA />
      <Footer />
    </main>
  );
}

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