/* REVO JURIS — Practice areas, Rights band, Civil letter selector (single-language) */

function SecHead({ head, light, center }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <div className={'sec-head' + (center ? ' center' : '')}>
      <Eyebrow light={light}><span className={cjk}>{tx(head.eyebrow)}</span></Eyebrow>
      <h2 className={cjk}>{tx(head.h2)}</h2>
      {head.sub && <p className={'zh-sub' + cjk}>{tx(head.sub)}</p>}
    </div>
  );
}

function PracticeAreas({ onSelect, onFees }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <section className="band paper" id="practice">
      <div className="container">
        <SecHead head={PRACTICE_HEAD} center />
        <div className="practice-grid">
          {PRACTICE_AREAS.map(pa => (
            <article className="pcard" key={pa.id}>
              <ImageSlot seed={'pa-' + pa.id} src={pa.image} ratio="16/10" w={760} h={475} badge={true} />
              <div className="tile"><Icon name={pa.icon} size={28} strokeWidth={1.75} /></div>
              <h3 className={cjk}>{tx(pa.title)}</h3>
              <p className={'desc' + cjk} style={{ marginTop: 12 }}>{tx(pa.desc)}</p>
              <ul>
                {pa.items.map((it, i) => (
                  <li key={i}><Icon name="check" size={16} strokeWidth={2.4} /><span className={cjk}>{tx(it)}</span></li>
                ))}
              </ul>
              <div className="pfoot">
                <button className={'btn btn-sm ' + (pa.urgent ? 'btn-urgent' : 'btn-primary') + cjk} onClick={() => pa.urgent ? onSelect(pa.id) : rjWA(pa.id)}>
                  {pa.urgent ? <Icon name="siren" size={15} /> : <Icon name="message-circle" size={15} />}{tx(pa.cta)}
                </button>
                <a className={'btn btn-ghost btn-sm' + cjk} href={'practice.html#' + pa.id}>{tx({ en: 'Learn more', zh: '了解更多' })} <Icon name="arrow-right" size={15} /></a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function RightsBand({ onHotline }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  return (
    <section className="band navy" id="rights">
      <div className="container">
        <SecHead head={RIGHTS_HEAD} light />
        <div className="rights-grid">
          {RIGHTS.map(([num, title, desc]) => (
            <div className="right-item" key={num}>
              <div className="num">{num}</div>
              <h4 className={cjk}>{tx(title)}</h4>
              <p className={cjk}>{tx(desc)}</p>
            </div>
          ))}
        </div>
        <div className="rights-note">
          <Icon name="siren" size={24} />
          <p className={cjk}>{tx(RIGHTS_NOTE)}</p>
          <button className={'btn btn-urgent' + cjk} style={{ flex: 'none', alignSelf: 'center' }} onClick={onHotline}>
            <Icon name="phone-call" size={18} />{tx(UI.hotShort)}
          </button>
        </div>
      </div>
    </section>
  );
}

function CivilLetters({ onEnquire }) {
  const lang = useLang();
  const tx = useTx();
  const cjk = lang === 'ZH' ? ' cjk' : '';
  const [active, setActive] = React.useState('debt');
  const t = CIVIL_TYPES.find(c => c.id === active);
  return (
    <section className="band cream" id="civil">
      <div className="container">
        <SecHead head={CIVIL_HEAD} center />
        <div className="civ">
          <div className="civ-tabs" role="tablist">
            {CIVIL_TYPES.map(c => (
              <button key={c.id} className={'civ-tab' + (active === c.id ? ' on' : '')} onClick={() => setActive(c.id)} role="tab" aria-selected={active === c.id}>
                <span className="ti"><Icon name={c.icon} size={20} /></span>
                <span><b className={cjk}>{tx(c.label)}</b></span>
              </button>
            ))}
          </div>
          <div className="civ-panel" role="tabpanel">
            <h3 className={cjk}>{tx(t.title)}</h3>
            <div style={{ height: 18 }} />
            <div className="civ-rows">
              <CivRow icon="target" k={CIVIL_LABELS.bestFor} v={t.bestFor} cjk={cjk} tx={tx} />
              <CivRow icon="banknote" k={CIVIL_LABELS.fee} v={t.fee} cjk={cjk} tx={tx} />
              <CivRow icon="clock" k={CIVIL_LABELS.turn} v={t.turn} cjk={cjk} tx={tx} />
              <CivRow icon="corner-up-right" k={CIVIL_LABELS.ignored} v={t.ignored} cjk={cjk} tx={tx} />
              <div className={'civ-quote' + cjk}>{tx(t.quote)}</div>
            </div>
            <div style={{ marginTop: 26 }}>
              <button className={'btn btn-primary' + cjk} onClick={() => rjWA('civil')}>
                <Icon name="message-circle" size={18} />{tx(UI.requestLetter)}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CivRow({ icon, k, v, cjk, tx }) {
  return (
    <div className="civ-row">
      <div className={'k' + cjk}><Icon name={icon} size={14} />{tx(k)}</div>
      <div className={'v' + cjk}>{tx(v)}</div>
    </div>
  );
}

Object.assign(window, { SecHead, PracticeAreas, RightsBand, CivilLetters, CivRow });