/* FaqPage — dedicated FAQ page with accordion + contact sidebar */

function FaqPage({ lang, setLang }) {
  const i = window.I18N[lang] || window.I18N["pt"];
  const t = i.faq;
  const contact = i.contact;

  const [open, setOpen] = React.useState({});
  const toggle = (catIdx, itemIdx) => {
    const key = `${catIdx}-${itemIdx}`;
    setOpen(prev => ({ ...prev, [key]: !prev[key] }));
  };

  const backLabel = { pt: "Voltar ao site", uk: "На головну", ru: "На главную" }[lang] || "Voltar";
  const contactLabel = { pt: "Fale connosco", uk: "Зв'яжіться з нами", ru: "Свяжитесь с нами" }[lang];
  const contactSub = { pt: "Não encontrou resposta? Fale diretamente connosco.", uk: "Не знайшли відповідь? Зв'яжіться з нами напряму.", ru: "Не нашли ответ? Свяжитесь с нами напрямую." }[lang];
  const waLabel = { pt: "WhatsApp", uk: "WhatsApp", ru: "WhatsApp" }[lang];
  const tgLabel = { pt: "Telegram", uk: "Telegram", ru: "Telegram" }[lang];
  const emailLabel = { pt: "E-mail", uk: "Електронна пошта", ru: "Электронная почта" }[lang];
  const stepLabel = { pt: "Passo", uk: "Крок", ru: "Шаг" }[lang];
  const ofLabel = { pt: "de", uk: "з", ru: "из" }[lang];

  return (
    <div className="irs-page">
      {/* header */}
      <header className="irs-page-header">
        <a href="/" className="nav-logo" style={{ textDecoration: "none" }}>
          OR
          <small>Contabilidade · Consultoria Fiscal</small>
        </a>
        <div className="irs-page-header-right">
          {[{code:"pt",label:"PT"},{code:"uk",label:"UA"},{code:"ru",label:"RU"}].map(({code,label}) => (
            <button key={code} className={`irs-lang-btn${lang === code ? " active" : ""}`}
              onClick={() => { setLang(code); try { localStorage.setItem("or-lang", code); } catch(e){} }}>
              {label}
            </button>
          ))}
          <a href="/" className="irs-back-link">{backLabel}</a>
        </div>
      </header>

      {/* hero */}
      <section style={{ padding: "40px 24px 32px", textAlign: "center" }}>
        <h1 style={{ fontSize: "clamp(40px,6vw,72px)", fontWeight: 800, letterSpacing: "-2px", color: "#1A1A1A", margin: 0 }}>
          FAQ
        </h1>
      </section>

      {/* main content: accordion + contact sidebar */}
      <section style={{ padding: "0 24px 80px" }}>
        <div className="faq-page-layout">

          {/* accordion */}
          <div className="faq-page-main">
            {t.categories.map((cat, catIdx) => (
              <div className="faq-category" key={catIdx}>
                <div className="faq-category-title">
                  <span>{cat.icon}</span>
                  <span>{cat.title}</span>
                </div>
                {cat.items.map((item, itemIdx) => {
                  const key = `${catIdx}-${itemIdx}`;
                  const isOpen = !!open[key];
                  return (
                    <div className="faq-item" key={itemIdx}>
                      <button className="faq-q" onClick={() => toggle(catIdx, itemIdx)} aria-expanded={isOpen}>
                        <span>{item.q}</span>
                        <svg className={`faq-chevron${isOpen ? " open" : ""}`} width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                          <polyline points="6 9 12 15 18 9"/>
                        </svg>
                      </button>
                      {isOpen && <div className="faq-a">{item.a}</div>}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>

          {/* contact sidebar */}
          <aside className="faq-page-sidebar">
            <div className="faq-contact-card">
              <div className="faq-contact-label">{contactLabel}</div>
              <p className="faq-contact-sub">{contactSub}</p>

              <a href={contact.whatsappUrl} target="_blank" rel="noopener noreferrer" className="faq-contact-btn faq-contact-btn--wa">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                  <path d="M12 0C5.373 0 0 5.373 0 12c0 2.13.558 4.13 1.532 5.868L.057 23.077a1 1 0 0 0 1.225 1.225l5.233-1.476A11.942 11.942 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.885 0-3.65-.52-5.158-1.424l-.369-.22-3.806 1.073 1.072-3.785-.241-.383A9.944 9.944 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
                </svg>
                {waLabel} · {contact.whatsapp}
              </a>

              <a href={contact.telegramUrl} target="_blank" rel="noopener noreferrer" className="faq-contact-btn faq-contact-btn--tg">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12L7.17 13.671l-2.938-.916c-.638-.203-.65-.638.136-.944l11.47-4.423c.532-.194.995.131.822.94l.234-.107z"/>
                </svg>
                {tgLabel} · {contact.telegram}
              </a>

              <a href={`mailto:${contact.email}`} className="faq-contact-btn faq-contact-btn--email">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <rect x="2" y="4" width="20" height="16" rx="2"/>
                  <polyline points="2,4 12,13 22,4"/>
                </svg>
                {emailLabel} · {contact.email}
              </a>

              <div className="faq-contact-irs">
                <a href="/irs" className="service-card-irs-btn" style={{ display:"inline-flex", textDecoration:"none" }}>
                  {lang === "uk" ? "Подати IRS 2025 →" : lang === "ru" ? "Подать IRS 2025 →" : "Trate do seu IRS 2025 →"}
                </a>
              </div>
            </div>
          </aside>

        </div>
      </section>

      <footer className="irs-page-footer">
        © 2026 OR Contabilidade · <a href="/">orcontabilidade.com</a>
      </footer>
    </div>
  );
}

window.FaqPage = FaqPage;