function Cases() {
  const D = (window.SITE && window.SITE.cases) || {};
  const cases = D.items || [];
  const [active, setActive] = React.useState(0);

  if (!cases.length) return null;
  const c = cases[active];

  return (
    <section id="casos" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title}<br/><span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          <p style={{ fontSize: 17, maxWidth: 620 }}>
            {D.subtitle}
          </p>
        </div>

        <div className="cases-layout" style={{
          display: 'grid', gridTemplateColumns: '320px 1fr', gap: 32,
          alignItems: 'flex-start',
        }}>
          {/* Tabs */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {cases.map((cc, i) => {
              const isActive = i === active;
              return (
                <button key={cc.id} onClick={() => setActive(i)} style={{
                  background: isActive ? 'var(--surface)' : 'transparent',
                  border: '1px solid ' + (isActive ? 'color-mix(in oklab, var(--primary) 24%, transparent)' : 'transparent'),
                  borderRadius: 14,
                  padding: '16px 18px',
                  textAlign: 'left',
                  display: 'flex', flexDirection: 'column', gap: 4,
                  cursor: 'pointer',
                  transition: 'all .18s ease',
                  boxShadow: isActive ? 'var(--shadow-sm)' : 'none',
                }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.04em',
                    textTransform: 'uppercase', color: isActive ? 'var(--primary-700)' : 'var(--muted)',
                    fontWeight: 600,
                  }}>{cc.tag}</span>
                  <span style={{
                    fontFamily: 'var(--serif)', fontSize: 16, color: 'var(--ink)',
                    lineHeight: 1.3,
                  }}>{cc.time}</span>
                </button>
              );
            })}
          </div>

          {/* Active case */}
          <article key={c.id} style={{
            background: 'var(--surface)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--radius-lg)',
            padding: 36,
            boxShadow: 'var(--shadow-sm)',
            animation: 'caseFadeIn .35s ease',
          }}>
            <Icon.Quote width="32" height="32" style={{ color: 'var(--accent)', opacity: .6, marginBottom: 16 }} />
            <h3 style={{ fontSize: 28, lineHeight: 1.2, marginBottom: 24, maxWidth: 620 }}>{c.title}</h3>

            <ol style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {(c.story || []).map((s, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{
                    flexShrink: 0,
                    width: 26, height: 26, borderRadius: '50%',
                    background: 'var(--primary-50)', color: 'var(--primary-700)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700,
                    marginTop: 2,
                  }}>{i + 1}</span>
                  <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--ink-2)', flex: 1 }}>{s}</p>
                </li>
              ))}
            </ol>

            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
              borderTop: '1px solid var(--line)', paddingTop: 24,
            }}>
              {(c.stats || []).map((s, i) => (
                <div key={i} style={{
                  padding: '0 16px',
                  borderRight: i < 2 ? '1px solid var(--line)' : 'none',
                  paddingLeft: i === 0 ? 0 : 16,
                }}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>
                    {s.v}
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </article>
        </div>

        <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 24, textAlign: 'center' }}>
          {D.footnote}
        </p>
      </div>

      <style>{`
        @keyframes caseFadeIn {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 900px) {
          .cases-layout { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
      `}</style>
    </section>
  );
}

window.Cases = Cases;