/* global React, Reveal, Btn, Placeholder, CASES */
const { useState: caUseState } = React;

function Cases({ setRoute }) {
  const industries = ['Todos', ...Array.from(new Set(CASES.map(c => c.industry).filter(Boolean)))];
  const [filter, setFilter] = caUseState('Todos');
  const filtered = filter === 'Todos' ? CASES : CASES.filter(c => c.industry === filter);

  return (
    <main>
      <section className="page-hero">
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>Casos · historias reales</div></Reveal>
          <Reveal delay={120}>
            <h1>Lo que <span className="serif accent">movemos.</span></h1>
          </Reveal>
          <Reveal delay={240}>
            <p className="lede" style={{ marginTop: 32 }}>
              Más de 50 clientes en industria, turismo y educación. Algunos ejemplos de cómo
              estrategia, ejecución y medición cambiaron los números.
            </p>
          </Reveal>

          <Reveal delay={320}>
            <div style={{ marginTop: 48, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {industries.map(ind => (
                <button
                  key={ind}
                  className={`chip ${filter === ind ? 'active' : ''}`}
                  onClick={() => setFilter(ind)}
                >
                  {ind}
                </button>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section style={{ paddingTop: 40 }}>
        <div className="container">
          <div className="grid grid-2">
            {filtered.map((c, i) => (
              <Reveal key={c.id} delay={i * 80}>
                <div className="case-card">
                  <div className="case-media">
                    {c.thumb
                      ? <img src={c.thumb} alt={c.client} style={{ width: '100%', aspectRatio: '16/10', objectFit: 'cover', display: 'block' }} />
                      : <Placeholder label={`CASE / ${(c.id || '').toUpperCase()}`} tone={i % 2 === 0 ? 'navy' : 'accent'}>
                          captura web · {c.client}
                        </Placeholder>
                    }
                  </div>
                  <div className="case-body" style={{ padding: 36 }}>
                    <div className="mono" style={{ color: 'var(--ink-low)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
                      {c.industry} · {c.year}
                    </div>
                    <h3 style={{ fontSize: 36, marginTop: 12, letterSpacing: '-0.02em' }}>{c.client}</h3>
                    <p style={{ marginTop: 8 }}>{c.tagline}</p>
                    <div style={{ marginTop: 28, paddingTop: 28, borderTop: '1px solid var(--line-soft)' }}>
                      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-low)' }}>Resultado</div>
                      <div style={{ marginTop: 8, fontSize: 32, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--accent)' }}>
                        {c.metric}
                      </div>
                    </div>
                    <div className="case-tags" style={{ marginTop: 24 }}>
                      {c.services.map((s, j) => <span key={j} className="tag">{s}</span>)}
                    </div>
                    {c.link && (
                      <div style={{ marginTop: 28 }}>
                        <a href={c.link} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, borderBottom: '1px solid var(--ink)', paddingBottom: 2, fontSize: 14, fontWeight: 500 }}>
                          Leer caso completo →
                        </a>
                      </div>
                    )}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Featured case deep-dive */}
      <section style={{ background: 'var(--bg-alt)' }}>
        <div className="container">
          <Reveal><div className="eyebrow" style={{ marginBottom: 32 }}>Caso destacado</div></Reveal>
          <Reveal delay={100}>
            <h2 className="display-lg" style={{ maxWidth: '14ch' }}>
              La Farmacia<br />Homeopática <span className="serif accent">→ 3.4x.</span>
            </h2>
          </Reveal>
          <div className="grid grid-2" style={{ marginTop: 60, gap: 60, alignItems: 'start' }}>
            <Reveal>
              <Placeholder aspect="4/5" tone="navy" label="HERO / FARMACIA">captura e-commerce</Placeholder>
            </Reveal>
            <Reveal delay={120}>
              <div className="stack-lg">
                <div>
                  <div className="mono ticker">Reto</div>
                  <p style={{ marginTop: 8, color: 'var(--ink)', fontSize: 18 }}>
                    Transformar una farmacia tradicional en un e-commerce rentable, manteniendo la cercanía
                    de su atención personalizada.
                  </p>
                </div>
                <div>
                  <div className="mono ticker">Solución</div>
                  <p style={{ marginTop: 8, color: 'var(--ink)', fontSize: 18 }}>
                    Estrategia 360°: desarrollo e-commerce + SEO + redes sociales + Google Ads + capacitación
                    al equipo directivo y de mercadeo.
                  </p>
                </div>
                <div className="grid grid-3" style={{ gap: 16, marginTop: 16 }}>
                  {[['3.4x', 'ventas online'], ['+180%', 'tráfico orgánico'], ['-35%', 'CAC'] ].map(([n, l], i) => (
                    <div key={i} style={{ padding: 20, background: 'var(--surface)', borderRadius: 16, border: '1px solid var(--line-soft)' }}>
                      <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--accent)' }}>{n}</div>
                      <div className="ticker" style={{ marginTop: 4 }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Cases });