/* Loops — "Create More With ADHD" use-case page
   Creative-identity guardrails: ideas validated before failure named, every mechanism
   neurological/structural, shame-freeze framed as accumulated evidence not permanence,
   idea-capture reframed as protecting creativity. Unique section: the idea capture system. */

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

const CRT_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 CrtNav = () => {
  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">
            {CRT_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">
              {CRT_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 CRT_HERO_BLOCKS = [
  {
    title: "One project at a time",
    body: "One clear daily action toward the thing you're actually making, not the next idea.",
    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: "Get through the difficult middle",
    body: "The part where the excitement fades is where Loops steps in.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.101.5.101.5-.1.5-.1v-.702c0-.7.478-1.235 1.011-1.491A3.5 3.5 0 0 0 11.5 3V2z"/></svg>),
  },
  {
    title: "Make something that exists",
    body: "Not a draft. Not a folder. Something finished, sent, real.",
    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 CrtHero = () => (
  <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 have the ideas. You have the graveyard to prove 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">
          It's not a creativity problem. For many people with ADHD, the gap isn't between not having ideas and having them. It's between starting something and making it real.
        </p>

        <p className="mx-auto mt-4 max-w-2xl text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-2">
          Loops is a daily coaching app for people with ADHD. It gives you small actions toward the finished thing each day, coaching for the difficult middle, and, if you want it, <span className="text-ink font-medium">one person waiting to see it exist.</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">
        {CRT_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 CrtWhatLoopsDoes = () => (
  <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 for getting creative work from idea to finished.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most creative tools are excellent at the beginning. They're designed for the part that already works for ADHD brains: the idea, the spark, the first session where everything feels possible. What they're not designed for is the middle and the end.
          </p>
          <p>
            Loops gives you specific creative actions each day, keeps the project moving through the phase where novelty has faded, and coaches you through the part that usually stops everything. Not a creativity tool. A finishing tool.
          </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 CRT_RECOGNITION = [
  "You have a folder of things you started. Some are close to done. None of them are finished.",
  "The new idea always feels more exciting than the current one. You know this. You still switch.",
  "The first 70% of any project is brilliant. The last 30% feels like administrative misery.",
  "You've captured the idea. You've made notes. You've started the outline. You've been doing this for eight months.",
  "You're genuinely good at this. That's why the graveyard hurts as much as it does.",
  "Every finished thing you see by someone else makes you proud of them and quietly devastated about your own pile.",
];

const CrtRecognition = () => (
  <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 creative work.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {CRT_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">
          The ideas are real. The creativity is real. The gap between generating and finishing is structural, not personal, and it responds to a different kind of support.
        </p>
      </div>

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

/* ---------------- Why it keeps happening (5 patterns) ---------------- */

const CRT_PATTERNS = [
  { title: "The novelty trap", body: "New ideas feel genuinely more rewarding than continuing the current one. That's not distraction. It's neurological. ADHD brains produce a dopamine response to novel stimuli. A fresh idea activates that response. Continuing an existing project does not. The pull toward the new thing is real and it's stronger for ADHD brains than for most." },
  { title: "The last 20% problem", body: "The beginning of a creative project and the end of one require completely different things from your brain. Generation is energising. Editing, naming, formatting, publishing, and sharing are not. For ADHD brains, where the reward circuit only fires reliably on novelty, the finishing phase can feel like wading through concrete." },
  { title: "Shiny-object syndrome", body: "Every new idea isn't just a distraction. It's a signal that the current project has lost its ability to hold attention. ADHD attention shifts toward whatever is most novel or stimulating. When a project stops feeling new, the brain begins scanning for something that does, and typically finds it." },
  { title: "The idea-action gap", body: "Capturing an idea isn't the same as working on it. But for ADHD brains, it can feel the same. Notes, outlines, and folders full of research create a sense of progress that doesn't translate into output. The planning phase can consume the energy that the making phase needs." },
  { title: "The shame-freeze spiral", body: "Every abandoned project makes the next one harder to start and harder to trust. The graveyard of brilliant ideas doesn't just represent lost work. It accumulates as evidence, and starting something new means adding to a record that already feels like proof of something." },
];

const CrtWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding the pattern</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          It's not a discipline problem. It's what ADHD does to creative projects specifically.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Creative work has a specific shape that maps almost perfectly onto ADHD failure modes. Understanding where and why projects stall changes what finishing support needs to look like.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {CRT_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 all five of these patterns, with one small daily action that keeps the making moving.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the idea capture system ---------------- */

const CrtReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>The move that changes what happens when a new idea arrives mid-project</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]">
          Capturing an idea completely is how you stop it from derailing the current one.
        </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>
          When a new idea arrives mid-project, the instinct is either to act on it immediately or to try to ignore it. Both fail. Acting on it abandons the current project. Ignoring it creates anxiety about forgetting something important, which makes it even harder to stay in the current work.
        </p>
        <p className="text-ink font-medium">
          The move that works is capturing it completely: written down in full, somewhere it won't be lost. The brain, having registered the idea, doesn't need to keep hold of it. The anxiety dissipates. The current project becomes accessible again. ADHD experts call this an idea capture system, and it's one of the most consistently recommended supports for ADHD creative work. Not because it kills new ideas, but because it protects the current project from them.
        </p>
      </div>
    </Container>
  </Section>
);

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

const CRT_WITNESS_CARDS = [
  { t: "The first person to see it exist", b: "When you close a loop, they see it. When the thing is finally finished, they're the first to know it exists. They just get to watch you keep making, all the way to finished, and cheer you on." },
  { t: "Not there to critique it", b: "They don't have to critique it or ask when it'll be done. 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: "They carry the hard part with you", b: "When the novelty's gone and only the hard part is left, one person waiting for the finished thing is often what carries it there." },
];

const CrtWhyLoopsWorks = () => (
  <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>Making something is solitary, and the graveyard is private. Nobody sees the projects that quietly stalled, which is part of why they stall: there's no one on the other side waiting for the finished thing.</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, a fellow maker, whoever it is. When you close a loop, they see it. When the thing is finally finished, they're the first to know it exists. 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">
        {CRT_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 CRT_STEPS = [
  { t: "Tell Loops what you're making", b: "Name the project. What it is, where you are with it, what done looks like. Loops works alongside whatever you're creating, not instead of it." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress, and to be the first to know when the thing exists. You decide what they can see, and you can change it any time. This is the step most people skip with other apps, and the one that makes Loops work. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Each day, Loops gives you specific, low-friction things to do on the project. On generative days, it might be bigger. On difficult days, it might be one sentence, one sketch, one decision. The goal is always forward, not optimal. Close the loop, and your person sees it." },
  { t: "Get coached through the stall", b: "Lost the thread? Hit the last 30%? Loops gives you a practical next step rather than waiting for motivation to return. Not inspiration. The next smallest thing." },
  { t: "Make something that exists", b: "Not a perfect finished version. The thing you described in Step 1, completed enough to be real. That's what done looks like." },
];

const CrtHowItWorks = () => (
  <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 creative action. Toward done. Every day.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need inspiration to show up. You need one small action that moves the work forward whether inspiration is there or not.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {CRT_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 take today's action. That's the whole point.
      </p>
    </Container>
  </Section>
);

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

const CRT_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The one project you're making, in your own words: what it is, where you are with it, and what finished looks like. The finish line is the point here, so Loops keeps that one project moving until it actually exists." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, aimed at moving the current project forward rather than starting a new one. On generative days it might be bigger. On difficult days: one sentence, one sketch, one decision. Some run every day, some a few times a week. A few connect to the project. Others are just life, like taking your meds before breakfast. A missed one doesn't wipe you out. You can repair a streak simply by showing up again." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the moment the thing is finished. There to witness it exist, not to critique it. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: the difficult middle got through, the last 20% finally done, the thing published or sent or shared. 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 making and where projects tend to stall, so there's no re-explaining yourself from the start. No booking, no waiting room. When a shiny new idea arrives, it helps you capture it and stay with the current work. When you hit the last stretch, it hands you the next small step, rather than a wait for inspiration." },
];

const CrtWhatsInside = () => (
  <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">
        {CRT_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 CRT_TESTIMONIALS = [
  { quote: "I had eleven unfinished short stories. I've been 'working on' some of them for two years. Loops didn't make me love editing. It gave me one small editing action each day that I could actually do. Three of them are finished now.", who: "Fiction writer", meta: "Self-identified ADHD" },
  { quote: "The idea capture thing changed everything. I used to drop what I was working on every time a new idea arrived. Now I write it down and go back. The project is still there. The new idea doesn't disappear. Both survive.", who: "Illustrator", meta: "Diagnosed with ADHD at 26" },
  { quote: "I published something. That's it. That's the whole review.", who: "Songwriter, Manchester", meta: null },
];

const CrtSocialProof = () => (
  <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">
        {CRT_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 CRT_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 CrtPricing = () => (
  <Section id="pricing" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Pricing</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Better with your person. Built for it.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {CRT_PRICING.map((p) => (
          <article key={p.name} className={`relative flex flex-col rounded-card border bg-white p-6 sm:p-7 ${p.featured ? "border-brand shadow-card ring-1 ring-brand/20" : "border-line shadow-soft"}`}>
            {p.tag ? <span className="absolute -top-3 left-6 rounded-pill bg-brand px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-white shadow-cta">{p.tag}</span> : null}
            <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
            <div className="mt-3 flex items-baseline gap-1">
              <span className="text-[32px] font-bold tracking-tight3 text-ink tnum">{p.price}</span>
              <span className="text-[15px] text-ink-3">{p.per}</span>
            </div>
            <p className="mt-4 flex-1 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{p.blurb}</p>
            <div className="mt-6">
              <Button variant={p.featured ? "primary" : "secondary"} size="md" href="#start">Get Early Access</Button>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 max-w-prose rounded-card border border-line bg-soft p-6 sm:p-7">
        <p className="text-[16px] sm:text-[17px] leading-[1.65] text-ink-2 text-pretty">
          <span className="font-semibold text-ink">Prefer to pay yearly?</span> A year of it, together, with two months free. Every plan starts with a 7-day free trial. On iOS for now.
        </p>
      </div>
    </Container>
  </Section>
);

/* ---------------- Objections (5, incl. mood + enthusiasm-fear) ---------------- */

const CRT_OBJECTIONS = [
  { q: "\u201CI need to be in the right mood to create.\u201D", a: "The right mood helps. It's not required for today's action. Loops gives you one small creative action sized to be possible even on a low-inspiration day. A sentence, a decision, a small edit. These don't require mood. They just require showing up." },
  { 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, and they're there to witness the thing exist, not to critique it. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CI have too many unfinished projects. I don't know which one to work on.\u201D", a: "Pick the one that's closest to done. Loops will help you finish it. The rest can wait. Loops is designed for one active project at a time. New ideas get captured. Current projects get finished. Then the next one." },
  { 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: "\u201CWon't finishing this one make me lose enthusiasm for the next idea?\u201D", a: "The opposite tends to happen. Finishing something builds evidence of a different kind: that you can get things done. That changes how the next idea feels, and how the next project starts." },
];

const CrtObjections = () => (
  <Section id="objections" className="bg-soft">
    <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">
        {CRT_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 CRT_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 creative work specifically, it helps turn projects from ideas into finished things, one daily action at a time." },
  { 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 moment the thing is finished. They're there to witness it exist, not to critique it or ask when it'll be done. When the novelty's gone and only the hard part is left, one person waiting for the finished thing is often what carries it there. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with creative output if you have ADHD?", a: "It gives you one specific, small creative action each day that doesn't require inspiration or a good day to complete. It also coaches you through the phases where creative projects usually stall, so a difficult week doesn't end the whole project." },
  { q: "Why do people with ADHD struggle to finish creative projects?", a: "The gap is structural, not motivational. ADHD brains produce a dopamine response to new ideas that fades as projects become familiar. The generative phase is energising. The finishing phase is not. Without a structure that bridges that gap, most projects stall in the last third." },
  { 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: "Can Loops work for any creative medium?", a: "Yes. Loops works for writing, illustration, music, design, video, code, and any other creative work with an endpoint. You tell Loops what you're making and it gives you daily actions specific to that." },
  { q: "What if a new idea arrives while I'm working on my current project?", a: "Write it down somewhere you trust. Loops can help you set up a simple idea capture habit so new ideas don't derail the current project. The idea won't disappear. The project gets to continue." },
  { q: "What if I miss several days of working on the project?", a: "That's built into the design. Loops doesn't treat a missed week as a reason to start over. The next daily action is still there, still specific, still aimed at the same project." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
];

const CrtFAQItem = ({ 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 CrtFAQ = () => (
  <Section id="faq" className="bg-base">
    <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">
          {CRT_FAQS.map((f, i) => <CrtFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const CrtFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <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>Something made real</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]">
            Something made real. That's what this is for.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not the folder cleared. Not the whole graveyard addressed. Just the one thing you're working on now, finished, existing, real, and, if you want, one person there to see it exist.
          </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 CRT_SOURCES = [
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87" },
  { t: "The Important Role of Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "The Lived Experiences of Adults With Attention-Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36032220/" },
  { t: "Executive Functioning in Adult ADHD: A Meta-Analytic Review — VU Research Portal", u: "https://research.vu.nl/en/publications/executive-functioning-in-adult-adhd-a-meta-analytic-review/" },
  { t: "Creativity and ADHD: A Review of Behavioral Studies, the Effect of Psychostimulants, and Neural Underpinnings — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33035524/" },
  { t: "Time Perception in Adult ADHD: Findings From a Decade, A Review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/36833791/" },
  { t: "Motivation Deficit in ADHD Is Associated With Dysfunction of the Dopamine Reward Pathway — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/20856250/" },
  { t: "Emotion Dysregulation in Adults With Attention Deficit Hyperactivity Disorder — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/32164655/" },
  { t: "Managing Sleep in Adults With ADHD: From Science to Pragmatic Approaches — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/34679425/" },
  { t: "Strengths and Challenges to Embrace Attention-Deficit Hyperactivity Disorder — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/27546330241287655" },
  { t: "Opinions on the Effectiveness of Body Doubling — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/xc5iw7/opinions_on_the_effectiveness_of_body_doubling/" },
  { t: "Recommendations | Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "What Are Things You've Realised You Still Can't Do After... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1jwn6ws/what_are_things_youve_realised_you_still_cant_do/" },
  { t: "Meta-Analysis of Cognitive-Behavioral Treatments for Adult ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/28504540/" },
  { t: "A Descriptive Review of ADHD Coaching Research — ERIC", u: "https://files.eric.ed.gov/fulltext/EJ1182373.pdf" },
  { t: "The ADHD Body Double: A Unique Tool for Getting Things Done — ADDA", u: "https://add.org/the-body-double/" },
  { t: "A Systematic Review of Lived Experiences of Receiving a Diagnosis of ADHD — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/10870547261455946" },
  { t: "An Investigation of Body Doubling With Neurodivergent Users — ACM", u: "https://dl.acm.org/doi/full/10.1145/3689648" },
  { t: "Why Doesn't a Planner Work? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/16amcz6/why_doesnt_a_planner_work/" },
  { t: "What Good Is Being Creative When You Can't Follow Through? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/rncs4o/what_good_is_being_creative_when_you_cant_follow/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9443814/" },
  { t: "What Can Adults With ADHD Tell Us About Their Experiences? — Sage Journals", u: "https://journals.sagepub.com/doi/abs/10.1177/10870547251352589" },
];

const CrtSources = () => (
  <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 creativity, dopamine and executive function, and real accounts from people with more finished ideas in their head than finished things in the world. Here's where it comes from.
        </p>
      </div>

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

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

function CrtApp() {
  return (
    <main id="main">
      <CrtNav />
      <CrtHero />
      <CrtWhatLoopsDoes />
      <CrtRecognition />
      <CrtWhyItHappens />
      <CrtReframe />
      <CrtWhyLoopsWorks />
      <CrtHowItWorks />
      <CrtWhatsInside />
      <CrtSocialProof />
      <LoopsPricing bg="bg-base" />
      <CrtObjections />
      <CrtFAQ />
      <CrtFinalCTA />
      <CrtSources />
      <Footer />
    </main>
  );
}

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