/* global React */
const { useState: useStateSvc } = React;

const SVC_DATA = {
  en: {
    facial: [
      { name: "Basic Facial", desc: "Cleansing, scrubs, tonic, steamer, extraction, high frequency, face-massage mask, hydration and protection.", min: 60, price: "106", signature: false },
      { name: "Deep Diamond Peel", desc: "Diamond peel descaling, ozone steamer, high frequency, neck & arms massage, mask, hydration.", min: 75, price: "127", signature: true },
      { name: "Deluxe VIP Facial", desc: "Our full facial protocol with an extra touch — beauty booster blister and LED-light mask.", min: 90, price: "185", signature: false },
    ],
    massage: [
      { name: "Swedish Massage", desc: "Soft pressure, warm oils — relaxes the nervous system and lets the body unwind.", min: 55, price: "95", signature: false },
      { name: "Full Body Ohm", desc: "A custom blend of Swedish and deep tissue, paired with a heating path and vibrating massager.", min: 65, price: "106", signature: true },
      { name: "Deep Tissue", desc: "Firm pressure on chronic tension. Not for first-timers — and exactly what your back has been asking for.", min: 75, price: "121", signature: false },
    ],
    waxing: [
      { name: "Brazilian", desc: "Hot or soft sugar wax in a private cabin, at your pace. Hygienic and respectful.", min: 30, price: "53", signature: true },
      { name: "Eyebrow Design", desc: "Brow shape mapped to your face — no pre-cut stencils, no copy-paste.", min: 20, price: "26", signature: false },
      { name: "Legs Full", desc: "Warm wax and a fast removal technique for minimal discomfort and a long-lasting finish.", min: 45, price: "79", signature: false },
    ],
  },
  es: {
    facial: [
      { name: "Facial Básico", desc: "Limpieza, scrubs, tónico, vapor, extracción, alta frecuencia, mascarilla con masaje, hidratación y protección.", min: 60, price: "106", signature: false },
      { name: "Diamond Peel Profundo", desc: "Descamación con punta diamante, vapor de ozono, alta frecuencia, masaje en cuello y brazos, mascarilla e hidratación.", min: 75, price: "127", signature: true },
      { name: "Facial Deluxe VIP", desc: "Nuestro protocolo facial completo con un toque extra — booster de belleza y mascarilla LED.", min: 90, price: "185", signature: false },
    ],
    massage: [
      { name: "Masaje Sueco", desc: "Presión suave, aceites tibios — relaja el sistema nervioso y permite que el cuerpo se afloje.", min: 55, price: "95", signature: false },
      { name: "Full Body Ohm", desc: "Combinación a medida de sueco y tejido profundo, con manta térmica y masajeador vibratorio.", min: 65, price: "106", signature: true },
      { name: "Tejido Profundo", desc: "Presión firme sobre tensiones crónicas. No para principiantes — y exactamente lo que tu espalda pide.", min: 75, price: "121", signature: false },
    ],
    waxing: [
      { name: "Brasileño", desc: "Cera tibia dura o de azúcar suave en cabina privada, a tu ritmo. Higiénico y respetuoso.", min: 30, price: "53", signature: true },
      { name: "Diseño de Cejas", desc: "Forma mapeada a tu rostro — sin plantillas pre-cortadas, sin copiar y pegar.", min: 20, price: "26", signature: false },
      { name: "Piernas Completas", desc: "Cera tibia y técnica rápida de retiro: mínima molestia y acabado duradero.", min: 45, price: "79", signature: false },
    ],
  },
};
window.SVC_DATA = SVC_DATA;

const TAB_LINKS = { facial: "facials.html", massage: "massages.html", waxing: "waxing.html" };

function ServiceCard({ s, t }) {
  return (
    <article className="vsc-svc-card">
      {s.signature && <span className="vsc-badge">{t("common.signature")}</span>}
      <h3 className="vsc-svc-name">{s.name}</h3>
      <span className="vsc-rule-gold" aria-hidden="true"></span>
      <p className="vsc-svc-desc">{s.desc}</p>
      <div className="vsc-svc-foot">
        <span className="vsc-svc-min">{s.min} {t("common.min")}</span>
        <span className="vsc-svc-price">ƒ {s.price}</span>
      </div>
    </article>
  );
}
window.ServiceCard = ServiceCard;

function Services() {
  const { t, lang } = window.useT();
  const [tab, setTab] = useStateSvc("facial");

  const TABS = [
    { id: "facial", label: t("services.tab.facial") },
    { id: "massage", label: t("services.tab.massage") },
    { id: "waxing", label: t("services.tab.waxing") },
  ];

  const data = (SVC_DATA[lang] || SVC_DATA.en)[tab] || [];
  const moreLabel = lang === "es" ? "Ver lista completa" : "View full list";

  return (
    <section className="vsc-services" id="servicios" data-screen-label="Services">
      <div className="vsc-wrap">
        <div className="vsc-services-head">
          <div>
            <div className="vsc-eyebrow">{t("services.eyebrow")}</div>
            <h2>
              {t("services.h2.a")}<br/>
              <em>{t("services.h2.b")}</em> {t("services.h2.c")}
            </h2>
          </div>
          <p className="lead">{t("services.lead")}</p>
        </div>

        <div className="vsc-tabs" role="tablist" aria-label={t("services.eyebrow")}>
          {TABS.map((tb) => (
            <button
              key={tb.id}
              role="tab"
              aria-selected={tab === tb.id}
              className={"vsc-tab " + (tab === tb.id ? "is-active" : "")}
              onClick={() => setTab(tb.id)}
            >
              {tb.label}
            </button>
          ))}
        </div>

        <div className="vsc-svc-grid" role="tabpanel">
          {data.map((s) => <ServiceCard key={s.name} s={s} t={t} />)}
        </div>

        <div className="vsc-services-foot">
          <BookBtn className="vsc-btn vsc-btn-primary">{t("common.book_treatment")}</BookBtn>
          <a className="vsc-btn vsc-btn-text" href={TAB_LINKS[tab]}>{moreLabel}</a>
          <p className="note">{t("services.note")}</p>
        </div>
      </div>
    </section>
  );
}
window.Services = Services;