/* global React, window */
const { useState } = React;
const { Icon, SectionHead } = window;

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-theme="light" className="section section-light">
      <div className="container" style={{ maxWidth: 1080 }}>
        <SectionHead
          tag="05 · Preguntas"
          title={<>Lo que todos <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400 }}>nos preguntan</span>.</>}
          kicker={<>Si tenés otra duda, escribinos por WhatsApp.<br/>Respondemos lo más rápido que podamos.</>}
        />
        <div className="faq-list reveal">
          {window.DATA.FAQS.map((f, i) => (
            <div key={f.q} className="faq-item" data-open={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span style={{ textWrap: "balance" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)", marginRight: 14, letterSpacing: ".1em" }}>{`0${i+1}`}</span>
                  {f.q}
                </span>
                <span className="faq-plus"><Icon name="plus" size={14} /></span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;