// FAQ — overview-level questions, no deep technical detail

const QUESTIONS = [
  {
    q: "Does Nephros change our workflow in the OR?",
    a: "No. Nephros is designed as an incremental addition to the existing extracorporeal circuit, with familiar interfaces and circuit configurations. Adoption is measured in cases, not quarters."
  },
  {
    q: "How does it integrate with our existing heart-lung machine?",
    a: "Nephros sits alongside the bypass circuit as a separate module, a durable controller plus a sterile, single-use cartridge. It works with the equipment perfusionists already use."
  },
  {
    q: "What's the regulatory pathway?",
    a: "Class II 510(k) submission under existing hemofiltration frameworks. Multiple predicate devices exist, supporting a substantial-equivalence pathway. A third-party regulatory assessment has confirmed this route."
  },
  {
    q: "Where is Nephros today in development?",
    a: "Fully integrated, validated prototype. Bench testing and porcine procurement experiments are complete. Next steps are formal verification and validation, GLP hemocompatibility studies, an FDA Pre-Submission meeting, and the 510(k) submission package."
  },
  {
    q: "Is the technology protected?",
    a: "Yes, issued patents in the United States, the United Kingdom, and Spain, plus a European Unitary Patent providing coverage across 18 European countries. A second U.S. patent is pending."
  },
  {
    q: "Beyond cardiac surgery, where else can Nephros be used?",
    a: "It's a platform technology. The same volume-neutral physiologic control applies to extracorporeal life support and ex vivo organ perfusion, improving organ quality, extending preservation times, and expanding the donor pool."
  }
];

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">008</span>
              <span>Questions</span>
            </span>
          </div>
          <div>
            <h2 className="h2 section-head__title">
              The questions <em>we get most often.</em>
            </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;