/* Loops — "Time Blindness With ADHD" — mechanism explainer page.
   Visitor often meeting the term for the first time: name + validate in one breath.
   Honest that "time blindness" is an informal but well-supported term.
   Unique section: the external clock reframe. */

/* ---------------- Page nav ---------------- */

const TB_NAV_LINKS = [
  { label: "How it works", href: "#how" },
  { label: "Why it happens", href: "#why" },
  { label: "Questions", href: "#faq" },
  { label: "For ADHD", href: "/adhd/#directory" },
  { label: "Knowledge Hub", href: "/adhd/knowledge-hub/" },
  { label: "Blog", href: "/blog/" },
];

const TbNav = () => {
  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">
            {TB_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">
              {TB_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 TB_HERO_BLOCKS = [
  {
    title: "A real perceptual difference",
    body: "Not carelessness. A documented pattern in how ADHD affects time perception.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483zm.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501zm-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z"/><path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z"/><path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5"/></svg>),
  },
  {
    title: "Make time visible",
    body: "External cues that show time passing, instead of relying on a sense that isn't reliable.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/></svg>),
  },
  {
    title: "Fewer ambush moments",
    body: "Not perfect timekeeping. Just fewer days where time runs out without warning.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/></svg>),
  },
];

const TbHero = () => (
  <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-[54px] fade-in-up delay-1">
          It's not that you don't care about time. It's that you can't reliably feel it passing.
        </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">
          "Time blindness" isn't a throwaway phrase. It describes a real, well-documented difference in how ADHD brains sense elapsed and remaining time, and it explains a lot more of daily life than lateness alone.
        </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">7-day free trial. No complicated setup.</span>
        </div>
      </div>

      {/* Three icon blocks */}
      <div className="mx-auto mt-14 lg:mt-16 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3 fade-in-up delay-4">
        {TB_HERO_BLOCKS.map((b) => (
          <div key={b.title} className="rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="flex h-11 w-11 items-center justify-center rounded-tile bg-brand-soft text-brand">
              {b.icon}
            </div>
            <h3 className="mt-5 text-[16.5px] font-semibold tracking-tight2 text-ink">{b.title}</h3>
            <p className="mt-2 text-[14.5px] leading-[1.6] text-ink-2 text-pretty">{b.body}</p>
          </div>
        ))}
      </div>

      <p className="mt-8 text-center text-[14px] text-ink-3 fade-in-up delay-4">Loops is a daily coaching app for people with ADHD.</p>
    </Container>
  </section>
);

/* ---------------- What Loops does ---------------- */

const TbWhatLoopsDoes = () => (
  <Section id="what" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <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 system that keeps time visible, so you don't have to feel it to track it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most time-management advice assumes the problem is planning: a better calendar, a clearer schedule, a smarter system. For time blindness specifically, that's the wrong layer. The planning was often fine. The problem is that the internal sense of how much time has passed, or how much is left, doesn't reliably prompt action before it's already urgent.
          </p>
          <p>
            Loops surfaces time and workload before they become a crisis, with daily prompts and coaching built around how time actually behaves for an ADHD brain, not how a calendar assumes it should.
          </p>
        </div>
        <div className="mt-8">
          <Button variant="primary" size="md" href="#start">Get Early Access</Button>
        </div>
      </div>
    </Container>
  </Section>
);

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

const TB_RECOGNITION = [
  "A deadline marked clearly three weeks in advance still somehow arrives feeling sudden.",
  "\u201CFive more minutes\u201D reliably becomes forty. You've stopped trusting your own estimate of how long anything takes.",
  "You've been told you're bad at time management so many times you've started to believe it's just who you are.",
  "A task that felt distant and unreal yesterday is somehow due today, and nothing about that timeline actually changed.",
  "You've set alarms, timers, and reminders. They get ignored or dismissed the moment they go off, and the day carries on as before.",
  "You genuinely don't know, most days, how much time has passed since you last checked, until you check again.",
];

const TbRecognition = () => (
  <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 about time.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {TB_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">
          This isn't a discipline problem. ADHD affects the systems that let most people feel time passing without having to think about it, and that difference has a name.
        </p>
      </div>

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

/* ---------------- Why it happens (5 mechanisms) ---------------- */

const TB_PATTERNS = [
  { title: "An unreliable internal clock", body: "Most people can sense roughly how much time has passed without checking. That internal signal is less reliable in ADHD. Adults with ADHD show measurable difficulty perceiving and tracking elapsed time, which research suggests may reflect weaker strategic time-monitoring specifically, not a total absence of awareness that time is passing." },
  { title: "The future doesn't feel real until it's urgent", body: "A deadline in three weeks and a deadline tomorrow can feel almost identical, right up until one of them isn't. ADHD is linked to elevated delay discounting, meaning distant events carry less psychological weight than immediate ones. This is why a clearly marked deadline can still arrive feeling sudden." },
  { title: "Estimation is a genuine skill gap, not laziness", body: "Judging how long something will actually take is a well-documented difficulty in ADHD, distinct from carelessness about scheduling. A task planned around an idealised, uninterrupted stretch of time rarely matches how the task actually unfolds, which is part of why plans built on ADHD time estimates tend to be optimistic by default." },
  { title: "Workload becomes visible only once it's already too late", body: "A to-do list that looked manageable at 9am can feel like an ambush by 2pm, not because more was added, but because the accumulation wasn't felt happening. Without a reliable internal sense of time passing, workload often doesn't register as urgent until there's no runway left to plan around it." },
  { title: "Reminders alone don't fix a perception problem", body: "An alarm tells you the time. It doesn't restore the felt sense of time passing that would have prompted you to check the clock in the first place. This is why timers and reminders often get dismissed on autopilot: they're patching the symptom, not addressing the underlying perceptual gap." },
];

const TbWhyItHappens = () => (
  <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]">
          Time doesn't behave the same way for an ADHD brain. Here's what's actually happening.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Time-perception differences are considered central to adult ADHD impairment, not a minor side detail. They show up in specific, recognisable ways.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {TB_PATTERNS.map((p, i) => (
          <li key={p.title} className="rounded-card border border-line bg-white p-6 sm:p-8 shadow-soft">
            <div className="flex flex-col gap-4 sm:flex-row sm:gap-7">
              <span className="text-[40px] font-semibold tracking-tight3 text-brand-deep tnum leading-none sm:w-16 sm:shrink-0">{String(i + 1).padStart(2, "0")}</span>
              <div className="max-w-prose">
                <h3 className="text-[19px] sm:text-[20px] font-semibold tracking-tight2 text-ink leading-snug">{p.title}</h3>
                <p className="mt-2.5 text-[15.5px] sm:text-[16px] leading-[1.65] text-ink-2 text-pretty">{p.body}</p>
              </div>
            </div>
          </li>
        ))}
      </ol>

      <p className="mt-8 max-w-prose text-[17px] sm:text-[18px] leading-[1.65] text-ink">
        <span className="font-semibold">Loops is built around making time and workload externally visible, because the fix isn't a better internal clock. It's not needing to rely on one.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: the external clock reframe ---------------- */

const TbReframe = () => (
  <Section id="reframe" className="bg-base">
    <Container>
      <div className="mx-auto max-w-3xl text-center">
        <div className="flex justify-center"><Kicker>Something worth knowing before anything else</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]">
          You don't need a better relationship with time. You need time to stop depending on being felt.
        </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>
          Most advice for time management assumes the internal sense of time is intact and just needs better organising: a clearer calendar, more reminders, a stricter schedule. For time blindness specifically, that assumption is the problem. The internal signal that would normally prompt "you should start now" or "this is taking longer than planned" isn't reliable enough to depend on.
        </p>
        <p className="text-ink font-medium">
          The fix isn't trying harder to feel time passing. It's making time visible from the outside: realistic estimates, automatic buffers, and prompts that surface a "start by" moment rather than only a deadline, so the decision to act doesn't depend on a felt sense that wasn't going to arrive in time anyway.
        </p>
      </div>
    </Container>
  </Section>
);

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

const TB_STEPS = [
  { t: "Tell Loops what you're working towards", b: "A deadline, a routine, a habit you're trying to build. Plain language, no complicated setup." },
  { t: "Get realistic time estimates, with buffers built in", b: "Not the idealised version of how long something takes. The version that accounts for how ADHD time actually works." },
  { t: "Get prompted to start, not just reminded of the deadline", b: "A \u201Cstart by\u201D moment, surfaced before urgency sets in, not an alarm that's easy to dismiss on autopilot." },
  { t: "Watch workload become visible before it becomes an ambush", b: "Loops surfaces accumulating tasks and time pressure early, so 2pm doesn't have to feel like a surprise." },
];

const TbHowItWorks = () => (
  <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]">
          Time, made visible. Every day.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to become better at sensing time. Loops handles the part that isn't reliable for you.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {TB_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">
        This isn't about becoming perfectly punctual. It's about fewer days where time runs out without warning.
      </p>
    </Container>
  </Section>
);

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

const TB_TESTIMONIALS = [
  { quote: "I spent thirty years thinking I was just bad with time. Finding out it has a name, and that alarms alone were never going to fix it, changed how I think about the whole problem.", who: "Operations coordinator", meta: "Diagnosed with ADHD at 41" },
  { quote: "The 'start by' prompts are the actual difference. A deadline never meant anything to me until it was almost too late. Being told when to start, not just when to finish, is a completely different thing.", who: "University student", meta: "Using Loops for 6 weeks" },
  { quote: "I used to lose entire afternoons without noticing time passing at all. Having something outside my own head track it for me has been a genuine relief.", who: "Graphic designer, Manchester", meta: null },
];

const TbSocialProof = () => (
  <Section id="stories" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>What people say</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          From people who recognise themselves in this.
        </h2>
      </div>

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

/* ---------------- Objections (4, incl. safeguarding link) ---------------- */

const TB_OBJECTIONS = [
  { q: "\u201CI've tried timers and alarms and they don't work.\u201D", a: "Alarms tell you the time. They don't restore the felt sense of time passing that would prompt you to act. That's a real limitation of reminders alone, not a sign you're using them wrong. Loops is built to prompt action at a \u201Cstart by\u201D point, not just announce a deadline." },
  { q: "\u201CIsn't this just being bad at planning?\u201D", a: "No, and that distinction matters. Time blindness describes a perceptual difference in sensing elapsed and remaining time, not a failure to make plans. Many people with excellent plans still experience deadlines as sudden, because the plan was never the part that was broken." },
  { q: "\u201CWhat if I'm not diagnosed?\u201D", a: "You don't need a diagnosis. Many people using Loops are on waiting lists, self-identifying, or simply recognise these patterns as familiar. If that's you, Loops is built for you." },
  { q: "\u201CWhat if this is causing serious problems at work or in my life?\u201D", a: "That's worth taking seriously. If time-related difficulties are significantly affecting your job, finances, or relationships, a conversation with a doctor or a formal assessment is a genuinely good next step. Loops works well alongside that kind of support, but it isn't a substitute for it.", link: { label: "Find help and support resources", href: "/support/find-help/" } },
];

const TbObjections = () => (
  <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">
        {TB_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>
            {o.link ? (
              <a href={o.link.href} className="focus-ring mt-4 inline-flex items-center gap-2 rounded-pill bg-brand-soft px-4 py-2.5 text-[14px] font-semibold text-brand-deep transition-colors hover:bg-muted">
                {o.link.label}
                <svg width="15" height="15" 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>
              </a>
            ) : null}
          </article>
        ))}
      </div>
    </Container>
  </Section>
);

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

const TB_FAQS = [
  { q: "What is time blindness?", a: "Time blindness is a widely used, informal term for a documented difficulty in ADHD with sensing elapsed and remaining time. It's not a formal diagnostic term, but the underlying difficulty is well supported by research on adult ADHD." },
  { q: "Why does ADHD cause time blindness?", a: "ADHD is associated with differences in interval timing and elevated delay discounting, meaning the internal sense of time passing is less reliable, and distant events carry less psychological weight than immediate ones. Together, these make deadlines feel unreal until they're suddenly urgent." },
  { q: "Can time blindness be fixed?", a: "The internal sense of time itself is hard to change directly. What tends to help is making time and workload externally visible, through realistic estimates, buffers, and start-by prompts, rather than relying on an internal clock to do a job it doesn't do reliably." },
  { 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 here feel familiar, Loops is built for you." },
  { q: "Is Loops available in the UK?", a: "Yes. Loops is available across the UK and is designed around UK contexts and guidance." },
  { q: "Why do reminders and alarms often not work for ADHD time blindness?", a: "Reminders announce the time. They don't recreate the felt sense of time passing that would have prompted checking the clock in the first place, which is why they're often dismissed on autopilot rather than acted on." },
];

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

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

const TbFinalCTA = () => (
  <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>Time, made visible</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]">
            Fewer days where time runs out without warning.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not perfect punctuality. Just time that stops ambushing you.
          </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">7-day free trial. No complicated setup. Takes a few minutes.</span>
          </div>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Related pages ---------------- */

const TB_RELATED = [
  { t: "Actually finish what you start with ADHD", d: "The time gap between starting and finishing, named directly.", href: "/adhd/actually-finish-what-you-start/" },
  { t: "Feel less overwhelmed with ADHD", d: "How unfelt time compounds into a workload that ambushes you.", href: "/adhd/feel-less-overwhelmed-with-adhd/" },
  { t: "Build routines that survive bad days with ADHD", d: "Time perception, restarts, and routines that don't collapse.", href: "/adhd/build-routines-that-survive-bad-days/" },
  { t: "Get organised with ADHD", d: "Time as a distinct problem from memory, handled on its own terms.", href: "/adhd/get-organised-with-adhd/" },
];

const TbRelated = () => (
  <Section id="related" className="bg-base">
    <Container>
      <div className="max-w-prose">
        <Kicker>Keep exploring</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[28px] sm:text-[34px] lg:text-[40px] leading-[1.12]">
          If you're exploring this alongside other patterns
        </h2>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {TB_RELATED.map((r) => (
          <a key={r.href} href={r.href} className="card-hover group flex items-start justify-between gap-4 rounded-card border border-line bg-white p-6 sm:p-7 shadow-soft">
            <div className="max-w-prose">
              <h3 className="text-[18px] font-semibold tracking-tight2 text-ink leading-snug">{r.t}</h3>
              <p className="mt-2 text-[15px] leading-[1.6] text-ink-2 text-pretty">{r.d}</p>
            </div>
            <span aria-hidden="true" className="mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-pill bg-brand-soft text-brand transition-transform duration-200 group-hover:translate-x-0.5">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </span>
          </a>
        ))}
      </div>
    </Container>
  </Section>
);

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

function TbApp() {
  return (
    <main id="main">
      <TbNav />
      <TbHero />
      <TbWhatLoopsDoes />
      <TbRecognition />
      <TbWhyItHappens />
      <TbReframe />
      <TbHowItWorks />
      <TbSocialProof />
      <TbObjections />
      <TbFAQ />
      <TbFinalCTA />
      <TbRelated />
      <Footer />
    </main>
  );
}

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