/* Loops — "Build a Side Project With ADHD" use-case page */

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

const SIDE_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 SideNav = () => {
  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">
            {SIDE_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">
              {SIDE_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 SIDE_HERO_BLOCKS = [
  {
    title: "Focus on one project",
    body: "Park the others so your best idea actually gets finished.",
    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: "Make daily progress",
    body: "Small actions keeps things moving even when motivation doesn't.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07z"/></svg>),
  },
  {
    title: "Actually ship it",
    body: "Coaching through the hard middle and the final push, so it gets into the world.",
    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 SideHero = () => (
  <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 even start them. It's the finishing that keeps not happening.
        </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">
          Most people with ADHD aren't short of side projects. They're short of finished ones.
        </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 keeps your project moving one day at a time, and gives you <span className="text-ink font-medium">one person who gets to see you finish it.</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">
        {SIDE_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>
    </Container>
  </section>
);

/* ---------------- What Loops does ---------------- */

const SideWhatLoopsDoes = () => (
  <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 structure for the part of side projects that ADHD makes hardest.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Starting a side project is rarely the problem. The problem is everything that comes after the first burst of energy fades: the boring middle, the hard parts, the moment you open a newer, more interesting idea and quietly stop going back to the old one.
          </p>
          <p>
            Loops gives you clear daily actions to keep your project moving. It helps you stay with one thing long enough to finish it, and picks you back up when you drift away.
          </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 SIDE_RECOGNITION = [
  "You've got more ideas than you know what to do with. Choosing just one feels almost impossible.",
  "The first week is great. The third week is where it quietly stops.",
  "You can do the exciting, creative parts. It's the packaging, the publishing, the \u201Cboring but essential\u201D parts that stall everything.",
  "A new idea arrives and suddenly the old project feels less interesting. You tell yourself you'll come back to it.",
  "You've tried planning systems, project trackers, accountability threads. Most of them became another unfinished thing.",
  "You know you're capable of making something good. That makes the folder of unfinished things harder to look at, not easier.",
];

const SideRecognition = () => (
  <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 the only one with a folder full of things you started.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns that come up again and again for people with ADHD trying to build something on the side. If you recognise yourself here, you're in the right place.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {SIDE_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 about effort or ability. It's what happens when ADHD meets a process with no deadline, no external pressure, and a delayed reward.
        </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 stages) ---------------- */

const SIDE_PATTERNS = [
  {
    title: "The idea spiral",
    body: "The beginning never really ends. New ideas keep arriving before the current one is finished, and researching, comparing, and refining can feel indistinguishable from progress.",
  },
  {
    title: "The motivation cliff",
    body: "By week three, the project stops being exciting and starts being work. A side project offers no urgency, no deadline, no visible audience. These are the exact conditions that make sustained effort hardest for an ADHD brain.",
  },
  {
    title: "The hard middle",
    body: "Procrastination here isn't poor discipline. It's emotion regulation. The most uncomfortable work, packaging, publishing, asking for feedback, sits at exactly the point where novelty has run out and self-exposure is highest.",
  },
  {
    title: "The idea hijack",
    body: "A newer idea arrives. Switching feels like relief. That's not flakiness. It's the brain moving away from discomfort and toward stimulation, doing exactly what it's designed to do.",
  },
  {
    title: "The shame layer",
    body: "Each unfinished project adds weight to the next one. The folder of half-built things becomes harder to look at, which makes starting again harder, which adds to the folder.",
  },
];

const SideWhyItHappens = () => (
  <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]">
          Side projects are the hardest possible context for an ADHD brain to work in.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            A side project is entirely optional. The reward is far away. There's no external structure unless you build it yourself. Nobody is waiting. Nothing is urgent.
          </p>
          <p>
            That's almost exactly the opposite of what ADHD brains need to sustain effort. The repeated failure isn't random. It follows a predictable arc.
          </p>
        </div>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {SIDE_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">
        Every one of these stages is predictable. <span className="font-semibold">And every one of them is something the right daily structure can make significantly easier.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- The finishing problem (unique to this page) ---------------- */

const SideFinishing = () => (
  <Section id="finishing" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth saying clearly</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]">
          Finishing is harder than starting. That's not obvious, and it matters.
        </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 about side projects treats finishing as the natural result of starting well. It isn't. Finishing is a distinct phase with its own specific demands.
        </p>
        <p>
          The endgame usually involves the lowest-novelty, highest-exposure work: polishing, publishing, asking for feedback, risking criticism. These are the tasks that feel least like the project you fell in love with, and they require sitting with discomfort rather than moving toward stimulation.
        </p>
        <p className="text-ink font-medium">
          Loops treats finishing as a separate mode with its own structure and coaching, not something that happens automatically once you've done enough work.
        </p>
      </div>
    </Container>
  </Section>
);

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

const SIDE_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you ship, they see it. They just get to watch you keep going, and cheer you on." },
  { t: "They don't manage you", b: "They don't nag or remind you. They don't check your work or tell you what to do. And they don't even need to pay. Their side is light on purpose." },
  { t: "You're always in control", b: "You choose who it is. You decide what they can see, and you can change it any time." },
  { t: "Suddenly someone is waiting", b: "For a project with no deadline and no audience, one person quietly waiting is often the whole difference." },
];

const SideWhyLoopsWorks = () => (
  <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>The whole trouble with a side project is that nobody is waiting. No deadline, no audience, no one to let down. That's the exact condition an ADHD brain finds hardest to sustain.</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, another maker, whoever it is. When you close a loop, they see it. When you ship, they see it. You decide 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">
        {SIDE_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 SIDE_STEPS = [
  { t: "Pick one project", b: "Tell Loops which project you're working on. Not your best idea. Not your most ambitious one. The one you want to actually finish. Loops helps you park the others so they don't compete for your attention." },
  { t: "Choose your person", b: "Pick one person you trust to see your progress. 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 shows you what's due and gives you specific, achievable next steps for your project. Not a plan. Not a roadmap. Just the next right thing to do today. Close the loop, and your person sees it." },
  { t: "Get coaching through the hard parts", b: "In the third week when the novelty has gone. In the moment before you open a newer idea. When the \u201Cboring but essential\u201D work is the only thing left. Loops provides practical coaching to help you stay with it rather than around it." },
  { t: "Ship something", b: "When the project is ready enough, Loops helps you get it out of the folder and into the world. Not perfect. Done. That's the goal." },
];

const SideHowItWorks = () => (
  <Section id="how" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Getting started</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          Simple from day one.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need a new productivity system. You need one project, one daily action, and something that keeps pulling you back when you drift.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {SIDE_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">
        There's no wrong project to start with. The one gathering dust in your folder is fine.
      </p>
    </Container>
  </Section>
);

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

const SIDE_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The one project you want to finish, written in your own words, with a season and a clear picture of what shipping looks like. Not your best idea or your most ambitious one. The one your brain can actually see through to done." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose. Some run every day, some a few times a week: thirty minutes on the project after dinner, one small feature a week, publish one update. 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 milestones you reach. Support, without the nagging. 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 first draft done, the first thing published, the project shipped. 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 which project you're on and where you keep drifting, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 11pm, right before you open a shinier new idea." },
];

const SideWhatsInside = () => (
  <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">
        {SIDE_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 SIDE_TESTIMONIALS = [
  { quote: "I had the same project half-finished for eight months. Loops didn't make me love the boring parts. It made them smaller and more survivable. I shipped it on a Tuesday afternoon and it was the least dramatic thing I have ever done.", who: "UX writer, Glasgow", meta: "ADHD diagnosis at 27" },
  { quote: "The part that changed everything was only having one active project at a time. I thought I needed more options. It turns out I needed fewer.", who: "Developer, Leeds", meta: null },
  { quote: "I had tried five different accountability systems. What was different about Loops was that it didn't make me feel like a failure when I came back after three days away. It just asked what I was doing next.", who: "Illustrator, London", meta: null },
];

const SideSocialProof = () => (
  <Section id="stories" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>From people who recognise themselves in this</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 in good company.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {SIDE_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 SIDE_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the project.", 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 SidePricing = () => (
  <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">
        {SIDE_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 shadow-soft">
        <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) ---------------- */

const SIDE_OBJECTIONS = [
  { q: "\u201CIt's just a side project. Do I really need a system for it?\u201D", a: "The stakes aren't as low as they feel. A project you care about but can't finish costs something: confidence, creative momentum, and the quiet accumulation of evidence that you don't complete things. A simple daily system is less effort than carrying that." },
  { 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. You decide what your person sees, and you can change it any time. You can add them whenever you're ready." },
  { q: "\u201CI've tried productivity systems before. They always become another unfinished thing.\u201D", a: "Most systems aren't built for how ADHD actually works. They assume consistent motivation and linear progress. Loops is designed to meet you where you are when you come back, not to treat a gap as a reason to give up." },
  { q: "\u201CWhat if I have too many ideas and can't pick one?\u201D", a: "That's the idea spiral. Loops helps you name it and step out of it. It helps you choose one project and actively park the others so they feel held rather than abandoned." },
  { q: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. If the patterns on this page feel familiar, Loops is built for you." },
];

const SideObjections = () => (
  <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">
        {SIDE_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 SIDE_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, rewards, and progress tracking into one system. For side projects, it provides the external structure that ADHD brains need to keep going through the slow, difficult, low-novelty phases that most projects stall in." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see your progress. When you close a loop or hit a milestone, they see it. They don't manage you or nag you. They just get to watch you keep going. 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: "Why do people with ADHD struggle to finish side projects?", a: "Side projects are optional, self-directed, and delayed in reward. That's the opposite of what ADHD brains need to sustain effort. There's no external deadline, no accountability, no visible audience. The motivation that feels strong at the start reliably fades before the work is done." },
  { q: "Why is finishing harder than starting for people with ADHD?", a: "The end phase of a project typically involves the lowest-novelty, highest-exposure work: polishing, documenting, publishing, and risking judgement. These tasks offer the least immediate stimulation and the most emotional discomfort. Research increasingly frames procrastination as an emotion-regulation problem rather than a discipline problem, which helps explain why the final stretch is where most projects stop." },
  { q: "What is the idea spiral in ADHD side projects?", a: "The idea spiral is the pattern where new ideas arrive before existing projects are finished, pulling attention away from the current work. It's a predictable result of how ADHD affects novelty-seeking and delayed reward processing. Having a system that actively parks new ideas while protecting the current project's momentum is one of the most effective ways to break the cycle." },
  { q: "How does Loops help with finishing a side project?", a: "It breaks the project into one daily action so the next step is always clear. It provides coaching through the motivation cliff, the hard middle, and the final push to ship. And it treats finishing as a distinct mode with its own structure, rather than assuming it happens naturally once you've done enough work." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the patterns described on this page feel familiar, Loops is built for you." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is built with UK users in mind." },
];

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

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

const SideFinalCTA = () => (
  <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>Ship one thing</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            The goal isn't a perfect project. It's a finished one.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You've got something in that folder. Loops can help you get it out, and it helps to have one person watching you do it.
          </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 SIDE_SOURCES = [
  { t: "A systematic review of interventions to support adults with ADHD at work — Frontiers in Psychology", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Adult ADHD-Related Poor Quality of Life — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12423737/" },
  { t: "Get A SIDE PROJECT! — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1ohy7e/get_a_side_project/" },
  { t: "Attention-Deficit/Hyperactivity Disorder and Monetary Delay Discounting — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5049699/" },
  { t: "ADHD, Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "Strengths and challenges to embrace ADHD in employment — systematic review", u: "https://journals.sagepub.com/doi/10.1177/27546330241287655" },
  { t: "Time Perception in Adult ADHD: Findings from a Decade — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "What Are You Waiting For?! Roles of Motivation, Goal Processes and Prospective Memory — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC13033046/" },
  { t: "Self-Esteem in Adults With ADHD Using the Rosenberg Scale — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC11016209/" },
  { t: "Stress and work-related mental illness among working adults with ADHD — BMC Psychiatry", u: "https://link.springer.com/article/10.1186/s12888-022-04409-w" },
  { t: "Don't buy that planner. You know you won't use it — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/18smcln/dont_buy_that_planner_you_know_you_wont_use_it_if/" },
  { t: "Evaluating the evidence: a systematic review of digital interventions for ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC12016436/" },
  { t: "A systematic review and component network meta-analysis — The Lancet Psychiatry", u: "https://www.thelancet.com/journals/lanpsy/article/PIIS2215-0366%2824%2900360-2/fulltext" },
  { t: "An Investigation of Body Doubling with Neurodivergent Participants — ACM Digital Library", u: "https://dl.acm.org/doi/full/10.1145/3689648" },
  { t: "How to tackle large projects? — CHADD's Adult ADHD Support", u: "https://healthunlocked.com/adult-adhd/posts/151599568/how-to-tackle-large-projects" },
  { t: "Stigma in adults with ADHD: a systematic review of types, experiences and potential implications for quality of life — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2026.1783271/full" },
  { t: "Cognitive-Behavioral Therapy for Adult ADHD — Solanto", u: "https://www.guilford.com/excerpts/solanto.pdf" },
  { t: "Entrepreneurship and ADHD: A Meta-Analytical Assessment of the State-of-the-Art and Suggestions for the Future", u: "https://journals.sagepub.com/doi/abs/10.1177/10422587251392498" },
];

const SideSources = () => (
  <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 research into ADHD, procrastination, executive function, and real accounts from people trying to finish things they've started. Here's where it comes from.
        </p>
      </div>

      <ol className="mt-10 grid gap-x-8 gap-y-0 sm:grid-cols-2">
        {SIDE_SOURCES.map((s, i) => (
          <li key={i} className="flex gap-3.5 border-t border-line py-3.5">
            <span aria-hidden="true" className="mt-0.5 text-[12px] font-semibold text-ink-3 tnum tabular-nums w-5 shrink-0">{String(i + 1).padStart(2, "0")}</span>
            <a href={s.u} target="_blank" rel="noopener noreferrer" className="focus-ring rounded-md text-[13.5px] leading-[1.55] text-ink-2 hover:text-brand-deep hover:underline text-pretty transition-colors">{s.t}</a>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[13px] leading-[1.6] text-ink-3 text-pretty">
        Loops is a daily coaching app, not a medical or clinical service. These sources inform how we think about ADHD and finishing side projects; they are not an endorsement of Loops by their authors.
      </p>
    </Container>
  </Section>
);

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

function SideApp() {
  return (
    <main id="main">
      <SideNav />
      <SideHero />
      <SideWhatLoopsDoes />
      <SideRecognition />
      <SideWhyItHappens />
      <SideFinishing />
      <SideWhyLoopsWorks />
      <SideHowItWorks />
      <SideWhatsInside />
      <SideSocialProof />
      <LoopsPricing bg="bg-soft" />
      <SideObjections />
      <SideFAQ />
      <SideFinalCTA />
      <SideSources />
      <Footer />
    </main>
  );
}

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