/* Loops — "Starting a Business With ADHD" use-case page */

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

const BIZ_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 BizNav = () => {
  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">
            {BIZ_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">
              {BIZ_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 BIZ_HERO_BLOCKS = [
  {
    title: "Pick one thing and move",
    body: "One daily action to keep the business going, even through the slow parts every single working day.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10m0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12"/><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/><path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></svg>),
  },
  {
    title: "Survive the admin",
    body: "Coaching through the invoicing, follow-up, and everything that keeps quietly not getting done.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0zm3 1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 .5.5"/><path fillRule="evenodd" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708"/></svg>),
  },
  {
    title: "Restart without shame",
    body: "A system that picks up where you left off, so one bad week doesn't end everything.",
    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 BizHero = () => (
  <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. Starting isn't the problem. Keeping it going is.
        </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 who try to start a business don't fail because they lack ambition. They fail because the process has specific breaking points that nobody warned them about.
        </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 business moving one day at a time, and gives you <span className="text-ink font-medium">one person who gets to see you keep going.</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">
        {BIZ_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 BizWhatLoopsDoes = () => (
  <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 parts of running a business that ADHD makes genuinely difficult.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            The early stages of a business can feel natural for an ADHD brain. New problems, autonomy, fast decisions. But most businesses fail or stall in the slower, more repetitive phases: the follow-up emails, the admin, the weeks when nothing feels urgent and nothing gets done.
          </p>
          <p>
            Loops gives you clear daily actions to keep the business moving. It helps you stay in planned mode instead of constantly reacting to whatever feels most urgent right now.
          </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 BIZ_RECOGNITION = [
  "You have more ideas than you know what to do with. The problem is getting any single one past the research phase.",
  "The early stage feels energising. Then the novelty fades and you're left with tasks that feel impossible to start.",
  "Invoicing, bookkeeping, follow-up emails. You know they matter. You still can't seem to make yourself do them consistently.",
  "You end the week feeling like you were busy the whole time, but the important things still didn't get done.",
  "You've had to quietly abandon something you told people about. That part stays with you.",
  "You wonder if the problem is you, even though you can see how capable you are in other areas.",
];

const BizRecognition = () => (
  <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 who keeps hitting the same walls.
        </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 who are trying to build something. 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">
        {BIZ_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">
          These aren't signs that you can't do this. They are predictable patterns when an ADHD brain meets the specific demands of running a business.
        </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 breakdown stages) ---------------- */

const BIZ_PATTERNS = [
  {
    title: "The idea spiral",
    body: "The pull of ideas rarely stops at one. Many founders with ADHD spend months researching and planning without ever speaking to a single potential customer.",
  },
  {
    title: "Reactive execution",
    body: "A lot of motion, but not much that compounds. The day starts with good intentions, gets pulled by whatever feels most urgent, and ends with the important work untouched.",
  },
  {
    title: "Admin paralysis",
    body: "Invoicing, bookkeeping, tax. Repetitive, delayed in reward, and often emotionally loaded. The specific tasks that cause shutdown vary, but the pattern is consistent: the business keeps going until the admin catches up with it.",
  },
  {
    title: "Shame and avoidance",
    body: "Abandoning a project can feel like relief. It's better understood as emotional self-protection. When tasks pile up and shame builds, starting something new is a genuine coping response, not a character flaw.",
  },
  {
    title: "Burnout disguised as drive",
    body: "Long hours and sporadic heroics can look like momentum from the outside. But a business that runs on crisis energy has no resilience when the founder hits a difficult week.",
  },
];

const BizWhyItHappens = () => (
  <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]">
          ADHD makes the beginning of a business easier and the middle of one much harder.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          ADHD traits are genuinely associated with entrepreneurial drive, risk-taking, and getting started. But the same traits, particularly inattention, are linked to worse outcomes after launch. The traits that help you begin can work against you once the business needs to sustain itself.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {BIZ_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">
        None of this is fixed. <span className="font-semibold">Every one of these stages is something that structure, coaching, and the right daily system can make significantly more manageable.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Honest acknowledgement (unique to this page) ---------------- */

const BizHonest = () => (
  <Section id="honest" 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]">
          ADHD isn't a business superpower. But it's not a sentence either.
        </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>
          There's a version of this conversation that leads with ADHD strengths: creativity, risk tolerance, speed of thought. Those things are real. Many founders with ADHD do describe genuine advantages in the early stages.
        </p>
        <p>
          But research shows clearly that inattention is linked to worse business outcomes after launch. The same traits that help you start can work against sustaining. Telling someone ADHD is an entrepreneurial advantage without naming where it creates friction sets them up for the exact cycle this page describes.
        </p>
        <p className="text-ink font-medium">
          Loops isn't built on the superpower story. It's built on a more useful one: ADHD creates specific, predictable friction points. Those points can be designed around.
        </p>
      </div>
    </Container>
  </Section>
);

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

const BIZ_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you hit a milestone, 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: "For a solo build, one person changes it", b: "When you're building something largely on your own, one person in your corner changes the whole thing." },
];

const BizWhyLoopsWorks = () => (
  <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 early days of a business carry you. The slow middle doesn't. When nothing feels urgent and nobody is waiting on you, that's exactly when things quietly stop.</p>
          <p>So Loops adds the one thing that reliably keeps ADHD brains going. <span className="text-ink font-medium">Another person.</span></p>
          <p>You choose one person you trust. Your partner, a friend, a fellow founder, whoever it is. When you close a loop, they see it. When you hit a milestone, 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">
        {BIZ_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 BIZ_STEPS = [
  { t: "Tell Loops what you're building", b: "Share where you are with your business and what you're trying to move forward. No lengthy setup." },
  { 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 business. Not a project plan. Not a priority list. Just the next right thing. Close the loop, and your person sees it." },
  { t: "Get coaching when you hit a wall", b: "Avoiding an invoice? Stuck in idea spiral again? Can't face the thing you've been putting off for two weeks? Loops provides practical, personalised coaching to help you move through it rather than around it." },
  { t: "Keep going through the slow parts", b: "Loops stays with you through the weeks when nothing feels urgent and motivation is low. It's designed for those weeks specifically, because that's where most businesses quietly stop." },
];

const BizHowItWorks = () => (
  <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 system for your whole life. Just something that keeps the business moving, one day at a time.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {BIZ_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 week to make progress. You just need to start.
      </p>
    </Container>
  </Section>
);

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

const BIZ_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The thing you're driving toward right now, written in your own words, with a season and a clear picture of what done looks like: your first paying customer, a steady month, whatever it is. A business is never truly finished, so this is the next real milestone your brain can actually see." },
  { 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: send one follow-up email, invoice on Fridays, one customer conversation a week. A few connect to the business. 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 invoice paid, the first customer, the first steady month. 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 keep getting stuck, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 11pm, which is often when you're avoiding the thing you've put off all week." },
];

const BizWhatsInside = () => (
  <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">
        {BIZ_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 BIZ_TESTIMONIALS = [
  { quote: "I had started three things before this. Each one got to the same point and stopped. Loops helped me see exactly where I kept breaking down and gave me something concrete to do instead of just hoping I would feel motivated.", who: "Freelance designer, London", meta: "ADHD diagnosis at 31" },
  { quote: "The admin was the thing that killed every previous attempt. Loops didn't fix that overnight, but it made it harder to just not do it. Having one specific thing to do each day changed everything.", who: "Founder, e-commerce, Bristol", meta: null },
  { quote: "I used to oscillate between working 14 hours a day and not working at all. Loops helped me find something in between that actually sustained.", who: "Consultant, Edinburgh", meta: null },
];

const BizSocialProof = () => (
  <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">
        {BIZ_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 BIZ_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the work.", featured: false },
  { name: "Duo", price: "\u00A312.99", per: "/mo", tag: "The one we'd pick", blurb: "Everything, for two. You and your person, both with the full app, on one bill. Three pounds more than going alone, for the thing that makes it work.", featured: true },
];

const BizPricing = () => (
  <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">
        {BIZ_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 BIZ_OBJECTIONS = [
  { q: "\u201CI've tried systems before. They always fall apart.\u201D", a: "Most systems aren't built for how ADHD actually works. They assume consistent motivation, linear progress, and the ability to return after a gap. Loops is designed around the opposite: meeting you where you are when you come back, not punishing you for leaving." },
  { 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: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or finding that ADHD describes their experience without a formal label. If this page describes your experience, Loops is built for you." },
  { q: "\u201CI'm not sure I'm ready to start something new.\u201D", a: "There's no wrong point to start. Whether you're still in the idea phase, mid-build, or trying to rescue something that has stalled, the daily structure and coaching work the same way." },
  { q: "\u201CWhat if the real problem is my idea, not my execution?\u201D", a: "That's worth taking seriously. Loops helps you find out sooner. It pushes you toward the earliest concrete action: a customer conversation, a first offer, a validation test. Rather than letting the planning phase become a permanent safe harbour." },
];

const BizObjections = () => (
  <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">
        {BIZ_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 BIZ_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 founders with ADHD, it acts as a daily external structure for the parts of running a business that ADHD makes hardest." },
  { 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 sustain a business?", a: "Research shows that ADHD traits can help with entrepreneurial entry: the drive, risk tolerance, and novelty-seeking that get a business started. But inattention, in particular, is linked to worse outcomes after launch. The slow, repetitive, ambiguous work of sustaining a business is precisely the kind of work ADHD makes most difficult." },
  { q: "Is ADHD an advantage for entrepreneurs?", a: "Partly. Hyperactivity and impulsivity are linked to entrepreneurial drive and willingness to start. But inattention is linked to worse post-launch outcomes. ADHD may help you begin, and creates real friction in the execution, follow-through, and admin that determines whether the business survives." },
  { q: "How does Loops help with running a business when you have ADHD?", a: "Loops breaks the work of running a business into one daily action, so you always know what to do next without having to organise the whole picture from scratch each day. It provides coaching when specific parts of the process feel stuck, and it stays with you through the slow periods where most businesses quietly stop." },
  { 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: "What if I keep abandoning ideas before they're finished?", a: "That pattern is very common in ADHD and is usually better understood as emotional self-protection than lack of commitment. When shame builds and tasks feel impossible, switching to something new provides genuine relief. Loops helps by reducing the build-up that leads to that point, and by providing coaching when avoidance starts, not after it's already taken over." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is built with UK working and business contexts in mind." },
];

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

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

const BizFinalCTA = () => (
  <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>Start with 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]">
            The goal isn't a perfect business. It's one that's still going.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Most businesses with ADHD don't fail because the idea was wrong. They fail because there was no system to carry them through the slow, unglamorous, repetitive parts. That's what Loops is for, and it helps to have one person there while 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 BIZ_SOURCES = [
  { 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" },
  { t: "ADHD at the workplace: ADHD symptoms, diagnostic status and work-related functioning — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC8295111/" },
  { t: "Recommendations for occupational therapy interventions for adults with ADHD — UK Adult ADHD Network consensus statement", u: "https://link.springer.com/article/10.1186/s12888-021-03070-z" },
  { t: "Attention-Deficit/Hyperactivity Disorder and Monetary Delay Discounting — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5049699/" },
  { 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: "ADHD-like behavior and entrepreneurial intentions — SSRN", u: "https://papers.ssrn.com/sol3/Delivery.cfm/37266.pdf?abstractid=2149387&mirid=1" },
  { t: "ADHD symptoms, diagnostic status and work-related outcomes — Journal of Neural Transmission", u: "https://link.springer.com/article/10.1007/s00702-021-02309-z" },
  { t: "Quickbooks driving an ADHD entrepreneur to total... — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1f9pymg/need_solution_quickbooks_driving_an_adhd/" },
  { 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: "A meta-analysis of pharmacological and psychosocial interventions for work-relevant outcomes in adults with ADHD", u: "https://journals.sagepub.com/doi/10.1177/27546330241292984" },
  { t: "Emotional dysregulation and Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Productivity Tools — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/127jxcc/productivity_tools/" },
  { 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: "The positive aspects of attention deficit hyperactivity disorder — Springer", u: "https://link.springer.com/article/10.1007/s12402-018-0277-6" },
];

const BizSources = () => (
  <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 and entrepreneurship, occupational studies, expert clinical frameworks, and real accounts from founders with ADHD. Here's where it comes from.
        </p>
      </div>

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

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

function BizApp() {
  return (
    <main id="main">
      <BizNav />
      <BizHero />
      <BizWhatLoopsDoes />
      <BizRecognition />
      <BizWhyItHappens />
      <BizHonest />
      <BizWhyLoopsWorks />
      <BizHowItWorks />
      <BizWhatsInside />
      <BizSocialProof />
      <LoopsPricing bg="bg-soft" />
      <BizObjections />
      <BizFAQ />
      <BizFinalCTA />
      <BizSources />
      <Footer />
    </main>
  );
}

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