function Experiences({ lang }) {
  const { useState, useEffect, useRef } = React;
  const T = window.T;
  const t = T[lang].exp;

  function tr(ca, es) { return lang === "es" ? es : ca; }

  const [items, setItems]     = useState(null);
  const [editExp, setEditExp] = useState(null);
  const clientRef = useRef(null);

  // ── Load ─────────────────────────────────────────────────────────────────
  useEffect(function () { loadItems(); }, []);

  async function loadItems() {
    var client = await window.SVX.getCurrentClient();
    if (!client) return;
    clientRef.current = client;

    var res = await window.SB
      .from("experiences")
      .select("*")
      .eq("client_id", client.id)
      .order("sort_order", { ascending: true });

    if (res.error) {
      console.error("[Experiences] load:", res.error);
      window.SVX.toast(tr("Error carregant experiències", "Error cargando experiencias"), "error");
      setItems([]);
      return;
    }
    setItems(res.data || []);
  }

  // ── Toggle active ────────────────────────────────────────────────────────
  async function toggle(exp) {
    var newActive = !exp.active;
    setItems(function (prev) { return prev.map(function (e) { return e.id === exp.id ? Object.assign({}, e, { active: newActive }) : e; }); });

    var res = await window.SB.from("experiences").update({ active: newActive }).eq("id", exp.id);
    if (res.error) {
      console.error("[Experiences] toggle:", res.error);
      setItems(function (prev) { return prev.map(function (e) { return e.id === exp.id ? Object.assign({}, e, { active: exp.active }) : e; }); });
      window.SVX.toast(tr("Error desant el canvi", "Error al guardar"), "error");
    }
  }

  // ── Edit modal ───────────────────────────────────────────────────────────
  function openEdit(exp) {
    setEditExp({
      id:             exp.id,
      name_ca:        exp.name_ca || "",
      name_es:        exp.name_es || "",
      price:          exp.price_cents != null ? (exp.price_cents / 100).toFixed(2).replace(".", ",") : "",
      description_ca: exp.description_ca || "",
      description_es: exp.description_es || "",
    });
  }

  async function saveExp(e) {
    e.preventDefault();
    if (!editExp) return;

    var raw   = (editExp.price || "").replace(",", ".").trim();
    var cents = raw && !isNaN(parseFloat(raw)) ? Math.round(parseFloat(raw) * 100) : null;

    var patch = {
      name_ca:        editExp.name_ca,
      name_es:        editExp.name_es,
      price_cents:    cents,
      description_ca: editExp.description_ca,
      description_es: editExp.description_es,
    };

    var editId = editExp.id;
    setItems(function (prev) { return prev.map(function (x) { return x.id === editId ? Object.assign({}, x, patch) : x; }); });
    setEditExp(null);

    var res = await window.SB.from("experiences").update(patch).eq("id", editId);
    if (res.error) {
      console.error("[Experiences] saveExp:", res.error);
      window.SVX.toast(tr("Error desant", "Error al guardar"), "error");
      loadItems();
    } else {
      window.SVX.toast(tr("Desat", "Guardado"), "success");
    }
  }

  function ef(key, value) {
    setEditExp(function (prev) { return Object.assign({}, prev, { [key]: value }); });
  }

  // ── Helpers ──────────────────────────────────────────────────────────────
  function fmtPrice(cents) {
    if (cents == null) return "—";
    return (cents / 100).toFixed(2).replace(".", ",") + " €/pers.";
  }

  function fmtNext(dateStr) {
    if (!dateStr) return tr("Per confirmar", "Por confirmar");
    var d = new Date(dateStr);
    return d.toLocaleDateString(lang === "es" ? "es-ES" : "ca-ES", { weekday: "short", day: "numeric", month: "short" });
  }

  function publicUrl() {
    var slug = clientRef.current ? clientRef.current.slug : "demo";
    return "https://" + slug + ".serviaos.com/#experiencies";
  }

  // ── Render ───────────────────────────────────────────────────────────────
  if (items === null) return (
    <div style={{padding: 32, color: "var(--ink-3)", fontSize: 14}}>—</div>
  );

  var inputStyle = {
    display: "block", width: "100%", padding: "8px 10px", border: "1px solid var(--line)",
    borderRadius: 6, fontSize: 14, fontFamily: "inherit", marginTop: 4, boxSizing: "border-box",
  };
  var labelStyle = { display: "block", fontSize: 13, color: "var(--ink-2)", marginBottom: 12 };

  return (
    <div>
      <header className="srv-page-head">
        <div>
          <h1 className="t-h1">{t.title}</h1>
          <p style={{margin: "8px 0 0", color: "var(--ink-2)", fontSize: 15}}>{t.sub}</p>
        </div>
      </header>

      {items.length === 0 && (
        <p style={{color: "var(--ink-3)", fontSize: 15, marginTop: 24}}>
          {tr("No hi ha experiències configurades.", "No hay experiencias configuradas.")}
        </p>
      )}

      <div className="exp-grid">
        {items.map(function (exp) {
          var on          = exp.active;
          var displayName = lang === "es" ? (exp.name_es || exp.name_ca) : (exp.name_ca || exp.name_es);
          var displayDesc = lang === "es" ? (exp.description_es || exp.description_ca) : (exp.description_ca || exp.description_es);

          return (
            <article key={exp.id} className={"exp-card " + (on ? "" : "paused")}>
              <div className="exp-img" style={{background: "linear-gradient(135deg, " + (exp.color_hex || "#7D2A2E") + ", " + (exp.color_hex || "#7D2A2E") + "CC)"}}>
                <span className={"exp-state " + (on ? "on" : "off")}><span className="dot"></span>{on ? t.onS : t.offS}</span>
                <span className="exp-price">{fmtPrice(exp.price_cents)}</span>
              </div>
              <div className="exp-body">
                <h3 className="exp-name t-h2">{displayName || "—"}</h3>
                <p className="exp-desc">{displayDesc || "—"}</p>
                <div className="exp-meta">
                  <span className="eyebrow">{t.bookings}<br/><span style={{fontSize: 13, color: "var(--ink)", letterSpacing: 0, textTransform: "none", fontWeight: 500, fontFamily: "var(--font-serif)"}}>{exp.bookings_count || 0} {tr("reserves", "reservas")}</span></span>
                  <span className="eyebrow" style={{textAlign: "right"}}>{t.next}<br/><span style={{fontSize: 13, color: "var(--ink)", letterSpacing: 0, textTransform: "none", fontWeight: 500, fontFamily: "var(--font-serif)"}}>{fmtNext(exp.next_date)}</span></span>
                </div>
                <div className="exp-actions">
                  <button className={"toggle " + (on ? "on" : "")} onClick={function () { toggle(exp); }} aria-label="toggle"><span className="thumb"></span></button>
                  <span style={{fontSize: 13, color: "var(--ink-2)"}}>{on ? t.onS : t.offS}</span>
                  <button className="btn ghost small" onClick={function () { openEdit(exp); }}>{t.cfg}</button>
                  <a
                    className="btn ghost small"
                    href={publicUrl()}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{textDecoration: "none", marginLeft: 4}}
                  >{tr("Veure landing", "Ver landing")}</a>
                </div>
              </div>
            </article>
          );
        })}
      </div>

      {editExp && (
        <div
          style={{position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 200}}
          onClick={function (e) { if (e.target === e.currentTarget) setEditExp(null); }}
        >
          <div style={{background: "var(--paper)", borderRadius: 12, padding: 24, width: "90%", maxWidth: 480, maxHeight: "90vh", overflowY: "auto", boxShadow: "0 8px 30px rgba(0,0,0,0.12)"}}>
            <h2 className="t-h2" style={{marginBottom: 16}}>{t.cfg}</h2>
            <form onSubmit={saveExp}>
              <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
                <label style={labelStyle}>
                  {tr("Nom (CA)", "Nombre (CA)")}
                  <input value={editExp.name_ca} onChange={function (e) { ef("name_ca", e.target.value); }} style={inputStyle} />
                </label>
                <label style={labelStyle}>
                  {tr("Nom (ES)", "Nombre (ES)")}
                  <input value={editExp.name_es} onChange={function (e) { ef("name_es", e.target.value); }} style={inputStyle} />
                </label>
              </div>
              <label style={labelStyle}>
                {tr("Preu per persona (€)", "Precio por persona (€)")}
                <input value={editExp.price} onChange={function (e) { ef("price", e.target.value); }} style={inputStyle} />
              </label>
              <label style={labelStyle}>
                {tr("Descripció (CA)", "Descripción (CA)")}
                <textarea rows="3" value={editExp.description_ca} onChange={function (e) { ef("description_ca", e.target.value); }} style={Object.assign({}, inputStyle, {resize: "vertical"})} />
              </label>
              <label style={labelStyle}>
                {tr("Descripció (ES)", "Descripción (ES)")}
                <textarea rows="3" value={editExp.description_es} onChange={function (e) { ef("description_es", e.target.value); }} style={Object.assign({}, inputStyle, {resize: "vertical"})} />
              </label>
              <div style={{display: "flex", gap: 8, marginTop: 16}}>
                <button type="submit" className="btn primary">{tr("Desar", "Guardar")}</button>
                <button type="button" className="btn ghost" onClick={function () { setEditExp(null); }}>{tr("Cancel·lar", "Cancelar")}</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

window.Experiences = Experiences;