const CASO_FILE = {
  abiliti: "Caso - Abiliti.html",
  inversolar: "Caso - Inversolar.html",
  ipancorazon: "Caso - IPANCORAZON.html",
};
function Casos() {
  const casos = [
    {
      id: "abiliti",
      name: "Abiliti Saltillo",
      logo: "abiliti",
      logoImg: "assets/logo-abiliti-blanco.png",
      cat: "Academia de programación",
      quote: "El sistema transformó nuestra captación de estudiantes. Los recordatorios automatizados redujeron ausencias drásticamente. Ahora tenemos grupos programados para empezar constantemente.",
      author: "Carolina Villela",
      role: "Directora General de Abiliti Saltillo",
      results: [
        { n: "100%", t: "aumento en matriculación mensual" },
        { n: "50%", t: "reducción de costo por lead (CPL)" },
        { n: "+$35K", t: "MXN adicionales mensuales" },
      ],
      photoColor: "cyan",
      slot: "caso-abiliti",
      photo: "assets/carolina-villela.png",
      photoScale: 1.18, photoOriginY: "6%",
      sticker1: "star", sticker2: "burst",
      sys: "Aigenci One",
    },
    {
      id: "inversolar",
      name: "Inversolar MX",
      logo: "Inversolar MX",
      logoImg: "assets/logo-inversolar-blanco.png",
      cat: "Venta e instalación de paneles solares",
      quote: "Nunca habíamos tenido un retorno así. Invertimos 12 mil pesos al mes en marketing y en tres meses cerramos 347 mil en ventas, desde clientes residenciales hasta un hotel completo.",
      author: "Jesús Medina",
      role: "Director General de Inversolar MX",
      results: [
        { n: "~10x", t: "retorno de inversión (ROI)" },
        { n: "$347K", t: "MXN en ventas generadas" },
        { n: "80%", t: "reducción en costo por lead (CPL)" },
      ],
      photoColor: "violet",
      slot: "caso-inversolar",
      photo: "assets/jesus-medina.png",
      photoScale: 2.5, photoOriginY: "22%",
      sticker1: "burst", sticker2: "star",
      sys: "Aigenci Pro",
    },
    {
      id: "ipancorazon",
      name: "IPANCORAZON Puebla",
      logo: "Instituto Panamericano del Corazón",
      logoImg: "assets/logo-ipancorazon-blanco.png",
      cat: "Consultorio médico",
      quote: "En cardiología, la confianza lo es todo. El sistema de Aigenci nos ayudó a comunicar nuestra experiencia de forma clara y profesional. Ahora los pacientes nos encuentran fácilmente y llegan a consulta ya informados y confiados en nuestros servicios.",
      author: "Dr. Luis Estrada",
      role: "Cardiólogo de IPANCORAZON",
      results: [
        { n: "8x", t: "retorno de inversión (ROI)" },
        { n: "45%", t: "reducción en ausencias a citas programadas" },
        { n: "126", t: "pacientes nuevos captados en 3 meses" },
      ],
      photoColor: "pink",
      slot: "caso-ipancorazon",
      photo: "assets/dr-estrada.png",
      photoScale: 1.5, photoOriginY: "6%",
      sticker1: "sparkle", sticker2: "burst",
      sys: "Aigenci Pro",
    },
  ];

  return (
    <section id="casos" className="casos-real section">
      <Sticker kind="star" className="cr-stk cr-stk-a anim" />
      <Sticker kind="plus" className="cr-stk cr-stk-b" />
      <div className="wrap">
        <Reveal as="div" className="sec-head">
          <div className="eyebrow"><span className="dot"/>Casos de éxito</div>
          <h2>Qué dicen <span className="pink">nuestros clientes</span> <span className="cyan">de nosotros</span></h2>
          <p>Resultados reales de negocios que confiaron en nuestros sistemas.</p>
        </Reveal>

        <div className="cr-list">
          {casos.map((c, i) => (
            <Reveal as="div" key={c.id} className={`cr-case ${i % 2 === 1 ? "flip" : ""}`}>
              <div className="cr-visual">
                <div className={`cr-photo-bg ${c.photoColor}`}>
                  <div className="cr-scene" aria-hidden="true">
                    <span className="cr-bloom"></span>
                    <svg className="cr-chart" viewBox="0 0 320 320" preserveAspectRatio="xMidYMid slice">
                      <line className="cr-gl" x1="0" y1="150" x2="320" y2="150"/>
                      <line className="cr-gl" x1="0" y1="210" x2="320" y2="210"/>
                      <line className="cr-gl" x1="0" y1="270" x2="320" y2="270"/>
                      <path className="cr-area" d="M0 250 L54 232 L108 244 L162 196 L216 206 L298 116 L298 320 L0 320 Z"/>
                      <path className="cr-line" d="M0 250 L54 232 L108 244 L162 196 L216 206 L298 116"/>
                      <circle className="cr-node-glow" cx="298" cy="116" r="15"/>
                      <circle className="cr-node" cx="298" cy="116" r="6.5"/>
                    </svg>
                  </div>
                  <span className="cr-ph-tag">caso · 0{i + 1}</span>
                  <Sticker kind={c.sticker1} className="cr-ph-stk1 anim" />
                  <Sticker kind={c.sticker2} className="cr-ph-stk2 anim" style={{ animationDelay: "0.8s" }} />
                  <div className="cr-photo-frame">
                    <image-slot id={c.slot} shape="rect"
                      src={c.photo || undefined} fit="contain" position="50% 100%"
                      placeholder={`Foto de ${c.author}`}
                      style={{ width: "100%", height: "100%", display: "block",
                        transform: c.photoScale ? `scale(${c.photoScale})` : undefined,
                        transformOrigin: `50% ${c.photoOriginY || "4%"}` }}></image-slot>
                  </div>
                  <div className="cr-ph-chip">
                    <span className="big">{c.results[0].n}</span>
                    <span className="lab">{c.results[0].t}</span>
                  </div>
                </div>
              </div>

              <div className="cr-content">
                <div className={`cr-sys cr-sys-${c.sys.split(" ")[1].toLowerCase()}`}>{c.sys}</div>
                {c.logoImg
                  ? <img className="cr-logo-img" src={c.logoImg} alt={c.name} />
                  : <h3 className="cr-name">{c.name}</h3>}
                <div className="cr-cat">{c.cat}</div>
                <p className="cr-quote">"{c.quote}"</p>
                <div className="cr-author">— {c.author}, <span>{c.role}</span></div>

                <div className="cr-results">
                  <div className="cr-results-label">Resultados</div>
                  <div className="cr-metrics">
                    {c.results.map((r, j) => (
                      <div className="cr-metric" key={j}>
                        <span className="cr-metric-n">{r.n}</span>
                        <span className="cr-metric-t">{r.t}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <a className="cr-link" href={CASO_FILE[c.id]}>
                  Conoce el caso <Arrow/>
                </a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Casos });