/* Loops — "Finding a New Job With ADHD" use-case page */

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

const JOB_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 JobNav = () => {
  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">
            {JOB_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">
              {JOB_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 JOB_HERO_BLOCKS = [
  {
    title: "Get applications moving",
    body: "One daily action so you always know what to do next.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z"/></svg>),
  },
  {
    title: "Prepare for interviews",
    body: "Practice that works when your mind goes blank under pressure.",
    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: "Recover from rejection",
    body: "Coaching through the low points so one bad week doesn't end the search.",
    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 JobHero = () => (
  <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">
          Job hunting is hard for anyone. With ADHD, it can feel completely impossible.
        </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">
          You want to find something new. You know what to do. But starting, staying consistent, and recovering from rejection keeps getting in the way.
        </p>

        <p className="mx-auto mt-4 max-w-2xl text-[16px] sm:text-[17px] leading-[1.6] text-ink-2 text-pretty fade-in-up delay-2">
          Loops is a daily coaching app for people with ADHD. It gives your search a structure that holds when motivation doesn't, and, if you want it, <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">
        {JOB_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 JobWhatLoopsDoes = () => (
  <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 job hunting that ADHD makes hardest.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            A job search isn't one task. It's dozens of small tasks spread over weeks or months, with no clear deadline and a reward that feels very far away.
          </p>
          <p>
            Loops breaks it down into small, manageable steps and shows you the next one to take. It helps you get applications moving, prepare for interviews, and keep going when things get quiet or 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 JOB_WITNESS_CARDS = [
  { t: "All they have to do is see it", b: "When you close a loop, they see it. When you get through an interview, they see it. When you hit a milestone, they see that too. 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. If your search is private, keep it entirely to yourself." },
  { t: "For the days a rejection lands", b: "A job hunt is full of knockbacks. On the days one lands, one person in your corner is often what gets you back to the search." },
];

const JobWhyLoopsWorks = () => (
  <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>A job search is long, quiet, and full of knockbacks. It's easy to stop when nobody's watching, and even easier to stay stopped.</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 former colleague, whoever it is. When you close a loop, they see it. When you get through an interview, 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">
        {JOB_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">
          And if your search is private, that's completely fine. You can keep it entirely to yourself and Loops still works. Your person is there for when, and if, you want it.
        </p>
      </div>
    </Container>
  </Section>
);

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

const JOB_RECOGNITION = [
  "You open a job listing, feel genuinely excited, then close the tab without applying. Again.",
  "You can search in bursts when the pressure is high. The moment the urgency fades, so does the momentum.",
  "Cover letters make you freeze. Even when you know exactly what to say, getting the words out feels impossible.",
  "You prepare for interviews, feel ready, then your mind goes blank the moment someone asks a question.",
  "A rejection or a period of silence knocks you sideways. Sometimes it stops the search entirely for days or weeks.",
  "You've tried tracking systems, spreadsheets, apps, lists. None of them stuck.",
];

const JobRecognition = () => (
  <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 finds this hard.
        </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 during a job search. 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">
        {JOB_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 character flaws. They are predictable patterns when an ADHD brain meets a process it wasn't designed for.
        </p>
      </div>

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

/* ---------------- Why it keeps happening (6 failure points) ---------------- */

const JOB_PATTERNS = [
  {
    title: "Choosing which roles to pursue",
    body: "Decision-making is exhausting before a single application is sent. Filtering dozens of options, weighing trade-offs, and committing to one direction can consume more energy than the search itself.",
  },
  {
    title: "Getting started and staying consistent",
    body: "It's not \u201CI do nothing.\u201D It's \u201CI can only do it in bursts.\u201D When urgency or interest is high, action flows. When it isn't, starting feels almost physically impossible.",
  },
  {
    title: "Getting through the admin",
    body: "CV tailoring, cover letters, portals, follow-ups, scheduling, references. Each is a separate sub-task requiring switching, remembering, and restarting. In lived experience, the load accumulates fast.",
  },
  {
    title: "Performing well in interviews",
    body: "You can be genuinely capable in the role and still perform poorly in the room. Interviews compress working memory, emotional regulation, and concise storytelling into one short, high-stakes window.",
  },
  {
    title: "Recovering from rejection and silence",
    body: "A knockback that takes another candidate an afternoon can derail a search for weeks. The cycle of applying intensely, then stopping after a setback, is one of the most common ADHD job-search patterns.",
  },
  {
    title: "Knowing whether to disclose",
    body: "You may need the adjustments most at the moment you feel least able to ask for them. UK law requires employers to offer reasonable adjustments during recruitment, but deciding whether and how to disclose carries real emotional weight.",
  },
];

const JobWhyItHappens = () => (
  <Section id="why" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>Understanding what's actually going on</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          There are six places a job search tends to break down for ADHD brains.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Once you can name the specific places it goes wrong, they become much easier to address. None of these are about effort or ability.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {JOB_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">
        Loops is designed around all six of these. <span className="font-semibold">Not as separate tools, but as one connected system.</span>
      </p>
    </Container>
  </Section>
);

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

const JOB_STEPS = [
  { t: "Tell Loops where you are", b: "Share where you are in your search and what kind of role you're looking for. No lengthy setup." },
  { t: "Choose your person, if you want one", 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. It's entirely optional, and because a search is often private, you can keep everything to yourself. 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. Not an overwhelming list. Just the next right thing. Close the loop, and your person sees it." },
  { t: "Get coaching when you hit a wall", b: "Stuck on a cover letter? Dreading an interview question? Got rejected and lost momentum? Loops provides practical, personalised coaching to help you move through it." },
  { t: "Keep going through the hard parts", b: "Loops stays with you through the whole search. The slow weeks, the quiet periods, the knockbacks. It's designed to carry you through, not just get you started." },
];

const JobHowItWorks = () => (
  <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 whole approach. Loops fits around what you're already doing.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {JOB_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">
        There's no wrong point to begin. Wherever you are in your search right now is the right place to start.
      </p>
    </Container>
  </Section>
);

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

const JOB_WHATS_INSIDE = [
  { t: "One goal, with a finish line", b: "Your search, written in your own words, with a rough timeframe and a clear picture of what done looks like: an offer you're happy to accept. 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: one application a day, a practised interview answer, ten minutes on your CV. A few connect to your search. 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 steps you take and the milestones you reach. Support, without the nagging. Always optional. 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 application out, the first interview booked, the offer accepted. 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 where you are in your search and what you've been through, so there's no re-explaining yourself from the start. No booking, no waiting room. It's there at 11pm, which is often when a rejection lands." },
];

const JobWhatsInside = () => (
  <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>
      </div>

      <div className="mt-12 flex flex-col gap-4 sm:gap-5">
        {JOB_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 JOB_TESTIMONIALS = [
  { quote: "I had been 'job hunting' for six months. In reality I had applied for about four things. Loops helped me make it a daily habit instead of something I avoided. I got three interviews in the first month.", who: "UX designer, London", meta: "Diagnosed with ADHD at 28" },
  { quote: "The interview preparation was the part I needed most. I've always known my subject but interviews make my brain go completely blank. Practising the answers made a real difference.", who: "Account manager, Manchester", meta: null },
  { quote: "After getting ghosted twice I just stopped applying. Loops helped me get back into it without feeling like I was starting from scratch every time.", who: "Operations coordinator, Bristol", meta: null },
];

const JobSocialProof = () => (
  <Section id="stories" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>From people who know exactly how this feels</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">
        {JOB_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 JOB_PRICING = [
  { name: "Solo", price: "\u00A39.99", per: "/mo", tag: null, blurb: "Everything: your goal, loops, streaks, rewards and coach. Just you and the search.", 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 JobPricing = () => (
  <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">
        {JOB_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 JOB_OBJECTIONS = [
  { q: "\u201CI've tried systems before. They never last.\u201D", a: "Most job-search tools aren't built for ADHD brains. They rely on sustained motivation and managing complexity across multiple platforms. Loops is designed to stay useful after the novelty fades, meeting you where you are rather than expecting you to come to it." },
  { q: "\u201CDo I have to share my search with anyone?\u201D", a: "No. Solo works perfectly well on its own, and your search stays entirely yours. If you do want someone alongside you, you decide what your person sees and 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 on waiting lists, self-identifying, or finding that ADHD describes their experience without a formal label. If what you've read here feels true, Loops is built for you." },
  { q: "\u201CWhat if my search is already quite far along?\u201D", a: "There's no wrong point to start. Whether you're at the beginning or in the middle of a search that has stalled, Loops works the same way." },
  { q: "\u201CI don't have much time. I'm searching while still working.\u201D", a: "The daily actions are short and specific. You don't need long focused sessions to make progress. Small consistent steps, built into whatever time you have, add up." },
];

const JobObjections = () => (
  <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">
        {JOB_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 JOB_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 job seekers, it acts as external structure for the search: helping you start, stay consistent, and recover when things go wrong." },
  { 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. Because a job search is often private, it's entirely optional: Solo works perfectly well on its own. On a Crew plan it can be more than one: your people." },
  { q: "Why is job hunting so hard with ADHD?", a: "Job hunting requires sustained self-regulation, repeated task initiation, administrative consistency, and emotional recovery from rejection over a long period with no guaranteed reward. These are the same functions most affected by ADHD. The difficulty is predictable rather than personal." },
  { q: "How does Loops help with finding a job when you have ADHD?", a: "Loops breaks the job search into daily manageable steps so starting feels achievable. It provides interview preparation support, coaching after rejections, and a consistent structure that keeps the search moving through the slow and difficult periods." },
  { 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: "How do I prepare for interviews when I have ADHD?", a: "Practise out loud rather than reading notes. Prepare short, structured examples for likely questions. Have a grounding routine before you go in. The goal is to build answers you can recall under pressure, not ones you have to reconstruct on the spot. Loops guides you through this step by step." },
  { q: "What should I do after being rejected from a job with ADHD?", a: "Treat the recovery period as a planned part of the search, not a failure. Give yourself time to decompress, get perspective on what was within your control, and take one small step back in when you're ready. Loops provides coaching through exactly this." },
  { q: "Can I ask for adjustments during a job interview if I have ADHD?", a: "Yes. UK employment law requires employers to provide reasonable adjustments to disabled applicants throughout the recruitment process, including at interview. Adjustments might include receiving questions in advance, extra time, or an adapted format. You don't need to disclose your specific diagnosis to request adjustments." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is built with UK workplace context and employment law in mind." },
];

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

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

const JobFinalCTA = () => (
  <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>Start with one step</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 job search doesn't have to feel like this.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            You don't need a perfect week to make progress. You just need one step, and, if you want, one person who sees you take it.
          </p>
          <div className="mt-8 flex flex-col items-center gap-3">
            <Button variant="primary" size="lg" href="#start">
              Get Early Access
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </Button>
            <span className="text-[13.5px] text-ink-3">Free for 7 days. No complicated setup. On iOS for now.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Sources ---------------- */

const JOB_SOURCES = [
  { t: "Occupational issues of adults with ADHD — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3599848/" },
  { t: "Impairment in occupational functioning and adult ADHD", u: "https://pubmed.ncbi.nlm.nih.gov/20197297/" },
  { t: "Attention-deficit/hyperactivity disorder and occupational outcomes — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC7968636/" },
  { t: "Job search self-regulation research — University of Minnesota Carlson School of Management", u: "https://carlsonschool.umn.edu/sites/carlsonschool.umn.edu/files/2021-06/VanHooftKammeyerMuellerWanbergKanferBasbug_JAP%202021.pdf" },
  { t: "Motivation Deficit in ADHD is Associated with Dysfunction of the Dopamine Reward Pathway", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC3010326/" },
  { 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: "Emotional dysregulation and Attention-Deficit/Hyperactivity Disorder — PMC", u: "https://pmc.ncbi.nlm.nih.gov/articles/PMC4282137/" },
  { 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: "Following discrimination law — Recruitment — Acas", u: "https://www.acas.org.uk/recruitment/follow-discrimination-law" },
  { t: "A System/Structure for Job Hunting — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/1q7g8ev/a_systemstructure_for_job_hunting/" },
  { t: "ADHD at the workplace: ADHD symptoms, diagnostic status and work-related functioning — Journal of Neural Transmission", u: "https://link.springer.com/article/10.1007/s00702-021-02309-z" },
  { t: "Effectiveness of job search interventions: a meta-analytic review — PubMed", u: "https://pubmed.ncbi.nlm.nih.gov/24588365/" },
  { t: "The lived experiences of adults with ADHD: a rapid review of qualitative evidence — ResearchGate", u: "https://www.researchgate.net/publication/362652602_The_lived_experiences_of_adults_with_attention-deficithyperactivity_disorder_A_rapid_review_of_qualitative_evidence" },
  { t: "Job searching with ADHD is great, isn't it? — r/adhdwomen", u: "https://www.reddit.com/r/adhdwomen/comments/rt5xnn/job_searching_with_adhd_is_great_isnt_it/" },
  { t: "How do you find motivation for job searching? — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1iiic1i/how_do_you_find_motivation_for_job_searching/" },
  { 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: "I keep ‘failing’ every interview — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1qe8kr6/i_keep_failing_every_interview_how_are_you_guys/" },
  { t: "‘It's like it is designed to keep me stressed’ — Working sustainably with ADHD or autism — Scandinavian Journal of Occupational Therapy", u: "https://link.springer.com/10.1080/11038128.2022.2143420" },
  { t: "Evaluating Digital Interventions for ADHD Diagnosis and Management — Strathprints", u: "https://strathprints.strath.ac.uk/89559/7/Bosnic-etal-DHI-2024-Evaluating-Digital-Interventions-for-ADHD-Diagnosis-and-Management.pdf" },
  { t: "I can't apply to jobs. I feel so defeated. — r/ADHD", u: "https://www.reddit.com/r/ADHD/comments/1fua2m6/i_cant_apply_to_jobs_i_feel_so_defeated/" },
  { t: "Attention deficit hyperactivity disorder: diagnosis and management — NICE", u: "https://www.nice.org.uk/guidance/ng87/resources/attention-deficit-hyperactivity-disorder-diagnosis-and-management-pdf-1837699732933" },
  { t: "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: "Taking Charge of Adult ADHD, Second Edition — Russell Barkley", u: "https://www.guilford.com/books/Taking-Charge-of-Adult-ADHD/Russell-Barkley/9781462546855" },
  { 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 JobSources = () => (
  <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 ADHD and job searching, occupational studies, expert clinical frameworks, and real accounts from people going through the search. Here's where it comes from.
        </p>
      </div>

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

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

function JobApp() {
  return (
    <main id="main">
      <JobNav />
      <JobHero />
      <JobWhatLoopsDoes />
      <JobRecognition />
      <JobWhyItHappens />
      <JobWhyLoopsWorks />
      <JobHowItWorks />
      <JobWhatsInside />
      <JobSocialProof />
      <LoopsPricing bg="bg-base" />
      <JobObjections />
      <JobFAQ />
      <JobFinalCTA />
      <JobSources />
      <Footer />
    </main>
  );
}

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