/* Loops — "Growing an Audience With ADHD" use-case page
   Repeated-failure register: bitter, quietly ashamed self-awareness. Five gaps: idea /
   switching / reward / shame / platform. Unique section: creative spark vs sustained
   execution paradox. Unique objection: "I'll just abandon this too". CTA lowest promise. */

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

const AUD_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 AudNav = () => {
  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">
            {AUD_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">
              {AUD_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 AUD_HERO_BLOCKS = [
  {
    title: "Sort your ideas",
    body: "Turn the pile of half-formed ideas into one thing worth doing next.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0"/></svg>),
  },
  {
    title: "Keep showing up",
    body: "Small daily prompts that don't depend on motivation turning up first.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4zM16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2m-5.146-5.146-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
  {
    title: "Recover from gaps",
    body: "A missed week becomes a restart, not a reason to quit again.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg>),
  },
];

const AudHero = () => (
  <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-[54px] fade-in-up delay-1">
          You've started before. More than once. Here's why it didn't stick.
        </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 that you don't have ideas, or that you don't care enough. Growing an audience asks for a kind of consistency that ADHD makes genuinely harder to give.
        </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 each day, an easy way back after a quiet week, and, if you want it, <span className="text-ink font-medium">one person in your corner who isn't the audience you're trying to reach.</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">
        {AUD_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 AudWhatLoopsDoes = () => (
  <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 built for the part that keeps breaking.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            You don't need more ideas, more platforms, or more discipline. You need the gap between intention and posting to get smaller, on the days it usually doesn't.
          </p>
          <p>
            Loops gives you one small action each day, helps you recover quickly when a week goes wrong, and keeps your audience-building goal visible without needing you to hold it in your head.
          </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 AUD_RECOGNITION = [
  "You have a notes app full of ideas. Most of them will never become a post.",
  "You post brilliantly for two or three weeks, then quietly disappear without meaning to.",
  "You open the app to post once and somehow lose forty minutes scrolling instead.",
  "A bit of criticism, or even silence, can knock you out of posting for days.",
  "You've tried planners, content calendars, and trackers. They all became one more thing you abandoned.",
  "Every restart feels heavier than the last, because you remember every time before.",
];

const AudRecognition = () => (
  <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 trying to build an audience. If you see 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">
        {AUD_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">
          None of this means you're not capable. It means the work has been fighting the way your brain actually runs.
        </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 gaps) ---------------- */

const AUD_PATTERNS = [
  { title: "The idea gap", body: "You can generate ideas faster than you can sort them. A growing list of unused ideas doesn't feel like potential. It starts to feel like proof." },
  { title: "The switching gap", body: "Writing, filming, editing, posting, and replying all pull on different kinds of focus. Jumping between them is exactly the kind of fragmentation that drains an ADHD brain fastest." },
  { title: "The reward gap", body: "An audience that compounds in six months can't compete with right now. When the payoff is distant, it's normal for the brain to keep putting today's post off." },
  { title: "The shame gap", body: "A quiet comment, or no comments at all, can feel disproportionately heavy. That sensitivity to criticism isn't oversensitivity. It's a documented part of how ADHD affects emotional regulation." },
  { title: "The platform trap", body: "The app you need to post on is also the app built to keep you scrolling. The same tool is both your only way to reach people and one of the easiest places to lose an hour." },
];

const AudWhyItHappens = () => (
  <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 a mismatch.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Audience growth asks for the exact things ADHD makes least reliable: steady repetition, delayed rewards, and recovering smoothly after things go quiet. Knowing what to do has never been the missing piece.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {AUD_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">None of these gaps are fixed by trying harder. They're fixed by building around them.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: creative spark vs sustained execution ---------------- */

const AudReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing</Kicker></div>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[42px] leading-[1.12]">
          The part that feels like a contradiction.
        </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>
          It's common to start a project, a page, or an account with real momentum, and then watch that same momentum disappear the moment it stops being new. That's not a coincidence. Some of the traits that make starting easy, like quick ideas and a pull toward novelty, are different from the traits that growth needs once the early excitement fades.
        </p>
        <p className="text-ink font-medium">
          That doesn't mean ADHD makes audience growth impossible. It means the early spark and the long middle need different kinds of support, and most advice only ever talks about the spark.
        </p>
      </div>
    </Container>
  </Section>
);

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

const AUD_WITNESS_CARDS = [
  { t: "Not the audience you're chasing", b: "You choose one person you trust, someone whose being there feels safe. Not a follower, not the audience, just one person in your corner who's glad you're still at it." },
  { t: "They don't rate your posts", b: "They don't rate your posts or count your numbers. 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: "Worth more than the metrics", b: "When the metrics are silent and a comment stung, one person who's glad you're still at it is worth more than the numbers." },
];

const AudWhyLoopsWorks = () => (
  <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>Posting into the quiet is its own kind of lonely. You put something out, nobody replies, and the silence is easy to read as a verdict, which is exactly what makes the next post harder to send.</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, someone whose being there feels safe. Not a follower, not the audience, just one person in your corner. When you close a loop, they see it. When you come back after a quiet week, they see that too, and it's no big deal. You decide exactly what they can see, and you can change it any time.</p>
          <p><span className="text-ink font-medium">This is the step most people skip with other apps. It's also the one that makes Loops work.</span></p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {AUD_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 AUD_STEPS = [
  { t: "Tell Loops what you're building", b: "Set your audience goal in plain language. No content strategy document required." },
  { t: "Choose your person", b: "Pick one person you trust, whose being there feels safe, to see your progress. Not the audience, just one person in your corner. 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: "Short, specific things to do each day, whether that's drafting, posting, or replying. It takes minutes, not hours. Close the loop, and your person sees it." },
  { t: "Get support when things slip", b: "A missed day or a hard comment doesn't need a full reset. Loops helps you pick the thread back up quickly." },
  { t: "Watch the small wins add up", b: "Over weeks, the daily actions become a body of work and a steadier presence, without needing a single big push." },
];

const AudHowItWorks = () => (
  <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 to rebuild your whole approach to content. Loops fits around what you're already trying to do.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {AUD_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 perfect run. You just need today's step.
      </p>
    </Container>
  </Section>
);

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

const AUD_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "Your audience-building goal, described your way. No content strategy document. Just a clear sense of what you're building, kept visible so you don't have to hold it in your head." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, that takes minutes rather than hours. Some run every day, some a few times a week: draft one idea from the pile, post the thing you already made, reply to a few people. A few connect to your goal. Others are just life, like taking your meds before breakfast. Miss one and nothing is wiped out. The next action is still there, still small, still doable." },
  { t: "Your person", b: "The one you choose to see your progress: the loops you close and the weeks you come back after going quiet. A safe pair of eyes in your corner, not the audience, and not there to rate your posts. On a Crew plan it can be more than one: your people." },
  { t: "Rewards you can feel", b: "Because the real payoff is months away, you promise yourself something for the moments that matter now: a week you kept showing up, the comeback after a quiet stretch, the idea that finally became a post. 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 building and where you tend to drop off, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there after a quiet week or a comment that stung, with a calm way back in, not a reminder of the run you broke." },
];

const AudWhatsInside = () => (
  <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">
        {AUD_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 AUD_TESTIMONIALS = [
  { quote: "I'd started three accounts before and let them all die quietly. The daily prompts meant I had something small to do even on the weeks I didn't feel inspired. Six months in, I'm still here.", who: "Freelance illustrator", meta: "Diagnosed with ADHD at 29" },
  { quote: "I used to disappear for two weeks after one bad comment. Loops helped me come back the next day instead of the next month.", who: "Newsletter writer", meta: "Using Loops for 5 months" },
  { quote: "My ideas list was the problem, not the lack of them. Having one clear thing to do each day got me out of my notes app and into actually posting.", who: "Podcast host, Bristol", meta: null },
];

const AudSocialProof = () => (
  <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">
        {AUD_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 AUD_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, 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 AudPricing = () => (
  <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">
        {AUD_PRICING.map((p) => (
          <article key={p.name} className={`relative flex flex-col rounded-card border bg-white p-6 sm:p-7 ${p.featured ? "border-brand shadow-card ring-1 ring-brand/20" : "border-line shadow-soft"}`}>
            {p.tag ? <span className="absolute -top-3 left-6 rounded-pill bg-brand px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-white shadow-cta">{p.tag}</span> : null}
            <h3 className="text-[20px] font-semibold tracking-tight2 text-ink">{p.name}</h3>
            <div className="mt-3 flex items-baseline gap-1">
              <span className="text-[32px] font-bold tracking-tight3 text-ink tnum">{p.price}</span>
              <span className="text-[15px] text-ink-3">{p.per}</span>
            </div>
            <p className="mt-4 flex-1 text-[14.5px] leading-[1.65] text-ink-2 text-pretty">{p.blurb}</p>
            <div className="mt-6">
              <Button variant={p.featured ? "primary" : "secondary"} size="md" href="#start">Get Early Access</Button>
            </div>
          </article>
        ))}
      </div>

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

/* ---------------- Objections (5, incl. abandon-this-too + share) ---------------- */

const AUD_OBJECTIONS = [
  { q: "\u201CI've tried tools like this before. They didn't work.\u201D", a: "Most tools assume the problem is organisation. Loops is built around the parts that actually break for ADHD brains, like restarting after a gap and recovering from criticism, not just scheduling posts." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", a: "No. Solo works perfectly well on its own. If you do choose someone, they're a safe pair of eyes in your corner, not the audience, and not there to rate your posts. You decide what your person sees, and you can add them whenever you're ready." },
  { q: "\u201CWhat if my niche or idea isn't good enough?\u201D", a: "That's rarely the real issue. ADHD brains are often strong at generating original ideas. The struggle is usually sustaining and finishing one, which is exactly what Loops is built to support." },
  { q: "\u201CI'm worried I'll just abandon this too.\u201D", a: "That fear is fair, given what's happened before. Loops is built around small, low-stakes daily actions specifically because big commitments are where most systems quietly fail." },
  { q: "\u201CI don't have time to learn another app.\u201D", a: "Loops doesn't ask for a learning curve. Setup takes a few minutes, and each day asks for one small action, not a new skill to master." },
];

const AudObjections = () => (
  <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">
        {AUD_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 AUD_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. For audience growth, it focuses on small daily actions, one person who sees your progress, recovery support after missed days, and keeping the goal visible without extra admin." },
  { 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 weeks you come back after going quiet. They're a safe pair of eyes in your corner, not a follower or the audience, and not there to rate your posts or count your numbers. When the metrics are silent and a comment stung, one person who's glad you're still at it is worth more than the numbers. 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 growing an audience if you have ADHD?", a: "It breaks audience growth into one manageable daily step. It helps you recover quickly after a missed day or a tough comment. And it keeps your goal visible so you're not relying on memory or motivation alone." },
  { q: "Why do people with ADHD struggle to grow an audience even with good ideas?", a: "The barriers are usually structural rather than personal: difficulty sustaining motivation toward a distant payoff, getting fragmented across different tasks, and finding it hard to recover after criticism or a missed streak. All of these respond well to the right kind of support." },
  { 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 on this page feel familiar, Loops is built for you." },
  { q: "Will Loops help me go viral?", a: "No, and that's not really what it's for. Loops is built to help you keep showing up consistently, which is what most lasting audiences are actually built from." },
  { q: "I've abandoned audience-building attempts before. Will this be different?", a: "We can't promise certainty, but Loops is built specifically around the moments where past attempts usually broke down, like missed days and quiet weeks, rather than assuming a clean run." },
  { q: "How long does it take to see results?", a: "Some people notice a difference in how posting feels within the first couple of weeks. A noticeably steadier audience usually takes a few months of small, repeated steps." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

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

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

const AudFinalCTA = () => (
  <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>Today's post</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]">
            You don't need a comeback. You need today's post.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You've already proved you can start. The next step is making the next one a little easier than the last, and, if you want, one person in your corner while you take 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 AUD_SOURCES = [
  { t: "ADHD, Executive Function and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "CBT for Adult ADHD: From Intention to Action — Psychwire", u: "https://psychwire.com/free-resources/q-and-a/15i4yzk/cbt-for-adult-adhd-from-intention-to-action" },
  { t: "Creativity in ADHD: Goal-Directed Motivation and Domain-Specific Understanding — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/28845720/" },
  { t: "Evaluating Digital Interventions for ADHD Diagnosis and Management — Strathprints", u: "https://strathprints.strath.ac.uk/89559/7/Bosnic-etal-DHI-2024-Evaluating-Digital-Interventions-for-ADHD-Diagnosis-andManagement.pdf" },
  { t: "Understanding Procrastination — Aarhus University", u: "https://studypedia.au.dk/fileadmin/www.studiemetro.au.dk/Procrastination_2.pdf" },
  { t: "Evidence of Emotion Dysregulation as a Core Symptom of Adult ADHD: A Systematic Review — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" },
  { t: "Strengths and Challenges to Embrace Attention-Deficit/Hyperactivity Disorder in Employment — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/27546330241287655" },
  { t: "Does Anyone Have Suggestions on How an Adult With ADHD Can Avoid Feeling Overwhelmed? — r/gtd", u: "https://www.reddit.com/r/gtd/comments/1l8tkkc/does_anyone_have_suggestions_on_how_an_adult_with/" },
  { t: "How I Create Content as Someone With ADHD: 7 Tactics + Tools I Lean On — Buffer", u: "https://buffer.com/resources/create-content-adhd/" },
  { t: "Self-Compassion and Perceived Criticism in Adults With ADHD — PubMed", u: "https://link.springer.com/article/10.1007/s12671-020-01464-w" },
  { t: "She Wrote the Book on Women, Shame, and ADHD — Understood.org", u: "https://www.understood.org/en/podcasts/climbing-the-walls/she-wrote-the-book-on-women-shame-and-adhd" },
  { t: "ADHD in Adults — NHS", u: "https://www.nhs.uk/conditions/adhd-adults/" },
  { t: "Why Are All These ADHD “Help” Tools Overwhelming? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1llvn96/why_are_all_these_adhd_help_tools_overwhelming/" },
  { t: "ADHD-Friendly Content Strategy Pending... — r/content_marketing", u: "https://www.reddit.com/r/content_marketing/comments/1obf5co/adhdfriendly_content_strategy_pending/" },
  { t: "The Efficacy of Cognitive Behavioral Therapy for Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/27554190/" },
  { t: "A Systematic Review of Interventions to Support Adults With ADHD at Work — Frontiers", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2022.893469/full" },
  { t: "Arousal Dysregulation and Executive Dysfunction in ADHD — Frontiers", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2023.1336040/full" },
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Creativity and ADHD: A Review of Behavioural Studies, Psychostimulants and Neural Underpinnings — Utrecht University", u: "https://dspace.library.uu.nl/bitstream/handle/1874/409179/1_s2.0_S0149763420305935_main.pdf?sequence=1" },
  { t: "A Meta-Analysis of Pharmacological and Psychosocial Interventions for Work-Relevant Outcomes in Adults With ADHD — Sage Journals", u: "https://journals.sagepub.com/doi/10.1177/27546330241292984" },
];

const AudSources = () => (
  <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 executive function, emotion regulation and delayed reward, and real accounts from people with a private tally of unfinished accounts and abandoned content calendars. Here's where it comes from.
        </p>
      </div>

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

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

function AudApp() {
  return (
    <main id="main">
      <AudNav />
      <AudHero />
      <AudWhatLoopsDoes />
      <AudRecognition />
      <AudWhyItHappens />
      <AudReframe />
      <AudWhyLoopsWorks />
      <AudHowItWorks />
      <AudWhatsInside />
      <AudSocialProof />
      <LoopsPricing bg="bg-soft" />
      <AudObjections />
      <AudFAQ />
      <AudFinalCTA />
      <AudSources />
      <Footer />
    </main>
  );
}

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