// ─── Results Page ─────────────────────────────────────────────

const resultItems = [
  { treatment: 'Botox', zone: 'Frente y entrecejo', sessions: '1 sesión', time: '10 días', imgAntes: 'uploads/result-botox-antes.png', imgDespues: 'uploads/result-botox-despues.png' },
  { treatment: 'Peeling', zone: 'Manchas y textura', sessions: '3 sesiones', time: '6 semanas', imgAntes: 'uploads/results-peeling-antes.png', imgDespues: 'uploads/results-peeling-depsues.png' },
  { treatment: 'Mesoterapia', zone: 'Mesoterapia Corporal', sessions: '4 sesiones', time: '8 semanas', imgAntes: 'uploads/meso-corporal-antes.png', imgDespues: 'uploads/meso-corporal-despues.png' },
  { treatment: 'Bioestimulación', zone: 'Firmeza y óvalo', sessions: '2 sesiones', time: '3 meses', imgAntes: 'uploads/results-bioestimulacion-antes.png', imgDespues: 'uploads/results-bioestimulacion-despues.png' },
  { treatment: 'Botox', zone: 'Patas de gallo', sessions: '1 sesión', time: '2 semanas', imgAntes: 'uploads/results-pata-gallo-antes.png', imgDespues: 'uploads/results-pata-gallo-despues.png' },
  { treatment: 'Peeling', zone: 'Acné y cicatrices', sessions: '4 sesiones', time: '12 semanas', imgAntes: 'uploads/results-acne-antes.png', imgDespues: 'uploads/results-acne-despues.png' },
];

function BeforeAfterCard({ item }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ background: 'var(--white)', overflow: 'hidden', cursor: 'default', transition: 'transform 0.3s, box-shadow 0.3s', transform: hover ? 'translateY(-4px)' : 'translateY(0)', boxShadow: hover ? '0 16px 48px rgba(139,107,61,0.12)' : 'none' }}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
        <div style={{ position: 'relative' }}>
          {item.imgAntes
            ? <img src={item.imgAntes} alt={`Antes · ${item.treatment}`} style={{ width: '100%', height: 220, objectFit: 'cover', display: 'block' }} />
            : <ImgPlaceholder height={220} label={`antes · ${item.treatment.toLowerCase()}`} />
          }
          <div style={{ position: 'absolute', bottom: 8, left: 8, background: 'rgba(42,31,16,0.75)', color: 'white', fontFamily: 'var(--font-sans)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '4px 8px' }}>Antes</div>
        </div>
        <div style={{ position: 'relative' }}>
          {item.imgDespues
            ? <img src={item.imgDespues} alt={`Después · ${item.treatment}`} style={{ width: '100%', height: 220, objectFit: 'cover', display: 'block' }} />
            : <ImgPlaceholder height={220} label={`después · ${item.treatment.toLowerCase()}`} />
          }
          <div style={{ position: 'absolute', bottom: 8, right: 8, background: 'var(--gold)', color: 'white', fontFamily: 'var(--font-sans)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '4px 8px' }}>Después</div>
        </div>
      </div>
      <div style={{ padding: '20px 20px 24px' }}>
        <div className="t-caps-gold" style={{ marginBottom: 6 }}>{item.treatment}</div>
        <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--dark)', marginBottom: 10 }}>{item.zone}</div>
        <div className="t-body" style={{ fontSize: 11 }}>
          <span style={{ color: 'var(--text)' }}>{item.sessions}</span> · {item.time}
        </div>
      </div>
    </div>
  );
}

function ResultsPage() {
  const [filter, setFilter] = React.useState('Todos');
  const treatments = ['Todos', 'Botox', 'Peeling', 'Mesoterapia', 'Bioestimulación'];
  const filtered = filter === 'Todos' ? resultItems : resultItems.filter(r => r.treatment === filter);
  const ref = useScrollIn();

  return (
    <div className="page">

      {/* Hero */}
      <div className="section--sm" style={{ background: 'var(--white)' }}>
        <div className="wrap">
          <Label style={{ marginBottom: 20 }}>Galería de resultados</Label>
          <div className="results-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end' }}>
            <h1 className="t-h2" style={{ fontSize: 'clamp(36px, 5vw, 62px)' }}>
              Resultados honestos.<br /><em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>Siempre naturales.</em>
            </h1>
            <p className="t-body" style={{ fontSize: 16 }}>
              Estas son pacientes reales con tratamientos reales. Nuestro compromiso es con resultados que respetan tu identidad y se ven naturales.
            </p>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div style={{ background: 'var(--cream)', borderBottom: '1px solid var(--cream-dark)', position: 'sticky', top: 70, zIndex: 10 }}>
        <div className="wrap px" style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingTop: 16, paddingBottom: 16 }}>
          {treatments.map(t => (
            <button key={t} onClick={() => setFilter(t)} style={{
              background: filter === t ? 'var(--gold)' : 'var(--white)',
              color: filter === t ? 'white' : 'var(--text)',
              fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              padding: '9px 20px', border: '1px solid', whiteSpace: 'nowrap',
              borderColor: filter === t ? 'var(--gold)' : 'var(--cream-dark)',
              cursor: 'pointer', transition: 'all 0.2s',
            }}>{t}</button>
          ))}
        </div>
      </div>

      {/* Grid */}
      <div ref={ref} className="wrap" style={{ padding: '56px max(40px,5vw) 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 20 }}>
          {filtered.map((item, i) => (
            <BeforeAfterCard key={i} item={item} />
          ))}
        </div>
        {filtered.length === 0 && (
          <div className="text-center t-body" style={{ padding: '80px 0', fontSize: 14 }}>
            No hay resultados para este filtro todavía.
          </div>
        )}
      </div>

      {/* Disclaimer + CTA */}
      <div className="section--sm text-center" style={{ background: 'var(--dark)' }}>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(255,255,255,0.35)', lineHeight: 1.8, maxWidth: 560, margin: '0 auto 40px', fontStyle: 'italic' }}>
          Los resultados pueden variar según el tipo de piel, historial médico y adherencia al plan de tratamiento. Todas las fotos son de pacientes reales con consentimiento informado.
        </p>
        <BtnPrimary href={`https://wa.me/543413348415?text=${encodeURIComponent('Hola, vi los resultados y me gustaría reservar una consulta')}`}>
          Quiero resultados como estos
        </BtnPrimary>
      </div>
    </div>
  );
}

Object.assign(window, { ResultsPage });