/* Loops — "Becoming a Leader With ADHD" use-case page */

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

const LEAD_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 LeadNav = () => {
  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">
            {LEAD_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">
              {LEAD_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 LEAD_HERO_BLOCKS = [
  {
    title: "Track what matters",
    body: "The delegation, the follow-ups, the things that slip. Made visible every day.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07z"/></svg>),
  },
  {
    title: "Handle the hard moments",
    body: "Coaching conversations, feedback, and recovery.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>),
  },
  {
    title: "Stay ahead of what's slipping",
    body: "Without keeping everything in your head.",
    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>),
  },
];

const LeadHero = () => (
  <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 leadership role. It's the invisible work around it that keeps letting you down.
        </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">
          Not the vision. Not the big decisions. The tracking, the follow-up, the feedback, the things that quietly slip.
        </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 makes the invisible maintenance work visible and doable, and gives you <span className="text-ink font-medium">one person who gets to see you do it.</span>
        </p>

        <div className="mt-9 flex flex-col items-center gap-3 fade-in-up delay-3">
          <Button variant="primary" size="lg" href="#start">
            Get Early Access
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </Button>
          <span className="text-[13.5px] text-ink-3">Free for 7 days. No complicated setup. On iOS for now.</span>
        </div>
      </div>

      {/* Recognition anchor */}
      <figure className="mx-auto mt-14 max-w-2xl text-center fade-in-up delay-4">
        <blockquote className="text-balance text-[18px] sm:text-[20px] font-medium leading-[1.45] tracking-tight2 text-ink text-pretty">
          Many people with ADHD describe it the same way: &ldquo;I can do the work. I can't reliably run the system around the work.&rdquo;
        </blockquote>
      </figure>

      {/* Three icon blocks */}
      <p className="mt-10 lg:mt-12 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">
        {LEAD_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 LeadWhatLoopsDoes = () => (
  <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 leadership that ADHD makes genuinely hard.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Leadership isn't mostly about vision or big decisions. Day to day, it's a long series of maintenance tasks: following up on delegated work, preparing for meetings, noticing what has slipped, holding difficult conversations, and doing the steady, unglamorous work that keeps a team running.
          </p>
          <p>
            Those tasks are low in novelty, high in importance, and rarely urgent until they're already overdue. That's precisely the combination ADHD makes most difficult.
          </p>
          <p>
            Loops gives you daily actions to keep your leadership running. It helps you track what matters, stay ahead of what's slipping, and manage yourself through the parts of the role that cost the most.
          </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 LEAD_RECOGNITION = [
  "You were excellent as an individual contributor. The moment the role became about coordinating other people's work, something shifted.",
  "You assign work and mean to follow up. By the time you remember, it's either done or already behind.",
  "You can handle a crisis brilliantly. The calm, repetitive, anticipatory parts of management are where things quietly fall apart.",
  "You end the week feeling like you were busy the whole time, but the important management tasks still didn't happen.",
  "Difficult conversations, feedback, and interpersonal friction cost you more than they seem to cost other people at your level.",
  "You're working hard enough to keep everything together. But it's starting to feel like it can't go on at this pace.",
];

const LeadRecognition = () => (
  <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 leader who finds this harder than it looks.
        </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 in leadership roles. 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">
        {LEAD_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're in the wrong role. They are predictable patterns when ADHD meets the specific demands of leading people at scale.
        </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 bottlenecks) ---------------- */

const LEAD_PATTERNS = [
  {
    title: "The delegation gap",
    body: "Assigning work is easy. Tracking it is where things slip. Keeping clear records of what was given, when it's due, and when to check in requires exactly the kind of ongoing monitoring that ADHD makes unreliable.",
  },
  {
    title: "Fragmentation and state loss",
    body: "What fails isn't just concentration. It's holding the whole picture together. Leadership means constant switching between meetings, messages, and decisions. Every interruption is a chance for something important to fall through the gaps.",
  },
  {
    title: "The urgency trap",
    body: "Crisis feels manageable. The calm, steady work is where things quietly stop. Slow-burn responsibilities, feedback, delegation, culture-building, get postponed until they become urgent, which is usually too late.",
  },
  {
    title: "Emotional load and recovery",
    body: "Difficult conversations cost more than they appear to cost other people at your level. Over time, that cumulative emotional effort becomes a kind of debt that makes the harder parts of the role progressively more draining.",
  },
  {
    title: "Overcompensation and burnout",
    body: "Longer hours and keeping everything in your head can hold things together. For a while. But leadership scales the invisible work upward, and eventually the compensation breaks.",
  },
];

const LeadWhyItHappens = () => (
  <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]">
          Leadership is an unusually demanding test of exactly the functions ADHD affects most.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Leadership depends heavily on executive functions: planning, monitoring, prioritising, delegating, noticing what's slipping, and sustaining performance across many people at once. These are also the functions most consistently affected by ADHD. That's why the transition from high-performing individual contributor to struggling manager is one of the most common patterns in ADHD communities.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {LEAD_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 these are about whether you should be in leadership. <span className="font-semibold">They are about what leadership specifically asks for, and where having the right daily structure makes the most difference.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- The transition moment (unique to this page) ---------------- */

const LeadTransition = () => (
  <Section id="transition" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth naming 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]">
          The shift from doing to leading is where ADHD most often shows up.
        </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>
          As an individual contributor, ADHD is often manageable. The work is yours. You can compensate through effort, hyperfocus, or finding your own rhythm.
        </p>
        <p>
          Leadership changes everything. The output is now other people's output. The rewards are delayed. The most important tasks are often the least stimulating. And the coping strategies that worked before stop working at the new scale.
        </p>
        <p className="text-ink font-medium">
          Loops is designed to help with that transition: not by teaching leadership theory, but by building the daily structures that make the invisible maintenance work visible and doable.
        </p>
      </div>
    </Container>
  </Section>
);

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

const LEAD_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you get through a hard week, 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: "Someone finally checks in on you", b: "For a role where nobody usually checks in on you, one person in your corner changes things." },
];

const LeadWhyLoopsWorks = () => (
  <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>Here's the strange thing about leadership. You spend your days following up on everyone else, and almost nobody follows up on you. Nobody sees the invisible work, so it's the first thing to let slide.</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 mentor, a peer who leads too, whoever it is. When you close a loop, they see it. When you get through a hard week, 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">
        {LEAD_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 LEAD_STEPS = [
  { t: "Tell Loops what you're managing", b: "Share what your leadership role involves and where things most often go wrong. 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, which suits a group of peers who all lead." },
  { t: "Get small daily actions", b: "Each day, Loops shows you what's due and gives you specific, achievable things to do: a follow-up to make, a conversation to prepare for, a check-in to schedule. The important things, made manageable. Close the loop, and your person sees it." },
  { t: "Get coaching when you need it", b: "Preparing for a difficult conversation? Behind on delegation tracking? Feeling the emotional weight of a hard week? Loops provides practical, personalised coaching to help you move through it." },
  { t: "Build a leadership cadence that holds", b: "Over time, the daily actions build into a rhythm. The maintenance work becomes something you do, rather than something you're always catching up on." },
];

const LeadHowItWorks = () => (
  <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 leadership approach. You need a daily structure that handles the things that keep slipping.
        </p>
      </div>

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

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

const LEAD_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "The leadership goal you're working toward this season, in your own words, with a clear picture of what better looks like: delegation that doesn't slip, a team that runs without constant firefighting, whatever it is for you. A goal 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: follow up on delegated work every Friday, prep before each one-to-one, give one piece of feedback a week. A few connect to your leadership goal. 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, which works well for a group of peers who all lead." },
  { t: "Rewards you can feel", b: "Promise yourself something for the moments that matter: the first month without a dropped follow-up, a hard conversation handled well, a quarter that didn't run on crisis energy. 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 your role and where things tend to slip, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 11pm, or right before the difficult conversation you've been dreading." },
];

const LeadWhatsInside = () => (
  <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">
        {LEAD_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 LEAD_TESTIMONIALS = [
  { quote: "I was a brilliant individual contributor. The moment I started managing a team, something stopped working. Loops helped me see exactly where the gaps were and gave me something practical to do about them.", who: "Engineering manager, London", meta: "ADHD diagnosis at 33" },
  { quote: "The delegation tracking was my biggest problem. I would give work out and then completely forget to follow up until it was already late. Loops made that one thing visible every day.", who: "Head of operations, Manchester", meta: null },
  { quote: "I was running on compensation and starting to burn out. Loops didn't fix everything overnight but it gave me a daily anchor that made the job feel less like firefighting and more like leading.", who: "Senior manager, Edinburgh", meta: null },
];

const LeadSocialProof = () => (
  <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">
        {LEAD_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 LEAD_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 LeadPricing = () => (
  <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">
        {LEAD_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 LEAD_OBJECTIONS = [
  { q: "\u201CI've tried systems before. They never stick.\u201D", a: "Most systems aren't built for how ADHD works at the leadership level. They assume stable motivation and the ability to maintain a complex dashboard under pressure. Loops is built differently: small daily actions, coaching when things drift, and a design that adapts rather than making you feel like you've failed." },
  { 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 officially diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are waiting for assessment, self-identifying, or finding that ADHD describes their experience without a formal label. If the patterns on this page feel familiar, Loops is built for you." },
  { q: "\u201CShould I disclose my ADHD at work?\u201D", a: "That's a genuinely complex decision and Loops can't make it for you. What the research shows is that disclosure works best when the environment will respond with practical support rather than scrutiny. Loops helps you lead more effectively regardless of whether you disclose." },
  { q: "\u201CWhat if the problem is the role itself, not my approach?\u201D", a: "Sometimes it is. And that's worth knowing clearly. Loops helps you understand where the friction is: whether it's something in your current approach that can change, or something structural that needs a different kind of conversation." },
];

const LeadObjections = () => (
  <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">
        {LEAD_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 LEAD_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 leaders with ADHD, it acts as a daily external structure for the invisible maintenance work that leadership depends on." },
  { 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, which works well for a circle of peers who all lead." },
  { q: "Why do people with ADHD struggle with leadership roles?", a: "Leadership depends heavily on planning, monitoring, delegating, and sustaining performance across many workstreams simultaneously. These are the same executive functions most consistently affected by ADHD. The result is a predictable mismatch between what leadership asks for day to day and what ADHD makes reliably easy to do." },
  { q: "Why is the transition from individual contributor to manager so hard with ADHD?", a: "As an individual contributor, ADHD is often manageable through personal compensation: doing it yourself, hyperfocusing, finding your own rhythm. Leadership changes the nature of the work: the output is now other people's output, the rewards are delayed, and the most important tasks are often the least stimulating. The coping strategies that worked before stop working at the new scale." },
  { q: "What is the invisible work of leadership?", a: "The ongoing maintenance tasks that rarely feel urgent but determine whether a team functions: tracking delegated work, following up on meetings, noticing what's slipping before it becomes a problem, giving feedback, and staying emotionally regulated through difficult interpersonal moments. This is the work most likely to slip with ADHD, and least likely to be visible until something has already gone wrong." },
  { q: "How does Loops help with leading a team when you have ADHD?", a: "It gives you one daily action focused on the maintenance work of your role, so important things get done rather than perpetually deferred. It provides coaching through the parts of leadership that cost the most, and builds a daily rhythm that makes the invisible work visible and manageable." },
  { q: "Do I need an ADHD diagnosis to use Loops?", a: "No. Loops is designed first for people with ADHD but doesn't require a formal diagnosis. If the patterns described on this page feel familiar, Loops is built for you." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is built with UK workplace contexts and employment guidance in mind." },
];

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

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

const LeadFinalCTA = () => (
  <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>Lead sustainably</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]">
            Leadership shouldn't feel like something you can only sustain by working harder.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You're capable of this role. The gap isn't ability. It's having the right daily structure around the parts that ADHD makes hardest, and one person who sees the work that nobody else does.
          </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 LEAD_SOURCES = [
  { t: "Strengths and challenges to embrace ADHD in employment — systematic review", u: "https://journals.sagepub.com/doi/10.1177/27546330241287655" },
  { t: "Executive function deficits mediate the relationship between employees' ADHD and job burnout", u: "https://www.aimspress.com/aimspress-data/aimsph/2024/1/PDF/publichealth-11-01-015.pdf" },
  { t: "“Turning Intentions Into Actions” — J. Russell Ramsay", u: "https://journals.sagepub.com/doi/abs/10.1177/1534650115611483" },
  { t: "Time Perception in Adult ADHD: Findings from a Decade — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC9962130/" },
  { t: "Adult attention deficit hyperactivity disorder symptoms and leadership — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/30187648/" },
  { t: "People leaders with ADHD, how do you delegate? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1m7a5u6/people_leaders_with_adhd_how_do_you_delegate/" },
  { t: "Evidence of emotion dysregulation as a core symptom of adult ADHD — PLOS One", u: "https://journals.plos.org/plosone/article?id=10.1371%2Fjournal.pone.0280131" },
  { t: "Professionally successful adults with attention-deficit hyperactivity disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC5619157/" },
  { t: "What makes work sustainable for adults with ADHD? Interpreting workplace strain and support through Reddit data — Frontiers in Psychology", u: "https://www.frontiersin.org/journals/psychology/articles/10.3389/fpsyg.2026.1820248/full" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "Consumer Companion Guide — Australian ADHD Guidelines", u: "https://adhdguideline.aadpa.com.au/wp-content/uploads/2023/04/ADHD-Consumer-Companion-FINAL.pdf" },
  { 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" },
];

const LeadSources = () => (
  <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 leadership, executive function, occupational burnout, and real accounts from people managing teams. Here's where it comes from.
        </p>
      </div>

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

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

function LeadApp() {
  return (
    <main id="main">
      <LeadNav />
      <LeadHero />
      <LeadWhatLoopsDoes />
      <LeadRecognition />
      <LeadWhyItHappens />
      <LeadTransition />
      <LeadWhyLoopsWorks />
      <LeadHowItWorks />
      <LeadWhatsInside />
      <LeadSocialProof />
      <LoopsPricing bg="bg-soft" />
      <LeadObjections />
      <LeadFAQ />
      <LeadFinalCTA />
      <LeadSources />
      <Footer />
    </main>
  );
}

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