// ─── Treatments Page ──────────────────────────────────────────

const treatments = {
  face: [
    {
      id: 'botox',
      name: 'Botox',
      tag: 'Relajación muscular',
      what: 'Aplicación de toxina botulínica en pequeñas dosis para relajar músculos de expresión y suavizar líneas.',
      improves: ['Arrugas de frente y entrecejo', 'Patas de gallo', 'Líneas periorales', 'Efecto lifting sutil'],
      who: 'Cualquier persona que quiera prevenir o tratar arrugas de expresión de forma natural y progresiva.',
      results: 'Resultados visibles a los 4–7 días. Piel más lisa, descansada y rejuvenecida.',
      sessions: '1 sesión. Mantenimiento cada 4–6 meses.',
    },
    {
      id: 'mesoterapia',
      name: 'Mesoterapia Facial',
      tag: 'Hidratación y luminosidad',
      what: 'Microinyecciones de ácido hialurónico, vitaminas y antioxidantes directamente en las capas medias de la piel.',
      improves: ['Hidratación profunda', 'Luminosidad y textura', 'Manchas leves', 'Flaccidez inicial'],
      who: 'Pieles opacas, deshidratadas o con primeros signos de envejecimiento. Perfecta para cualquier edad.',
      results: 'Efecto inmediato de luminosidad. Mejora progresiva de textura en 2–3 semanas.',
      sessions: '3–4 sesiones mensuales. Mantenimiento semestral.',
    },
    {
      id: 'peelings',
      name: 'Peelings Químicos',
      tag: 'Renovación celular',
      what: 'Aplicación de ácidos controlados que aceleran la renovación celular y mejoran la calidad general de la piel.',
      improves: ['Manchas y tono irregular', 'Textura y poros', 'Cicatrices de acné leves', 'Opacidad'],
      who: 'Pieles con manchas, acné, o que buscan renovación y luminosidad profunda.',
      results: 'Piel más pareja, luminosa y renovada. Resultados visibles desde la primera sesión.',
      sessions: '1–4 sesiones según indicación. Espaciadas 3–4 semanas.',
    },
    {
      id: 'bioestimulacion',
      name: 'Bioestimulación',
      tag: 'Firmeza y colágeno',
      what: 'Estimulación de fibroblastos para activar la producción natural de colágeno y elastina mediante biopolímeros o plasma rico en plaquetas.',
      improves: ['Firmeza y elasticidad', 'Definición del óvalo facial', 'Calidad general de la piel', 'Volumen natural'],
      who: 'Personas con pérdida de firmeza y volumen. Ideal a partir de los 35 años como tratamiento preventivo.',
      results: 'Resultados progresivos durante 3–6 meses. Efecto natural y duradero.',
      sessions: '2–3 sesiones iniciales. Mantenimiento anual.',
    },
  ],
  body: [
    {
      id: 'lipolisis',
      name: 'Mesoterapia Lipolítica',
      tag: 'Reducción de grasa',
      what: 'Microinyecciones de sustancias lipolíticas que disuelven acumulaciones localizadas de grasa.',
      improves: ['Grasa localizada', 'Doble mentón', 'Papada', 'Contorno corporal'],
      who: 'Personas con grasa localizada resistente al ejercicio y la alimentación. No reemplaza a una dieta.',
      results: 'Reducción visible a partir de la 2ª sesión. Resultados definitivos en 3–4 semanas post tratamiento.',
      sessions: '3–6 sesiones. Según zona y volumen.',
    },
    {
      id: 'anticelulitis',
      name: 'Anti-celulitis',
      tag: 'Textura y circulación',
      what: 'Combinación de mesoterapia, drenaje linfático y activos específicos para mejorar la microcirculación y textura de la piel.',
      improves: ['Celulitis superficial y profunda', 'Retención de líquidos', 'Textura tipo piel de naranja', 'Circulación'],
      who: 'Mujeres con celulitis en cualquier estadio, especialmente muslos, glúteos y abdomen.',
      results: 'Mejora de textura y firmeza. Resultados visibles a partir de la 3ª sesión.',
      sessions: '6–10 sesiones. Mantenimiento estacional.',
    },
    {
      id: 'reafirmante',
      name: 'Tratamiento Reafirmante',
      tag: 'Firmeza corporal',
      what: 'Estimulación de colágeno y elastina corporal mediante bioestimuladores e inductores de síntesis tisular.',
      improves: ['Flaccidez corporal', 'Piel crepé', 'Post adelgazamiento', 'Mejora de textura'],
      who: 'Pieles con flaccidez, especialmente post embarazo, adelgazamiento o por el paso del tiempo.',
      results: 'Piel más firme y turgente de forma progresiva y natural.',
      sessions: '4–6 sesiones según zona. Mantenimiento semestral.',
    },
  ],
};

function TreatmentCard({ t, isOpen, onToggle }) {
  return (
    <div style={{ borderTop: '1px solid var(--cream-dark)', transition: 'all 0.3s' }}>
      <button onClick={onToggle} style={{
        width: '100%', background: 'none', border: 'none', cursor: 'pointer',
        padding: '28px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
        textAlign: 'left',
      }}>
        <div>
          <div className="t-caps-gold" style={{ marginBottom: 6 }}>{t.tag}</div>
          <div className="t-serif" style={{ fontSize: 28 }}>{t.name}</div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: '50%', border: '1px solid var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold)', fontSize: 18, flexShrink: 0, transition: 'transform 0.3s', transform: isOpen ? 'rotate(45deg)' : 'none' }}>+</div>
      </button>

      {isOpen && (
        <div style={{ paddingBottom: 40, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 40 }}>
          <div>
            <div className="t-caps" style={{ marginBottom: 10 }}>¿Qué es?</div>
            <p className="t-body-dark" style={{ fontSize: 16 }}>{t.what}</p>
          </div>
          <div>
            <div className="t-caps" style={{ marginBottom: 10 }}>¿Qué mejora?</div>
            <ul style={{ listStyle: 'none', padding: 0 }}>
              {t.improves.map((item, i) => (
                <li key={i} className="t-body-dark" style={{ fontSize: 16, lineHeight: 1.7, paddingLeft: 16, position: 'relative', marginBottom: 4 }}>
                  <span style={{ position: 'absolute', left: 0, color: 'var(--gold)' }}>—</span>{item}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="t-caps" style={{ marginBottom: 10 }}>¿Para quién es?</div>
            <p className="t-body-dark" style={{ fontSize: 16, marginBottom: 20 }}>{t.who}</p>
            <div className="t-caps" style={{ marginBottom: 8 }}>Sesiones</div>
            <p className="t-body-dark" style={{ fontSize: 16 }}>{t.sessions}</p>
          </div>
          <div>
            <div className="t-caps" style={{ marginBottom: 10 }}>Resultados esperados</div>
            <p className="t-body-dark" style={{ fontSize: 16, marginBottom: 28 }}>{t.results}</p>
            <BtnPrimary href={`https://wa.me/543413348415?text=${encodeURIComponent('Hola, me interesa el tratamiento de ' + t.name)}`} style={{ paddingLeft: 24, paddingRight: 24 }}>
              Consultar sobre {t.name}
            </BtnPrimary>
          </div>
        </div>
      )}
    </div>
  );
}

function TreatmentsPage() {
  const [openId, setOpenId] = useState(null);
  const [tab, setTab] = useState('face');
  const allTreatments = tab === 'face' ? treatments.face : treatments.body;

  return (
    <div className="page">
      {/* Hero */}
      <div style={{ background: 'var(--dark)', padding: '80px max(40px,5vw) 96px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', bottom: -100, right: -100, width: 400, height: 400, borderRadius: '50%', border: '1px solid rgba(196,169,107,0.1)' }} />
        <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
          <Label light style={{ marginBottom: 20 }}>Catálogo de tratamientos</Label>
          <h1 className="t-h2-inv" style={{ fontSize: 'clamp(40px, 5vw, 68px)', maxWidth: 620 }}>
            Cada piel tiene<br /><em style={{ color: 'var(--gold-light)', fontStyle: 'italic' }}>su propio protocolo.</em>
          </h1>
        </div>
      </div>

      {/* Tab selector */}
      <div style={{ background: 'var(--white)', borderBottom: '1px solid var(--cream-dark)', paddingTop: '20px' }}>
        <div className="wrap px" style={{ display: 'flex', gap: 0 }}>
          {[['face', 'Rostro'], ['body', 'Cuerpo']].map(([id, label]) => (
            <button key={id} onClick={() => { setTab(id); setOpenId(null); }} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '20px 32px',
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, letterSpacing: '0.13em', textTransform: 'uppercase',
              color: tab === id ? 'var(--gold)' : 'var(--text-light)',
              borderBottom: tab === id ? '2px solid var(--gold)' : '2px solid transparent',
              transition: 'color 0.2s',
            }}>{label}</button>
          ))}
        </div>
      </div>

      {/* Treatment list */}
      <div className="wrap px" style={{ paddingBottom: 96 }}>
        {allTreatments.map(t => (
          <TreatmentCard key={t.id} t={t} isOpen={openId === t.id} onToggle={() => setOpenId(openId === t.id ? null : t.id)} />
        ))}
        <div style={{ borderTop: '1px solid var(--cream-dark)' }} />
      </div>

      {/* CTA */}
      <div className="section--sm text-center" style={{ background: 'var(--gold-pale)' }}>
        <h2 className="t-h3" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', marginBottom: 16 }}>¿No sabés cuál es el tratamiento ideal?</h2>
        <p className="t-body" style={{ fontSize: 16, marginBottom: 36 }}>Agendá una consulta inicial y la Dra. Lana diseña un plan personalizado para vos.</p>
        <BtnPrimary href={`https://wa.me/543413348415?text=${encodeURIComponent('Hola, quisiera una consulta para saber qué tratamiento es el ideal para mí')}`} style={{ paddingLeft: 24, paddingRight: 24 }}>
          Reservar consulta personalizada
        </BtnPrimary>
      </div>
    </div>
  );
}

Object.assign(window, { TreatmentsPage });