// FAQs — categorised accordion of frequently asked questions.
function FAQs() {
  const categories = [
    {
      id: 'about',
      label: 'About Eivi',
      items: [
        {
          q: 'What is Eivi?',
          a: (
            <>
              <p>Eivi is a weight-loss programme built around your metabolic health. You wear a small glucose sensor on the back of your arm for the duration of the programme, and Eivi shows you how the food you eat affects your energy, your cravings, and your weight. The goal isn't to follow a diet. It's to learn what your body actually does with food, so the changes you make stick.</p>
              <p>Eivi is the next chapter of Limbo, the programme that ran from 2021 to 2025 and helped thousands of people change their understanding of weight, energy and food.</p>
            </>
          ),
        },
        {
          q: 'How is Eivi different from a diet or a weight-loss drug?',
          a: (
            <>
              <p>Eivi is neither. Diets tell you what to eat. Drugs change your appetite for as long as you take them, and disrupt your homeostatic state. Eivi does something different: it shows you, in real time, the impact of the food that you eat on your body — and coaches you to understand it.</p>
              <p>That means the changes you make on Eivi are yours. They don't disappear when you finish the programme or stop a medication. You leave Eivi understanding your own metabolism, which is what other weight-loss approaches can’t address.</p>
            </>
          ),
        },
        {
          q: "Who is Eivi for — and who isn't it for?",
          a: (
            <>
              <p>Eivi is for adults in Ireland who want to lose weight and are willing to invest the time and effort to learn what's behind their energy and food choices.</p>
              <p>Eivi isn't suitable if you're under 18, pregnant or breastfeeding, type 1 diabetic, or recovering from an eating disorder. Eivi is not medical care – it can often help, but it should fit alongside your existing care, not replace it.</p>
            </>
          ),
        },
        {
          q: 'How much weight can I expect to lose?',
          a: (
            <>
              <p>It varies greatly with individuals, but members following the programme can expect to lose between 1-2.5 kilos per week. What we won't do is promise a number. People come to Eivi with different starting points, different metabolisms, and different lives. What we can promise is that by the end of the programme, you'll understand why your weight has been where it is — and what to do about it.</p>
              <p>But you need to commit – the Eivi process is fundamentally about conscientiously engaging with your health. The more you engage and commit, the more you will learn, and take control of your weight.</p>
            </>
          ),
        },
      ],
    },
    {
      id: 'sensor',
      label: 'The sensor',
      items: [
        {
          q: 'What is a glucose sensor, and why do I need to wear one?',
          a: (
            <>
              <p>The sensor is a small disc — about the size of a two-euro coin — that sits on the back of your upper arm. It measures your glucose levels continuously and sends that data to the Eivi app on your phone.</p>
              <p>Glucose is your body's main source of energy. How it rises and falls after you eat tells you a lot about which foods give you steady energy, which ones cause cravings a few hours later, and which ones are making weight loss harder. Without a sensor, all of that is invisible. With one, it's the most useful feedback your body can give you.</p>
            </>
          ),
        },
        {
          q: 'Does it hurt to put on? Will I feel it during the day?',
          a: (
            <p>Putting it on takes about ten seconds and feels like a small click. Most people are surprised by how little they notice it. The filament that sits under the skin is thinner than a human hair, so once it's on, you'll mostly forget it's there — through showers, sleep, exercise, all of it.</p>
          ),
        },
        {
          q: 'How long does each sensor last, and how many will I get?',
          a: (
            <p>Each sensor lasts up to 15 days. You'll receive your sensors as part of your Eivi subscription, shipped to you ahead of when you'll need them so you're never waiting.</p>
          ),
        },
        {
          q: 'Can I shower, swim, sleep, and exercise with it on?',
          a: (
            <p>Yes to all of them. The sensor is waterproof and designed to stay on through normal life, including showers, swimming, the gym, and sleep. The one small thing to watch: try not to sleep directly on the arm with the sensor, as pressure can occasionally affect a reading.</p>
          ),
        },
      ],
    },
    {
      id: 'app',
      label: 'The app and coaching',
      items: [
        {
          q: 'What does the Eivi app actually do?',
          a: (
            <>
              <p>Three things, mostly. It shows you your glucose in real time, so you can see how your body responds to a meal as it's happening. It lets you log what you eat — by photo or text — so you build a picture of which foods work for you. And it provides individual coaching, to review your data – your specific meal, sleep, and exercise choices – to help you decide what to try next.</p>
              <p>The app isn't trying to be another tracker that demands your attention. The point is what you learn about your energy system, not how much time you spend logging.</p>
            </>
          ),
        },
        {
          q: 'Who oversees the coaching?',
          a: (
            <p>Eivi is overseen directly by Tony Martin. The coaching implements his methodology, based on his research on glucose as the governing metric of human energy. As you go through the programme, you'll come to understand this methodology as it relates to your own body – and unlock a new understanding of your food, energy and weight.</p>
          ),
        },
      ],
    },
    {
      id: 'medical',
      label: 'Medical and practical',
      items: [
        {
          q: 'Do I need a prescription to join Eivi?',
          a: (
            <p>No. The sensor used in the Eivi programme is available in Ireland without a prescription as part of your subscription. We handle all of the logistics — you just sign up.</p>
          ),
        },
      ],
    },
    {
      id: 'pricing',
      label: 'Pricing and logistics',
      items: [
        {
          q: 'How much does Eivi cost?',
          a: (
            <p>Eivi is €599 for a 3-month programme, which includes your sensors, full access to the app, and Eivi coaching in the app and in live sessions, Q&amp;As and more.</p>
          ),
        },
        {
          q: 'Do you ship across Ireland? What about Northern Ireland or the UK?',
          a: (
            <p>For our launch, Eivi is available across the Republic of Ireland. We're not yet shipping to Northern Ireland, the UK, or the rest of Europe, but we plan to expand — join our waitlist and we'll let you know as soon as we open in your area.</p>
          ),
        },
        {
          q: 'Can I pause or cancel my subscription?',
          a: (
            <p>Yes. You can cancel any time from your account, and we'll honour the remainder of any sensors already shipped. If life gets in the way and you need to pause rather than cancel, just reach out — we'd much rather pause your account than lose you entirely.</p>
          ),
        },
        {
          q: "Can I use Eivi if I'm on a GLP-1 (Ozempic, Wegovy, Mounjaro)?",
          a: (
            <p>Yes, you can – and some do – but the key is: you don’t need GLP-1 medications. While they can cause near-term weight loss, they don't teach you anything about your own metabolism, which is why people regain the weight after coming off them.</p>
          ),
        },
      ],
    },
  ];

  const [activeCat, setActiveCat] = React.useState(categories[0].id);
  const [openItem, setOpenItem] = React.useState(null); // `${catId}:${idx}`

  const toggle = (key) => setOpenItem(prev => prev === key ? null : key);

  const onPillClick = (id) => {
    setActiveCat(id);
    setOpenItem(null);
    // Scroll the category section into view smoothly
    requestAnimationFrame(() => {
      const el = document.getElementById(`faq-cat-${id}`);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 100;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  };

  return (
    <section className="section-pad" style={{ background: '#fff' }}>
      <style>{`
        .eivi-faq-wrap { max-width: 920px; margin: 0 auto; }
        .eivi-faq-pills-wrap {
          margin-top: clamp(28px, 4vw, 44px);
          margin-bottom: clamp(48px, 7vw, 80px);
        }

        .eivi-faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(0,0,0,0.12); }
        .eivi-faq-item { border-bottom: 1px solid rgba(0,0,0,0.12); }
        .eivi-faq-q-btn {
          width: 100%; appearance: none; background: transparent; border: 0;
          padding: 24px 0; cursor: pointer; text-align: left;
          display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
          font-family: inherit; color: #000;
        }
        .eivi-faq-q-text {
          font-size: 20px; line-height: 1.4; font-weight: 500; flex: 1; min-width: 0;
        }
        .eivi-faq-icon {
          flex-shrink: 0; width: 28px; height: 28px; position: relative;
          margin-top: 2px;
        }
        .eivi-faq-icon::before, .eivi-faq-icon::after {
          content: ''; position: absolute; background: #000;
          transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), background 120ms ease;
        }
        .eivi-faq-icon::before {
          left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
        }
        .eivi-faq-icon::after {
          top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
        }
        .eivi-faq-q-btn[aria-expanded="true"] .eivi-faq-icon::before { background: #0B6F8D; }
        .eivi-faq-q-btn[aria-expanded="true"] .eivi-faq-icon::after {
          transform: translateX(-50%) rotate(90deg); background: #0B6F8D;
        }
        .eivi-faq-q-btn:hover .eivi-faq-q-text { color: #0B6F8D; }

        .eivi-faq-a-wrap {
          overflow: hidden;
          max-height: 0;
          transition: max-height 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .eivi-faq-a-wrap[data-open="true"] { max-height: 1200px; }
        .eivi-faq-a-inner {
          padding: 0 0 28px 0; max-width: 760px;
        }
        .eivi-faq-a-inner p {
          font-size: 18px; line-height: 1.6; font-weight: 500;
          color: #2A2A2A; margin: 0 0 14px;
        }
        .eivi-faq-a-inner p:last-child { margin-bottom: 0; }

        .eivi-faq-cat-section + .eivi-faq-cat-section {
          margin-top: clamp(56px, 7vw, 88px);
        }

        @media (max-width: 640px) {
          .eivi-faq-q-text { font-size: 18px; }
          .eivi-faq-a-inner p { font-size: 17px; }
          .eivi-faq-cat-title { font-size: 26px; }
          .eivi-faq-icon { width: 21px; height: 21px; }
        }
      `}</style>

      <div className="eivi-faq-wrap">
        <h1 className="t-h1" style={{ margin: 0 }}>FAQs</h1>

        <div className="eivi-faq-pills-wrap">
          <div className="functional-pills" role="tablist" aria-label="FAQ categories">
            {categories.map(cat => (
              <button
                key={cat.id}
                type="button"
                role="tab"
                aria-selected={activeCat === cat.id}
                data-active={activeCat === cat.id}
                className="functional-pill"
                onClick={() => onPillClick(cat.id)}>
                {cat.label}
              </button>
            ))}
          </div>
        </div>

        {categories.map(cat => {
          if (cat.id !== activeCat) return null;
          return (
            <div key={cat.id} id={`faq-cat-${cat.id}`} className="eivi-faq-cat-section">
              <div className="eivi-faq-list">
                {cat.items.map((item, idx) => {
                  const key = `${cat.id}:${idx}`;
                  const isOpen = openItem === key;
                  return (
                    <div key={key} className="eivi-faq-item">
                      <button
                        type="button"
                        className="eivi-faq-q-btn"
                        aria-expanded={isOpen}
                        aria-controls={`faq-a-${cat.id}-${idx}`}
                        onClick={() => toggle(key)}>
                        <span className="eivi-faq-q-text">{item.q}</span>
                        <span className="eivi-faq-icon" aria-hidden="true" />
                      </button>
                      <div
                        id={`faq-a-${cat.id}-${idx}`}
                        className="eivi-faq-a-wrap"
                        data-open={isOpen}
                        role="region">
                        <div className="eivi-faq-a-inner">{item.a}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}
window.FAQs = FAQs;
