/* Wisdom — Impacto: grid de casos + detalle de caso. */
(function () {
  const W = window.WISDOM;
  const Arrow = window.WArrow;

  function CasesGrid() {
    return (
      <section className="section" id="impacto">
        <div className="wrap">
          <div className="cases-grid">
            {W.CASES.map((c) => (
              <a className="case-card" href={`caso-${c.slug}.html`} key={c.slug}>
                <div className="case-card-top">
                  {!c.real && <span className="case-badge">Caso ilustrativo</span>}
                  <span className="case-tech">{c.tech}</span>
                </div>
                <div className="case-metric">{c.metric}</div>
                <div className="case-unit">{c.unit}</div>
                <div className="case-foot">
                  <span className="case-industry">{c.industry}</span>
                  <span className="arrow-link case-link">Ver el caso <Arrow /></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function CaseDetail({ slug }) {
    const c = W.CASES.find((x) => x.slug === slug) || W.CASES[0];
    const steps = [
      ["Discovery", c.discovery],
      ["Diseño", c.design],
      ["Operación", c.operation],
      ["Impacto", c.impact],
    ];
    return (
      <React.Fragment>
        <section className="page-hero case-hero">
          <div className="page-hero-glow" />
          <div className="wrap">
            <a className="back-link" href="impacto.html"><span className="back-arrow">←</span> Todos los casos</a>
            <div className="case-hero-grid">
              <div>
                {!c.real && <span className="case-badge">Caso ilustrativo</span>}
                <p className="eyebrow" style={{ marginTop: c.real ? 0 : 18 }}>{c.industry}</p>
                <h1 className="case-hero-title">{c.lead}</h1>
                <p className="case-hero-tech">Tecnología: {c.tech}</p>
              </div>
              <div className="case-hero-metric">
                <div className="big">{c.metric}</div>
                <div className="cap">{c.unit}</div>
              </div>
            </div>
          </div>
        </section>

        <section className="section">
          <div className="wrap">
            <div className="case-steps">
              {steps.map(([label, text], i) => (
                <div className="case-step" key={label}>
                  <div className="case-step-n">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <p className="case-step-label">{label}</p>
                    <p className="case-step-text">{text}</p>
                  </div>
                </div>
              ))}
            </div>
            {!c.real && (
              <p className="case-disclaimer">
                Caso ilustrativo: ejemplo de cómo se aplica la metodología. Reemplazar por datos reales cuando estén disponibles.
              </p>
            )}
            <div className="case-cta">
              <a className="arrow-link" href="contacto.html">¿Un caso parecido en tu organización? Hablemos <Arrow /></a>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

  Object.assign(window, { WCasesGrid: CasesGrid, WCaseDetail: CaseDetail });
})();