/* global React */
const { SectionHeader } = window.UI;

/* Client roster — real logos, greyscale by default, full colour + lift on hover. */
const R = (window.__resources || {});
const CASE_LOGOS = [
  { name: "Flama Produce",  src: R.caseFlama      || "media/cases/flama.png",       h: 46 },
  { name: "Music Hub",      src: R.caseMusicHub   || "media/cases/music-hub.png",   h: 82 },
  { name: "In Tickets",     src: R.caseInTickets  || "media/cases/in-tickets.png",  h: 80 },
  { name: "Arena Norte",    src: R.caseArenaNorte || "media/cases/arena-norte.png", h: 66 },
  { name: "Arcana Festival",src: R.caseArcana     || "media/cases/arcana.png",      h: 84 },
  { name: "GlobalProp",     src: R.caseGlobalProp || "media/cases/globalprop.png",  h: 54 },
];

function Cases() {
  return (
    <section className="sl-sec" id="cases">
      <div className="sl-wrap">
        <SectionHeader
          eyebrow="Trayectoria"
          title={<span>Casos de<br />Éxito</span>}
          lead="Ideamos, diseñamos y estructuramos operaciones. Ejecutamos proyectos complejos, desarrollamos manuales de procedimiento, construimos modelos escalables y acompañamos procesos de franquiciamiento — de principio a fin."
          bar={false} />
        <div className="sl-logos">
          {CASE_LOGOS.map((l, i) => (
            <div className="sl-logo" key={i} title={l.name}>
              <img className="sl-logo-img" src={l.src} alt={l.name} style={{ height: l.h }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Cases = Cases;