/* Loops — "Getting Promoted With ADHD" use-case page */

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

const PROMO_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 PromoNav = () => {
  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">
            {PROMO_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">
              {PROMO_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 PROMO_BLOCKS = [
  {
    title: "Capture your wins",
    body: "Every day, before the details fade and memories slip away.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935" /></svg>),
  },
  {
    title: "Build your evidence",
    body: "In the language your review panel actually uses.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z" /></svg>),
  },
  {
    title: "Keep your momentum",
    body: "Even through the weeks when everything goes wrong.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9" /><path fillRule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z" /></svg>),
  },
];

const PromoHero = () => (
  <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-[48px] lg:text-[58px] fade-in-up delay-1">
          You work hard. So why does promotion keep passing you by?
        </h1>

        <p className="mx-auto mt-7 max-w-2xl text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty fade-in-up delay-2">
          It's not about effort. It's not about ability. For many people with ADHD, promotion slips away for a completely different reason.
        </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 turns the work you're already doing into a promotion case your panel can actually see. <span className="text-ink font-medium">And it gives you 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>

      {/* 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">
        {PROMO_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 PromoWhatLoopsDoes = () => (
  <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 that keeps your promotion goal within reach.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most people with ADHD don't lack ambition. They lack a system that keeps the goal visible and manageable when life gets complicated.
          </p>
          <p>
            Loops breaks the path to promotion into small, repeatable steps and shows you the next one to focus on. It helps you record your wins before they fade, translate your work into the language promotion panels use, and keep going after the days that go wrong.
          </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>
);

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

const WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you log a win, they see it. When you hit a milestone, they see that too. That's it. They just get to watch you show up, 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 choose what they see. You decide what they can see, and you can change it any time." },
  { t: "It doesn't have to be work", b: "Plenty of people pick a partner or a friend who has never heard of a promotion panel. What matters isn't that they understand the process. It's that someone's there." },
];

const PromoWhyLoopsWorks = () => (
  <Section id="being-seen" className="bg-base">
    <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>You can know exactly what to do and still not do it. Especially when the reward is months away, and nobody is watching.</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 mentor, 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">
        {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-soft p-6 sm:p-7">
        <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>
);

/* ---------------- Recognition (6 cards) ---------------- */

const PROMO_RECOGNITION = [
  "You mean to start your review prep months in advance. Somehow it's always the last minute.",
  "You've done genuinely good work. But when it comes to writing it up, the details have gone.",
  "You get positive feedback in the moment. Nothing ever seems to translate into formal recognition.",
  "You start the promotion cycle with real intention. Then life gets busy and the prep falls apart.",
  "Being passed over once or twice has made you quietly wonder whether trying again is worth it.",
  "You know what you're capable of. You just can't seem to show it in the way your organisation counts.",
];

const PromoRecognition = () => (
  <Section id="recognition" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Does any of this sound familiar?</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          You're not alone in this.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          These are the patterns people with ADHD describe most often when it comes to getting promoted. 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">
        {PROMO_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 doing it wrong. It means you need a system that works with your brain, not against it.
        </p>
      </div>

      <div className="mt-8">
        <Button variant="primary" size="md" href="#start">Get Early Access</Button>
      </div>
    </Container>
  </Section>
);

/* ---------------- Why it keeps happening (3 gaps) ---------------- */

const GAPS = [
  {
    title: "The motivation gap",
    body: "Distant rewards lose their pull faster for ADHD brains. A goal nine months away simply can't compete with the urgency of today.",
  },
  {
    title: "The evidence gap",
    body: "Good work that isn't documented doesn't exist in a promotion panel's eyes. Wins fade, praise goes unrecorded, and six months of effort becomes a blank page.",
  },
  {
    title: "The consistency gap",
    body: "Promotion systems reward smoothness and predictability. Someone doing adequate work consistently can look more ready than someone doing brilliant work unevenly.",
  },
];

const PromoWhyItHappens = () => (
  <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 motivation problem. It's a systems problem.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>Most promotion processes weren't designed with ADHD in mind. They reward consistent self-documentation, strategic visibility, and long-range planning. These are exactly the things ADHD makes harder.</p>
          <p>Research suggests that adults with ADHD most often struggle with working to their potential. Not with attendance, not with attitude, not with capability. <span className="text-ink font-medium">The gap between what you can do and what your employer sees is real. And it's fixable.</span></p>
        </div>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 lg:grid-cols-3">
        {GAPS.map((g, i) => (
          <article key={g.title} className="flex flex-col rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <span className="text-[40px] font-semibold tracking-tight3 text-brand-deep tnum leading-none">{String(i + 1).padStart(2, "0")}</span>
            <h3 className="mt-4 text-[19px] font-semibold tracking-tight2 text-ink leading-snug">{g.title}</h3>
            <p className="mt-3 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{g.body}</p>
          </article>
        ))}
      </div>

      <figure className="mt-10 max-w-3xl rounded-card border border-line bg-white p-7 sm:p-9 shadow-card">
        <blockquote className="text-[19px] sm:text-[22px] leading-[1.45] text-ink font-semibold tracking-tight2 text-balance">
          Loops helps close all three gaps. Not by asking you to work harder, but by building structure around the moments where things usually fall apart.
        </blockquote>
      </figure>
    </Container>
  </Section>
);

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

const WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "Your promotion, written in your own words, with a season and a clear picture of what done looks like. 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: three runs, ten pages of your book a night, take your meds before breakfast. A few connect to your goal, like your promotion. Others are just life. 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. They see 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 milestones that matter. 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 goal, your loops and your history, 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 actually need it." },
];

const PromoWhatsInside = () => (
  <Section id="inside" className="bg-base">
    <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>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          None of them ask you to try harder. They just put structure around the moments where promotion prep usually falls apart.
        </p>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {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>
);

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

const PROMO_STEPS = [
  { t: "Tell Loops what you're working towards", b: "Set your promotion goal in plain language. No long forms. No complicated 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. It's also 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, manageable things to do. It takes a few minutes. Close the loop, and your person sees it. Over time, these moments build into a clear picture of your progress." },
  { t: "Get coaching when you need it", b: "The moment you're stuck is rarely 9am on a Monday. It's late at night, mid-wobble, a few days into a stall. The Loops coach is an AI coach built for ADHD, and it already knows your goal, your loops, and your history. No booking. No waiting room. No explaining yourself from the start." },
  { t: "Walk into your review ready", b: "When promotion season arrives, you have months of evidence, structured and ready to use. Not a blank page and a panic." },
];

const PromoHowItWorks = () => (
  <Section id="how" className="bg-soft">
    <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 working life to start making progress. Loops fits around what you're already doing.
        </p>
      </div>

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

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

const PROMO_TESTIMONIALS = [
  { quote: "I had been passed over three times. I thought it was just me. Loops helped me realise I had been doing the work. I just had no way of showing it. This time felt completely different.", who: "Marketing manager", meta: "Diagnosed with ADHD at 34" },
  { quote: "The daily wins log sounds small. But I had never done it before. When my review came around, I actually had things to say.", who: "Software engineer", meta: "Using Loops for 4 months" },
  { quote: "I was exhausted from trying so hard and getting nowhere. Loops didn't make me try harder. It helped me try smarter.", who: "Project manager, London", meta: null },
];

const PromoSocialProof = () => (
  <Section id="stories" className="bg-soft">
    <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">
        {PROMO_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 PROMO_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 PromoPricing = () => (
  <Section id="pricing" className="bg-base">
    <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">
        {PROMO_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>
);

/* ---------------- Objections (5) ---------------- */

const PROMO_OBJECTIONS = [
  { q: "\u201CI've tried apps before. They never stick.\u201D", lead: "Most productivity tools aren't built for ADHD brains.", a: "Loops is designed specifically for how ADHD affects motivation and follow-through. It adapts when things go off course, rather than treating a missed day as a reason to give up." },
  { q: "\u201CDo I have to share my progress with anyone?\u201D", lead: "No.", a: "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", lead: "You don't need a diagnosis.", a: "Many people using Loops are still waiting for assessment, or aren't sure whether ADHD applies to them. If what you've read here resonates, Loops is designed for you." },
  { q: "\u201CWhat if my workplace is the problem, not me?\u201D", lead: "Sometimes it genuinely is.", a: "Loops can't change your organisation. But it can help you build the clearest possible case for yourself, and protect your confidence along the way." },
  { q: "\u201CI'm not sure I can commit to something new right now.\u201D", lead: "That's exactly why Loops is built around small daily actions.", a: "You don't need a perfect week. You just need one step." },
];

const PromoObjections = () => (
  <Section id="objections" className="bg-soft">
    <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">
        {PROMO_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"><span className="font-semibold text-ink">{o.lead}</span> {o.a}</p>
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

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

const PROMO_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 promotion specifically, it helps you capture your wins, stay consistent, and prepare clear evidence for your review." },
  { 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 show up. You don't have to add one to start, but it's the part that makes Loops work, so we'll gently encourage it when you're ready. On a Crew plan it can be more than one: your people." },,
  { q: "How does Loops help with getting promoted if you have ADHD?", a: "It builds a daily record of your work so nothing gets forgotten. It translates completed work into clear promotion evidence. It provides coaching when setbacks knock your confidence. And it keeps the goal feeling real rather than abstract and distant." },
  { q: "Why do people with ADHD struggle to get promoted?", a: "The barriers aren't effort or capability. They're specific executive function challenges: difficulty sustaining motivation towards distant goals, inconsistency in routine tasks, failure to document work in the way organisations expect, and difficulty recovering from setbacks. All of these respond well to the right structure." },
  { 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 experiences described on this page feel familiar, Loops is built for you." },
  { q: "Is Loops just another productivity app?", a: "No. Most productivity apps focus on task completion. Loops focuses on sustainable progress, coaching, and accountability, especially for the moments when things go off course. It's designed to flex when life gets complicated, not to make you feel like a failure when you miss a day." },
  { q: "How long does it take to see results?", a: "Some people notice a difference within the first couple of weeks. Building a meaningful evidence file typically takes a few months. Loops is designed to make that consistency achievable, not just aspirational." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is built around UK workplace contexts and employment guidance." },
];

const PromoFAQItem = ({ 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 PromoFAQ = () => (
  <Section id="faq" className="bg-base">
    <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">
          {PROMO_FAQS.map((f, i) => <PromoFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

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

const PromoFinalCTA = () => (
  <Section id="start" className="bg-soft">
    <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>Your next cycle</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]">
            Your next promotion doesn't have to feel like this. And you don't have to do it on your own.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You've already proved you're capable. The next step is making sure that capability is visible, with one person in your corner while you make the case.
          </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 PROMO_SOURCES = [
  { t: "A systematic review of interventions to support adults with ADHD at work — Birkbeck Research Blog", u: "https://research.blogs.bbk.ac.uk/2023/01/09/a-systematic-review-of-interventions-to-support-adults-with-adhd-at-work-implications-from-the-paucity-of-context-specific-research-for-theory-and-practice/" },
  { t: "NICE guidance: Attention deficit hyperactivity disorder: diagnosis and management", u: "https://www.nice.org.uk/guidance/ng87/chapter/recommendations" },
  { t: "The Brown Model of ADD/ADHD — Brown ADHD Clinic", u: "https://www.brownadhdclinic.com/brown-ef-model-adhd" },
  { t: "The prevalence and effects of Adult ADHD — World Mental Health Survey (PMC)", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC2665789/" },
  { t: "ADHD symptoms, diagnostic status and work-related outcomes — Springer", u: "https://link.springer.com/article/10.1007/s00702-021-02309-z" },
  { t: "Predicting Occupational Outcomes for Individuals with ADHD — Journal of Occupational Rehabilitation", u: "https://link.springer.com/article/10.1007/s10926-024-10259-y" },
  { t: "Attention-Deficit/Hyperactivity Disorder and Monetary Delay Discounting — Semantic Scholar", u: "https://www.semanticscholar.org/paper/Attention-Deficit-Hyperactivity-Disorder-and-Delay-Jackson-Mackillop/320b88f189ed1913ca16f2e1ca6798c0129b2c7b" },
  { 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: "Reducing Barriers to Promotion for ADHDers — Anna Granta Coaching", u: "https://www.grantacoaching.com/post/reducing-barriers-to-promotion-for-adhders" },
  { 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: "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: "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: "Qualitative study of working adults with ADHD — Oscarsson et al.", u: "https://link.springer.com/content/pdf/10.1080/11038128.2022.2143420.pdf" },
  { t: "I disclosed my ADHD at work and now I'm being excluded from promotions — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1k20e22/i_disclosed_my_adhd_at_work_and_now_im_being/" },
  { t: "The efficacy of Cognitive Behavioral Therapy for adults with ADHD — systematic review and meta-analysis", u: "https://repository.lincoln.ac.uk/articles/journal_contribution/The_efficacy_of_Cognitive_Behavioral_Therapy_for_adults_with_ADHD_a_systematic_review_and_meta-analysis_of_Randomized_Controlled_Trials/24358726" },
  { t: "Work-MAP Telehealth Metacognitive Work-Performance Intervention for Adults With ADHD — randomised controlled trial", u: "https://journals.sagepub.com/doi/10.1177/15394492231159902" },
  { t: "Working with ADHD: how I harness my strengths and manage the challenges — Defra Digital", u: "https://defradigital.blog.gov.uk/2022/05/17/working-with-adhd-how-i-harness-my-strengths-and-manage-the-challenges/" },
  { 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: "ADHD, Executive Functioning and Self-Regulation — Russell Barkley", u: "https://www.russellbarkley.org/factsheets/ADHD_EF_and_SR.pdf" },
  { 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: "Strengths and challenges to embrace ADHD in employment — systematic review", u: "https://journals.sagepub.com/doi/10.1177/27546330241287655" },
];

const PromoSources = () => (
  <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 research into adult ADHD at work, expert models of executive function, and real accounts from people who have been through the promotion process. Here's where it comes from.
        </p>
      </div>

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

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

function PromoApp() {
  return (
    <main id="main">
      <PromoNav />
      <PromoHero />
      <PromoWhatLoopsDoes />
      <PromoRecognition />
      <PromoWhyItHappens />
      <PromoWhyLoopsWorks />
      <PromoHowItWorks />
      <PromoWhatsInside />
      <PromoSocialProof />
      <LoopsPricing bg="bg-base" />
      <PromoObjections />
      <PromoFAQ />
      <PromoFinalCTA />
      <PromoSources />
      <Footer />
    </main>
  );
}

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