/* WhyUs.jsx — trust strip: copy + bulleted points on the left, stat tiles on the right.
 * No cost mention per brief.
 */
function WhyUs({ variant, heading, lede, bullets, stats }) {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  return (
    <section className="int-section" id="por-que-hondulegal">
      <div className="int-container">
        <div className={"int-why " + variant}>
          <div className="copy">
            <h2>{heading}</h2>
            <p>{lede}</p>
            <ul>
              {bullets.map(b => (
                <li key={b}><i data-lucide="check-circle-2"></i><span>{b}</span></li>
              ))}
            </ul>
          </div>
          <div className="stats">
            {stats.map(s => (
              <div className="stat" key={s.lbl}>
                <div className="num">{s.num}</div>
                <div className="lbl">{s.lbl}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhyUs });