function FAQ() {
  return (
    <section id="faq">
      <div className="container">
        <div className="section-hdr">
          <div className="col">
            <div className="eyebrow"><span className="dot"></span>Pytania, które słyszymy najczęściej</div>
            <h2 className="h2" style={{marginTop: 16}}>
              Najpierw <em>odpowiedzi</em>.<br/>
              Reszta przy <em>kawie</em>.
            </h2>
          </div>
          <div className="col">
            <p className="lede">
              Jeśli nie znajdziesz tu odpowiedzi — zadzwoń lub napisz. Najszybciej zwykle przez telefon.
            </p>
            <div style={{display: "flex", gap: 12, marginTop: 20, flexWrap: "wrap"}}>
              <a href="tel:+48790419336" className="btn btn-ghost">
                <window.Icon name="phone" size={14}/> +48 790 419 336
              </a>
              <a href="mailto:serwis@kamperland.com.pl" className="btn btn-ghost">
                <window.Icon name="mail" size={14}/> Napisz e-mail
              </a>
            </div>
          </div>
        </div>

        <div className="faq-list">
          {window.FAQ_ITEMS.map((f, i) => (
            <details key={i} className="faq-item" {...(i === 0 ? {open: true} : {})}>
              <summary>
                {f.q}
                <span className="icon">+</span>
              </summary>
              <div className="answer">{f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;