/* global React, ReactDOM, qrcode */
// Agendamento no ar: mesma página aprovada, com links, horários, reservas e Pix vindos de api.php.
const DS = window.AdrianoBarbozaDesignSystem_6f93c0;
const AG = window.AG;
const { NOW, T, PAISES, BY_CODE } = AG;
AG.previa = /[?&]previa=1/.test(location.search);
// Prévia dentro do painel: o editor manda a configuração por mensagem e nada é gravado.
function agPrevHorarios(l, de, ate) {
  const out = { dias: {}, cheios: [] }, min = Date.now() + (+l.antecedencia || 0) * 36e5, max = Date.now() + (+l.janela || 90) * 864e5, dur = +l.dur || 60, passo = +l.passo || 30;
  for (let d = new Date(de + "T00:00:00"); AG.ymd(d) <= ate; d.setDate(d.getDate() + 1)) {
    const livres = [];
    ((l.horarios || {})[String(d.getDay())] || []).forEach(([a, b]) => {
      const am = +a.slice(0, 2) * 60 + +a.slice(3, 5), bm = +b.slice(0, 2) * 60 + +b.slice(3, 5);
      for (let t = am; t + dur <= bm; t += passo) { const ts = new Date(d.getFullYear(), d.getMonth(), d.getDate(), Math.floor(t / 60), t % 60); if (ts >= min && ts <= max) livres.push(AG.pad(Math.floor(t / 60)) + ":" + AG.pad(t % 60)); }
    });
    if (livres.length) out.dias[AG.ymd(d)] = livres;
  }
  return out;
}
async function agMock(acao, params, body) {
  const l = AG.prevLink || {};
  await new Promise((ok) => setTimeout(ok, 150));
  if (acao === "horarios") return agPrevHorarios(l, params.de, params.ate);
  if (acao === "reservar") {
    const total = (+l.preco || 0) * Math.max(1, (body.horarios || []).length), pix = total > 0 && l.exigirPix !== false;
    return { ok: true, status: pix ? "aguardando_pix" : "confirmado", token: "previa", credito: 0, pix: pix ? { codigo: "00020126580014br.gov.bcb.pix0136PREVIA-NADA-E-COBRADO5204000053039865406" + total.toFixed(2) + "5802BR6304PREV", valor: total, txid: "PREVIA", expira: Math.floor(Date.now() / 1000) + 7200 } : null };
  }
  if (acao === "verificar_form") return { feito: false };
  return { ok: true };
}
const agApiReal = async (acao, params, body) => {
  const r = await fetch("api.php?acao=" + acao + (params ? "&" + new URLSearchParams(params) : ""), body ? { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) } : undefined);
  const j = await r.json().catch(() => ({}));
  if (!r.ok) throw Object.assign(new Error(j.erro || "Erro " + r.status), { code: r.status });
  return j;
};
const agApi = (acao, params, body) => AG.previa ? agMock(acao, params, body) : agApiReal(acao, params, body);
const agQr = (s) => { try { const q = qrcode(0, "M"); q.addData(s); q.make(); return q.createSvgTag({ cellSize: 4, margin: 2, scalable: true }); } catch (e) { return ""; } };

// Field overrides on top of DS.Input: 10px radius, 16px text (no iOS zoom),
// 48px min height for touch, and a slightly stronger hairline on off-white.
const agInput = { borderRadius: 10, fontSize: 16, minHeight: 48, borderColor: "rgba(0,0,0,0.28)" };


function AgCTA({ children, disabled = false, style = {}, ...rest }) {
  return (
    <DS.Button variant="accent" size="lg" disabled={disabled}
      style={{ background: "var(--salmon)", borderColor: "var(--salmon)", color: "var(--black)", borderRadius: 10, ...style }}
      onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.background = "var(--yellow)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "var(--salmon)"; e.currentTarget.style.transform = "scale(1)"; }}
      {...rest}>{children}</DS.Button>
  );
}
function AgGhost({ children, style = {}, ...rest }) {
  return <DS.Button variant="secondary" size="lg" style={{ borderRadius: 10, ...style }} {...rest}>{children}</DS.Button>;
}

function IconLock() {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0, marginTop: 2 }}>
    <rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>);
}
function IconClock() {
  return (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ flexShrink: 0 }}>
    <circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>);
}
const IconCheck = ({ s = 14 }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" /></svg>
);

// Thin progress line between step numbers; the current number fills black.
const STEP_ORDER = { escolher: 0, dados: 1, pagar: 2, expirou: 2, feito: 3 };
function Steps({ L, step, pago }) {
  const labels = pago ? L.etapas4 : L.etapas3;
  const idx = pago ? STEP_ORDER[step] : ({ escolher: 0, dados: 1, expirou: 1, pagar: 1, feito: 2 })[step];
  const n = labels.length;
  return (
    <ol className="ag-steps" aria-label={L.stepsAria} style={{ gridTemplateColumns: "repeat(" + n + ", minmax(0,1fr))" }}>
      <span className="ag-steps-track" aria-hidden="true" style={{ left: 100 / n / 2 + "%", right: 100 / n / 2 + "%" }}>
        <i style={{ width: (idx / (n - 1)) * 100 + "%" }}></i>
      </span>
      {labels.map((l, i) => (
        <li key={l} className={i < idx ? "done" : i === idx ? "cur" : ""} aria-current={i === idx ? "step" : undefined}>
          <span className="n" key={i === idx ? "c" + idx : "n"}>{i < idx ? <IconCheck /> : i + 1}</span>
          <span className="l">{l}</span>
        </li>
      ))}
    </ol>
  );
}

// Height-animated disclosure; content is inert while closed.
function Collapse({ open, children }) {
  return (
    <div className={"ag-col" + (open ? " open" : "")} {...(open ? {} : { inert: "" })} aria-hidden={!open}>
      <div className="ag-col-in">{children}</div>
    </div>
  );
}
function OptBtn({ open, onClick, children }) {
  return (
    <button type="button" className="ag-optbtn" aria-expanded={open} onClick={onClick}>
      <span className="plus" aria-hidden="true">+</span>{children}
    </button>
  );
}

function FlagBR() {
  return (<svg width="18" height="13" viewBox="0 0 28 20" aria-hidden="true" style={{ display: "block", borderRadius: 2 }}>
    <rect width="28" height="20" fill="#009B3A" /><polygon points="14,2 26,10 14,18 2,10" fill="#FEDF00" />
    <circle cx="14" cy="10" r="4.2" fill="#002776" /></svg>);
}
function FlagUK() {
  return (<svg width="18" height="13" viewBox="0 0 60 40" aria-hidden="true" style={{ display: "block", borderRadius: 2 }}>
    <rect width="60" height="40" fill="#012169" /><path d="M0,0 60,40 M60,0 0,40" stroke="#fff" strokeWidth="8" />
    <path d="M0,0 60,40 M60,0 0,40" stroke="#C8102E" strokeWidth="4" /><path d="M30,0 V40 M0,20 H60" stroke="#fff" strokeWidth="13" />
    <path d="M30,0 V40 M0,20 H60" stroke="#C8102E" strokeWidth="7" /></svg>);
}
function LangSwitch({ lang, setLang }) {
  return (
    <div className="ag-lang" role="group" aria-label="Idioma / Language">
      <button type="button" aria-pressed={lang === "pt"} className={lang === "pt" ? "on" : ""} onClick={() => setLang("pt")}><FlagBR />PT</button>
      <button type="button" aria-pressed={lang === "en"} className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}><FlagUK />EN</button>
    </div>
  );
}

// Slot time in the visitor's zone, with Brasília in parentheses when they differ.
function useZone(lang, fuso) {
  const tz = fuso === "lisboa" ? "Europe/Lisbon"
    : (() => { try { return Intl.DateTimeFormat().resolvedOptions().timeZone || "America/Sao_Paulo"; } catch (e) { return "America/Sao_Paulo"; } })();
  const isBRT = AG.sameAsBRT(tz);
  const locale = lang === "en" ? "en-GB" : "pt-BR";
  const label = (day, s) => {
    if (isBRT) return { main: AG.fmtHora(s), brt: null, shift: 0 };
    const z = AG.inZone(day, s, tz, locale);
    return { main: z.hm, brt: AG.fmtHora(s), shift: z.shift };
  };
  return { tz, isBRT, label, tzName: tz.replace(/_/g, " ") };
}

function Calendar({ L, month, setMonth, day, setDay, dur }) {
  const first = new Date(month.getFullYear(), month.getMonth(), 1);
  const days = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < first.getDay(); i++) cells.push(null);
  for (let i = 1; i <= days; i++) cells.push(new Date(month.getFullYear(), month.getMonth(), i));
  const atStart = month.getFullYear() === NOW.getFullYear() && month.getMonth() === NOW.getMonth();
  const lim = AG.limite || new Date(NOW.getFullYear(), NOW.getMonth() + 3, 0);
  const atEnd = month.getFullYear() * 12 + month.getMonth() >= lim.getFullYear() * 12 + lim.getMonth();
  const fdia = (d) => L.dia(d, L.meses, L.dowL);
  return (
    <div>
      <div className="ag-cal-head">
        <h2>{L.meses[month.getMonth()]} {month.getFullYear()}</h2>
        <div className="ag-nav">
          <button type="button" aria-label={L.prev} disabled={atStart} onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}>‹</button>
          <button type="button" aria-label={L.next} disabled={atEnd} onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}>›</button>
        </div>
      </div>
      <div key={month.getFullYear() + "-" + month.getMonth()} className="ag-grid ag-fade" role="grid" aria-label={L.diasLivres}>
        {L.dow.map((d) => <div key={d} className="ag-dow" role="columnheader">{d}</div>)}
        {cells.map((d, i) => {
          if (!d) return <div key={"x" + i} className="ag-day out" aria-hidden="true"></div>;
          const n = AG.slotsFor(d, dur).length;
          const full = AG.isFull(d, dur);
          const on = AG.sameDay(d, day);
          return (
            <button key={i} type="button" disabled={n === 0 && !full} aria-pressed={on}
              aria-label={fdia(d) + ", " + (n ? L.nLivres(n) : full ? L.lotado : L.semHor)}
              className={"ag-day" + (n ? " has" : "") + (full ? " full" : "") + (on ? " on" : "")}
              onClick={() => setDay(d)}>{d.getDate()}</button>
          );
        })}
      </div>
      <ul className="ag-legend" aria-label="Legenda">
        <li><span className="sw has" aria-hidden="true">8</span>{L.legLivre}</li>
        <li><span className="sw full" aria-hidden="true">8</span>{L.legLotado}</li>
        <li><span className="sw none" aria-hidden="true">8</span>{L.legSem}</li>
      </ul>
    </div>
  );
}

function PhoneField({ L, lang, value, setValue, country, setCountry, error }) {
  const isBR = country === "BR";
  const onType = (e) => {
    const raw = e.target.value;
    if (/^\s*\+/.test(raw)) {
      const digits = raw.replace(/\D/g, "");
      const hit = BY_CODE.find((p) => digits.startsWith(p[3]));
      if (hit) { setCountry(hit[0]); const rest = digits.slice(hit[3].length); setValue(hit[0] === "BR" ? AG.maskBR(rest) : AG.maskIntl(rest)); return; }
      setValue("+" + digits); return;
    }
    const d = raw.replace(/\D/g, "");
    setValue(isBR ? AG.maskBR(d) : AG.maskIntl(d));
  };
  return (
    <DS.Field label={L.tel} htmlFor="ag-tel" error={error} hint={error ? undefined : L.telHint}>
      <div className="ag-phone">
        <select aria-label={L.pais} value={country} onChange={(e) => { setCountry(e.target.value); setValue(""); }}>
          {PAISES.map((p) => <option key={p[0]} value={p[0]}>{p[0]} +{p[3]} · {lang === "en" ? p[2] : p[1]}</option>)}
        </select>
        <DS.Input id="ag-tel" type="tel" inputMode="tel" autoComplete="tel-national" value={value} onChange={onType}
          placeholder={isBR ? "(82) 99999-9999" : "000 000 0000"} invalid={!!error} aria-invalid={!!error} style={agInput} />
      </div>
    </DS.Field>
  );
}

const URL_OK = (u) => /^https:\/\/\S+\.\S+/.test(u.trim());
function MatInputs({ L, url, desc, setUrl, setDesc, bad, idp }) {
  const svc = url.trim() ? AG.svcName(url) : null;
  return (
    <div className="ag-mat-inputs">
      <DS.Input id={idp + "-u"} type="url" inputMode="url" value={url} onChange={(e) => setUrl(e.target.value)}
        placeholder="https://" aria-label={L.mat} invalid={bad} aria-invalid={bad} style={agInput} />
      <DS.Input id={idp + "-d"} type="text" value={desc} onChange={(e) => setDesc(e.target.value)}
        placeholder={L.matDesc} aria-label={L.matDesc} style={agInput} />
      {bad ? <span className="ag-err" role="alert">{L.e.url}</span> : svc ? <span className="ag-svc">{svc}</span> : null}
    </div>
  );
}
// Typed links become numbered blocks when added; each block can be edited or removed.
function MaterialsField({ L, items, setItems, draft, setDraft, tried }) {
  const [edit, setEdit] = React.useState(null); // { i, url, desc }
  const [draftBad, setDraftBad] = React.useState(false);
  const add = () => {
    if (!URL_OK(draft.url)) { setDraftBad(true); return; }
    setItems([...items, { url: draft.url.trim(), desc: draft.desc.trim() }]);
    setDraft({ url: "", desc: "" }); setDraftBad(false);
  };
  const editBad = edit && !URL_OK(edit.url);
  return (
    <fieldset className="ag-box">
      <legend>{L.mat} <span>· {L.matOpt}</span></legend>
      <p className="ag-hint">{L.matHint}</p>
      {items.length ? (
        <ol className="ag-links">
          {items.map((it, i) => (
            <li key={i} className="ag-link">
              <div className="ag-link-head">
                <span className="ag-link-n">{L.linkN(i + 1)}</span>
                {AG.svcName(it.url) ? <span className="ag-svc">{AG.svcName(it.url)}</span> : null}
              </div>
              {edit && edit.i === i ? (
                <React.Fragment>
                  <MatInputs L={L} idp={"ag-edit-" + i} url={edit.url} desc={edit.desc} bad={editBad && edit.url.trim() !== ""}
                    setUrl={(v) => setEdit({ ...edit, url: v })} setDesc={(v) => setEdit({ ...edit, desc: v })} />
                  <div className="ag-link-actions">
                    <button type="button" className="ag-mini on" disabled={editBad}
                      onClick={() => { setItems(items.map((x, j) => (j === i ? { url: edit.url.trim(), desc: edit.desc.trim() } : x))); setEdit(null); }}>{L.salvar}</button>
                    <button type="button" className="ag-mini" onClick={() => setEdit(null)}>{L.cancelarEd}</button>
                  </div>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  {it.desc ? <p className="ag-link-desc">{it.desc}</p> : null}
                  <a className="ag-link-url" href={it.url} target="_blank" rel="noopener noreferrer">{it.url}</a>
                  <div className="ag-link-actions">
                    <button type="button" className="ag-mini" onClick={() => setEdit({ i, url: it.url, desc: it.desc })}>{L.editar}</button>
                    <button type="button" className="ag-mini" onClick={() => { setItems(items.filter((_, j) => j !== i)); setEdit(null); }}>{L.remover}</button>
                  </div>
                </React.Fragment>
              )}
            </li>
          ))}
        </ol>
      ) : null}
      {items.length < 5 ? (
        <div className="ag-link-draft">
          <MatInputs L={L} idp="ag-draft" url={draft.url} desc={draft.desc} bad={draftBad || (tried && draft.url.trim() !== "")}
            setUrl={(v) => { setDraft({ ...draft, url: v }); setDraftBad(false); }} setDesc={(v) => setDraft({ ...draft, desc: v })} />
          {tried && draft.url.trim() && !draftBad ? <span className="ag-err" role="alert">{L.linkPend}</span> : null}
          <button type="button" className="ag-add" onClick={add}>+ {L.matAdd}</button>
        </div>
      ) : <span className="ag-hint">{L.matMax}</span>}
    </fieldset>
  );
}

function GuestsField({ L, guests, setGuests }) {
  const [v, setV] = React.useState("");
  const [err, setErr] = React.useState("");
  const add = () => {
    const e = v.trim();
    if (!e) return;
    if (!/^\S+@\S+\.\S+$/.test(e)) { setErr(L.convErr); return; }
    if (guests.indexOf(e) === -1 && guests.length < 5) setGuests([...guests, e]);
    setV(""); setErr("");
  };
  return (
    <fieldset className="ag-box">
      <legend>{L.conv} <span>· {L.matOpt}</span></legend>
      <p className="ag-hint">{L.convHint}</p>
      {guests.length ? (
        <ul className="ag-chips">
          {guests.map((g) => (
            <li key={g}><span>{g}</span><button type="button" aria-label={L.convRem(g)} onClick={() => setGuests(guests.filter((x) => x !== g))}>×</button></li>
          ))}
        </ul>
      ) : null}
      {guests.length < 5 ? (
        <div className="ag-inline">
          <DS.Input type="email" value={v} onChange={(e) => { setV(e.target.value); setErr(""); }}
            onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
            placeholder="nome@exemplo.com" aria-label={L.conv} invalid={!!err} style={agInput} />
          <AgGhost type="button" onClick={add}>{L.convAdd}</AgGhost>
        </div>
      ) : null}
      {err ? <span className="ag-err" role="alert">{err}</span> : null}
    </fieldset>
  );
}

function RecurrenceField({ L, cfg, rep, setRep, day, slot, zone, tried }) {
  const freqs = cfg.recorrencia.freqs;
  const list = rep.on ? AG.series(day, slot, rep.freq, rep.qtd, cfg.dur) : [];
  const decide = (i, v) => setRep({ ...rep, dec: { ...rep.dec, [i]: v } });
  const reset = (patch) => setRep({ ...rep, ...patch, dec: {} });
  const pend = list.some((it, i) => it.status === "ajustado" && !rep.dec[i]);
  return (
    <fieldset className="ag-box">
      <legend>{L.rep}</legend>
      {rep.on ? (
        <React.Fragment>
          <div className="ag-inline">
            <div className="ag-seg" role="group" aria-label={L.repFreq}>
              {freqs.map((fq) => (
                <button key={fq} type="button" aria-pressed={rep.freq === fq} className={rep.freq === fq ? "on" : ""}
                  onClick={() => reset({ freq: fq })}>{L.freq[fq]}</button>
              ))}
            </div>
            <label className="ag-qtd">
              <span>{L.repQtd}</span>
              <select value={rep.qtd} onChange={(e) => reset({ qtd: +e.target.value })}>
                {Array.from({ length: cfg.recorrencia.max - 1 }, (_, i) => i + 2).map((n) => <option key={n} value={n}>{n}</option>)}
              </select>
            </label>
          </div>
          <ol className="ag-series">
            {list.map((it, i) => {
              const z = it.s ? zone.label(it.d, it.s) : null;
              const dec = rep.dec[i];
              let right;
              if (it.status === "ok") right = <span>{z.main} · {L.repOk}</span>;
              else if (it.status === "sem" || dec === "nao") right = <span className="sem">{L.repSem}</span>;
              else if (dec === "sim") right = <span className="aceito">{z.main} · {L.repOk}</span>;
              else right = (
                <span className="ag-sug">
                  <em>{L.sugestao(z.main)}</em>
                  <button type="button" className="ag-mini on" onClick={() => decide(i, "sim")}>{L.aceitar(z.main)}</button>
                  <button type="button" className="ag-mini" onClick={() => decide(i, "nao")}>{L.recusar}</button>
                </span>
              );
              return (<li key={i}><span>{L.diaCurto(it.d, L.meses)}</span>{right}</li>);
            })}
          </ol>
          {tried && pend ? <span className="ag-err" role="alert">{L.repPend}</span> : null}
        </React.Fragment>
      ) : null}
    </fieldset>
  );
}

// Collapsed by default: a count + progress, and a toggle to show each item.
function PendingPanel({ L, lang, st, setSt, modo }) {
  const p = AG.PESSOAL;
  const total = p.formularios.length + p.tarefas.length;
  const feitos = p.formularios.filter((f) => st.forms[f.id]).length + p.tarefas.filter((_, i) => st.tasks[i]).length;
  const pend = total - feitos;
  const formsOpen = p.formularios.some((f) => !st.forms[f.id]);
  const upd = (k, v) => setSt({ ...st, [k]: { ...st[k], ...v } });
  // Preview: the first check finds nothing (form not sent yet); the second
  // finds the response. In production this reads the Forms response sheet.
  const check = async (id) => { try { const j = await agApi("verificar_form", null, { slug: AG.slug, p: AG.p, id }); if (j.feito) upd("forms", { [id]: true }); else upd("miss", { [id]: true }); } catch (e) { upd("miss", { [id]: true }); } };
  return (
    <section className="ag-pend" aria-label={L.pend}>
      <div className="ag-pend-bar">
        <div className="ag-pend-sum">
          <span className="ag-k">{L.ola(p.nome)} · {p.projeto[lang]}</span>
          <b>{pend ? L.pendDetect(pend) : L.nenhumaPend}</b>
          <span className="ag-prog" aria-hidden="true"><i style={{ width: (feitos / total * 100) + "%" }}></i></span>
          <small>{L.progresso(feitos, total)}</small>
        </div>
        <button type="button" className="ag-mini" aria-expanded={st.aberto} aria-controls="ag-pend-list"
          onClick={() => setSt({ ...st, aberto: !st.aberto })}>{st.aberto ? L.ocultar : L.mostrar}</button>
      </div>
      {st.aberto ? (
        <div id="ag-pend-list">
          <div className="ag-pend-grp">{L.forms}</div>
          <ul>
            {p.formularios.map((f) => (
              <li key={f.id} className={st.forms[f.id] ? "ok" : ""}>
                <span className="ag-pend-t">{f.titulo[lang]}{!st.forms[f.id] && st.miss[f.id] ? <small>{L.verificando}</small> : null}</span>
                {st.forms[f.id] ? <span className="ag-tag ok">{L.feitoForm}</span> : (
                  <span className="ag-pend-acts">
                    <a href={f.url} target="_blank" rel="noopener noreferrer" className="ag-tag">{L.abrir} ↗</a>
                    <button type="button" className="ag-tag" onClick={() => check(f.id)}>{L.verificarItem}</button>
                  </span>
                )}
              </li>
            ))}
          </ul>
          <div className="ag-pend-grp">{L.tarefas}</div>
          <ul>
            {p.tarefas.map((t, i) => (
              <li key={i} className={st.tasks[i] ? "ok" : ""}>
                <span className="ag-pend-t">{t.titulo[lang]}<small>{t.prazo[lang]}</small></span>
                <button type="button" className={"ag-tag" + (st.tasks[i] ? " ok" : "")} onClick={() => { const v = !st.tasks[i]; upd("tasks", { [i]: v }); agApi("tarefa_feita", null, { slug: AG.slug, p: AG.p, id: t.id, feita: v }).catch(() => {}); }}>
                  {st.tasks[i] ? L.tarefaFeita : L.marcarFeito}
                </button>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
      {formsOpen ? <p className="ag-pend-note">{modo === "exige" ? L.bloqueado : L.lembretePend}</p> : null}
    </section>
  );
}

function Payment({ L, preco, pix, onPaid, onExpire }) {
  const [until] = React.useState(() => pix.expira * 1000);
  const [now, setNow] = React.useState(Date.now());
  const [copied, setCopied] = React.useState(false);
  React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []);
  const left = Math.max(0, until - now);
  React.useEffect(() => { if (left === 0) onExpire(); }, [left === 0]);
  const hh = Math.floor(left / 3600e3), mm = Math.floor((left % 3600e3) / 60e3), ss = Math.floor((left % 60e3) / 1e3);
  const code = pix.codigo;
  const copy = () => { try { navigator.clipboard.writeText(code); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 2000); };
  const pct = left / (2 * 3600e3);
  return (
    <div className="ag-pay">
      <div className="ag-pay-head">
        <h2>{L.pagTit}</h2>
        <div className="ag-timer" role="timer" aria-live="off" aria-label={L.restam}>
          <span className="ag-k">{L.restam}</span>
          <span className="ag-clock">{hh}:{AG.pad(mm)}:{AG.pad(ss)}</span>
          <span className="ag-bar" aria-hidden="true"><i style={{ width: (pct * 100).toFixed(2) + "%" }}></i></span>
        </div>
      </div>
      <p>{L.pagTxt}</p>
      <div className="ag-pay-grid">
        <div className="ag-qr" role="img" aria-label={L.qr} dangerouslySetInnerHTML={{ __html: agQr(code) }}></div>
        <div className="ag-pay-side">
          <div><span className="ag-k">{L.valorPag}</span><span className="ag-amount">R$ {preco.toFixed(2).replace(".", ",")}</span><small>{L.idPix}: {pix.txid}</small></div>
          <div className="ag-copy">
            <span className="ag-k">{L.copia}</span>
            <code>{code}</code>
            <AgGhost type="button" onClick={copy}>{copied ? L.copiado : L.copiar}</AgGhost>
          </div>
        </div>
      </div>
      <div className="ag-actions"><AgCTA type="button" onClick={onPaid}>{L.jaPaguei}</AgCTA></div>
    </div>
  );
}

function App({ t, cfgL, oferta }) {
  const [lang, setLang] = React.useState(() => {
    try { const q = new URLSearchParams(location.search).get("lang"); if (q === "en" || q === "pt") return q; } catch (e) {}
    if (AG.previa) return "pt";
    return (navigator.language || "pt").toLowerCase().startsWith("pt") ? "pt" : "en";
  });
  const L = T[lang];
  const cfg = cfgL;
  const zone = useZone(lang, t.fuso);
  const titulo = (t.titulo || "").trim() || cfg.titulo[lang];
  const subtitulo = (t.subtitulo || "").trim() || cfg.sub[lang];
  const presencial = cfg.sala === "presencial";
  const preco = t.pago && cfg.preco ? cfg.preco : 0;
  const fdia = (d) => L.dia(d, L.meses, L.dowL);

  React.useEffect(() => { document.documentElement.lang = lang === "en" ? "en" : "pt-BR"; }, [lang]);

  const [tick, setTick] = React.useState(0);
  const [res, setRes] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const [erroEnv, setErroEnv] = React.useState("");
  const firstAvail = React.useMemo(() => {
    for (let i = 0; i < 60; i++) { const d = new Date(NOW.getFullYear(), NOW.getMonth(), NOW.getDate() + i); if (AG.slotsFor(d, cfg.dur).length) return d; }
    return null;
  }, [cfg.dur, tick]);
  const [month, setMonth] = React.useState(new Date(NOW.getFullYear(), NOW.getMonth(), 1));
  const [day, setDay] = React.useState(firstAvail);
  const [slot, setSlot] = React.useState(null);
  const [step, setStep] = React.useState("escolher");
  React.useEffect(() => { AG.onUpdate = () => setTick((x) => x + 1); }, []);
  React.useEffect(() => {
    const a = new Date(month.getFullYear(), month.getMonth(), 1), b = new Date(month.getFullYear(), month.getMonth() + 1, 0), k = AG.ymd(a);
    if (AG.carregados[k]) return; AG.carregados[k] = 1;
    agApi("horarios", { l: AG.slug, de: AG.ymd(a), ate: AG.ymd(b), ...(AG.o ? { o: AG.o } : {}) })
      .then((j) => { Object.assign(AG.AVAIL.dias, j.dias || {}); AG.AVAIL.cheios = AG.AVAIL.cheios.concat(j.cheios || []); setTick((x) => x + 1); })
      .catch(() => { AG.carregados[k] = 0; });
  }, [month, tick === -1]);
  const [f, setF] = React.useState({ nome: (oferta && oferta.nome) || (AG.PESSOAL && AG.PESSOAL.nome) || "", email: (oferta && oferta.email) || (cfgL.pessoal && cfgL.pessoal.email) || "", tel: "", assunto: "", endereco: "", cliente: (cfgL.clientes || []).length === 1 ? cfgL.clientes[0] : "", wpp: true, lgpd: false });
  const [pais, setPais] = React.useState("BR");
  const [mats, setMats] = React.useState([]);
  const [matDraft, setMatDraft] = React.useState({ url: "", desc: "" });
  const [guests, setGuests] = React.useState([]);
  const [rep, setRep] = React.useState({ on: false, freq: "semanal", qtd: 4, dec: {} });
  const [pendSt, setPendSt] = React.useState({ forms: AG.PESSOAL ? Object.fromEntries(AG.PESSOAL.formularios.filter((x) => x.feito).map((x) => [x.id, true])) : {}, tasks: {}, miss: {}, aberto: false });
  const formsDone = pendSt.forms;
  const [espera, setEspera] = React.useState(null);
  const [paid, setPaid] = React.useState(false);
  const [tried, setTried] = React.useState(false);
  const [opt, setOpt] = React.useState({ rep: false, mat: false, conv: false });
  const [maisInfo, setMaisInfo] = React.useState(false);
  const prevStep = React.useRef(step);
  const dir = STEP_ORDER[step] >= STEP_ORDER[prevStep.current] ? "fwd" : "back";
  React.useEffect(() => { prevStep.current = step; }, [step]);

  React.useEffect(() => {
    setDay(firstAvail); setSlot(null); setStep("escolher"); setEspera(null); setPaid(false); setOpt({ rep: false, mat: false, conv: false });
    setRep((r) => ({ ...r, on: false, freq: cfg.recorrencia ? cfg.recorrencia.freqs[0] : "semanal", qtd: 4, dec: {} }));
  }, [t.link]);
  React.useEffect(() => { if (!day && firstAvail && !oferta) setDay(firstAvail); }, [firstAvail]);
  React.useEffect(() => { if (oferta) { const d = new Date(oferta.dia + "T00:00:00"); setMonth(new Date(d.getFullYear(), d.getMonth(), 1)); setDay(d); setSlot({ h: +oferta.hora.slice(0, 2), m: +oferta.hora.slice(3, 5) }); } }, []);

  const pendOpen = t.pessoal && AG.PESSOAL.formularios.some((x) => !formsDone[x.id]);
  const locked = t.pessoal && t.pendModo === "exige" && pendOpen;
  const slots = day ? AG.slotsFor(day, cfg.dur) : [];
  const dayFull = day && AG.isFull(day, cfg.dur);
  const set = (k) => (e) => setF((o) => ({ ...o, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value }));
  const needAddr = presencial && t.localModo === "pessoa";
  const telDigits = f.tel.replace(/\D/g, "");
  const matsBad = matDraft.url.trim() !== ""; // typed but not added yet
  const errs = {
    nome: !f.nome.trim() ? L.e.nome : "",
    email: !/^\S+@\S+\.\S+$/.test(f.email) ? L.e.email : "",
    tel: (pais === "BR" ? telDigits.length < 10 : telDigits.length < 6) ? L.e.tel : "",
    assunto: !f.assunto.trim() ? L.e.assunto : "",
    cliente: (cfg.clientes || []).length && !f.cliente ? L.e.cliente : "",
    endereco: needAddr && !f.endereco.trim() ? L.e.end : "",
    lgpd: !f.lgpd ? L.e.lgpd : "",
  };
  const ok = Object.values(errs).every((x) => !x) && !(cfg.materiais && opt.mat && matsBad) && !(rep.on && cfg.recorrencia && slot && AG.series(day, slot, rep.freq, rep.qtd, cfg.dur).some((x, i) => x.status === "ajustado" && !rep.dec[i]));
  const calLinks = () => {
    const st = new Date(Date.UTC(day.getFullYear(), day.getMonth(), day.getDate(), slot.h + 3, slot.m));
    const en = new Date(st.getTime() + cfg.dur * 60000);
    const z = (x) => x.toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "");
    const text = titulo + " · Adriano Barboza";
    const g = "https://calendar.google.com/calendar/render?action=TEMPLATE&text=" + encodeURIComponent(text) + "&dates=" + z(st) + "/" + z(en) + "&location=" + encodeURIComponent(local);
    const o = "https://outlook.live.com/calendar/0/deeplink/compose?subject=" + encodeURIComponent(text) + "&startdt=" + st.toISOString() + "&enddt=" + en.toISOString() + "&location=" + encodeURIComponent(local);
    const ics = ["BEGIN:VCALENDAR", "VERSION:2.0", "PRODID:-//Adriano Barboza//Agendamento//PT", "BEGIN:VEVENT", "UID:" + z(st) + "@adrianobarboza.com",
      "DTSTAMP:" + z(new Date()), "DTSTART:" + z(st), "DTEND:" + z(en), "SUMMARY:" + text, "LOCATION:" + local, "END:VEVENT", "END:VCALENDAR"].join("\r\n");
    return { g, o, a: "data:text/calendar;charset=utf-8," + encodeURIComponent(ics) };
  };
  const salaTxt = presencial ? (t.localModo === "pessoa" ? L.presPessoa : L.presFixo + " · " + cfg.endereco) : L.sala[cfg.sala];
  const local = presencial ? (t.localModo === "pessoa" ? (f.endereco || L.presPessoa) : cfg.endereco) : L.sala[cfg.sala];
  const mapsUrl = "https://www.google.com/maps/search/?api=1&query=" + encodeURIComponent(f.endereco || "");
  const nMats = mats.length;
  const hora = (d, s) => { const z = zone.label(d, s); return z.main + (z.shift ? " (" + (z.shift > 0 ? L.diaSeg : L.diaAnt) + ")" : "") + (z.brt ? " · " + z.brt + " " + L.brasilia : ""); };
  const repList = rep.on && cfg.recorrencia && slot ? AG.series(day, slot, rep.freq, rep.qtd, cfg.dur) : [];
  const repN = repList.filter((x, i) => x.status === "ok" || (x.status === "ajustado" && rep.dec[i] === "sim")).length;
  const repPend = repList.some((x, i) => x.status === "ajustado" && !rep.dec[i]);

  const enviar = async () => {
    setBusy(true); setErroEnv("");
    const lista = rep.on && cfg.recorrencia ? repList.map((x, i) => x.s && (x.status === "ok" || (x.status === "ajustado" && rep.dec[i] === "sim")) ? { dia: AG.ymd(x.d), hora: AG.fmtHora(x.s) } : null).filter(Boolean) : [{ dia: AG.ymd(day), hora: AG.fmtHora(slot) }];
    try {
      const tel = f.tel ? "+" + (PAISES.find((p) => p[0] === pais) || ["", "", "", "55"])[3] + " " + f.tel : "";
      const j = await agApi("reservar", null, { slug: AG.slug, p: AG.p || "", oferta: AG.o || "", nome: f.nome, email: f.email, tel, wpp: f.wpp, cliente: f.cliente, pauta: f.assunto, endereco: f.endereco, lgpd: f.lgpd, lang,
        materiais: opt.mat ? mats : [], convidados: opt.conv ? guests : [], horarios: lista });
      setRes(j); setStep(j.status === "aguardando_pix" ? "pagar" : "feito");
    } catch (e) {
      setErroEnv(e.message);
      if (e.code === 409) { AG.carregados = {}; AG.AVAIL.dias = {}; AG.AVAIL.cheios = []; setMonth(new Date(month.getTime())); }
    }
    setBusy(false);
  };

  const left = (
    <div className="ag-left">
      <img className="ag-wm" src="assets/symbol-black.png" alt="" aria-hidden="true" />
      <DS.Eyebrow style={{ color: "#4A4A40" }}>{L.eyebrow} · {cfg.dur} {L.min}</DS.Eyebrow>
      <h1 className="ag-h1">{titulo}{subtitulo ? <em>{subtitulo}</em> : null}</h1>
      <p className="ag-compact">{cfg.dur} {L.min} · {salaTxt}{preco ? " · " + L.valorV(preco) : ""}</p>
      <button type="button" className="ag-more-btn" aria-expanded={maisInfo} onClick={() => setMaisInfo(!maisInfo)}>
        <span className="plus" aria-hidden="true">+</span>{maisInfo ? L.ocultarDet : L.detalhes}
      </button>
      <div className={"ag-more" + (maisInfo ? " open" : "")}>
      <p className="ag-lede">{cfg.texto[lang]}</p>
      <ul className="ag-meta">
        <li><span className="ag-k">{L.com}</span><span className="ag-v">Dr. Adriano Barboza, Ph.D., BCBA-D</span></li>
        <li><span className="ag-k">{L.dur}</span><span className="ag-v">{cfg.dur} {L.minutos}</span></li>
        <li><span className="ag-k">{L.local}</span><span className="ag-v">{salaTxt}</span></li>
        {preco ? <li><span className="ag-k">{L.valor}</span><span className="ag-v">{L.valorV(preco)}</span></li> : null}
        <li><span className="ag-k">{L.antecedencia}</span><span className="ag-v">{L.antecedenciaV}</span></li>
        <li><span className="ag-k">{L.cancel}</span><span className="ag-v">{L.cancelV}</span></li>
      </ul>
      </div>
      <div className="ag-sign">
        <img src="assets/symbol-black.png" alt="" />
        <span><b>Adriano Barboza</b> · {L.sign}</span>
      </div>
    </div>
  );

  let right;
  if (step === "escolher") {
    let body;
    if (locked) body = <div className="ag-lock" role="status"><IconLock />{L.bloqueado}</div>;
    else if (dayFull) {
      body = espera && AG.sameDay(espera, day) ? (
        <div className="ag-wait done" role="status"><p>{L.espOk(fdia(day))}</p></div>
      ) : (
        <div className="ag-wait">
          <h3>{L.espTit}</h3>
          <p>{L.espTxt}</p>
          <p>{L.espDados}</p>
          <div className="ag-wait-form">{[["nome", "text", "name"], ["email", "email", "email"]].map(([k, ty, ac]) => <DS.Field key={k} label={L[k]} htmlFor={"ag-w-" + k}><DS.Input id={"ag-w-" + k} type={ty} autoComplete={ac} value={f[k]} onChange={set(k)} style={agInput} /></DS.Field>)}</div>
          {erroEnv ? <span role="alert" className="ag-err">{erroEnv}</span> : null}
          <div className="ag-actions"><AgCTA type="button" disabled={busy} onClick={async () => {
            if (!f.nome.trim()) { setErroEnv(L.e.nome); return; } if (!/^\S+@\S+\.\S+$/.test(f.email)) { setErroEnv(L.e.email); return; }
            setBusy(true); setErroEnv("");
            try { await agApi("espera", null, { slug: AG.slug, dia: AG.ymd(day), nome: f.nome, email: f.email, lang }); setEspera(day); } catch (e) { setErroEnv(e.message); }
            setBusy(false);
          }}>{L.espEntrar}</AgCTA></div>
        </div>
      );
    } else if (day && slots.length) {
      body = (
        <div key={day.toDateString()} className="ag-slots ag-stagger" role="listbox" aria-label={L.horariosLivres}>
          {slots.map((s, i) => {
            const on = slot && slot.h === s.h && slot.m === s.m;
            const z = zone.label(day, s);
            return (
              <button key={AG.fmtHora(s)} type="button" role="option" aria-selected={on} className={"ag-slot" + (on ? " on" : "")} onClick={() => setSlot(s)} style={{ animationDelay: Math.min(i, 14) * 18 + "ms" }}>
                <span>{z.main}{z.shift ? <sup>{z.shift > 0 ? "+1" : "−1"}</sup> : null}</span>
                {z.brt ? <small>{z.brt} {L.brasilia}</small> : null}
              </button>
            );
          })}
        </div>
      );
    } else body = <div className="ag-empty">{L.vazio}</div>;
    right = (
      <div>
        <Calendar L={L} month={month} setMonth={setMonth} day={day} setDay={(d) => { setDay(d); setSlot(null); }} dur={cfg.dur} />
        <div className="ag-tz"><IconClock /><span>{zone.isBRT ? L.tzBRT : L.tzVoce(zone.tzName)}</span></div>
        <p className="ag-janela">{L.janelaTxt(cfg.janela)}</p>
        <div className="ag-slots-h" aria-live="polite">{day ? fdia(day) : L.escolhaDia}</div>
        {locked ? <PendingPanel L={L} lang={lang} st={pendSt} setSt={setPendSt} modo={t.pendModo} /> : null}
        {body}
        {!locked && !dayFull ? (
          <div className="ag-actions ag-sticky">
            <AgCTA type="button" disabled={!slot} onClick={() => setStep("dados")}>
              {slot ? L.continuar(zone.label(day, slot).main) : L.escolhaHor}
            </AgCTA>
          </div>
        ) : null}
      </div>
    );
  } else if (step === "dados") {
    right = (
      <form className="ag-form" noValidate onSubmit={(e) => { e.preventDefault(); setTried(true); if (ok && !busy) enviar(); }}>
        <div className="ag-chosen">
          <span><b>{fdia(day)}</b>, {hora(day, slot)}</span>
          <button type="button" onClick={() => setStep("escolher")}>{L.trocar}</button>
        </div>
        {t.pessoal ? <PendingPanel L={L} lang={lang} st={pendSt} setSt={setPendSt} modo={t.pendModo} /> : null}
        {[["nome", "text", "name"], ["email", "email", "email"]].map(([k, ty, ac]) => (
          <DS.Field key={k} label={L[k]} htmlFor={"ag-" + k} error={tried ? errs[k] || undefined : undefined}>
            <DS.Input id={"ag-" + k} type={ty} autoComplete={ac} value={f[k]} onChange={set(k)}
              invalid={tried && !!errs[k]} aria-invalid={tried && !!errs[k]} style={agInput} />
          </DS.Field>
        ))}
        <PhoneField L={L} lang={lang} value={f.tel} setValue={(v) => setF((o) => ({ ...o, tel: v }))}
          country={pais} setCountry={setPais} error={tried ? errs.tel || undefined : undefined} />
        {(cfg.clientes || []).length ? (
          <DS.Field label={L.cliente} htmlFor="ag-cliente" error={tried ? errs.cliente || undefined : undefined} hint={tried && errs.cliente ? undefined : L.clienteHint}>
            <div className="ag-seg ag-cli" role="radiogroup" aria-label={L.cliente}>
              {cfg.clientes.map((c) => <button key={c} type="button" role="radio" aria-checked={f.cliente === c} className={f.cliente === c ? "on" : ""} onClick={() => setF((o) => ({ ...o, cliente: c }))}>{c}</button>)}
            </div>
          </DS.Field>
        ) : null}
        <DS.Field label={L.assunto} htmlFor="ag-assunto" error={tried ? errs.assunto || undefined : undefined} hint={tried && errs.assunto ? undefined : L.assuntoHint}>
          <textarea id="ag-assunto" className="ag-textarea" value={f.assunto} onChange={set("assunto")}
            aria-invalid={tried && !!errs.assunto} style={{ ...agInput, borderColor: tried && errs.assunto ? "var(--terracotta)" : undefined }} />
        </DS.Field>
        {needAddr ? (
          <DS.Field label={L.end} htmlFor="ag-end" error={tried ? errs.endereco || undefined : undefined}
            hint={f.endereco.trim() ? undefined : L.endHint}>
            <DS.Input id="ag-end" type="text" autoComplete="street-address" value={f.endereco} onChange={set("endereco")}
              placeholder={L.endPh} invalid={tried && !!errs.endereco} style={agInput} />
            {f.endereco.trim() ? <a className="ag-map" href={mapsUrl} target="_blank" rel="noopener noreferrer">{L.mapa} ↗</a> : null}
          </DS.Field>
        ) : null}
        {cfg.recorrencia || cfg.materiais || cfg.convidados ? (
          <div className="ag-opts">
            {cfg.recorrencia ? <OptBtn open={opt.rep} onClick={() => { setOpt({ ...opt, rep: !opt.rep }); setRep({ ...rep, on: !opt.rep, dec: {} }); }}>{L.opRep}</OptBtn> : null}
            {cfg.materiais ? <OptBtn open={opt.mat} onClick={() => setOpt({ ...opt, mat: !opt.mat })}>{L.opMat}{mats.length ? " (" + mats.length + ")" : ""}</OptBtn> : null}
            {cfg.convidados ? <OptBtn open={opt.conv} onClick={() => setOpt({ ...opt, conv: !opt.conv })}>{L.opConv}{guests.length ? " (" + guests.length + ")" : ""}</OptBtn> : null}
          </div>
        ) : null}
        {cfg.recorrencia ? <Collapse open={opt.rep}><RecurrenceField L={L} cfg={cfg} rep={rep} setRep={setRep} day={day} slot={slot} zone={zone} tried={tried} /></Collapse> : null}
        {cfg.materiais ? <Collapse open={opt.mat}><MaterialsField L={L} items={mats} setItems={setMats} draft={matDraft} setDraft={setMatDraft} tried={tried} /></Collapse> : null}
        {cfg.convidados ? <Collapse open={opt.conv}><GuestsField L={L} guests={guests} setGuests={setGuests} /></Collapse> : null}
        <label className="ag-check">
          <input type="checkbox" checked={f.wpp} onChange={set("wpp")} />
          <span>{L.wpp}</span>
        </label>
        <label className="ag-check">
          <input type="checkbox" checked={f.lgpd} onChange={set("lgpd")} aria-invalid={tried && !!errs.lgpd} />
          <span>{L.lgpd1}<a href="#" onClick={(e) => e.preventDefault()}>{L.lgpdLink}</a>{L.lgpd2}</span>
        </label>
        {tried && errs.lgpd ? <span role="alert" className="ag-err">{errs.lgpd}</span> : null}
        {erroEnv ? <span role="alert" className="ag-err">{erroEnv}</span> : null}
        <div className="ag-actions">
          <AgCTA type="submit" disabled={busy}>{busy ? "…" : preco ? L.reservar : L.confirmar}</AgCTA>
          <AgGhost type="button" onClick={() => setStep("escolher")}>{L.voltar}</AgGhost>
        </div>
      </form>
    );
  } else if (step === "pagar") {
    right = <Payment L={L} preco={res.pix.valor} pix={res.pix} onPaid={async () => { try { await agApi("ja_paguei", null, { token: res.token }); } catch (e) {} setPaid(true); setStep("feito"); }} onExpire={() => setStep("expirou")} />;
  } else if (step === "expirou") {
    right = (
      <div className="ag-wait" role="status">
        <h3>{L.expirou}</h3>
        <div className="ag-actions"><AgCTA type="button" onClick={() => { setStep("escolher"); setSlot(null); }}>{L.novoHor}</AgCTA></div>
      </div>
    );
  } else {
    const cl = calLinks();
    right = (
      <div>
        <div className="ag-done" role="status">
          <h2 className="ag-done-h">
            <svg className="ag-check-draw" width="34" height="34" viewBox="0 0 34 34" fill="none" aria-hidden="true">
              <circle cx="17" cy="17" r="15.5" stroke="currentColor" strokeWidth="1.5" />
              <path d="M10 17.5l4.6 4.6L24 12.6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            {paid ? L.reservaFeita : L.feito}
          </h2>
          {paid ? <p>{L.aguardando}</p> : <p>{L.enviadoPara}<b>{f.email || L.seuEmail}</b>{L.feitoTxt(presencial)}</p>}
          <ul>
            <li><span className="ag-k">{L.quando}</span><span className="ag-v">{fdia(day)}, {hora(day, slot)}{repN > 1 ? " · " + L.repResumo(repN) : ""}</span></li>
            <li><span className="ag-k">{L.reuniao}</span><span className="ag-v">{titulo}</span></li>
            {f.cliente ? <li><span className="ag-k">{L.cliente}</span><span className="ag-v">{f.cliente}</span></li> : null}
            <li><span className="ag-k">{L.local}</span><span className="ag-v">{local}</span></li>
            {guests.length ? <li><span className="ag-k">{L.convidados}</span><span className="ag-v">{guests.join(", ")}</span></li> : null}
            {cfg.materiais && nMats ? <li><span className="ag-k">{L.mat}</span><span className="ag-v">{L.materiaisN(nMats)}</span></li> : null}
            {res && res.credito ? <li><span className="ag-k">{L.credito}</span><span className="ag-v">R$ {res.credito.toFixed(2).replace(".", ",")}</span></li> : null}
            {preco && res && res.pix ? <li><span className="ag-k">{L.pagamento}</span><span className="ag-v">R$ {preco.toFixed(2).replace(".", ",")} · {L.statusPag.aguardando}</span></li> : null}
            <li><span className="ag-k">{L.lembretes}</span><span className="ag-v">{L.lembV(f.wpp)}</span></li>
          </ul>
          <div className="ag-addcal">
            <span className="ag-k">{L.addCal}</span>
            <div>
              <a href={cl.g} target="_blank" rel="noopener noreferrer">{L.gcal}</a>
              <a href={cl.a} download="reuniao-adriano-barboza.ics">{L.ical}</a>
              <a href={cl.o} target="_blank" rel="noopener noreferrer">{L.ocal}</a>
            </div>
          </div>
          <p>{L.janelaTxt(cfg.janela)}</p>
          <p>{L.cancelTxt}</p>
        </div>
        <div className="ag-actions">
          <AgGhost type="button" onClick={() => { setStep("escolher"); setSlot(null); setTried(false); setPaid(false); setRes(null); }}>{L.proximos}</AgGhost>
        </div>
      </div>
    );
  }

  return (
    <React.Fragment>
      <header className="ag-top">
        <img src="assets/logo-horizontal-black.png" alt="Adriano Barboza" />
        <LangSwitch lang={lang} setLang={setLang} />
      </header>
      <main className="ag-wrap">
        {left}
        <section aria-label={L.escolhaAria} className="ag-right">
          <Steps L={L} step={step} pago={!!preco} />
          <div key={step} className={"ag-pane" + (dir === "back" ? " back" : "")}>{right}</div>
        </section>
      </main>
      <footer className="ag-foot">
        <span>agendar.adrianobarboza.com</span>
        <span>{L.lgpdFoot} · <a href="#" onClick={(e) => e.preventDefault()}>{L.lgpdLink}</a></span>
      </footer>
    </React.Fragment>
  );
}

function AgFrame({ lang, setLang, children }) {
  const L = T[lang];
  React.useEffect(() => { document.documentElement.lang = lang === "en" ? "en" : "pt-BR"; }, [lang]);
  return (
    <React.Fragment>
      <header className="ag-top"><img src="assets/logo-horizontal-black.png" alt="Adriano Barboza" /><LangSwitch lang={lang} setLang={setLang} /></header>
      <main className="ag-wrap ag-one">{children}</main>
      <footer className="ag-foot"><span>agendar.adrianobarboza.com</span><span>{L.lgpdFoot}</span></footer>
    </React.Fragment>
  );
}
const agLang0 = () => { try { const q = new URLSearchParams(location.search).get("lang"); if (q === "en" || q === "pt") return q; } catch (e) {} return (navigator.language || "pt").toLowerCase().startsWith("pt") ? "pt" : "en"; };

// Página de gerenciar (link do e-mail): cancelar ou remarcar, até 48 h antes.
function Gerenciar({ r, token }) {
  const [lang, setLang] = React.useState(agLang0);
  const L = T[lang];
  const [st, setSt] = React.useState("ver");
  const [erro, setErro] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [, setTick] = React.useState(0);
  const [month, setMonth] = React.useState(new Date(NOW.getFullYear(), NOW.getMonth(), 1));
  const [day, setDay] = React.useState(null);
  const [slot, setSlot] = React.useState(null);
  const tit = r.titulo ? (r.titulo[lang] || r.titulo.pt) : "";
  const ini = new Date(r.inicio * 1000);
  React.useEffect(() => {
    if (st !== "remarcar") return;
    AG.slug = r.slug;
    (async () => {
      try {
        if (!AG.limite) { const c = await agApi("link", { l: r.slug }); AG.limite = new Date(c.limite + "T12:00:00"); }
        const a = new Date(month.getFullYear(), month.getMonth(), 1), b = new Date(month.getFullYear(), month.getMonth() + 1, 0);
        const j = await agApi("horarios", { l: r.slug, de: AG.ymd(a), ate: AG.ymd(b) });
        Object.assign(AG.AVAIL.dias, j.dias || {}); AG.AVAIL.cheios = []; setTick((x) => x + 1);
      } catch (e) { setErro(e.message); }
    })();
  }, [st, month]);
  const acao = async (nome, body, prox) => { setErro(""); setBusy(true); try { await agApi(nome, null, { token, ...body }); setSt(prox); } catch (e) { setErro(e.message); } setBusy(false); };
  const slots = day ? AG.slotsFor(day) : [];
  let corpo;
  if (st === "cancelado" || st === "remarcado") corpo = (
    <div className="ag-done" role="status"><h2>{st === "cancelado" ? L.status.cancelado : L.feito}</h2>
      <p>{st === "cancelado" ? L.gerCancelado : L.gerRemarcado}</p>
      {st === "cancelado" && r.valor > 0 && r.status === "confirmado" ? <p>{L.gerCredito}</p> : null}
      <div className="ag-addcal"><div><a href={r.slug}>{st === "cancelado" ? L.gerAgendar : L.proximos}</a></div></div>
    </div>);
  else if (st === "remarcar") corpo = (
    <div>
      <Calendar L={L} month={month} setMonth={setMonth} day={day} setDay={(d) => { setDay(d); setSlot(null); }} dur={r.dur} />
      <div className="ag-slots-h">{day ? L.dia(day, L.meses, L.dowL) : L.escolhaDia}</div>
      {day && slots.length ? <div className="ag-slots" role="listbox" aria-label={L.horariosLivres}>{slots.map((s) => { const on = slot && slot.h === s.h && slot.m === s.m; return <button key={AG.fmtHora(s)} type="button" role="option" aria-selected={on} className={"ag-slot" + (on ? " on" : "")} onClick={() => setSlot(s)}><span>{AG.fmtHora(s)}</span></button>; })}</div> : day ? <div className="ag-empty">{L.vazio}</div> : null}
      {erro ? <p role="alert" className="ag-err">{erro}</p> : null}
      <div className="ag-actions">
        <AgCTA type="button" disabled={!slot || busy} onClick={() => acao("remarcar", { dia: AG.ymd(day), hora: AG.fmtHora(slot) }, "remarcado")}>{slot ? L.gerNovo : L.escolhaHor}</AgCTA>
        <AgGhost type="button" onClick={() => setSt("ver")}>{L.voltar}</AgGhost>
      </div>
    </div>);
  else corpo = (
    <div>
      <div className="ag-chosen"><span><b>{tit}</b> · {L.dia(ini, L.meses, L.dowL)}, {AG.pad(ini.getHours())}:{AG.pad(ini.getMinutes())} ({L.brasilia})</span><span className="ag-svc">{L.status[r.status] || r.status}</span></div>
      {erro ? <p role="alert" className="ag-err">{erro}</p> : null}
      {r.podeMudar ? (
        <div className="ag-actions">
          <AgCTA type="button" onClick={() => setSt("remarcar")}>{L.gerRemarcar}</AgCTA>
          <AgGhost type="button" disabled={busy} onClick={() => { if (confirm(L.gerConfirmaCancel)) acao("cancelar", {}, "cancelado"); }}>{L.gerCancelar}</AgGhost>
        </div>
      ) : <p className="ag-note">{["confirmado", "pix_informado", "aguardando_pix"].indexOf(r.status) !== -1 ? L.gerSemPrazo : L.gerInativo}</p>}
    </div>);
  return <AgFrame lang={lang} setLang={setLang}><section className="ag-right"><DS.Eyebrow style={{ color: "#4A4A40" }}>{L.gerTit}</DS.Eyebrow><div style={{ marginTop: 18 }}>{corpo}</div></section></AgFrame>;
}

// Página inicial: só os links marcados como públicos no painel. Os outros só abrem por quem recebeu o endereço.
function AgLista({ links }) {
  const [lang, setLang] = React.useState(agLang0);
  const L = T[lang];
  return (
    <AgFrame lang={lang} setLang={setLang}>
      <section className="ag-right">
        <DS.Eyebrow style={{ color: "#4A4A40" }}>{L.eyebrow}</DS.Eyebrow>
        {links.length ? <ul className="ag-lista">{links.map((l) => <li key={l.slug}><a href={l.slug}><b>{(l.titulo && (l.titulo[lang] || l.titulo.pt)) || l.slug}</b><span>{l.sub ? (l.sub[lang] || l.sub.pt) + " · " : ""}{l.dur} {L.min}</span></a></li>)}</ul>
          : <p className="ag-note">{lang === "en" ? "Use the booking link you received." : "Use o link de agendamento que você recebeu."}</p>}
      </section>
    </AgFrame>
  );
}

function AgErro({ msg }) {
  const [lang, setLang] = React.useState(agLang0);
  return <AgFrame lang={lang} setLang={setLang}><div className="ag-wait" role="alert"><h3>{lang === "en" ? "Link not available" : "Link indisponível"}</h3><p>{msg}</p></div></AgFrame>;
}

function agMap(c) { const s = (v) => typeof v === "string" ? { pt: v, en: v } : { pt: (v && v.pt) || "", en: (v && (v.en || v.pt)) || "" }; return { ...c, titulo: s(c.titulo), sub: s(c.sub), texto: s(c.texto) }; }
function Root() {
  const qs = new URLSearchParams(location.search);
  const slug = (location.pathname.split("/").filter(Boolean).pop() || "").replace(/\.html$/, "");
  const [st, setSt] = React.useState(null);
  React.useEffect(() => {
    if (!AG.previa) return;
    const ouvir = (e) => {
      if (!e.data || e.data.tipo !== "agp-previa") return;
      const l = e.data.link || {}, hoje = new Date();
      AG.prevLink = l; AG.slug = e.data.slug || "previa"; AG.p = ""; AG.o = ""; AG.PESSOAL = null;
      AG.limite = new Date(hoje.getTime() + (+l.janela || 90) * 864e5);
      AG.AVAIL.dias = {}; AG.AVAIL.cheios = []; AG.carregados = {};
      AG.series = (day, slot, freq, count) => Array.from({ length: count }, (_, i) => { const d = freq === "mensal" ? new Date(day.getFullYear(), day.getMonth() + i, day.getDate()) : new Date(day.getTime() + i * (freq === "quinzenal" ? 14 : 7) * 864e5); const ok = (agPrevHorarios(l, AG.ymd(d), AG.ymd(d)).dias[AG.ymd(d)] || []).includes(AG.fmtHora(slot)); return { d, s: ok || !i ? slot : null, status: ok || !i ? "ok" : "sem" }; });
      setSt({ cfg: agMap({ ...l, slug: AG.slug, clientes: l.clientes || [], hoje: AG.ymd(hoje), limite: AG.ymd(AG.limite) }), v: Date.now() });
    };
    window.addEventListener("message", ouvir);
    if (window.parent !== window) window.parent.postMessage({ tipo: "agp-pronto" }, "*");
    return () => window.removeEventListener("message", ouvir);
  }, []);
  React.useEffect(() => { if (AG.previa) return; (async () => {
    try {
      if (qs.get("r")) { setSt({ manage: await agApi("reserva", { t: qs.get("r") }) }); return; }
      if (!slug || slug === "index") { const j = await agApi("lista"); setSt({ lista: j.links || [] }); return; }
      const s0 = slug;
      const c = await agApi("link", { l: s0, ...(qs.get("p") ? { p: qs.get("p") } : {}), ...(qs.get("o") ? { o: qs.get("o") } : {}) });
      AG.slug = s0; AG.p = qs.get("p") || ""; AG.o = c.oferta ? qs.get("o") : ""; AG.limite = new Date(c.limite + "T12:00:00");
      if (c.pessoal) AG.PESSOAL = { nome: c.pessoal.nome, projeto: { pt: c.pessoal.projeto, en: c.pessoal.projeto },
        formularios: c.pessoal.formularios.map((x) => ({ ...x, titulo: { pt: x.titulo, en: x.titulo } })),
        tarefas: c.pessoal.tarefas.map((x) => ({ ...x, titulo: { pt: x.titulo, en: x.titulo }, prazo: { pt: x.prazo || "", en: x.prazo || "" } })) };
      setSt({ cfg: agMap(c) });
    } catch (e) { setSt({ erro: e.message }); }
  })(); }, []);
  if (!st) return <p className="ag-loading" role="status">{AG.previa ? "Abrindo a prévia…" : "Carregando…"}</p>;
  if (st.erro) return <AgErro msg={st.erro} />;
  if (st.manage) return <Gerenciar r={st.manage} token={qs.get("r")} />;
  if (st.lista) return <AgLista links={st.lista} />;
  const c = st.cfg;
  const t = { link: c.slug, localModo: c.localModo, titulo: "", subtitulo: "", pessoal: !!c.pessoal, pendModo: c.pessoal ? c.pessoal.modo : "lembrete", pago: c.preco > 0, fuso: "auto" };
  return <React.Fragment>{AG.previa ? <div className="ag-prev-faixa" role="note">Prévia do rascunho · nada é gravado nem enviado</div> : null}<App key={st.v || 0} t={t} cfgL={c} oferta={c.oferta} /></React.Fragment>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<Root />);