// ===== RIVAMAR Group — CMS Lite: editor de contenido completo (v4) =====
// Edita TODO el sitio: General (hero, banner, contacto), Locales (x3 con menús),
// Nosotros (historia, valores, hitos, equipo) y Convenios. Persiste vía store.
const { useState } = React;

// ---------- Controles reutilizables ----------
function CField({ label, value, onChange, area, hint }) {
  return (
    <label className="block">
      <span className="block text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5">{label}</span>
      {area
        ? <textarea className={inputCls + ' !h-24 py-2.5 resize-none'} value={value || ''} onChange={(e) => onChange(e.target.value)} />
        : <input className={inputCls} value={value || ''} onChange={(e) => onChange(e.target.value)} />}
      {hint && <span className="block text-[11px] text-gray-600 mt-1">{hint}</span>}
    </label>
  );
}

function SliderField({ label, value, onChange, min, max, step, unit = '', hint }) {
  return (
    <label className="block">
      <span className="flex items-center justify-between text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5">
        <span>{label}</span>
        <span className="text-gold font-mono normal-case">{value}{unit}</span>
      </span>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        className="w-full accent-[color:rgb(var(--c-gold))] cursor-pointer" />
      {hint && <span className="block text-[11px] text-gray-600 mt-1">{hint}</span>}
    </label>
  );
}

function RowAdd({ onClick, label }) {
  return <button onClick={onClick} className="text-xs font-semibold text-gold hover:text-goldBright flex items-center gap-1 mt-2"><AdIcon name="plus" size={13} /> {label}</button>;
}
function RowDel({ onClick }) {
  return <button onClick={onClick} className="w-8 h-8 shrink-0 grid place-items-center rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20"><AdIcon name="trash" size={13} /></button>;
}

// Editor de pares [titulo, descripcion]  (valores, beneficios)
function PairListEditor({ items, onChange, labelA = 'Título', labelB = 'Descripción' }) {
  const upd = (i, j, v) => onChange(items.map((row, idx) => idx === i ? row.map((c, jc) => jc === j ? v : c) : row));
  const add = () => onChange([...items, ['', '']]);
  const del = (i) => onChange(items.filter((_, idx) => idx !== i));
  return (
    <div className="space-y-2.5">
      {items.map((row, i) => (
        <div key={i} className="flex gap-2 items-start">
          <div className="flex-1 grid sm:grid-cols-[200px_1fr] gap-2">
            <input className={inputCls} value={row[0]} onChange={(e) => upd(i, 0, e.target.value)} placeholder={labelA} />
            <input className={inputCls} value={row[1]} onChange={(e) => upd(i, 1, e.target.value)} placeholder={labelB} />
          </div>
          <RowDel onClick={() => del(i)} />
        </div>
      ))}
      <RowAdd onClick={add} label="Agregar" />
    </div>
  );
}

// Editor de hitos [año, texto]
function HitosEditor({ items, onChange }) {
  const upd = (i, j, v) => onChange(items.map((row, idx) => idx === i ? row.map((c, jc) => jc === j ? v : c) : row));
  const add = () => onChange([...items, ['', '']]);
  const del = (i) => onChange(items.filter((_, idx) => idx !== i));
  return (
    <div className="space-y-2.5">
      {items.map((row, i) => (
        <div key={i} className="flex gap-2 items-start">
          <input className={inputCls + ' !w-24'} value={row[0]} onChange={(e) => upd(i, 0, e.target.value)} placeholder="Año" />
          <input className={inputCls + ' flex-1'} value={row[1]} onChange={(e) => upd(i, 1, e.target.value)} placeholder="Hito" />
          <RowDel onClick={() => del(i)} />
        </div>
      ))}
      <RowAdd onClick={add} label="Agregar hito" />
    </div>
  );
}

// Editor de equipo [rol, area, desc]
function EquipoEditor({ items, onChange }) {
  const upd = (i, j, v) => onChange(items.map((row, idx) => idx === i ? row.map((c, jc) => jc === j ? v : c) : row));
  const updImg = (i, v) => onChange(items.map((row, idx) => {
    if (idx !== i) return row;
    const r = row.slice(); r[3] = v; return r;
  }));
  const add = () => onChange([...items, ['', '', '', '']]);
  const del = (i) => onChange(items.filter((_, idx) => idx !== i));
  return (
    <div className="space-y-4">
      {items.map((row, i) => (
        <div key={i} className="bg-carbon/40 border border-white/10 rounded-lg p-3">
          <div className="flex gap-2 items-start mb-3">
            <div className="flex-1 grid sm:grid-cols-3 gap-2">
              <input className={inputCls} value={row[0]} onChange={(e) => upd(i, 0, e.target.value)} placeholder="Rol" />
              <input className={inputCls} value={row[1]} onChange={(e) => upd(i, 1, e.target.value)} placeholder="Área" />
              <input className={inputCls} value={row[2]} onChange={(e) => upd(i, 2, e.target.value)} placeholder="Descripción" />
            </div>
            <RowDel onClick={() => del(i)} />
          </div>
          <span className="block text-[11px] font-semibold uppercase tracking-wider text-gray-500 mb-1.5">Foto de {row[0] || 'este integrante'}</span>
          <ImagePicker value={row[3] || ''} onChange={(v) => updImg(i, v)} ratio="4/3" maxW={1000} />
        </div>
      ))}
      <RowAdd onClick={add} label="Agregar integrante" />
    </div>
  );
}

// Editor de tags (destacados)
function TagsEditor({ items, onChange }) {
  const upd = (i, v) => onChange(items.map((c, idx) => idx === i ? v : c));
  return (
    <div className="flex flex-wrap gap-2 items-center">
      {items.map((t, i) => (
        <span key={i} className="flex items-center gap-1 bg-carbon border border-white/10 rounded-md pl-2">
          <input className="bg-transparent text-sm text-gray-200 outline-none py-1.5 w-32" value={t} onChange={(e) => upd(i, e.target.value)} />
          <button onClick={() => onChange(items.filter((_, idx) => idx !== i))} className="text-gray-500 hover:text-red-400 px-1.5">✕</button>
        </span>
      ))}
      <button onClick={() => onChange([...items, 'Nuevo'])} className="text-xs font-semibold text-gold hover:text-goldBright flex items-center gap-1"><AdIcon name="plus" size={13} /> destacado</button>
    </div>
  );
}

// Editor de menú [{plato, desc, precio}]
function MenuEditor({ items, onChange }) {
  const upd = (i, k, v) => onChange(items.map((row, idx) => idx === i ? { ...row, [k]: v } : row));
  const add = () => onChange([...items, { plato: '', desc: '', precio: '' }]);
  const del = (i) => onChange(items.filter((_, idx) => idx !== i));
  return (
    <div className="space-y-2.5">
      {items.map((row, i) => (
        <div key={i} className="flex gap-2 items-start">
          <div className="flex-1 grid sm:grid-cols-[1fr_1.5fr_90px] gap-2">
            <input className={inputCls} value={row.plato} onChange={(e) => upd(i, 'plato', e.target.value)} placeholder="Plato" />
            <input className={inputCls} value={row.desc} onChange={(e) => upd(i, 'desc', e.target.value)} placeholder="Descripción" />
            <input className={inputCls} value={row.precio} onChange={(e) => upd(i, 'precio', e.target.value)} placeholder="$" />
          </div>
          <RowDel onClick={() => del(i)} />
        </div>
      ))}
      <RowAdd onClick={add} label="Agregar plato" />
    </div>
  );
}

function CmsCard({ title, children }) {
  return (
    <div className="bg-iron border border-white/10 rounded-xl p-5 space-y-4">
      {title && <h3 className="font-display font-bold text-gray-50 text-sm">{title}</h3>}
      {children}
    </div>
  );
}

// ---------- CMS principal ----------
function CmsLite({ content, setContent, resetContent, onVerSitio }) {
  const pick = (c) => ({ site: c.site, locales: c.locales, nosotros: c.nosotros, convenios: c.convenios, exponor: c.exponor });
  const [draft, setDraft] = useState(pick(content));
  const [tab, setTab] = useState('general');
  const [localIdx, setLocalIdx] = useState(0);
  const [history, setHistory] = useState([]);
  const [toast, setToast] = useState('');
  const flash = (m) => { setToast(m); setTimeout(() => setToast(''), 2600); };

  const dirty = JSON.stringify(draft) !== JSON.stringify(pick(content));

  const setSite = (k, v) => setDraft((d) => ({ ...d, site: { ...d.site, [k]: v } }));
  const setNos = (k, v) => setDraft((d) => ({ ...d, nosotros: { ...d.nosotros, [k]: v } }));
  const setConv = (k, v) => setDraft((d) => ({ ...d, convenios: { ...d.convenios, [k]: v } }));
  const setExpo = (k, v) => setDraft((d) => ({ ...d, exponor: { ...d.exponor, [k]: v } }));
  const setLocal = (k, v) => setDraft((d) => ({ ...d, locales: d.locales.map((l, i) => i === localIdx ? { ...l, [k]: v } : l) }));

  const publish = () => {
    setHistory((h) => [{ ts: new Date().toLocaleString('es-CL'), data: pick(content) }, ...h].slice(0, 5));
    setContent(draft);
    flash('Contenido publicado · visible en el sitio');
  };
  const restore = (snap) => { setDraft(snap.data); flash('Versión cargada al editor — revisa y publica'); };
  const resetSeccion = () => {
    const def = buildDefaults();
    if (tab === 'general') setDraft((d) => ({ ...d, site: def.site }));
    if (tab === 'locales') setDraft((d) => ({ ...d, locales: def.locales }));
    if (tab === 'nosotros') setDraft((d) => ({ ...d, nosotros: def.nosotros }));
    if (tab === 'convenios') setDraft((d) => ({ ...d, convenios: def.convenios }));
    if (tab === 'exponor') setDraft((d) => ({ ...d, exponor: def.exponor }));
    flash('Sección restablecida en el editor');
  };

  const tabBtn = (id, label) => (
    <button onClick={() => setTab(id)} className={`px-3.5 py-2 rounded-lg text-sm font-medium ${tab === id ? 'bg-gold text-carbon' : 'bg-iron border border-white/10 text-gray-300 hover:text-gray-50'}`}>{label}</button>
  );

  const L = draft.locales[localIdx];

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between gap-3 flex-wrap">
        <div className="flex gap-2 flex-wrap">{tabBtn('general', 'General')}{tabBtn('locales', 'Locales')}{tabBtn('nosotros', 'Nosotros')}{tabBtn('convenios', 'Convenios')}{tabBtn('exponor', 'EXPONOR')}</div>
        <div className="flex gap-2 flex-wrap">
          <Btn variant="ghost" onClick={onVerSitio} className="!min-h-[38px] !px-3 !text-xs">Ver Sitio ↗</Btn>
          <Btn variant="ghost" onClick={resetSeccion} className="!min-h-[38px] !px-3 !text-xs"><AdIcon name="reset" size={13} /> Restablecer sección</Btn>
          <Btn variant="primary" onClick={publish} disabled={!dirty} className="!min-h-[38px] !px-4 !text-xs">{dirty ? 'Publicar cambios' : 'Publicado ✓'}</Btn>
        </div>
      </div>

      {/* ---- GENERAL ---- */}
      {tab === 'general' && (
        <div className="grid lg:grid-cols-2 gap-4">
          <CmsCard title="Logo y marca">
            <p className="text-xs text-gray-500 -mt-2">Sube tu logo (PNG/JPG) o usa el texto de marca. Aparece en la barra superior y el pie de página.</p>
            <ImagePicker value={draft.site.logo_img} onChange={(v) => setSite('logo_img', v)} ratio="3/1" maxW={600} />
            {!draft.site.logo_img && (
              <div className="grid sm:grid-cols-3 gap-3 pt-1">
                <CField label="Nombre" value={draft.site.brand_nombre} onChange={(v) => setSite('brand_nombre', v)} />
                <CField label="Bajada" value={draft.site.brand_sub} onChange={(v) => setSite('brand_sub', v)} hint="Vacío = sin bajada" />
                <CField label="Inicial" value={draft.site.brand_inicial} onChange={(v) => setSite('brand_inicial', v)} hint="Letra del cuadro" />
              </div>
            )}
            {draft.site.logo_img && <p className="text-[11px] text-gray-500">Con logo de imagen, el texto de marca se oculta automáticamente.</p>}
          </CmsCard>
          <CmsCard title="Hero principal (Inicio)">
            <CField label="Título" value={draft.site.hero_titulo} onChange={(v) => setSite('hero_titulo', v)} area />
            <CField label="Subtítulo / tagline" value={draft.site.hero_subtitulo} onChange={(v) => setSite('hero_subtitulo', v)} />
            <CField label="Texto descriptivo" value={draft.site.hero_cuerpo} onChange={(v) => setSite('hero_cuerpo', v)} area />
            <div>
              <span className="block text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5">Imágenes de portada (slider — rotan automáticamente)</span>
              <div className="space-y-3">
                <ImagePicker value={draft.site.hero_img} onChange={(v) => setSite('hero_img', v)} ratio="16/9" maxW={1800} />
                <ImagePicker value={draft.site.hero_img2} onChange={(v) => setSite('hero_img2', v)} ratio="16/9" maxW={1800} />
                <ImagePicker value={draft.site.hero_img3} onChange={(v) => setSite('hero_img3', v)} ratio="16/9" maxW={1800} />
              </div>
            </div>
            <div className="grid sm:grid-cols-2 gap-4 pt-1">
              <SliderField label="Desenfoque de fotos" value={draft.site.hero_blur != null ? draft.site.hero_blur : 1.5} min={0} max={12} step={0.5} unit="px"
                onChange={(v) => setSite('hero_blur', v)} hint="Aplica al slider y a las cabeceras de Locales/Nosotros." />
              <SliderField label="Intensidad del velo" value={draft.site.hero_overlay != null ? draft.site.hero_overlay : 60} min={20} max={95} step={5} unit="%"
                onChange={(v) => setSite('hero_overlay', v)} hint="Menos = foto más visible. Más = texto más legible." />
            </div>
          </CmsCard>
          <div className="space-y-4">
            <CmsCard title="Banner EXPONOR 2026">
              <CField label="Texto del banner" value={draft.site.banner_exponor} onChange={(v) => setSite('banner_exponor', v)} area />
            </CmsCard>
            <CmsCard title="Prensa minera oficial (Revista MCH)">
              <CField label="Enlace destino (URL)" value={draft.site.mch_url} onChange={(v) => setSite('mch_url', v)} hint="Ej. https://www.mch.cl/ — o el link a tu edición/artículo" />
              <CField label="Etiqueta superior" value={draft.site.mch_eyebrow} onChange={(v) => setSite('mch_eyebrow', v)} />
              <CField label="Título" value={draft.site.mch_titulo} onChange={(v) => setSite('mch_titulo', v)} />
              <CField label="Texto" value={draft.site.mch_texto} onChange={(v) => setSite('mch_texto', v)} area />
              <CField label="Texto del botón" value={draft.site.mch_boton} onChange={(v) => setSite('mch_boton', v)} />
            </CmsCard>
            <CmsCard title="Contacto / WhatsApp">
              <CField label="Correo de reservas" value={draft.site.contacto_correo} onChange={(v) => setSite('contacto_correo', v)} />
              <div className="grid grid-cols-2 gap-3">
                <CField label="Teléfono" value={draft.site.contacto_telefono} onChange={(v) => setSite('contacto_telefono', v)} />
                <CField label="WhatsApp (solo dígitos)" value={draft.site.whatsapp} onChange={(v) => setSite('whatsapp', v)} hint="Ej. 56912345678" />
              </div>
            </CmsCard>
            <CmsCard title="Pie de página (footer)">
              <CField label="Descripción" value={draft.site.footer_desc} onChange={(v) => setSite('footer_desc', v)} area />
              <CField label="Texto de copyright" value={draft.site.footer_copy} onChange={(v) => setSite('footer_copy', v)} />
              <div className="grid sm:grid-cols-3 gap-3">
                <CField label="Instagram (URL)" value={draft.site.social_ig} onChange={(v) => setSite('social_ig', v)} hint="Vacío = oculto" />
                <CField label="Facebook (URL)" value={draft.site.social_fb} onChange={(v) => setSite('social_fb', v)} />
                <CField label="LinkedIn (URL)" value={draft.site.social_in} onChange={(v) => setSite('social_in', v)} />
              </div>
            </CmsCard>
            <CmsCard title="Correo automático de reservas">
              <label className="flex items-center gap-3 cursor-pointer select-none">
                <input type="checkbox" checked={!!draft.site.email_auto} onChange={(e) => setSite('email_auto', e.target.checked)} className="w-5 h-5 rounded border-white/20 bg-carbon accent-[color:rgb(var(--c-gold))]" />
                <span className="text-sm font-medium text-gray-200">Activar envío automático al recibir una reserva</span>
              </label>
              <div className="grid grid-cols-2 gap-2 pt-1">
                <button onClick={() => setSite('email_modo', 'php')} className={`text-left p-3 rounded-lg border transition-all ${(draft.site.email_modo || 'php') === 'php' ? 'border-gold bg-gold/10' : 'border-white/10 bg-carbon hover:border-white/25'}`}>
                  <span className="text-sm font-semibold text-gray-100">Servidor (recomendado)</span>
                  <span className="block text-[11px] text-emerald-400 mt-0.5">✓ Sin límites · ya incluido</span>
                </button>
                <button onClick={() => setSite('email_modo', 'emailjs')} className={`text-left p-3 rounded-lg border transition-all ${draft.site.email_modo === 'emailjs' ? 'border-gold bg-gold/10' : 'border-white/10 bg-carbon hover:border-white/25'}`}>
                  <span className="text-sm font-semibold text-gray-100">EmailJS</span>
                  <span className="block text-[11px] text-gray-500 mt-0.5">Externo · máx. 200/mes</span>
                </button>
              </div>
              {(draft.site.email_modo || 'php') === 'php' ? (
                <div className="space-y-3 pt-1">
                  <p className="text-[11px] text-gray-500 leading-relaxed">Usa el correo de tu propio servidor Hostinger (archivo <span className="font-mono text-gray-400">api/reserva-mail.php</span>, ya incluido). <strong className="text-gray-400">Sin límites ni cuentas externas.</strong></p>
                  <CField label="Correo de destino" value={draft.site.email_destino} onChange={(v) => setSite('email_destino', v)} hint="Dónde llegan las reservas. Recomendado: un correo @rivamar.cl creado en Hostinger." />
                  <p className="text-[11px] text-emerald-400">✓ Envío por servidor configurado. Solo asegúrate de subir la carpeta api/ a Hostinger.</p>
                </div>
              ) : (
                <div className="space-y-3 pt-1">
                  <p className="text-[11px] text-gray-500 leading-relaxed">Crea una cuenta en <span className="text-gold">emailjs.com</span> y pega las 3 claves. Variables de la plantilla: <span className="font-mono text-gray-400">reserva_id, nombre, empresa, correo, telefono, local, fecha, hora, personas, exponor, comentarios</span>.</p>
                  <div className="grid sm:grid-cols-2 gap-3">
                    <CField label="Public Key" value={draft.site.emailjs_public} onChange={(v) => setSite('emailjs_public', v)} />
                    <CField label="Correo de destino" value={draft.site.email_destino} onChange={(v) => setSite('email_destino', v)} hint="Dónde llegan las reservas" />
                    <CField label="Service ID" value={draft.site.emailjs_service} onChange={(v) => setSite('emailjs_service', v)} />
                    <CField label="Template ID" value={draft.site.emailjs_template} onChange={(v) => setSite('emailjs_template', v)} />
                  </div>
                  {draft.site.email_auto && (!draft.site.emailjs_public || !draft.site.emailjs_service || !draft.site.emailjs_template)
                    ? <p className="text-[11px] text-orange-400">Completa las 3 claves para que el envío funcione.</p>
                    : draft.site.email_auto ? <p className="text-[11px] text-emerald-400">✓ Envío por EmailJS configurado.</p> : null}
                </div>
              )}
            </CmsCard>
            <CmsCard title="Aviso al teléfono por WhatsApp (gratis, sin límites)">
              <label className="flex items-center gap-3 cursor-pointer select-none">
                <input type="checkbox" checked={!!draft.site.notify_wa} onChange={(e) => setSite('notify_wa', e.target.checked)} className="w-5 h-5 rounded border-white/20 bg-carbon accent-[color:rgb(var(--c-gold))]" />
                <span className="text-sm font-medium text-gray-200">Avisarme al WhatsApp cuando llegue una reserva</span>
              </label>
              <p className="text-[11px] text-gray-500 leading-relaxed">
                Usa <span className="text-gold">CallMeBot</span> (gratis, sin límite mensual). Activación única: agrega el número <span className="font-mono text-gray-300">+34 644 51 95 23</span> a tus contactos y envíale por WhatsApp el mensaje <span className="font-mono text-gray-300">"I allow callmebot to send me messages"</span>; recibirás tu <span className="font-mono">apikey</span>. Pégala aquí.
              </p>
              <div className="grid sm:grid-cols-2 gap-3">
                <CField label="Mi teléfono (con código país)" value={draft.site.callmebot_phone} onChange={(v) => setSite('callmebot_phone', v)} hint="Ej. +56964979087" />
                <CField label="API Key de CallMeBot" value={draft.site.callmebot_apikey} onChange={(v) => setSite('callmebot_apikey', v)} />
              </div>
              {draft.site.notify_wa && !draft.site.callmebot_apikey
                ? <p className="text-[11px] text-orange-400">Pega tu API key para activar el aviso.</p>
                : draft.site.notify_wa ? <p className="text-[11px] text-emerald-400">✓ Aviso por WhatsApp configurado.</p> : null}
            </CmsCard>
            <CmsCard title="Paleta de color del sitio">
              <p className="text-xs text-gray-500 -mt-2">Cambia la identidad visual completa. Se aplica al publicar — sin tocar código.</p>
              <div className="grid grid-cols-2 gap-3">
                {[
                  ['midnight', 'Midnight Premium', ['#0B1622', '#C9A24B', '#F5A623']],
                  ['rivamar', 'Rivamar (Gran Chimú)', ['#EFE8DB', '#B5552E', '#6E2433']],
                  ['claro', 'Claro Gourmet', ['#F8F6F1', '#A97A20', '#F09619']],
                  ['esmeralda', 'Esmeralda Premium', ['#0C1A16', '#D4A24C', '#C17A4A']],
                  ['burdeos', 'Burdeos Carbón', ['#1A0E12', '#D6A85C', '#C07860']],
                  ['industrial', 'Industrial', ['#111827', '#C8A000', '#B87333']],
                ].map(([id, label, sw]) => (
                  <button key={id} onClick={() => setSite('theme', id)}
                    className={`text-left p-3 rounded-lg border transition-all ${(draft.site.theme || 'midnight') === id ? 'border-gold bg-gold/10' : 'border-white/10 bg-carbon hover:border-white/25'}`}>
                    <div className="flex gap-1.5 mb-2">
                      {sw.map((c) => <span key={c} className="w-6 h-6 rounded-md border border-white/10" style={{ background: c }}></span>)}
                    </div>
                    <span className="text-sm font-semibold text-gray-100">{label}</span>
                    {(draft.site.theme || 'midnight') === id && <span className="block text-[10px] text-gold mt-0.5">● Activa</span>}
                  </button>
                ))}
              </div>
            </CmsCard>
          </div>
        </div>
      )}

      {/* ---- LOCALES ---- */}
      {tab === 'locales' && (
        <div className="space-y-4">
          <div className="flex gap-2 flex-wrap">
            {draft.locales.map((l, i) => (
              <button key={l.id} onClick={() => setLocalIdx(i)} className={`px-3 py-2 rounded-lg text-sm font-medium border ${localIdx === i ? 'border-gold bg-gold/10 text-gold' : 'border-white/10 bg-iron text-gray-300 hover:text-gray-50'}`}>{l.nombre}</button>
            ))}
          </div>
          <div className="grid lg:grid-cols-2 gap-4">
            <CmsCard title="Identidad del local">
              <CField label="Nombre" value={L.nombre} onChange={(v) => setLocal('nombre', v)} />
              <CField label="Bajada / tagline" value={L.tagline} onChange={(v) => setLocal('tagline', v)} />
              <CField label="Especialidad (tarjetas)" value={L.especialidad} onChange={(v) => setLocal('especialidad', v)} area />
              <CField label="Descripción (página del local)" value={L.descripcion} onChange={(v) => setLocal('descripcion', v)} area />
            </CmsCard>
            <div className="space-y-4">
              <CmsCard title="Datos de contacto y aforo">
                <CField label="Dirección" value={L.ubicacion} onChange={(v) => setLocal('ubicacion', v)} />
                <CField label="Mapa — dirección o coordenadas (Google Maps)" value={L.mapa} onChange={(v) => setLocal('mapa', v)} hint="Ej. Av. Costanera 1420, Antofagasta — o pega coordenadas lat,long" />
                <div className="grid grid-cols-2 gap-3">
                  <CField label="Horario" value={L.horario} onChange={(v) => setLocal('horario', v)} />
                  <CField label="Teléfono" value={L.telefono} onChange={(v) => setLocal('telefono', v)} />
                </div>
                <CField label="Etiqueta de capacidad" value={L.capacidadLabel} onChange={(v) => setLocal('capacidadLabel', v)} hint="El tope numérico (6/4/10+) es regla de negocio fija." />
                <CField label="Perfil de público" value={L.perfil} onChange={(v) => setLocal('perfil', v)} />
                <div>
                  <span className="block text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5">Destacados</span>
                  <TagsEditor items={L.destacados} onChange={(v) => setLocal('destacados', v)} />
                </div>
              </CmsCard>
            </div>
          </div>
          <CmsCard title={`Menú destacado — ${L.nombre}`}>
            <MenuEditor items={L.menu} onChange={(v) => setLocal('menu', v)} />
          </CmsCard>
          <CmsCard title={`Imagen de fondo — ${L.nombre}`}>
            <p className="text-xs text-gray-500 -mt-2">Se usa en la tarjeta del inicio y en la portada de la página del local.</p>
            <ImagePicker value={L.foto_img} onChange={(v) => setLocal('foto_img', v)} ratio="16/10" maxW={1800} />
          </CmsCard>
          <CmsCard title="Ajuste de portadas de los locales (aplica a los 3)">
            <div className="grid sm:grid-cols-2 gap-4">
              <SliderField label="Desenfoque de portada" value={draft.site.local_blur != null ? draft.site.local_blur : 1.5} min={0} max={12} step={0.5} unit="px" onChange={(v) => setSite('local_blur', v)} />
              <SliderField label="Intensidad del velo" value={draft.site.local_overlay != null ? draft.site.local_overlay : 55} min={20} max={95} step={5} unit="%" onChange={(v) => setSite('local_overlay', v)} hint="Menos = foto más visible." />
            </div>
          </CmsCard>
        </div>
      )}

      {/* ---- NOSOTROS ---- */}
      {tab === 'nosotros' && (
        <div className="space-y-4">
          <CmsCard title="Introducción">
            <CField label="Texto introductorio" value={draft.nosotros.intro} onChange={(v) => setNos('intro', v)} area />
          </CmsCard>
          <CmsCard title="Valores"><PairListEditor items={draft.nosotros.valores} onChange={(v) => setNos('valores', v)} labelA="Valor" labelB="Descripción" /></CmsCard>
          <CmsCard title="Historia (línea de tiempo)"><HitosEditor items={draft.nosotros.hitos} onChange={(v) => setNos('hitos', v)} /></CmsCard>
          <CmsCard title="Equipo"><EquipoEditor items={draft.nosotros.equipo} onChange={(v) => setNos('equipo', v)} /></CmsCard>
          <div className="grid lg:grid-cols-2 gap-4">
            <CmsCard title="Imagen de portada (Nosotros)">
              <ImagePicker value={draft.nosotros.img} onChange={(v) => setNos('img', v)} ratio="16/9" maxW={1800} />
            </CmsCard>
            <CmsCard title="Imagen del equipo (respaldo)">
              <p className="text-xs text-gray-500 -mt-2">Se usa solo si un integrante no tiene foto propia. Asigna la foto de cada uno arriba, en "Equipo".</p>
              <ImagePicker value={draft.nosotros.equipo_img} onChange={(v) => setNos('equipo_img', v)} ratio="4/3" maxW={1400} />
            </CmsCard>
          </div>
          <CmsCard title="Ajuste de la foto de portada">
            <div className="grid sm:grid-cols-2 gap-4">
              <SliderField label="Desenfoque de la portada" value={draft.nosotros.blur != null ? draft.nosotros.blur : 1.5} min={0} max={12} step={0.5} unit="px" onChange={(v) => setNos('blur', v)} />
              <SliderField label="Intensidad del velo" value={draft.nosotros.overlay != null ? draft.nosotros.overlay : 70} min={20} max={95} step={5} unit="%" onChange={(v) => setNos('overlay', v)} hint="Menos = foto más visible." />
            </div>
          </CmsCard>
        </div>
      )}

      {/* ---- EXPONOR ---- */}
      {tab === 'exponor' && (
        <div className="space-y-4">
          <CmsCard title="Campaña EXPONOR 2026">
            <CField label="Texto principal" value={draft.exponor.cuerpo} onChange={(v) => setExpo('cuerpo', v)} area />
            <div className="grid sm:grid-cols-2 gap-3">
              <CField label="Subtítulo / fechas" value={draft.exponor.subtitulo} onChange={(v) => setExpo('subtitulo', v)} />
              <CField label="Inicio del beneficio (fecha)" value={draft.exponor.fecha_evento} onChange={(v) => setExpo('fecha_evento', v)} hint="AAAA-MM-DD" />
            </div>
          </CmsCard>
          <CmsCard title="Imágenes de portada EXPONOR (slider — 3 fotos)">
            <div className="space-y-3">
              <ImagePicker value={draft.exponor.img} onChange={(v) => setExpo('img', v)} ratio="16/9" maxW={1800} />
              <ImagePicker value={draft.exponor.img2} onChange={(v) => setExpo('img2', v)} ratio="16/9" maxW={1800} />
              <ImagePicker value={draft.exponor.img3} onChange={(v) => setExpo('img3', v)} ratio="16/9" maxW={1800} />
            </div>
            <div className="grid sm:grid-cols-2 gap-4 pt-2">
              <SliderField label="Desenfoque de fotos" value={draft.exponor.blur != null ? draft.exponor.blur : 1.5} min={0} max={12} step={0.5} unit="px" onChange={(v) => setExpo('blur', v)} />
              <SliderField label="Intensidad del velo" value={draft.exponor.overlay != null ? draft.exponor.overlay : 75} min={20} max={95} step={5} unit="%" onChange={(v) => setExpo('overlay', v)} hint="Menos = foto más visible." />
            </div>
          </CmsCard>
        </div>
      )}

      {/* ---- CONVENIOS ---- */}
      {tab === 'convenios' && (
        <div className="space-y-4">
          <CmsCard title="Introducción B2B">
            <CField label="Texto introductorio" value={draft.convenios.intro} onChange={(v) => setConv('intro', v)} area />
          </CmsCard>
          <CmsCard title="Beneficios del convenio"><PairListEditor items={draft.convenios.beneficios} onChange={(v) => setConv('beneficios', v)} labelA="Beneficio" labelB="Descripción" /></CmsCard>
          <CmsCard title="Imagen — Banquete (portada del Inicio)">
            <p className="text-xs text-gray-500 -mt-2">Aparece en la sección "Convenios" de la página de Inicio.</p>
            <ImagePicker value={draft.convenios.img} onChange={(v) => setConv('img', v)} ratio="4/3" maxW={1600} />
          </CmsCard>
          <CmsCard title="Imagen — Estación de buffet (página Convenios)">
            <p className="text-xs text-gray-500 -mt-2">Aparece dentro de la página de Convenios B2B.</p>
            <ImagePicker value={draft.convenios.img2} onChange={(v) => setConv('img2', v)} ratio="2/1" maxW={1600} />
          </CmsCard>
        </div>
      )}

      {/* Historial */}
      <div className="bg-iron border border-white/10 rounded-xl p-4">
        <h3 className="font-display font-bold text-gray-50 text-sm mb-3 flex items-center gap-2"><AdIcon name="reset" size={15} /> Historial de cambios <span className="text-xs font-sans font-normal text-gray-500">(últimas 5 versiones)</span></h3>
        {history.length === 0 ? (
          <p className="text-xs text-gray-500">Aún no hay versiones guardadas. Cada vez que publiques, la versión anterior quedará disponible aquí para restaurar.</p>
        ) : (
          <ul className="divide-y divide-white/5">
            {history.map((h, i) => (
              <li key={i} className="flex items-center justify-between py-2.5">
                <div><span className="text-sm text-gray-200 font-medium">Versión {history.length - i}</span><span className="text-xs text-gray-500 ml-3 font-mono">{h.ts}</span></div>
                <button onClick={() => restore(h)} className="text-xs font-semibold px-2.5 py-1.5 rounded-md bg-white/5 text-gray-300 hover:text-gold hover:bg-white/10">Restaurar</button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {toast && <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-emerald-600 text-white text-sm px-5 py-3 rounded-lg shadow-xl">{toast}</div>}
    </div>
  );
}

Object.assign(window, { CmsLite });