const FAQ = () => {
  const fq = L('faq');
  const items = fq.items;

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section-pad">
      <div className="container">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.6fr', gap:60 }} className="faq-grid">
          <div>
            <div className="eyebrow" style={{ marginBottom:14 }}>{fq.eyebrow}</div>
            <h2 className="display" style={{ fontSize:'clamp(36px, 4.4vw, 56px)', margin:0 }}>
              {fq.h2a}<br/>
              <span className="serif" style={{ color:'var(--green)' }}>{fq.word}</span>
            </h2>
            <p style={{ fontSize:15, color:'var(--ink-2)', marginTop:16, lineHeight:1.55 }}>
              {fq.sub}
            </p>
            <div style={{
              marginTop:30, padding:20, borderRadius:14,
              border:'1px solid var(--line)', background:'rgba(255,255,255,0.02)'
            }}>
              <div style={{ fontSize:13, color:'var(--ink-3)', marginBottom:8 }}>{fq.noQuestion}</div>
              <a href="https://wa.me/5548996485048?text=Tenho%20uma%20d%C3%BAvida%20sobre%20a%20ZapFlux" target="_blank" rel="noopener" style={{ color:'var(--green)', fontSize:14, display:'flex', alignItems:'center', gap:8 }}>
                {fq.talkHuman} <Icon name="arrow" size={13}/>
              </a>
            </div>
          </div>

          <div>
            {items.map((it, i) => (
              <div key={i} style={{
                borderBottom:'1px solid var(--line)',
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width:'100%', textAlign:'left', padding:'24px 0', display:'flex',
                  alignItems:'center', justifyContent:'space-between', gap:14
                }}>
                  <span style={{ fontSize:17, fontWeight:500, color:'var(--ink)' }}>{it.q}</span>
                  <span style={{
                    width:30, height:30, borderRadius:'50%', flexShrink:0,
                    border:'1px solid var(--line)', display:'grid', placeItems:'center',
                    color: open === i ? 'var(--green)' : 'var(--ink-3)',
                    transition:'transform .3s ease',
                    transform: open === i ? 'rotate(180deg)' : 'none'
                  }}>
                    <Icon name={open === i ? 'minus' : 'plus'} size={14}/>
                  </span>
                </button>
                <div style={{
                  overflow:'hidden', transition:'max-height .4s ease',
                  maxHeight: open === i ? 200 : 0,
                }}>
                  <p style={{
                    margin:0, paddingBottom:24, fontSize:15, color:'var(--ink-2)', lineHeight:1.6, maxWidth:600
                  }}>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width:900px) { .faq-grid { grid-template-columns: 1fr !important; gap: 30px !important; } }
      `}</style>
    </section>
  );
};

window.FAQ = FAQ;