function FAQ({ onInquire, full = false }) {
  const allFaqs = [
    {
      q: t("faq_q1"),
      a: t("faq_a1"),
    },
    {
      q: t("faq_q2"),
      a: t("faq_a2"),
    },
    {
      q: t("faq_q3"),
      a: t("faq_a3"),
    },
    {
      q: t("faq_q4"),
      a: t("faq_a4"),
    },
    {
      q: t("faq_q5"),
      a: t("faq_a5"),
    },
    {
      q: t("faq_q6"),
      a: t("faq_a6"),
      fullOnly: true,
    },
    {
      q: t("faq_q7"),
      a: t("faq_a7"),
      fullOnly: true,
    },
    {
      q: t("faq_q8"),
      a: t("faq_a8"),
      fullOnly: true,
    },
    {
      q: t("faq_q9"),
      a: t("faq_a9"),
      fullOnly: true,
    },
    {
      q: t("faq_q10"),
      a: t("faq_a10"),
      fullOnly: true,
    },
    {
      q: t("faq_q11"),
      a: t("faq_a11"),
      fullOnly: true,
    },
  ];

  const faqs = full ? allFaqs : allFaqs.filter(f => !f.fullOnly);

  return (
    <section id="faq" style={{ background: PALETTE.paper, borderBottom: `1px solid ${PALETTE.rule}` }}>
      <div style={{ maxWidth: 1000, margin: "0 auto", padding: "96px 32px" }} className="vst-section">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 14 }}>
            {full ? t("faq_eyebrow_full") : t("faq_eyebrow")}
          </Eyebrow>
          <h2 className="vst-h2" style={{
            fontFamily: "'Source Serif 4', serif", fontSize: 40, fontWeight: 600,
            lineHeight: 1.14, letterSpacing: "-.018em", color: PALETTE.navy, margin: 0,
          }}>
            {full ? t("faq_h2_full") : t("faq_h2")}
          </h2>
          {!full && (
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.55,
              color: PALETTE.mute1, marginTop: 14, marginBottom: 0,
            }}>
              {t("faq_intro")} <a href="#faq" style={{ color: PALETTE.blue, textDecoration: "underline" }}>{t("faq_cta_full")} →</a>
            </p>
          )}
        </div>

        <div style={{ display: "grid", gap: 0, border: `1px solid ${PALETTE.rule}`, background: PALETTE.white }}>
          {faqs.map((faq, i) => (
            <details key={i} style={{
              borderBottom: i < faqs.length - 1 ? `1px solid ${PALETTE.rule}` : "none",
              padding: 0,
            }}>
              <summary style={{
                cursor: "pointer",
                padding: "20px 24px",
                fontFamily: "Inter, sans-serif", fontSize: 15.5, fontWeight: 600,
                color: PALETTE.navy, listStyle: "none",
                display: "flex", justifyContent: "space-between", alignItems: "center",
                gap: 16,
              }}>
                <span>{faq.q}</span>
                <span style={{ color: PALETTE.mute2, fontWeight: 400 }}>+</span>
              </summary>
              <div style={{
                padding: "0 24px 22px",
                fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.6,
                color: PALETTE.mute1,
              }}>{faq.a}</div>
            </details>
          ))}
        </div>

        {!full && (
          <div style={{ marginTop: 24, textAlign: "center" }}>
            <a href="#faq" style={{
              fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 600,
              color: PALETTE.blue, textDecoration: "none",
            }}>
              {t("faq_cta_full")} <span className="vst-link-arrow">→</span>
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

window.FAQ = FAQ;