// faq.jsx — bubble accordions
const { useState: __fs } = React;

function FAQ({ t }) {
  const [open, setOpen] = __fs(0);
  return (
    <section id="faq" style={{
      paddingTop: 120, paddingBottom: 120,
      borderTop: '1.5px solid var(--ink)',
      background: 'var(--paper)'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
            <div className="kicker reveal" style={{ marginBottom: 28 }}>
              <span className="dot"></span>{t.faq_eye}
            </div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(48px, 6vw, 88px)' }}>
              <div>{t.faq_title_1}</div>
              <div className="irid-text" style={{ fontStyle: 'italic' }}>{t.faq_title_2}</div>
            </h2>
          </div>

          <div>
            {t.faqs.map((f, i) => (
              <div key={i} className="reveal" style={{
                borderTop: '1.5px solid var(--ink)',
                background: open === i ? 'color-mix(in oklch, var(--magenta) 8%, var(--paper))' : 'transparent',
                transition: 'background 0.4s'
              }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} className="clickable" style={{
                  width: '100%', padding: '28px 24px', display: 'flex',
                  justifyContent: 'space-between', alignItems: 'center', gap: 24,
                  background: 'transparent', border: 'none',
                  color: 'var(--ink)', textAlign: 'left', fontFamily: 'inherit',
                  cursor: 'none'
                }}>
                  <span className="display" style={{
                    fontSize: 'clamp(20px, 2vw, 26px)', fontWeight: 500
                  }}>{f.q}</span>
                  <span style={{
                    width: 44, height: 44, borderRadius: '50%',
                    border: '1.5px solid var(--ink)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'transform 0.5s var(--ease-snap), background 0.3s',
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    background: open === i ? 'var(--magenta)' : 'var(--paper)',
                    color: open === i ? 'white' : 'var(--ink)',
                    fontSize: 20, fontWeight: 600, flexShrink: 0,
                    boxShadow: '3px 3px 0 var(--ink)',
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 600 : 0,
                  opacity: open === i ? 1 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.6s var(--ease-out), opacity 0.4s'
                }}>
                  <p style={{
                    fontSize: 17, color: 'var(--ink-dim)', lineHeight: 1.55,
                    padding: '0 24px 32px', maxWidth: 640
                  }}>{f.a}</p>
                </div>
              </div>
            ))}
            <div style={{ borderTop: '1.5px solid var(--ink)' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });