/* global React, window */
const { Icon, SectionHead } = window;

const Cases = () => (
  <section id="cases" data-theme="dark" className="section dark-section">
    <div className="painpoint-grid" />
    <div className="container" style={{ position: "relative" }}>
      <SectionHead
        tag="03 · Casos"
        title={<>Marcas que <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400 }}>se diferenciaron</span>.</>}
      />
      <div>
        {window.DATA.CASES.map((c, i) => (
          <a key={c.name} className="case-row reveal" href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer" style={{ textDecoration: "none", color: "inherit" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)", flexShrink: 0 }}>{`0${i+1}`}</span>
              <img src={c.logo} alt={c.name} style={{ height: c.logoHeight, width: "auto", maxWidth: 160, display: "block", opacity: 0.9 }} />
            </div>
            <div>
              <div className="case-cat">{c.category}</div>
              <div className="case-challenge">"{c.challenge}"</div>
            </div>
            <div className="case-result">{c.result}</div>
            <div className="case-arrow"><Icon name="arrow-ur" size={18} /></div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

window.Cases = Cases;