/* ====================================================================
   Appril · Diagnóstico — why-appril.jsx
   Intra-landing de venta que aparece DEBAJO del resultado y del primer
   CTA. Copy en locales/es.js (result.why.*). Todos los CTA llevan a la
   misma intención comercial (iniciar prueba / activar mes gratis).
   No toca cálculos, scoring ni backend.
   ==================================================================== */

function WhyAppril({ currencyCode, signupUrl, track }) {
  const blocks = AP.t("result.why.blocks") || [];
  const advBullets = AP.t("result.why.advBullets") || [];
  const priceStr = currencyCode && currencyCode !== "USD"
    ? "USD 16/mes (~" + AP.fmtMoney(16, currencyCode) + "/mes)"
    : "USD 16/mes";

  const go = (key, label) => () => track(key, label, signupUrl);
  const Arrow = () => (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
  );

  return (
    <section className="why">
      {/* Encabezado de la intra-landing */}
      <div className="why__head">
        <span className="why__eye">{AP.t("result.why.sectionEye")}</span>
        <h2 className="why__h">{AP.t("result.why.sectionH")}</h2>
        <p className="why__intro">{AP.t("result.why.intro")}</p>
        <a className="btn btn--primary btn--lg" href={signupUrl} target="_blank" rel="noreferrer" onClick={go("why_intro", AP.t("result.why.introCta"))}>
          {AP.t("result.why.introCta")} <Arrow />
        </a>
        <p className="why__introMicro">{AP.t("result.why.introMicro")}</p>
      </div>

      {/* Bloques de valor alineados a dolores del diagnóstico */}
      <div className="why__cards">
        {blocks.map((b, i) => (
          <div className="why-card" key={i}>
            <span className="why-card__eye">{b.eye}</span>
            <h3 className="why-card__title">{b.title}</h3>
            <p className="why-card__body">{b.body}</p>
            {b.bullets && (
              <ul className="why-card__list">
                {b.bullets.map((x, j) => <li key={j}>{x}</li>)}
              </ul>
            )}
            {b.note && <p className="why-card__note">{b.note}</p>}
            <a className="why-card__cta" href={signupUrl} target="_blank" rel="noreferrer" onClick={go("why_" + i, b.cta)}>{b.cta} <Arrow /></a>
          </div>
        ))}
      </div>

      {/* Funciones avanzadas · secundario */}
      <div className="why__adv">
        <span className="why-card__eye">{AP.t("result.why.advEye")}</span>
        <h3 className="why__advTitle">{AP.t("result.why.advTitle")}</h3>
        <p className="why-card__body">{AP.t("result.why.advBody")}</p>
        <ul className="why-card__list why-card__list--cols">
          {advBullets.map((x, j) => <li key={j}>{x}</li>)}
        </ul>
        <a className="why-card__cta" href={signupUrl} target="_blank" rel="noreferrer" onClick={go("why_adv", AP.t("result.why.advCta"))}>{AP.t("result.why.advCta")} <Arrow /></a>
      </div>

      {/* Oferta · 1 mes gratis (precio después del valor) */}
      <div className="why__offer">
        <span className="why__offerEye">{AP.t("result.why.offerEye")}</span>
        <h3 className="why__offerTitle">{AP.t("result.why.offerTitle")}</h3>
        <p className="why__offerBody">{AP.t("result.why.offerBody", { price: priceStr })}</p>
        <a className="btn btn--primary btn--lg btn--block" href={signupUrl} target="_blank" rel="noreferrer" onClick={go("offer", AP.t("result.why.offerCta"))}>
          {AP.t("result.why.offerCta")} <Arrow />
        </a>
        <p className="why__offerMicro">{AP.t("result.why.offerMicro")}</p>
      </div>

      {/* Cierre fuerte */}
      <div className="why__final">
        <h3 className="why__finalTitle">{AP.t("result.why.finalTitle")}</h3>
        <p className="why__finalBody">{AP.t("result.why.finalBody")}</p>
        <a className="btn btn--lg btn--block why__finalBtn" href={signupUrl} target="_blank" rel="noreferrer" onClick={go("final", AP.t("result.why.finalCta"))}>
          {AP.t("result.why.finalCta")} <Arrow />
        </a>
        <p className="why__finalMicro">{AP.t("result.why.finalMicro")}</p>
      </div>
    </section>
  );
}

window.WhyAppril = WhyAppril;