/* Loops — "Hyperfocus With ADHD" — mechanism explainer page.
   Balanced tone: refuse to romanticise or pathologise. Real benefit, real cost.
   Unique section: manage the cost, not the state. Burnout link named, not catastrophised. */

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

const HF_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 HfNav = () => {
  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">
            {HF_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">
              {HF_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 HF_HERO_BLOCKS = [
  {
    title: "Interest-driven, not willpower-driven",
    body: "Hyperfocus responds to novelty and interest, not to how important a task actually is.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10m0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12"/><path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8"/><path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/></svg>),
  },
  {
    title: "Real benefit, real cost",
    body: "It can produce genuinely impressive output. It's rarely free.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9.167 4.5a1.167 1.167 0 1 1-2.334 0 1.167 1.167 0 0 1 2.334 0"/><path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8"/><path d="M8 2a3 3 0 1 0 0 6 3 3 0 1 1 0 6 6 6 0 1 0 0-12"/><path d="M9.167 11.5a1.167 1.167 0 1 1-2.334 0 1.167 1.167 0 0 1 2.334 0"/></svg>),
  },
  {
    title: "Manage the cost, not just chase the state",
    body: "Support for coming out of it without the crash, not just getting into it more often.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097z"/></svg>),
  },
];

const HfHero = () => (
  <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">
          Hyperfocus isn't a superpower or a flaw. It's a cost you don't feel until later.
        </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">
          Disappearing into something for hours can feel incredible in the moment. It's also commonly followed by missed meals, a blown schedule, and a crash that doesn't show up until the focus breaks. Here's what's actually happening, and how to get the benefit without the bill.
        </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">
        {HF_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 HfWhatLoopsDoes = () => (
  <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]">
          Support before, during, and after hyperfocus, not just during it.
        </h2>
        <div className="mt-6 space-y-5 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Most advice about hyperfocus focuses on how to trigger it, as if the only problem is not getting enough of it. For a lot of people with ADHD, the real problem is what happens around it: the meals missed while it lasts, and the crash that follows once it breaks.
          </p>
          <p>
            Loops helps you notice when a session is running long, protects the basics that hyperfocus tends to override, and helps you recover afterwards instead of quietly running on empty until the next one starts.
          </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 HF_RECOGNITION = [
  "Six hours disappeared into something you loved. You didn't eat, didn't move, and didn't notice any of it until it was over.",
  "You can hyperfocus for hours on something genuinely unimportant and can't sustain twenty minutes on something you actually need to do.",
  "People call it a superpower. You know it also cost you a missed meeting, a blown evening, or a full day of everything else falling behind.",
  "The crash after a big hyperfocus session hits later than you'd expect, and it's worse than ordinary tiredness.",
  "You can't summon it on command, even for the things that matter most, which makes it feel unreliable rather than useful.",
  "You've tried to \u201Cuse hyperfocus productively\u201D by forcing it onto important tasks, and it mostly just doesn't work that way.",
];

const HfRecognition = () => (
  <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 hyperfocus.
        </p>
      </div>

      <div className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {HF_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 inconsistency or a lack of discipline. Hyperfocus is a genuine, well-documented ADHD pattern, and understanding how it actually works changes what's worth trying to change about it.
        </p>
      </div>

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

/* ---------------- Why it works this way (5 stages) ---------------- */

const HF_PATTERNS = [
  { title: "Attention follows interest, novelty, and urgency, not importance", body: "ADHD attention responds reliably to interest and far less reliably to importance alone. This is why someone can hyperfocus for hours on something they love and be unable to sustain twenty minutes on something they genuinely need to do. The attention system itself is intact. What's inconsistent is the ability to direct it toward the task that actually matters most." },
  { title: "The good stretch is never actually free", body: "Hyperfocus can produce genuinely impressive output, but it's commonly sustained at the expense of sleep, meals, and everyday maintenance. None of that cost disappears. It accumulates quietly while the hyperfocus lasts, and comes due all at once when the focus finally breaks." },
  { title: "It can't reliably be summoned on demand", body: "Trying to force hyperfocus onto an important task by sheer will tends not to work, because the state is triggered by interest and novelty, not by intention. This is part of why \u201Cjust hyperfocus on it\u201D is well-meaning but often useless advice, and why the unpredictability itself is a genuine source of frustration." },
  { title: "The crash is a real, delayed cost", body: "The deferred cost of a hyperfocus session, missed sleep, skipped meals, neglected tasks, tends to arrive all at once when the focus breaks, rather than being felt gradually along the way. This delayed-cost pattern is one of the clearest paths into ADHD burnout when it repeats often enough without recovery time built in." },
  { title: "It can look contradictory from the outside", body: "Someone can hyperfocus intensely on an interesting task while genuinely failing to make progress on something they care about deeply. ADHD is better understood as a problem of activation and consistent deployment of effort across contexts, not a fixed inability to focus. The caring is real. It simply isn't the ingredient that reliably produces sustained attention." },
];

const HfWhyItHappens = () => (
  <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 that your focus is broken. It's that it runs on interest, not importance.
        </h2>
        <p className="mt-6 text-[17px] sm:text-[18px] leading-[1.7] text-ink-2 text-pretty">
          Hyperfocus gets talked about constantly and explained properly far less often. These are the mechanisms underneath it.
        </p>
      </div>

      <ol className="mt-12 space-y-4 sm:space-y-5">
        {HF_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 working with this pattern, not fighting it: protecting the basics during a session, and supporting recovery once it ends.</span>
      </p>
    </Container>
  </Section>
);

/* ---------------- Unique section: manage the cost, not the state ---------------- */

const HfReframe = () => (
  <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]">
          The goal isn't more hyperfocus. It's a smaller bill when it happens.
        </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>
          A lot of advice treats hyperfocus as a resource to unlock: find the trick, get more of it, apply it to the things that matter. That framing misses what actually causes the damage. Hyperfocus itself isn't the problem. The problem is that it tends to happen without guardrails, no eating, no sense of time passing, no stopping point, and the deferred cost of all of that arrives at once when it finally breaks.
        </p>
        <p className="text-ink font-medium">
          The more useful goal isn't summoning hyperfocus more reliably. It's putting a floor under a session while it's happening, a meal, a movement break, a sense of elapsed time, so that the same intensity doesn't have to cost as much afterwards.
        </p>
      </div>
    </Container>
  </Section>
);

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

const HF_STEPS = [
  { t: "Tell Loops what tends to pull you into hyperfocus", b: "A project, a hobby, a type of work. No judgement, just context." },
  { t: "Get gentle check-ins during long sessions", b: "A prompt to eat, move, or notice the time, without breaking the focus itself or demanding you stop." },
  { t: "Get support for the crash afterwards", b: "Loops helps you recover once a session ends, rather than assuming you'll bounce straight back to normal." },
  { t: "Build a rhythm that includes recovery, not just output", b: "Over time, this reduces how often one big session leads to several depleted days afterwards." },
];

const HfHowItWorks = () => (
  <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]">
          Support around the focus, not just during it.
        </h2>
        <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
          You don't need to control when hyperfocus happens. Loops helps manage what happens around it.
        </p>
      </div>

      <ol className="mt-12 grid gap-4 sm:gap-5 sm:grid-cols-2">
        {HF_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 stopping hyperfocus from happening. It's about it costing you less when it does.
      </p>
    </Container>
  </Section>
);

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

const HF_TESTIMONIALS = [
  { quote: "I used to treat hyperfocus like a superpower I had to chase. Realising the real problem was the crash afterwards, not the focus itself, changed what I actually needed help with.", who: "Software engineer", meta: "Diagnosed with ADHD at 27" },
  { quote: "A gentle nudge to eat or move during a long session sounds small. It's the difference between a good day and a genuinely bad three days after.", who: "Illustrator", meta: "Using Loops for 7 weeks" },
  { quote: "Nobody ever explained why I could focus for six hours on a hobby and barely five minutes on my actual job. Understanding that it's about interest, not effort, took away a lot of the guilt.", who: "Teacher, Cardiff", meta: null },
];

const HfSocialProof = () => (
  <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">
        {HF_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 HF_OBJECTIONS = [
  { q: "\u201CIsn't hyperfocus just a good thing? Why treat it like a problem?\u201D", a: "It can be genuinely valuable, and it's rarely free. The output during a session can be real and impressive. The missed meals, blown schedule, and delayed crash are just as real, and treating only the upside as worth discussing leaves people unprepared for the cost." },
  { q: "\u201CCan I train myself to hyperfocus on command?\u201D", a: "Not reliably, and that's worth knowing rather than chasing. Hyperfocus is driven by interest and novelty, not intention, which is why trying to force it onto an important but uninteresting task usually doesn't work the way people hope." },
  { q: "\u201CWhat if my hyperfocus sessions are leading to burnout?\u201D", a: "That's a genuinely common and serious pattern worth addressing directly. Repeated hyperfocus-crash cycles without recovery time are one of the clearest paths into ADHD burnout. If you're already feeling the effects of that, it's worth reading about burnout recovery specifically, and speaking with a doctor if the exhaustion feels beyond what rest is fixing.", link: { label: "Find help and support resources", href: "/support/find-help/" } },
  { q: "\u201CWhat if I'm not diagnosed with ADHD?\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." },
];

const HfObjections = () => (
  <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">
        {HF_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 HF_FAQS = [
  { q: "What is hyperfocus?", a: "Hyperfocus is a state of intense, absorbed attention on a task or interest, often to the point of losing track of time, meals, or other responsibilities. It's a widely reported ADHD pattern rather than a formal diagnostic symptom." },
  { q: "Why does hyperfocus happen with ADHD?", a: "ADHD attention responds reliably to interest, novelty, and urgency, and much less reliably to importance alone. This means genuinely interesting or urgent tasks can absorb attention completely, while equally important but less stimulating tasks struggle to hold it at all." },
  { q: "Is hyperfocus a good thing or a bad thing?", a: "Both, often in the same session. It can produce real, valuable output, and it's commonly sustained at the expense of sleep, meals, and everyday maintenance, with the cost arriving all at once once the focus breaks." },
  { q: "Can you control when hyperfocus happens?", a: "Not reliably. Because it's driven by interest and novelty rather than intention, it can't easily be summoned on demand for a task simply because it's important." },
  { q: "Is hyperfocus linked to ADHD burnout?", a: "Yes. Repeated hyperfocus-crash cycles, where output is sustained by borrowed sleep, skipped meals, and neglected recovery time, are a well-documented pathway into ADHD burnout when they happen often without enough recovery in between." },
  { 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." },
];

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

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

const HfFinalCTA = () => (
  <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>Get the benefit, skip the bill</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]">
            Get the focus. Skip the bill.
          </h2>
          <p className="mt-5 text-[17px] sm:text-[18px] leading-[1.65] text-ink-2 text-pretty">
            Not less hyperfocus. Just a smaller cost when it happens.
          </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 HF_RELATED = [
  { t: "Recover from burnout with ADHD", d: "The hyperfocus-crash cycle, named directly, and a way back from it.", href: "/adhd/recover-from-adhd-burnout/" },
  { t: "Stay focused with ADHD", d: "The interest-versus-importance mechanism, and steady progress despite it.", href: "/adhd/stay-focused-with-adhd/" },
  { t: "Actually finish what you start with ADHD", d: "When hyperfocus gives way to boredom before the finish line.", href: "/adhd/actually-finish-what-you-start/" },
  { t: "Build something meaningful with ADHD", d: "Focus on the interesting versus progress on what matters most.", href: "/adhd/build-something-meaningful/" },
];

const HfRelated = () => (
  <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">
        {HF_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 HfApp() {
  return (
    <main id="main">
      <HfNav />
      <HfHero />
      <HfWhatLoopsDoes />
      <HfRecognition />
      <HfWhyItHappens />
      <HfReframe />
      <HfHowItWorks />
      <HfSocialProof />
      <HfObjections />
      <HfFAQ />
      <HfFinalCTA />
      <HfRelated />
      <Footer />
    </main>
  );
}

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