/* services.jsx */

const SERVICES = [
{
  n: "01",
  title: "Armonización facial",
  desc: "Diseño facial integral con criterio anatómico y proporciones armónicas.",
  tone: "rose",
  label: "armonización · perfil",
  src: "assets/Armonizacion-Perfil-Menton.jpeg",
  featured: true
},
{ n: "02", title: "Botox", desc: "Toxina botulínica con dosis personalizada para una expresión descansada.", tone: "bone", label: "botox · frente", src: "assets/botox-frente.jpeg" },
{ n: "03", title: "Sculptra", desc: "Bioestimulación de colágeno para devolver firmeza y volumen estructural.", tone: "champagne", label: "sculptra · pómulos", src: "assets/sculptra.jpeg" },
{ n: "04", title: "Diseño de labios", desc: "Hidratación, contorno y volumen sutil con técnica de capas finas.", tone: "rose", label: "labios · perfil", src: "assets/labios-relleno-acidohialuronico.jpeg" },
{ n: "05", title: "Rejuvenecimiento facial", desc: "Protocolos combinados para luminosidad, textura y elasticidad.", tone: "bone", label: "facial · piel", src: "assets/rejuvenecimiento-facial.jpeg" },
{ n: "06", title: "Limpieza facial profunda", desc: "Higienización médica y oxigenación de la piel en cabina privada.", tone: "champagne", label: "skincare · cabina", src: "assets/limpieza-facial-2.jpeg" },
{ n: "07", title: "Tricología clínica", desc: "Diagnóstico médico de la caída capilar con plan terapéutico personalizado.", tone: "mocha", label: "tricología · cuero cabelludo", src: "assets/tricologia-capilar.jpeg" },
{ n: "08", title: "Microinjerto capilar", desc: "Técnica FUE de precisión para restaurar densidad con resultado natural.", tone: "mocha", label: "microinjerto · línea capilar", src: "assets/microinjerto-implante-capilar.jpeg" },
{ n: "09", title: "Estética corporal", desc: "Remodelación, firmeza y tratamientos antiedad corporales.", tone: "rose", label: "corporal · siluetas", src: "assets/estetica-corporal.jpeg" }];


// Business WhatsApp number (international format, no +, spaces or dashes)
const BUSINESS_WHATSAPP = "573013083210";

// Build a prefilled WhatsApp link asking about a specific treatment
function infoWhatsAppUrl(title) {
  const text = encodeURIComponent(
    `¡Hola! Me gustaría recibir más información sobre el tratamiento de ${title}. ¿Me pueden ayudar?`
  );
  return `https://wa.me/${BUSINESS_WHATSAPP}?text=${text}`;
}

function Services({ onBookClick }) {
  return (
    <section className="section-pad" id="servicios">
      <div className="wrap">
        <Reveal>
          <div className="services-head">
            <div>
              <Eyebrow>Tratamientos</Eyebrow>
              <h2 className="section-title" style={{ marginTop: 18 }}>
                Tratamientos,<br />
                <em>previa valoración.</em>
              </h2>
            </div>
            <p className="lead" style={{ maxWidth: "38ch" }}>
              Cada protocolo se construye sobre diagnóstico, evidencia y técnica.
              Si un tratamiento no es para ti, te lo decimos.
            </p>
          </div>
        </Reveal>

        <div className="svc-grid">
          {SERVICES.map((s, i) =>
          <Reveal
            key={s.n}
            delay={i % 3 + 1}
            className={`svc ${s.featured ? "svc-feature" : ""}`}>
            
              {s.featured ?
            <React.Fragment>
                  <Photo tone={s.tone} label={s.label} src={s.src} alt={s.title} className="svc-img" />
                  <div className="svc-feature-body">
                    <div>
                      <span className="svc-num" style={{ position: "static", display: "inline-block", marginBottom: 18 }}>— {s.n} · Servicio destacado</span>
                      <h3 className="svc-feature-title">{s.title}</h3>
                      <p className="lead" style={{ marginTop: 16, maxWidth: "44ch" }}>
                        Diseño facial 360° combinando rellenos, toxina, bioestimuladores y
                        soporte tisular para revelar la mejor versión de tus rasgos.
                      </p>
                    </div>
                    <div className="svc-foot" style={{ marginTop: 28 }}>
                      <span>Valoración · 45 min</span>
                      <button className="btn btn-gold btn-sm" onClick={onBookClick}>Agendar <Arr /></button>
                    </div>
                  </div>
                </React.Fragment> :

            <React.Fragment>
                  <span className="svc-num">{s.n}</span>
                  <Photo tone={s.tone} label={s.label} src={s.src} alt={s.title} className="svc-img" />
                  <h3 className="svc-title">{s.title}</h3>
                  <p className="svc-desc">{s.desc}</p>
                  <a
                className="svc-foot"
                href={infoWhatsAppUrl(s.title)}
                target="_blank"
                rel="noreferrer"
                aria-label={`Más información sobre ${s.title} por WhatsApp`}>
                    <span>Más información</span>
                    <span className="arr"><Arr /></span>
                  </a>
                </React.Fragment>
            }
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Services });