/* Methodology.jsx — big 4-step process diagram.
 * Per brief: BIG, no "como trabajamos contigo" question,
 * step 1 says "Conversamos sobre la situación y necesidades de asesoría",
 * no cost mention anywhere.
 */
function Methodology({ variant, eyebrow, heading, steps, ctaLabel }) {
  const scrollToContact = () => {
    document.getElementById("contacto")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  return (
    <section className="int-section tint" id="metodologia">
      <div className="int-container">
        <div className={"methodology " + variant}>
          <div className="head">
            <div>
              <span className="eyebrow">{eyebrow}</span>
              <h2>{heading}</h2>
            </div>
          </div>
          <div className="steps">
            {steps.map((s, i) =>
            <div className="step" key={s.title}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            )}
          </div>
        </div>
      </div>
      {ctaLabel && (
        <div className="methodology-cta">
          <button className={"meth-cta-btn " + variant} onClick={scrollToContact}>
            {ctaLabel}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
          </button>
        </div>
      )}
    </section>);

}

Object.assign(window, { Methodology });