/* cases.jsx — Casos de éxito */

const { useState: useStateCa } = React;

function CaseCard({ data, span, featured, variant }) {
  const Wrapper = data.href ? 'a' : 'article';
  const wrapperProps = data.href ? { href: data.href } : {};
  return (
    <Wrapper
      {...wrapperProps}
      className={`case ${featured ? 'case-feat' : ''} ${variant ? `case-${variant}` : ''}`}
      style={{ gridColumn: `span ${span}` }}
    >
      <div className="case-top">
        <span className="client">{data.client}</span>
        <span className="pill" style={{ background: data.pillColor || 'var(--lime)' }}>{data.tag}</span>
      </div>

      <div className="case-visual">
        {data.visual}
      </div>

      <div className="case-body">
        {data.title && <h3 className="case-title">{data.title}</h3>}
        {data.desc && <p className="case-desc">{data.desc}</p>}
        {data.metrics && (
          <div className="metrics">
            {data.metrics.map((m, i) => (
              <div className="metric" key={i}>
                <div className="v">{m.v}</div>
                <div className="l">{m.l}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {data.href ? (
        <span className="case-cta">
          <span>Ver caso completo</span>
          <Arrow size={12} />
        </span>
      ) : (
        <a href="#contacto" className="case-cta">
          <span>Ver caso completo</span>
          <Arrow size={12} />
        </a>
      )}
    </Wrapper>
  );
}

/* Small inline "RE" badge for Royal Enfield — generic monogram, not the literal logo */
function REMark() {
  return (
    <svg viewBox="0 0 72 72" width="56" height="56" fill="none" aria-hidden="true">
      <circle cx="36" cy="36" r="34" stroke="currentColor" strokeWidth="1.5" />
      <circle cx="36" cy="36" r="27" stroke="currentColor" strokeWidth="0.75" opacity="0.5" />
      <text x="36" y="44" textAnchor="middle" fontFamily="Instrument Sans" fontWeight="700" fontSize="22" letterSpacing="-1" fill="currentColor">RE</text>
      <text x="36" y="12.5" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="4.2" letterSpacing="1.2" fill="currentColor">ROYAL ENFIELD</text>
      <text x="36" y="66" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="4.2" letterSpacing="1.2" fill="currentColor">SINCE 1901</text>
    </svg>
  );
}

function Cases() {
  /* 1. Diggit — featured, full width row 1 */
  const diggit = {
    client: 'DIGGIT · E-commerce',
    tag: 'FEATURED',
    pillColor: 'var(--lime)',
    href: 'cases/diggit.html',
    visual: (
      <img src={window.__resources.diggit} alt="Diggit" className="case-logo-img"
        style={{ height: 72, width: 'auto', maxWidth: 220 }} />
    ),
    title: 'Una operación de medios para Uruguay y Paraguay.',
    desc: 'Gestionamos toda la operación de medios de Diggit en dos países desde un solo equipo: dos cuentas publicitarias, dos monedas y dos calendarios comerciales, bajo una misma estrategia de paid, orgánico y data, con reporting regional unificado.',
    metrics: [
      { v: '2', l: 'Mercados · UY + PY' },
      { v: '4', l: 'Stores gestionadas' },
      { v: '6+', l: 'Categorías en pauta' },
    ],
  };

  /* 2. Motos — KTM + Royal Enfield combinados (dos concesionarias) */
  const motos = {
    client: 'KTM · ROYAL ENFIELD',
    tag: 'AUTOMOTIVE',
    pillColor: 'var(--yellow)',
    href: 'cases/ktm-royal.html',
    visual: (
      <div className="motos-dual">
        <div className="motos-brand">
          <img src={window.__resources.ktm} alt="KTM"
            style={{ height: 48, width: 'auto', maxWidth: 140, filter: 'invert(1) brightness(1.1)' }} />
          <span className="motos-brand-tag">Ready to Race</span>
        </div>
        <div className="motos-divider"></div>
        <div className="motos-brand" style={{ color: 'var(--bone)' }}>
          <img src={window.__resources.royal} alt="Royal Enfield"
            style={{ height: 24, width: 'auto', maxWidth: 160, objectFit: 'contain', filter: 'brightness(0) invert(1)' }} />
          <span className="motos-brand-tag">Pure Motorcycling</span>
        </div>
      </div>
    ),
    title: '9 concesionarias de motos, un solo sistema.',
    desc: 'Gestión de campañas para el grupo LEMA — KTM, Royal Enfield y más. Estructuras por modelo, optimización diaria y reporting, con CPL de Lead Gen por debajo de US$1. Trabajo de alta carga operativa.',
    metrics: [
      { v: '9', l: 'Concesionarias' },
      { v: '< US$1', l: 'CPL Lead Gen' },
      { v: '~7.600', l: 'Leads / mes' },
    ],
  };

  /* 3 & 4 — Qüint y UCh: solo iso, diseñados como brand showcase */
  const quint = {
    client: 'QÜINT',
    tag: 'ELECTRO',
    pillColor: 'var(--bone)',
    href: 'cases/quint.html',
    visual: (
      <div className="iso-showcase">
        <img src={window.__resources.quint} alt="Qüint" />
      </div>
    ),
  };

  const uch = {
    client: 'UNIVERSIDAD CHAMPAGNAT',
    tag: 'EDUCACIÓN',
    pillColor: 'var(--bone)',
    href: 'cases/uch.html',
    visual: (
      <div className="iso-showcase uch-lockup">
        <img src={window.__resources.uchShield} alt="UCH" className="uch-shield" />
        <div className="uch-wordmark">
          <span className="uch-wordmark-1">Universidad</span>
          <span className="uch-wordmark-2">Champagnat</span>
        </div>
      </div>
    ),
  };

  return (
    <section className="section" id="casos">
      <div className="wrap">
        <SectionHead
          num="05 / CASOS"
          eyebrow="Casos de éxito"
          title={<>Marcas que <em style={{ color: 'var(--lime)', fontStyle: 'normal' }}>crecen con nosotros.</em></>}
          sub="Estos son los desafíos que estamos resolviendo. Cada caso combina datos, medios y creatividad en proporciones distintas — pero siempre en el mismo sistema."
        />

        <div className="cases-grid">
          <CaseCard data={diggit} span={12} featured />
          <CaseCard data={motos} span={12} featured />
          <CaseCard data={quint} span={6} variant="iso" />
          <CaseCard data={uch} span={6} variant="iso" />
        </div>
      </div>
    </section>
  );
}

/* ============== LAB — fábrica de anuncios de performance ============== */
function Lab() {
  return (
    <section className="section" id="lab">
      <div className="wrap">
        <div className="lab-block">
          <div className="lab-grid">
            <div className="lab-left">
              <div className="lab-badge">
                <span className="lab-logo">LAB</span>
                <span className="ct-mono">by laburo</span>
              </div>
              <h3 className="lab-title">
                La fábrica de anuncios<br />
                de <em>performance.</em>
              </h3>
              <p className="lab-desc">
                LAB produce anuncios con IA diseñados para mejorar la
                performance de cada campaña. No es creatividad por
                creatividad: cada pieza está optimizada para convertir.
              </p>
              <p className="lab-desc">
                Nuestros anuncios funcionan mejor y bajan el CPL — y ese
                ahorro hace que la inversión <strong>se repague sola.</strong>
              </p>
              <a href="#contacto" className="btn primary lab-cta">
                Conocé LAB
                <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M2 7H12M12 7L7 2M12 7L7 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
            </div>
            <div className="lab-right">
              <div className="lab-stat">
                <div className="lab-stat-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M4 6h16M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2M4 6v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6"/>
                    <path d="M9 12l2 2 4-4"/>
                  </svg>
                </div>
                <div className="lab-stat-body">
                  <div className="lab-stat-title">Anuncios con IA</div>
                  <div className="lab-stat-sub">Generación + testing asistido por modelos</div>
                </div>
              </div>
              <div className="lab-stat">
                <div className="lab-stat-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M3 17l6-6 4 4 8-8"/>
                    <path d="M21 7v6M21 7h-6"/>
                  </svg>
                </div>
                <div className="lab-stat-body">
                  <div className="lab-stat-title">Mejor performance</div>
                  <div className="lab-stat-sub">Más CTR, más conversión por impresión</div>
                </div>
              </div>
              <div className="lab-stat lab-stat-hero">
                <div className="lab-stat-icon">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                  </svg>
                </div>
                <div className="lab-stat-body">
                  <div className="lab-stat-title">Menor CPL → se repaga</div>
                  <div className="lab-stat-sub">El ahorro en costo por lead financia la inversión</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Cases, Lab });