function FaqItem({ item, idx, isOpen, onToggle }){
  const [ref, inView] = useInView({threshold:.3});
  return (
    <div ref={ref} className={`reveal ${inView?'in':''}`} style={{
      borderTop: idx === 0 ? '1px solid rgba(244,237,216,.15)' : 'none',
      borderBottom: '1px solid rgba(244,237,216,.15)', transitionDelay:`${idx*.04}s`,
    }}>
      <button onClick={onToggle} style={{
        width:'100%', background:'transparent', border:'none', color:'var(--cream)',
        textAlign:'left', padding:'34px 0', cursor:'pointer',
        display:'flex', alignItems:'center', gap:30,
      }}>
        <span className="italiana" style={{fontSize:11, letterSpacing:3, opacity:.5, minWidth:50, color:'var(--passion)'}}>
          {String(idx+1).padStart(2,'0')}
        </span>
        <span className="display" style={{
          fontSize:'clamp(22px, 2.4vw, 36px)', lineHeight:1.15, fontWeight:300, fontStyle:'italic', flex:1,
          fontVariationSettings:'"SOFT" 80', letterSpacing:'-.015em',
        }}>
          {item.q}
        </span>
        <span className="script" style={{
          fontSize:44, color:'var(--passion)', transform: isOpen ? 'rotate(45deg)' : 'none',
          transition:'transform .4s cubic-bezier(.2,.7,.2,1)', lineHeight:1,
        }}>+</span>
      </button>
      <div style={{
        maxHeight: isOpen ? 500 : 0, opacity: isOpen ? 1 : 0,
        overflow:'hidden', transition:'max-height .5s cubic-bezier(.2,.6,.2,1), opacity .4s',
      }}>
        <p className="cormorant faq-answer" style={{
          fontSize:'clamp(15px, 1.2vw, 19px)', lineHeight:1.65, opacity:.85, fontStyle:'italic',
          padding:'0 0 34px 80px', maxWidth:750, fontWeight:400,
        }}>
          {item.a}
        </p>
      </div>
    </div>
  );
}

function Faq(){
  const { t, lang } = useLang();
  const [ref, inView] = useInView({threshold:.1});
  const [open, setOpen] = React.useState(0);
  const y = useScrollY();
  const items = window.TRANSLATIONS[lang].faq.items;
  return (
    <section ref={ref} data-screen-label="10 FAQ" style={{
      position:'relative', background:'var(--ink)', color:'var(--cream)',
      padding:'20vh 6vw 16vh', overflow:'hidden',
    }}>
      <div className="script" style={{
        position:'absolute', top:'8vh', right:'-2vw',
        fontSize:'clamp(180px, 30vw, 480px)', color:'rgba(200,16,46,.08)',
        pointerEvents:'none', transform:`translateY(${y*-0.1}px)`,
      }}>
        {t('faq.background_word')}
      </div>
      <div style={{position:'relative', zIndex:2, maxWidth:1200, margin:'0 auto'}}>
        <div className={`reveal ${inView?'in':''}`} style={{display:'flex', alignItems:'baseline', gap:20, marginBottom:30}}>
          <div style={{width:60, height:1, background:'var(--cream)', opacity:.4}}/>
          <span className="italiana" style={{fontSize:11, letterSpacing:5, opacity:.65}}>
            {t('faq.section_label')}
          </span>
        </div>
        <DecodeText
          tag="h2" className="display"
          text={t('faq.title')}
          endPct={60}
          style={{
            fontSize:'clamp(56px, 9vw, 160px)', lineHeight:.88, fontWeight:200, letterSpacing:'-.04em',
            fontStyle:'italic', fontVariationSettings:'"SOFT" 100',
            marginBottom:80, maxWidth:'12ch',
          }}
        />

        <div>
          {items.map((item, i) => (
            <FaqItem key={i} item={item} idx={i} isOpen={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>

        <div className={`reveal ${inView?'in':''} cormorant`} style={{
          marginTop:60, textAlign:'center', opacity:.65, fontStyle:'italic', fontSize:17,
        }}>
          {t('faq.contact_pre')} <a href={`mailto:${CONFIG.couple.email}`} style={{color:'var(--passion)', textDecoration:'none', borderBottom:'1px solid currentColor'}}>{CONFIG.couple.email}</a>
        </div>
      </div>
    </section>
  );
}

window.Faq = Faq;