/* Loops — "Find Support, By Country and By Topic" — crisis + support directory page.
   NOT a use-case conversion page. Emergency numbers first, one fixed layout per country,
   tap-to-call links, anchor jump points, no CTA inside the crisis layer, single gentle Loops
   mention at the very end. No entrance animation on this page. */

const SUPPORT_COUNTRIES = [
  {
    id: "uk", name: "United Kingdom",
    emergency: { num: "999 or 112", tel: "999", note: "call, free, immediate danger, ambulance, fire or police." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "Samaritans", num: "116 123", tel: "116123", note: "call, free, 24/7. You don't need to be suicidal to call." },
        { name: "Childline", num: "0800 1111", tel: "08001111", note: "call, free, 24/7, for anyone under 19." },
        { name: "NHS urgent mental health help", url: "https://www.nhs.uk", note: "official route into local crisis services." },
      ]},
      { label: "Career and study", items: [
        { name: "National Careers Service", num: "0800 100 900", tel: "0800100900", note: "call, free, plus a course finder online. For job moves, upskilling and career changes." },
      ]},
      { label: "Business and projects", items: [
        { name: "GOV.UK: set up a business", url: "https://www.gov.uk", note: "official start-up guidance and the Start Up Loans scheme." },
        { name: "The King's Trust", url: "https://www.kingstrust.org.uk", note: "for young founders aged 11 to 30." },
      ]},
      { label: "Health, sleep and eating", items: [
        { name: "Every Mind Matters", url: "https://www.nhs.uk", note: "free NHS tools for stress, sleep and low mood." },
        { name: "The Sleep Charity: National Sleep Helpline", num: "03303 530 541", tel: "03303530541", note: "call, for sleep problems." },
        { name: "Beat", num: "0808 801 0677", tel: "08088010677", note: "call or webchat, for anyone affected by an eating disorder. See beateatingdisorders.org.uk for current hours.", url: "https://www.beateatingdisorders.org.uk" },
      ]},
      { label: "Relationships and parenting", items: [
        { name: "Family Lives", num: "0808 800 2222", tel: "08088002222", note: "call, free, family and parenting support." },
        { name: "YoungMinds Parents Helpline", num: "0808 802 5544", tel: "08088025544", note: "call, for parents worried about a child's mental health." },
        { name: "Relate", url: "https://www.relate.org.uk", note: "relationship counselling." },
      ]},
      { label: "Grief and money", items: [
        { name: "Cruse Bereavement Support", num: "0808 808 1677", tel: "08088081677", note: "call, free, bereavement support." },
        { name: "MoneyHelper", url: "https://www.moneyhelper.org.uk", note: "impartial money guidance and a Debt Advice Locator." },
      ]},
    ],
  },
  {
    id: "us", name: "United States",
    emergency: { num: "911", tel: "911", note: "call, immediate danger." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "988 Suicide & Crisis Lifeline", num: "988", tel: "988", note: "call, text or chat, free, 24/7." },
        { name: "SAMHSA National Helpline", num: "1-800-662-4357", tel: "18006624357", note: "call, treatment referral for mental health or substance use." },
        { name: "NAMI HelpLine", url: "https://www.nami.org", note: "call, text or chat, for non-crisis mental health guidance." },
        { name: "Childhelp", num: "800-422-4453", tel: "8004224453", note: "call, 24/7, for child abuse and family safety concerns." },
        { name: "211", url: "https://www.211.org", note: "call or text, connects you to local services during financial or family strain." },
      ]},
      { label: "Career and study", items: [
        { name: "CareerOneStop", url: "https://www.careeronestop.org", note: "plus 1-877-US2-JOBS and local American Job Centers. Job search, training and career planning." },
      ]},
      { label: "Business and projects", items: [
        { name: "SBA", url: "https://www.sba.gov", note: "official start-up guidance and funding routes." },
        { name: "SCORE", url: "https://www.score.org", note: "free, nationally available small business mentoring." },
      ]},
      { label: "Health and sleep", items: [
        { name: "NIMH", url: "https://www.nimh.nih.gov", note: "primary-source information on mental health and sleep." },
      ]},
      { label: "Grief and money", items: [
        { name: "NFCC", num: "800-388-2227", tel: "8003882227", note: "call, nonprofit debt and financial coaching." },
        { name: "Benefits.gov", url: "https://www.benefits.gov", note: "government benefits and financial stabilisation." },
      ]},
    ],
  },
  {
    id: "canada", name: "Canada",
    emergency: { num: "911", tel: "911", note: "call, immediate danger." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "9-8-8", num: "988", tel: "988", note: "call or text, free, 24/7, suicide and crisis support." },
        { name: "Government of Canada: mental health support", url: "https://www.canada.ca", note: "official starting point." },
        { name: "CMHA", url: "https://www.cmha.ca", note: "Canadian Mental Health Association resources." },
        { name: "Kids Help Phone", num: "1-800-668-6868", tel: "18006686868", note: "or text CONNECT to 686868. Call or text, 24/7, for young people and students." },
      ]},
      { label: "Career and study", items: [
        { name: "Job Bank", url: "https://www.jobbank.gc.ca", note: "jobs, courses and labour-market information." },
      ]},
      { label: "Business and projects", items: [
        { name: "BDC", url: "https://www.bdc.ca", note: "mainstream business finance and advisory support." },
        { name: "Futurpreneur", num: "1-800-464-2923", tel: "18004642923", note: "call, for entrepreneurs aged 18 to 39." },
      ]},
      { label: "Health and sleep", items: [
        { name: "CAMH Mental Health Toolkit", url: "https://www.camh.ca", note: "evidence-based self-help tools." },
      ]},
      { label: "Grief and money", items: [
        { name: "Financial Consumer Agency of Canada", url: "https://www.canada.ca/fcac", note: "financial capability and security." },
      ]},
    ],
  },
  {
    id: "ireland", name: "Ireland",
    emergency: { num: "112 or 999", tel: "112", note: "call, immediate danger." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "Samaritans", num: "116 123", tel: "116123", note: "call, free, 24/7." },
        { name: "Pieta", num: "1800 247 247", tel: "1800247247", note: "or text HELP to 51444. Call or text, for self-harm, suicidal thoughts and bereavement by suicide." },
        { name: "HSE mental health support and therapy pages", url: "https://www.hse.ie", note: "official next step after the crisis lines." },
      ]},
      { label: "Business and projects", items: [
        { name: "Local Enterprise Offices", url: "https://www.localenterprise.ie", note: "the first stop for starting or growing a business." },
      ]},
      { label: "Grief and money", items: [
        { name: "MABS", num: "0818 07 2000", tel: "0818072000", note: "call, the Money Advice and Budgeting Service." },
      ]},
    ],
  },
  {
    id: "australia", name: "Australia",
    emergency: { num: "000", tel: "000", note: "call, immediate danger." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "Lifeline", num: "13 11 14", tel: "131114", note: "call, free, 24/7." },
        { name: "Beyond Blue", num: "1300 22 4636", tel: "1300224636", note: "call, anxiety, depression and brief counselling." },
        { name: "Suicide Call Back Service", num: "1300 659 467", tel: "1300659467", note: "call, specialist 24/7 suicide-related counselling." },
        { name: "Kids Helpline", num: "1800 55 1800", tel: "1800551800", note: "call, free, 24/7, for children and young people." },
      ]},
      { label: "Career and study", items: [
        { name: "Your Career", url: "https://www.yourcareer.gov.au", note: "career planning and direction." },
      ]},
      { label: "Business and projects", items: [
        { name: "business.gov.au", url: "https://www.business.gov.au", note: "official start-up and small business guidance." },
      ]},
      { label: "Health and sleep", items: [
        { name: "healthdirect", url: "https://www.healthdirect.gov.au", note: "mainstream public health information, including sleep." },
      ]},
      { label: "Relationships and parenting", items: [
        { name: "Relationships Australia", num: "1300 364 277", tel: "1300364277", note: "call, relationship and family support." },
      ]},
    ],
  },
  {
    id: "new-zealand", name: "New Zealand",
    emergency: { num: "111", tel: "111", note: "call, immediate danger." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "1737", num: "1737", tel: "1737", note: "call or text, free, 24/7, national wellbeing support line." },
        { name: "Youthline", num: "0800 376 633", tel: "0800376633", note: "or free text 234. Call, text, WhatsApp or webchat, for young people." },
        { name: "Parent Help", num: "0800 568 856", tel: "0800568856", note: "call, a dedicated parenting helpline." },
      ]},
      { label: "Career and study", items: [
        { name: "Careers.govt.nz", url: "https://www.careers.govt.nz", note: "career planning and study routes." },
      ]},
      { label: "Business and projects", items: [
        { name: "business.govt.nz", url: "https://www.business.govt.nz", note: "official start-up and small business guidance." },
      ]},
      { label: "Grief and money", items: [
        { name: "MoneyTalks", num: "0800 345 123", tel: "0800345123", note: "or text 4029. Call or text, money stress and debt." },
      ]},
    ],
  },
  {
    id: "europe", name: "Europe-wide",
    intro: "Use this layer if you're in Europe outside the countries above, or if you need a cross-border option. Availability of some numbers varies by country, so check locally where noted.",
    emergency: { num: "112", tel: "112", note: "call, works in every EU country." },
    groups: [
      { label: "Crisis and talk now", items: [
        { name: "116 123", num: "116 123", tel: "116123", note: "the EU-reserved number for emotional-support helplines. Check local availability, as it isn't live in every country." },
        { name: "116 111", num: "116 111", tel: "116111", note: "the EU-reserved number for child helplines. See Child Helpline International (childhelplineinternational.org) for the operator list in your country.", url: "https://www.childhelplineinternational.org" },
        { name: "Befrienders Worldwide", url: "https://www.befrienders.org", note: "a cross-border directory of emotional-support helplines by country." },
      ]},
      { label: "Career and study", items: [
        { name: "Europass and EURES", url: "https://europass.europa.eu", note: "CV tools, course discovery and EU-wide job search." },
      ]},
    ],
  },
];

/* ---------------- Page nav (jump links to country sections) ---------------- */

const SupportNav = () => {
  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="Jump to country" className="hidden lg:flex items-center gap-1">
            {SUPPORT_COUNTRIES.map((c) => (
              <a key={c.id} href={`#${c.id}`}
                className="focus-ring rounded-pill px-3 py-2 text-[13.5px] font-medium text-ink-2 hover:text-ink transition-colors">
                {c.name}
              </a>
            ))}
          </nav>
          <div className="hidden lg:flex items-center gap-2">
            <Button variant="primary" size="sm" href="/adhd/knowledge-hub/">Knowledge Hub</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 jump to country" className="flex flex-col gap-1">
              {SUPPORT_COUNTRIES.map((c) => (
                <a key={c.id} href={`#${c.id}`} onClick={() => setOpen(false)}
                  className="focus-ring rounded-tile px-4 py-3.5 text-[16px] font-medium text-ink hover:bg-soft">
                  {c.name}
                </a>
              ))}
            </nav>
            <div className="mt-5 flex flex-col gap-2.5">
              <Button variant="primary" size="md" href="/adhd/knowledge-hub/" onClick={() => setOpen(false)}>Knowledge Hub</Button>
              <Button variant="secondary" size="md" href="/" onClick={() => setOpen(false)}>Back to home</Button>
            </div>
          </Container>
        </div>
      </div>
    </header>
  );
};

/* ---------------- Hero ---------------- */

const SUPPORT_HERO_BLOCKS = [
  {
    title: "Emergency first",
    body: "Call your country's emergency number straight away if anyone is in danger.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1.475 9C2.702 10.84 4.779 12.871 8 15c3.221-2.129 5.298-4.16 6.525-6H12a.5.5 0 0 1-.464-.314l-1.457-3.642-1.598 5.593a.5.5 0 0 1-.945.049L5.889 6.568l-.499 1.658A.5.5 0 0 1 4.911 9zm.982-8C1.11 1 0 2.291 0 3.885 0 5.09.309 6.145 1.055 7h3.514l.792-2.635a.5.5 0 0 1 .96.038l1.202 4.87 1.516-5.31a.5.5 0 0 1 .955-.033L12.293 7h2.652C15.691 6.145 16 5.09 16 3.885 16 2.292 14.89 1 13.293 1 12.14 1 11.242 1.5 10.5 2.5 9.758 1.5 8.86 1 7.5 1z"/></svg>),
  },
  {
    title: "Crisis lines next",
    body: "Free, confidential, and staffed by trained people, day and night.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/></svg>),
  },
  {
    title: "Practical support after",
    body: "Career, money, parenting and business help, once things feel safer.",
    icon: (<svg width="22" height="22" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/></svg>),
  },
];

const SupportHero = () => (
  <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-18 pb-12 lg:pb-16">
      <div className="mx-auto max-w-3xl text-center">
        <h1 className="text-balance text-ink font-bold tracking-tight3 leading-[1.05] text-[32px] sm:text-[44px] lg:text-[50px]">
          If you need help right now, it's here.
        </h1>

        <p className="mx-auto mt-6 max-w-2xl text-[18px] sm:text-[20px] leading-[1.55] text-ink-2 text-pretty">
          This page lists trusted crisis lines, charities and services by country and by topic. Start with the emergency number for where you are.
        </p>

        <p className="mx-auto mt-5 max-w-xl text-[14.5px] leading-[1.6] text-ink-3">
          Free to call. You don't need a diagnosis, an appointment, or the right words ready.
        </p>
      </div>

      {/* Three icon blocks */}
      <div className="mx-auto mt-12 grid max-w-5xl gap-4 sm:gap-5 sm:grid-cols-3">
        {SUPPORT_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>
            <h2 className="mt-5 text-[16.5px] font-semibold tracking-tight2 text-ink">{b.title}</h2>
            <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-[13.5px] leading-[1.6] text-ink-3 max-w-2xl mx-auto">
        Loops is a daily coaching app for people with ADHD. This page is a directory, not a treatment or emergency service.
      </p>
    </Container>
  </section>
);

/* ---------------- How to use ---------------- */

const SupportHowToUse = () => (
  <Section id="how-to-use" className="bg-soft">
    <Container>
      <div className="max-w-prose">
        <Kicker>How to use this page</Kicker>
        <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[26px] sm:text-[32px] lg:text-[38px] leading-[1.14]">
          One layout, every country.
        </h2>
        <div className="mt-6 space-y-5 text-[16.5px] sm:text-[17.5px] leading-[1.7] text-ink-2 text-pretty">
          <p>
            Each country below follows the same order: emergency numbers first, then crisis and talk-now lines, then everyday support grouped by topic. If you only read the bold lines, you'll still get to the right number.
          </p>
          <p>
            If you're supporting someone else, the same order works. Start at the top of their country's section, not the topic that feels most relevant.
          </p>
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Support entry + country section ---------------- */

const SupportEntry = ({ item }) => (
  <li className="flex flex-col gap-1 py-3 border-t border-line first:border-t-0">
    <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
      <span className="text-[15.5px] font-semibold tracking-tight2 text-ink">{item.name}</span>
      {item.num ? (
        <a href={`tel:${item.tel}`} className="focus-ring rounded-md text-[15.5px] font-bold text-brand-deep hover:underline tnum">{item.num}</a>
      ) : null}
    </div>
    <p className="text-[14.5px] leading-[1.6] text-ink-2 text-pretty">
      {item.note}
      {item.url ? (
        <>{" "}<a href={item.url} target="_blank" rel="noopener noreferrer" className="font-medium text-brand-deep hover:underline">Visit website</a>.</>
      ) : null}
    </p>
  </li>
);

const SupportCountry = ({ country }) => (
  <section id={country.id} aria-label={country.name} className="scroll-mt-24 border-t border-line pt-10 sm:pt-12">
    <h2 className="text-[24px] sm:text-[30px] font-semibold tracking-tight2 text-ink leading-tight">{country.name}</h2>
    {country.intro ? (
      <p className="mt-3 max-w-prose text-[15.5px] leading-[1.65] text-ink-2 text-pretty">{country.intro}</p>
    ) : null}

    {/* Emergency, prominent, first */}
    <div className="mt-6 rounded-card border border-rose/30 bg-rose-soft/50 p-5 sm:p-6">
      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
        <span className="text-[11px] font-semibold uppercase tracking-[0.12em] text-rose">Emergency</span>
        <a href={`tel:${country.emergency.tel}`} className="focus-ring rounded-md text-[22px] sm:text-[24px] font-bold text-ink hover:underline tnum">{country.emergency.num}</a>
      </div>
      <p className="mt-1.5 text-[14.5px] leading-[1.55] text-ink-2">{country.emergency.note}</p>
    </div>

    {/* Topic groups */}
    <div className="mt-8 grid gap-6 sm:gap-7 md:grid-cols-2">
      {country.groups.map((g) => (
        <div key={g.label} className="rounded-card border border-line bg-white p-5 sm:p-6 shadow-soft">
          <h3 className="text-[13px] font-semibold uppercase tracking-[0.1em] text-brand-deep">{g.label}</h3>
          <ul className="mt-3 flex flex-col">
            {g.items.map((it) => <SupportEntry key={it.name} item={it} />)}
          </ul>
        </div>
      ))}
    </div>
  </section>
);

const SupportDirectory = () => (
  <Section id="directory" className="bg-base">
    <Container>
      <div className="flex flex-col gap-10 sm:gap-14">
        {SUPPORT_COUNTRIES.map((c) => <SupportCountry key={c.id} country={c} />)}
      </div>
    </Container>
  </Section>
);

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

const SUPPORT_FAQS = [
  { q: "Which number should I call in an emergency?", a: "Always call your country's emergency number first if someone is in immediate danger. That's 999 or 112 in the UK and Ireland, 911 in the US and Canada, 000 in Australia, and 111 in New Zealand." },
  { q: "What if I'm not sure it's serious enough to call?", a: "Call anyway. Samaritans, 988, Pieta, Lifeline and 1737 all exist for exactly this uncertainty, and you don't need to be in danger to use them." },
  { q: "Are these calls free?", a: "Yes. Every crisis line listed here is free to call from a phone in that country. Many also offer free text or webchat if you'd rather not talk out loud." },
  { q: "Are these calls confidential?", a: "Mostly, yes, with narrow safety exceptions. Services will usually only pass on information if they believe you or someone else is at serious risk. Each organisation's own site explains exactly when." },
  { q: "I'm not in one of these countries. What should I do?", a: "Try Befrienders Worldwide, which lists emotional-support helplines by country. If you're anywhere in the EU, 112 works for emergencies." },
  { q: "This isn't a crisis, I just feel overwhelmed. Is this page still for me?", a: "Yes. Look under health, sleep and stress for your country, where practical, lower-pressure options sit alongside the crisis numbers in case things get harder." },
  { q: "Does Loops replace any of these services?", a: "No. Loops supports daily habits and consistency. It isn't a crisis service, a therapist or a medical provider, and it shouldn't be used as one." },
];

const SupportFAQItem = ({ 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 SupportFAQ = () => (
  <Section id="faq" className="bg-soft">
    <Container>
      <div className="grid gap-10 lg:gap-16 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <Kicker>FAQ</Kicker>
          <h2 className="mt-5 text-balance text-ink font-semibold tracking-tight2 text-[26px] sm:text-[32px] lg:text-[38px] leading-[1.14]">
            Questions people often ask
          </h2>
        </div>
        <div className="lg:col-span-8 flex flex-col gap-3">
          {SUPPORT_FAQS.map((f, i) => <SupportFAQItem key={f.q} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </Container>
  </Section>
);

/* ---------------- Closing note (single gentle Loops mention) ---------------- */

const SupportClosing = () => (
  <Section id="closing" className="bg-base">
    <Container>
      <div className="mx-auto max-w-prose text-center">
        <h2 className="text-balance text-ink font-semibold tracking-tight2 text-[24px] sm:text-[30px] lg:text-[36px] leading-[1.16]">
          However you found this page, we're glad you're looking.
        </h2>
        <p className="mt-5 text-[16.5px] sm:text-[17.5px] leading-[1.7] text-ink-2 text-pretty">
          These services are run by the people best placed to help: national health systems, major charities and government bodies. Loops sits alongside them, for the ordinary days in between.
        </p>
        <p className="mt-5 text-[16px] leading-[1.65] text-ink-2">
          If you'd like daily support with routines and consistency once things feel steadier,<br />you can <a href="/" className="font-semibold text-brand-deep hover:underline">try Loops free</a>.
        </p>
        <p className="mt-8 text-[13px] leading-[1.6] text-ink-3">
          Details on this page were checked against public sources on 22 July 2026. Numbers, hours and services can change, so always check the organisation's own website if in doubt.
        </p>
      </div>
    </Container>
  </Section>
);

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

function SupportApp() {
  return (
    <main id="main">
      <SupportNav />
      <SupportHero />
      <SupportHowToUse />
      <SupportDirectory />
      <SupportFAQ />
      <SupportClosing />
      <Footer />
    </main>
  );
}

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