// FAQ — overview-level questions, sourced from proposal

const QUESTIONS = [
  {
    q: "How does Nephros integrate with existing extracorporeal circuits?",
    a: "Nephros is designed as an incremental addition to existing extracorporeal systems, with familiar interfaces and circuit configurations. The architecture pairs a durable controller with a sterile, single-use cartridge and is intended to operate alongside standard heart\u2013lung machines without workflow rewrites for surgeons or perfusionists."
  },
  {
    q: "What is the regulatory pathway?",
    a: "An independent third-party regulatory assessment has identified a Class II 510(k) pathway under existing hemofiltration frameworks, with multiple predicate devices supporting a substantial-equivalence route. Planned activities include an FDA Pre-Submission (Q-Sub) meeting, formal verification and validation under design control, and 510(k) submission package completion."
  },
  {
    q: "What is the current development stage?",
    a: "Nephros is a fully integrated, validated prototype. Bench testing in simulated cardiopulmonary bypass and porcine heart and lung organ-procurement experiments are complete. Next phase activities include GLP hemocompatibility studies, design freeze, formal verification and validation, and preparation of the 510(k) submission."
  },
  {
    q: "What intellectual property protects the technology?",
    a: "Nephros is protected by an issued United States patent, a European Unitary Patent, and issued patents in the United Kingdom and Spain. A second U.S. patent is pending."
  },
  {
    q: "Beyond cardiac surgery, what other applications are supported?",
    a: "Nephros is a platform technology applicable across cardiopulmonary bypass, extracorporeal life support, and ex vivo organ perfusion. In organ procurement, where electrolyte and metabolic derangements develop rapidly once native regulation is lost, Nephros offers a modular solution to improve organ quality, extend preservation times, and expand the donor pool."
  },
  {
    q: "How is performance defined and validated?",
    a: "Reported performance figures reflect bench and pre-clinical study results. In simulated cardiopulmonary bypass, Nephros reduced potassium by more than 55% in approximately 6 minutes with no volume added to the patient, while calcium, magnesium, sodium, chloride, pH, and bicarbonate remained within physiologic ranges. These results are not predictive of human clinical performance and the device is investigational."
  }
];

function FAQ() {
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="section-head">
          <div className="section-head__label">
            <span className="eyebrow">
              <span className="dot" aria-hidden="true"></span>
              <span className="num">09</span>
              <span>Questions</span>
            </span>
          </div>
          <div>
            <h2 className="h2 section-head__title">
              Frequently asked.
            </h2>
          </div>
        </div>

        <ul className="faq">
          {QUESTIONS.map((item, i) => {
            const isOpen = open === i;
            return (
              <li className={"faq__item " + (isOpen ? "is-open" : "")} key={i}>
                <button
                  className="faq__q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}>
                  <span className="faq__qnum">{String(i + 1).padStart(2, "0")}</span>
                  <span className="faq__qtext">{item.q}</span>
                  <span className="faq__chevron" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </span>
                </button>
                <div className="faq__a">
                  <p>{item.a}</p>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}

window.FAQ = FAQ;