/* Loops — "Build Financial Security With ADHD" use-case page
   Quiet shame + dread of looking directly. Barrier is avoidance-of-looking, not avoidance-of-
   acting. Financial guardrails: no financial-outcome promises, positioned as habit tool not
   advice, MoneyHelper + StepChange debt signpost (NOT shortened) in objection 4 + FAQ, no
   shaming. Five gaps: visibility / leak / relief-spending / admin / shame. Unique section:
   why budgeting apps work for two weeks. CTA: open the app today. */

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

const FIN_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 FinNav = () => {
  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">
            {FIN_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">
              {FIN_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 FIN_HERO_BLOCKS = [
  {
    title: "Make looking feel safer",
    body: "Small, judgement-free check-ins instead of one big dreaded review.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/></svg>),
  },
  {
    title: "Keep bills money separate",
    body: "Support so bill money stops quietly becoming spending money.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z"/></svg>),
  },
  {
    title: "Catch admin before it snowballs",
    body: "Gentle nudges for renewals, letters, and tasks that turn into crises if left.",
    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>),
  },
];

const FinHero = () => (
  <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.05] text-[32px] sm:text-[44px] lg:text-[52px] fade-in-up delay-1">
          Avoiding your banking app doesn't mean you don't care about money.
        </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">
          Bills, admin, and saving all ask for steady, future-focused follow-through. ADHD makes exactly that harder, which is why avoidance often feels easier than looking.
        </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 daily actions, gentle check-ins instead of one overwhelming review, and, if you want it, <span className="text-ink font-medium">one person in your corner who won't judge.</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">
        {FIN_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 FinWhatLoopsDoes = () => (
  <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 actually breaks.
        </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 another spreadsheet or a lecture about budgeting basics. You need looking at your money to feel less threatening, and the boring admin to stop sneaking up on you.
          </p>
          <p>
            Loops gives you small daily actions, gentle check-ins instead of one overwhelming review, and support catching admin before it becomes urgent.
          </p>
          <p>
            Then it adds the part most apps leave out. <span className="text-ink font-medium">One person quietly in your corner.</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 FIN_RECOGNITION = [
  "You've avoided opening your banking app for longer than you'd like to admit.",
  "Bills money has a habit of quietly becoming spending money before the bill is due.",
  "A small purchase has given you a quick lift on a hard or boring day, more than once.",
  "A letter or renewal sat unopened until it turned into a much bigger problem.",
  "You've started a budget, spreadsheet, or savings plan that worked brilliantly for about two weeks.",
  "You've felt too ashamed about a money mistake to tell anyone, even people who'd understand.",
];

const FinRecognition = () => (
  <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 around money. 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">
        {FIN_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 bad with money. It means money habits ask for exactly the kind of steady, future-focused follow-through ADHD makes harder.
        </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 FIN_PATTERNS = [
  { title: "The visibility gap", body: "Avoiding a look at your finances can feel safer than facing them. That avoidance usually turns a manageable problem into a bigger one, through late fees or missed payments." },
  { title: "The leak gap", body: "Money for bills sitting in the same place as everyday spending money feels mentally available. By the time the bill is due, it's often already gone." },
  { title: "The relief-spending gap", body: "A small purchase can offer fast relief from boredom, stress, or a flat mood. That's not weak willpower. It's a quick, accessible way to feel better in the moment." },
  { title: "The admin gap", body: "Renewals, letters, and forms often get delayed until the consequences are serious. What's sometimes called the \u201CADHD tax\u201D is largely the cost of this exact pattern." },
  { title: "The shame gap", body: "Repeated money mistakes tend to get filed away as proof of being irresponsible. That belief makes it harder to ask for help, which makes the next mistake more likely." },
];

const FinWhyItHappens = () => (
  <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 money knowledge problem. It's a follow-through problem.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Financial security depends on remembering, separating, delaying, and following through over time. Knowing the "right" thing to do has rarely been the missing piece.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {FIN_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 mean you don't care about your finances. They mean the systems around money need to work with how your brain runs, not against it.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: why budgeting apps work for two weeks ---------------- */

const FinReframe = () => (
  <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]">
          Why budgeting apps work for two weeks and then stop.
        </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>
          A new spreadsheet, app, or "fresh start" budget often works brilliantly at first. Then the novelty fades, and the daily upkeep it asks for, logging, reviewing, deciding, becomes its own boring task that gets skipped, just like everything else that depends on steady repetition.
        </p>
        <p className="text-ink font-medium">
          That's not a sign the plan was wrong. It's a sign the plan asked for the wrong kind of effort. The fix isn't a better spreadsheet. It's a system that needs less from you to keep working.
        </p>
      </div>
    </Container>
  </Section>
);

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

const FIN_WITNESS_CARDS = [
  { t: "They see the steps, not the numbers", b: "When you close a loop, they see it. Not your balance, not your spending, not the mistakes, just the small steps you're taking. They get to see you keep looking, gently, instead of turning away." },
  { t: "They don't audit you", b: "They don't audit you or ask about the 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, someone whose being there feels safe. You decide exactly what they can see, and you can change it any time." },
  { t: "Takes the shame's power away", b: "When the shame is what's keeping you from your own finances, one person who isn't judging you takes some of its power away." },
];

const FinWhyLoopsWorks = () => (
  <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 follow through 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>Money is the thing people hide hardest. The page names it: a mistake can feel too shaming to tell anyone, even people who'd understand. Carried alone and unseen, that shame is exactly what keeps the banking app closed.</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. When you close a loop, they see it. Not your balance, not your spending, not the mistakes, just the small steps you're taking. 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">
        {FIN_WITNESS_CARDS.map((c) => (
          <article key={c.t} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{c.t}</h3>
            <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">{c.b}</p>
          </article>
        ))}
      </div>

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

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

const FIN_STEPS = [
  { t: "Tell Loops what feels hardest", b: "Name the part of money that keeps slipping, whether that's looking, saving, or admin." },
  { t: "Choose your person, if you want one", b: "Optional, and with money most people keep it private, which is completely fine. If you'd like someone alongside you, pick one person you trust to see the small steps you're taking, never your balance or your spending. You decide exactly what they can see, and you can change it any time. On a Crew plan you can choose more than one." },
  { t: "Get small daily actions", b: "Short, specific things to do each day. No full financial review required. Close the loop, and your person sees it." },
  { t: "Get gentle support, not judgement", b: "Check-ins designed to feel safe, not like an audit of past mistakes." },
  { t: "Catch admin before it snowballs", b: "Quiet nudges for renewals and letters, so small tasks don't turn into bigger problems." },
];

const FinHowItWorks = () => (
  <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 overhaul your whole financial life. Loops fits around the money habits you're already trying to build.
        </p>
      </div>

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

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

const FIN_WHATS_INSIDE = [
  { t: "One goal, in your own words", b: "The part of money that keeps slipping, described your way: looking, saving, admin, whatever it is. No categories, no spreadsheet. Just a clear sense of where you want things to feel less threatening." },
  { t: "Loops that fit your life", b: "A loop is one small, repeating action, at a pace you choose, small enough to do without dread. Some run every day, some a few times a week: open the banking app for ten seconds, move the bill money aside, open one letter you've been avoiding. 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 the small steps you're taking, never your balance, your spending, or your mistakes. A safe pair of eyes in your corner, not an auditor. 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: a week you kept looking, the bill money that stayed put, the letter opened before it became a crisis. 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 the part of money you find hardest, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there when opening the app feels too much, or an admin task has been sitting, with a small, calm next step and no lecture." },
];

const FinWhatsInside = () => (
  <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">
        {FIN_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>
);

/* ---------------- Pricing ---------------- */

const FIN_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, progress, rewards and coach. Just you and the money habits you're building.", 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. A natural fit for a couple sharing the money side of a household.", featured: true },
];

const FinPricing = () => (
  <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. And you can start alone.
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 items-start max-w-3xl">
        {FIN_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>
);

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

const FIN_TESTIMONIALS = [
  { quote: "I hadn't opened my banking app in over a month. The shame had built up that much. Small, judgement-free check-ins got me looking again without the dread.", who: "Freelance designer", meta: "Diagnosed with ADHD at 33" },
  { quote: "I used to spend my rent money without meaning to. Having something separate the bills money for me, gently, made the biggest difference.", who: "In a shared flat", meta: "Using Loops for 5 months" },
  { quote: "I'd started four budgeting apps before this one. The difference was how little it asked of me to keep going.", who: "Retail manager, Liverpool", meta: null },
];

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

/* ---------------- Objections (4, incl. audit-fear 1st + debt signpost 4th) ---------------- */

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

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;Won't this just feel like an audit of how badly I've handled things?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">No, and that's exactly what it's designed to avoid. Loops focuses on small steps going forward, not a detailed review of past spending.</p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;Do I have to share any of this with anyone?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">No, and with money most people keep it private, which is completely fine. If you'd like someone alongside you, they only ever see the small steps you choose to share, never your balance, your spending, or your mistakes. You decide what your person sees, and you can add them whenever you're ready.</p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;I've tried budgeting apps before. They didn't last.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Most budgeting apps ask for steady manual upkeep. Loops is built around small, low-effort daily actions instead, since that's usually where manual systems break down first.</p>
        </article>
        <article className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;I'm worried looking at my finances will make me feel worse.&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">That fear is common, and it's exactly why the check-ins are designed to be gentle. Looking a little at a time tends to feel far less overwhelming than one big dreaded review.</p>
        </article>
        <article className="rounded-card border border-brand/25 bg-brand-soft/50 p-6 sm:p-7 shadow-soft sm:col-span-2">
          <h3 className="text-[17px] sm:text-[18px] font-semibold tracking-tight2 text-ink leading-snug text-pretty">&ldquo;What if I'm already in serious debt or financial trouble?&rdquo;</h3>
          <p className="mt-3 text-[15px] leading-[1.65] text-ink-2 text-pretty">Loops can support daily habits, but it isn't a substitute for debt advice, and it isn't financial advice. If things have become serious, free and confidential debt advice is available in the UK, from services like Citizens Advice, StepChange, or National Debtline, and reaching out to one of them is genuinely worth it. Loops can sit alongside that support, not in place of it.</p>
          <div className="mt-4"><Button variant="secondary" size="sm" href="/support/find-help/">Find help now</Button></div>
        </article>
      </div>
    </Container>
  </Section>
);

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

const FIN_FAQS = [
  { q: "What is Loops?", a: "Loops is a daily coaching app for people with ADHD and anyone building better habits. For money, it focuses on small daily actions, one person who can be a safe, non-judging ally, gentle check-ins instead of overwhelming reviews, and help catching admin before it becomes a crisis." },
  { q: "Who is 'your person', and do I need one?", a: "Your person is the one you choose to see the small steps you're taking, never your balance, your spending, or your mistakes. They don't audit you or ask about the numbers. When shame is what's keeping you from your own finances, one person who isn't judging you takes some of its power away. You don't need one to start, and with money most people keep it private, which is completely fine. Your person is there for if and when you want it. On a Crew plan it can be more than one: your people." },
  { q: "How does Loops help with money if you have ADHD?", a: "It breaks financial habits into one manageable daily step, makes looking at money feel less threatening, and helps catch renewals and admin before they snowball into bigger problems." },
  { q: "Why is financial security harder with ADHD even when I understand money basics?", a: "Financial habits depend on remembering, separating funds mentally, delaying gratification, and following through consistently, all areas ADHD affects, separately from financial knowledge." },
  { 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: "Is this a substitute for financial or debt advice?", debt: true },
  { q: "Will this fix my finances completely?", a: "No, and it wouldn't be honest to promise that. Loops is built to help with the daily habits that tend to break down, like looking, separating funds, and catching admin, not to replace budgeting fundamentals or professional advice." },
  { q: "How long does it take to see results?", a: "Some people notice a difference in how looking at their finances feels within the first couple of weeks. Steadier habits, like an emergency buffer staying intact, usually build over a few months." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK." },
];

const FinFAQItem = ({ q, a, debt, 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">
        {debt
          ? <>No. Loops supports daily money habits and isn't a financial adviser or debt counsellor. If you're dealing with serious debt, free confidential debt advice is available. You can find services on <a href="/support/find-help/" className="font-semibold text-brand-deep hover:underline">Find help now</a>.</>
          : a}
      </p>
    </div>
  </details>
);

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

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

const FinFinalCTA = () => (
  <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>Open the app today</Kicker></div>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight3 text-[30px] sm:text-[40px] lg:text-[48px] leading-[1.1]">
            Open the app today. Not a perfect financial plan.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need to overhaul how you handle money. You need today's small step toward looking at it a little more easily, and, if you want, one person quietly in your corner.
          </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 FNC_SOURCES = [
  { t: "Attention Deficit Hyperactivity Disorder: Diagnosis and Management — NICE", u: "https://www.nice.org.uk/guidance/ng87/resources/attention-deficit-hyperactivity-disorder-diagnosis-and-management-pdf-1837699732933" },
  { t: "The Important Role of Executive Functioning and Self-Regulation in ADHD — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { t: "The Long-Term Financial Outcome of Children Diagnosed With ADHD — Nova Southeastern University", u: "https://scholars.nova.edu/en/publications/the-long-term-financial-outcome-of-children-diagnosed-with-adhd" },
  { t: "Attention-Deficit/Hyperactivity Disorder and Monetary Delay Discounting: A Meta-Analysis of Case-Control Studies — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5049699/" },
  { t: "Financial Judgment Determination in Adults With ADHD — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/33709182/" },
  { t: "ADHD Management Information, May 2025 — NHS England Digital", u: "https://digital.nhs.uk/data-and-information/publications/statistical/mi-adhd/may-2025" },
  { t: "The Lived Experiences of Adults With ADHD: A Rapid Review of Qualitative Evidence — Frontiers in Psychiatry", u: "https://www.frontiersin.org/journals/psychiatry/articles/10.3389/fpsyt.2022.949321/full" },
  { t: "ADHD and Money: What's Your Biggest Struggle? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1fczmin/adhd_and_money_whats_your_biggest_struggle/" },
  { t: "Impulsive Buying and Deferment of Gratification Among Adults With ADHD — Clinical Psychology in Europe", u: "https://cpe.psychopen.eu/index.php/cpe/article/view/9339" },
  { t: "How to Stop Accidentally Spending My Rent and Bills Money — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1nx5clk/how_to_stop_accidentally_spending_my_rent_and/" },
  { t: "The ADHD Tax: What's the Most You've Ever Paid? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1iairun/the_adhd_tax_whats_the_most_youve_ever_paid/" },
  { t: "Budgeting for Neurodivergent Adults — MoneyHelper", u: "https://www.moneyhelper.org.uk/en/blog/everyday-money/budgeting-for-neurodivergent-adults" },
  { t: "Adult ADHD Patient Experiences of Impairment, Service Provision and Clinical Management in England: A Qualitative Study — BMC Health Services Research", u: "https://link.springer.com/article/10.1186/1472-6963-13-184" },
  { 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: "Tell Me Your ADHD Tax Stories — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1nssreq/tell_me_your_adhd_tax_stories/" },
  { t: "Occupational Issues of Adults With ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3599848/" },
  { t: "Plain English Summary of the ADHD Taskforce Report — NHS England", u: "https://www.england.nhs.uk/long-read/plain-english-summary-of-the-adhd-taskforce-report/" },
  { t: "The Application of Behavioural Insights to Financial Literacy and Investor Education Programmes and Initiatives — OECD", u: "https://www.oecd.org/content/dam/oecd/en/publications/reports/2018/05/the-application-of-behavioural-insights-to-financial-literacy-and-investor-education-programmes-and-initiatives_0fe01712/0b5f985d-en.pdf" },
  { t: "Benefits and Harms of ADHD Interventions: Umbrella Review and Platform for Shared Decision Making — University of Oxford", u: "https://ora.ox.ac.uk/objects/uuid%3Ab70e7628-55c6-47be-a95f-306cafb8506b/files/rn870zt01r" },
];

const FncSources = () => (
  <Section id="sources" className="bg-base">
    <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 research into financial decision-making and delay discounting, clinical guidance, and real accounts of avoiding bank apps and letting admin pile up. Here's where it comes from.
        </p>
      </div>

      <ol className="mt-10 grid gap-x-8 gap-y-0 sm:grid-cols-2">
        {FNC_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, clinical, or financial advice service. These sources inform how we think about ADHD and money; they are not an endorsement of Loops by their authors.
      </p>
    </Container>
  </Section>
);

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

function FinApp() {
  return (
    <main id="main">
      <FinNav />
      <FinHero />
      <FinWhatLoopsDoes />
      <FinRecognition />
      <FinWhyItHappens />
      <FinReframe />
      <FinWhyLoopsWorks />
      <FinHowItWorks />
      <FinWhatsInside />
      <FinSocialProof />
      <LoopsPricing bg="bg-soft" />
      <FinObjections />
      <FinFAQ />
      <FinFinalCTA />
      <FncSources />
      <Footer />
    </main>
  );
}

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