/* REVO JURIS — Fees, FAQ, Testimonials, Emergency CTA (single-language) */

function FeeGuide({ onEnquire, onHotline }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <section className="band paper" id="fees">
      <div className="container">
        <SecHead head={FEE_HEAD} center />
        <div className="fee-grid">
          {FEES.map((f, idx) => (
            <article className={'fcard' + (f.feat ? ' feat' : '')} key={idx}>
              <span className={'ftag' + cjk}>{tx(f.tag)}</span>
              <h3 className={cjk}>{tx(f.title)}</h3>
              <div style={{ height: 14 }} />
              <div className="price tnum">{f.price} <small className={cjk}>{tx(f.from)}</small></div>
              <div className={'pnote' + cjk}>{tx(f.note)}</div>
              <ul>
                {f.items.map((it, i) => <li key={i} className={cjk}><Icon name="check" size={15} strokeWidth={2.4} />{tx(it)}</li>)}
              </ul>
              <button
                className={'btn btn-block ' + (f.feat ? 'btn-urgent' : 'btn-outline') + cjk}
                onClick={() => rjWA()}>
                <Icon name="message-circle" size={16} />{tx(UI.contactSolicitor)}
              </button>
            </article>
          ))}
        </div>
        <p className={'fee-disclaimer' + cjk}>{tx(FEE_DISCLAIMER)}</p>
      </div>
    </section>
  );
}

function FAQ() {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const [open, setOpen] = React.useState(0);
  return (
    <section className="band cream" id="faq">
      <div className="container narrow">
        <SecHead head={FAQ_HEAD} center />
        <div className="faq-wrap">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div className={'faq-item' + (isOpen ? ' open' : '')} key={i}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <h4 className={cjk}>{tx(f.q)}</h4>
                  <span className="faq-ic"><Icon name="chevron-down" size={16} /></span>
                </button>
                <div className="faq-a" style={{ maxHeight: isOpen ? 360 : 0 }}>
                  <div className={'faq-a-inner' + cjk} dangerouslySetInnerHTML={{ __html: tx(f.a) }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <section className="band paper">
      <div className="container">
        <SecHead head={TST_HEAD} center />
        <div className="tst-grid">
          {TESTIMONIALS.map((t, i) => (
            <article className={'tcard' + (lang === 'ZH' ? ' zh-card' : '')} key={i}>
              <div className="stars">{[0, 0, 0, 0, 0].map((_, j) => <Icon key={j} name="star" size={17} />)}</div>
              <p className={'quote' + cjk}>{tx(t.quote)}</p>
              <div className="who">
                <div className="ava">{tx(t.initial)}</div>
                <div><b className={cjk}>{tx(t.name)}</b><span className={cjk}>{tx(t.meta)}</span></div>
              </div>
              <div className={'area' + cjk}>{tx(t.area)}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Emergency({ onHotline }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <section className="emergency">
      <div className="container">
        <div className="siren"><Icon name="siren" size={28} /></div>
        <div className="etext">
          <h3 className={cjk}>{tx(EMERGENCY.h3)}</h3>
          <p className={cjk}>{tx(EMERGENCY.p)}</p>
        </div>
        <button className={'btn btn-white btn-lg' + cjk} onClick={onHotline}><Icon name="phone-call" size={18} />{tx(EMERGENCY.btn)} · +852 5715 5628</button>
      </div>
    </section>
  );
}

Object.assign(window, { FeeGuide, FAQ, Testimonials, Emergency });