const { Tag, Checkbox, Select } = window.LexSecuritiesDesignSystem_30b8ea;

function PageHero({ label, title, lead, children }) {
  return <section className="navy phero">
    <Rules side="l" />
    <div className="wrap">
      <Label>{label}</Label>
      <h1 className="h1 rv">{title}</h1>
      {lead && <p className="lead rv d2">{lead}</p>}
      {children}
    </div>
  </section>;
}

function AudiencePage({ id }) {
  const a = AUDIENCES.find((x) => x.id === id);
  const inv = id === "inversionistas";
  return <>
    <PageHero label={inv ? "Inversionistas" : "Empresas"} title={a.hero} lead={a.lead || a.p}>
      <div className="btns" style={{ marginTop: 28 }}>
        <Button variant="accent" size="lg" onClick={toAgenda}>Agenda una llamada gratuita</Button>
        <Button variant="outline-inverse" size="lg" iconStart={<Icon name="message-circle" size={18} />} onClick={() => openWA(id)}>Escríbenos por WhatsApp</Button>
      </div>
    </PageHero>
    <section className="ivory sec">
      <div className="wrap">
        <Label>{inv ? "¿Es tu caso?" : "Para quién es"}</Label>
        <div style={{ marginTop: 20 }}><CheckList items={a.perfiles} /></div>
        {!inv && <p className="lead" style={{ marginTop: 24 }}>Te acompañamos en lo legal y, si lo necesitas, te conectamos con sociedades agentes de bolsa, administradoras de fondos o titulizadoras autorizadas para llevar adelante tu operación.</p>}
      </div>
    </section>
    {inv ? <>
      <HelpSection />
      <RutaLink />
      <section className="ivory sec" id="problemas">
        <div className="wrap">
          <Label>Problemas frecuentes</Label>
          <h2 className="h2 rv">Problemas frecuentes</h2>
          <p className="lead" style={{ marginTop: 16 }}>Elige lo que te pasó y mira qué hacer.</p>
          <Problems />
        </div>
      </section>
    </> : <>
      <HelpSection items={HELP_EMP} />
      <EmpSituations />
    </>}
    <section className={(inv ? "ivory" : "white") + " sec"}>
      <div className="wrap"><h2 className="h2 rv">Cómo trabajamos</h2><Steps /></div>
    </section>
    <ClosingBand ctx={id} mascot={inv ? "phone" : "briefcase"} />
  </>;
}

function TeamPage() {
  return <>
    <PageHero label="Nosotros" title="Quién te asesora." />
    <section className="ivory sec"><div className="wrap"><TeamCard /></div></section>
    <ClosingBand />
  </>;
}

function PublicationsPage() {
  const cats = ["Todos", "Inversionistas", "Empresas", "Regulación"];
  const temas = ["Todos los temas", "Fondos", "Bolsa", "Titulización", "Financiamiento", "Tributación"];
  const [cat, setCat] = React.useState("Todos");
  const [tema, setTema] = React.useState("Todos los temas");
  const ok = (c, t) => (cat === "Todos" || c === cat) && (tema === "Todos los temas" || t === tema);
  const list = ARTICLES.filter((a) => ok(a.cat, a.tema));
  const glist = IGUIDES.filter((g) => ok(g.cat, g.tema));
  const Empty = ({ what }) => <p className="lead pub-empty">Aún no hay {what} con estos filtros.</p>;
  return <>
    <PageHero label="Mercado de valores, explicado" title="Artículos y guías fáciles de leer." lead="Financiamiento, inversión y regulación del mercado de valores, en lenguaje sencillo." />
    <section className="ivory sec">
      <div className="wrap">
        <div className="pfilters">
          <div><p className="k">Público</p><div className="filters">{cats.map((c) => <Tag key={c} selected={cat === c} onClick={() => setCat(c)}>{c}</Tag>)}</div></div>
          <div><p className="k">Tema</p><div className="filters">{temas.map((c) => <Tag key={c} selected={tema === c} onClick={() => setTema(c)}>{c}</Tag>)}</div></div>
        </div>
        <h2 className="h2 rv" style={{ marginTop: 40 }}>Artículos</h2>
        <Soon text="Estamos preparando nuestros primeros artículos."><div className="arts">{ARTICLES.map((a) => <ArticleCard key={a.slug} a={a} />)}</div></Soon>
      </div>
    </section>
    <section className="white sec" id="guias">
      <div className="wrap">
        <h2 className="h2 rv">Guías</h2>
        {glist.length ? <InvestorGuides items={glist} /> : <Empty what="guías" />}
      </div>
    </section>
    <ClosingBand />
  </>;
}

const TEMAS = ["Inversionistas", "Empresas", "Academia", "Otro"];
const HORARIOS = ["Mañana", "Tarde", "Noche"];
function CallForm() {
  const blank = { name: "", phone: "", mail: "", soy: "", tema: "", horario: "", msg: "", ok: false };
  const [f, setF] = React.useState(blank);
  const [err, setErr] = React.useState({});
  const [state, setState] = React.useState("idle");
  const [hp, setHp] = React.useState("");
  const set = mkSet(setF, setErr);
  const submit = (e) => {
    e.preventDefault();
    const x = {};
    if (!f.name.trim()) x.name = "Ingresa tu nombre";
    if (f.phone.replace(/\D/g, "").length < 7) x.phone = "Ingresa un teléfono";
    if (!/^\S+@\S+\.\S+$/.test(f.mail)) x.mail = "Ingresa un correo válido";
    if (!f.soy) x.soy = "Elige una opción";
    if (!f.tema) x.tema = "Elige un tema";
    if (!f.horario) x.horario = "Elige un horario";
    if (!f.ok) x.ok = "Debes aceptar la política de privacidad";
    setErr(x); if (Object.keys(x).length) return;
    if (hp) return;
    setState("sending");
    postForm("llamada", formData(f)).then(() => { setState("done"); setF(blank); }).catch(() => setState("fail"));
  };
  if (state === "done") return <div className="formcard callform" id="agenda" role="status">
    <p className="k">Agenda una llamada gratuita</p>
    <h2 className="h3">Gracias. Te llamaremos en horario hábil.</h2>
    <div><Button variant="secondary" onClick={() => setState("idle")}>Enviar otra solicitud</Button></div>
  </div>;
  return <form className="formcard callform" id="agenda" name="llamada" onSubmit={submit} noValidate>
    <p className="k">Llamada gratuita</p>
    <h2 className="h3">Agenda una llamada gratuita</h2>
    <p className="callform-p">Déjanos tus datos y te llamamos.</p>
    <Honeypot value={hp} onChange={(e) => setHp(e.target.value)} />
    <Input label="Nombre" value={f.name} error={err.name} onChange={set("name")} />
    <div className="frow"><Input label="Teléfono" type="tel" value={f.phone} error={err.phone} onChange={set("phone")} /><Input label="Correo" type="email" value={f.mail} error={err.mail} onChange={set("mail")} /></div>
    <div><div className="flabel">Soy</div>
      <div className="seg" role="radiogroup">{[["persona", "Inversionista"], ["empresa", "Empresa"]].map(([v, l]) => <button type="button" role="radio" aria-checked={f.soy === v} key={v} className={f.soy === v ? "on" : ""} onClick={() => set("soy")(v)}>{l}</button>)}</div>
      {err.soy && <div className="ferr" style={{ marginTop: 8 }}>{err.soy}</div>}
    </div>
    <div className="frow">
      <div><Select label="Tema" placeholder="Elige uno" options={TEMAS} value={f.tema} onChange={set("tema")} />{err.tema && <div className="ferr" style={{ marginTop: 8 }}>{err.tema}</div>}</div>
      <div><Select label="Horario preferido" placeholder="Elige uno" options={HORARIOS} value={f.horario} onChange={set("horario")} />{err.horario && <div className="ferr" style={{ marginTop: 8 }}>{err.horario}</div>}</div>
    </div>
    <Input label="Mensaje (opcional)" multiline rows={3} value={f.msg} onChange={set("msg")} />
    <div><Checkbox label="Acepto la política de privacidad" checked={f.ok} onChange={set("ok")} />{err.ok && <div className="ferr" style={{ marginTop: 8 }}>{err.ok}</div>}</div>
    {state === "fail" && <FormFail ctx="general" />}
    <div className="fsend"><Button type="submit" variant="accent" size="lg" disabled={state === "sending"}>{state === "sending" ? "Enviando…" : "Agenda una llamada gratuita"}</Button><span className="fine dark">Confidencial · Sin compromiso</span></div>
  </form>;
}

const ENTIDADES = ["SAB", "SAF", "Fondo", "Titulizadora", "Otra"];
const MONTOS = ["Menos de S/ 50 000", "S/ 50 000 – 200 000", "S/ 200 000 – 1 millón", "Más de S/ 1 millón"];
const FACT = ["Menos de S/ 100 000", "S/ 100 000 – 500 000", "S/ 500 000 – 2 millones", "Más de S/ 2 millones"];
const FIN = ["Menos de S/ 500 000", "De S/ 500 000 a S/ 1 millón", "De S/ 1 millón a S/ 2 millones", "Más de S/ 2 millones"];
const mkSet = (setF, setErr) => (k) => (e) => { const v = e && e.target ? (e.target.type === "checkbox" ? e.target.checked : e.target.value) : e; setF((s) => ({ ...s, [k]: v })); setErr((s) => ({ ...s, [k]: undefined })); };

function ContactForm() {
  const blank = { tipo: "", name: "", mail: "", phone: "", entidad: "", producto: "", monto: "", company: "", cargo: "", fact: "", fin: "", msg: "", subs: false, ok: false };
  const [f, setF] = React.useState(blank);
  const [err, setErr] = React.useState({});
  const [state, setState] = React.useState("idle");
  const [hp, setHp] = React.useState("");
  const set = mkSet(setF, setErr);
  const persona = f.tipo === "persona", empresa = f.tipo === "empresa";
  const submit = (e) => {
    e.preventDefault();
    const x = {};
    if (!f.tipo) x.tipo = "Elige una opción";
    if (!f.name.trim()) x.name = "Ingresa tu nombre";
    if (!/^\S+@\S+\.\S+$/.test(f.mail)) x.mail = "Ingresa un correo válido";
    if (empresa && !f.company.trim()) x.company = "Ingresa el nombre de la empresa";
    if (!f.msg.trim()) x.msg = "Cuéntanos brevemente tu caso";
    if (!f.ok) x.ok = "Debes aceptar la política de privacidad";
    setErr(x); if (Object.keys(x).length) return;
    if (hp) return;
    setState("sending");
    const jobs = [postForm("contacto", formData(f))];
    if (f.subs) jobs.push(postForm("suscripcion", { name: f.name, mail: f.mail, origen: "contacto" }));
    Promise.all(jobs).then(() => {
      toast({ tone: "success", title: "Mensaje enviado", body: "Gracias, " + f.name.split(" ")[0] + ". Te responderemos pronto." + (f.subs ? " Quedaste suscrito a las publicaciones." : "") });
      setF(blank); setState("idle");
    }).catch(() => setState("fail"));
  };
  return <form className="formcard" name="contacto" onSubmit={submit} noValidate>
    <h2 className="h3">Envíanos un mensaje</h2>
    <Honeypot value={hp} onChange={(e) => setHp(e.target.value)} />
    <div><div className="flabel">¿Eres persona o empresa?</div>
      <div className="seg" role="radiogroup">{[["persona", "Inversionista"], ["empresa", "Empresa"]].map(([v, l]) => <button type="button" role="radio" aria-checked={f.tipo === v} key={v} className={f.tipo === v ? "on" : ""} onClick={() => { setF((s) => ({ ...s, tipo: v })); setErr({}); }}>{l}</button>)}</div>
      {err.tipo && <div className="ferr" style={{ marginTop: 8 }}>{err.tipo}</div>}
    </div>
    {persona && <>
      <Input label="Nombre" value={f.name} error={err.name} onChange={set("name")} />
      <div className="frow"><Input label="Correo" type="email" value={f.mail} error={err.mail} onChange={set("mail")} /><Input label="Teléfono" type="tel" value={f.phone} onChange={set("phone")} /></div>
      <div className="frow"><Select label="Entidad" placeholder="Elige una" options={ENTIDADES} value={f.entidad} onChange={set("entidad")} /><Input label="Producto" value={f.producto} onChange={set("producto")} placeholder="Ej.: fondo mutuo, acciones, bonos" /></div>
      <Select label="Monto aproximado" placeholder="Elige un rango" options={MONTOS} value={f.monto} onChange={set("monto")} />
    </>}
    {empresa && <>
      <div className="frow"><Input label="Nombre" value={f.name} error={err.name} onChange={set("name")} /><Input label="Cargo" value={f.cargo} onChange={set("cargo")} /></div>
      <Input label="Empresa" value={f.company} error={err.company} onChange={set("company")} />
      <div className="frow"><Input label="Correo" type="email" value={f.mail} error={err.mail} onChange={set("mail")} /><Input label="Teléfono" type="tel" value={f.phone} onChange={set("phone")} /></div>
      <div className="frow"><Select label="Facturación mensual" placeholder="Elige un rango" options={FACT} value={f.fact} onChange={set("fact")} /><Select label="Monto que buscas financiar" placeholder="Elige un rango" options={FIN} value={f.fin} onChange={set("fin")} /></div>
    </>}
    {(persona || empresa) && <>
      <Input label="Mensaje" multiline rows={5} value={f.msg} error={err.msg} onChange={set("msg")} placeholder={persona ? "Cuéntanos qué pasó con tu inversión" : "Cuéntanos sobre tu operación"} />
      <div className="checks">
        <Checkbox label="Quiero recibir las publicaciones de Lex" checked={f.subs} onChange={set("subs")} />
        <div><Checkbox label="Acepto la política de privacidad" checked={f.ok} onChange={set("ok")} />{err.ok && <div className="ferr" style={{ marginTop: 8 }}>{err.ok}</div>}</div>
      </div>
    </>}
    {state === "fail" && <FormFail ctx={persona ? "inversionistas" : empresa ? "empresas" : "contacto"} />}
    <div className="fsend"><Button type="submit" size="lg" disabled={state === "sending"}>{state === "sending" ? "Enviando…" : "Enviar mensaje"}</Button><span className="fine dark">Confidencial · Sin compromiso</span></div>
  </form>;
}

function ContactPage() {
  return <>
    <PageHero label="Contacto" title="Conversemos sobre tu caso." lead={<FreeCall className="" />} />
    <section className="ivory sec">
      <div className="wrap ct-grid">
        <ContactForm />
        <div>
          <CallForm />
          <div className="cinfo">
            <a href={wa("contacto")} target="_blank" rel="noopener"><Icon name="message-circle" size={18} color="var(--bronze-700)" />Escríbenos por WhatsApp</a>
            {EMAIL && <a href={"mailto:" + EMAIL}><Icon name="mail" size={18} color="var(--bronze-700)" />{EMAIL}</a>}
          </div>
          {(SOCIAL.linkedinLex || SOCIAL.instagramLex) && <div className="credes"><p className="k">Redes</p><SocialIcons keys={["linkedinLex", "instagramLex"]} /></div>}
        </div>
      </div>
    </section>
  </>;
}

/* ---------- Páginas legales ---------- */
const P = (t) => ({ p: t });
const UL = (l) => ({ ul: l });
const CONTACT_LINE = "Puedes escribirnos " + (EMAIL ? "al correo " + EMAIL + ", " : "") + "por WhatsApp o mediante el formulario de la página de Contacto.";
const CANAL = EMAIL ? "por correo a " + EMAIL : "por WhatsApp (botón «Escríbenos por WhatsApp» de este sitio)";

const BANCO_CODES = [["Contactos y solicitudes de llamada", BANCOS.contactos], ["Libro de Reclamaciones", BANCOS.libro], ["Suscriptores de publicaciones", BANCOS.suscriptores]].filter((b) => b[1]).map((b) => b[0] + " " + b[1]);
const PRIV_SECS = [
  ["titular", "Quién trata tus datos", [P(TITULAR.nombre + " (Lex Securities Advisory)" + (TITULAR.ruc ? ", RUC " + TITULAR.ruc : "") + (TITULAR.domicilio ? ", con domicilio en " + TITULAR.domicilio : "") + ".")]],
  ["datos", "Qué datos y para qué", [P("Los que escribes en los formularios, para responderte o llamarte, atender tus reclamos en el Libro de Reclamaciones y, si lo aceptas, enviarte publicaciones.")]],
  ["bancos", "Bancos de datos", [P("Contactos y solicitudes de llamada · Libro de Reclamaciones · Suscriptores de publicaciones." + (BANCO_CODES.length ? " Códigos de registro: " + BANCO_CODES.join("; ") + "." : ""))]],
  ["acceso", "Quién más accede", [P("Netlify, Inc. (alojamiento y formularios, Estados Unidos) y nuestro proveedor de correo. No vendemos ni cedemos tus datos.")]],
  ["plazo", "Cuánto tiempo", [P("El necesario para atenderte. Los reclamos se conservan 2 años.")]],
  ["derechos", "Tus derechos", [P("Puedes pedir el acceso, la rectificación, la cancelación y la oposición (ARCO) " + CANAL + ". También puedes acudir a la Autoridad Nacional de Protección de Datos Personales.")]],
  ["norma", "Norma", [P("Ley N.° 29733 y su Reglamento (D.S. N.° 016-2024-JUS). Actualizado el 3 de octubre de 2026.")]]
];

const AVISO_SECS = [
  ["titular", "Titular", [P(TITULAR.nombre + " (Lex Securities Advisory)" + (TITULAR.ruc ? ", RUC " + TITULAR.ruc : "") + ".")]],
  ["objeto", "Servicio", [P("Asesoría legal en mercado de valores. No es asesoría de inversión ni intermediación de valores, y no garantiza resultados.")]],
  ["informacion", "Contenido", [P("Es informativo y no reemplaza una asesoría para tu caso.")]],
  ["propiedad", "Propiedad intelectual", [P("La marca, los textos y la mascota no pueden reproducirse sin autorización.")]],
  ["ley", "Ley aplicable", [P("Leyes de la República del Perú.")]]
];

const COOKIE_SECS = [
  ["cuales", "Qué cookies usamos", [P("Técnicas, para que el sitio funcione. De medición, solo si las aceptas.")]],
  ["eleccion", "Cómo cambiarlas", [P("Con el botón de abajo o desde tu navegador.")]]
];

const LEGAL_PARTS = [["aviso", "Aviso legal", AVISO_SECS], ["privacidad", "Política de privacidad", PRIV_SECS], ["cookies", "Política de cookies", COOKIE_SECS]];
function LegalUnified() {
  const reset = () => { localStorage.removeItem("lex-cookies"); window.dispatchEvent(new Event("lex-cookies-reset")); };
  return <>
    <PageHero label="Legal" title="Aviso legal, privacidad y cookies." />
    <section className="ivory sec">
      <div className="wrap">
        <div className="doc">
          <nav className="toc" aria-label="Índice"><p className="k">Índice</p><ol>{LEGAL_PARTS.map(([id, t]) => <li key={id}><a href={"#/legal/" + id}>{t}</a></li>)}</ol></nav>
          <div>{LEGAL_PARTS.map(([id, t, secs], k) => <section className="doc-sec legal-part" id={id} key={id}>
            <p className="rt-n">{"0" + (k + 1)}</p><h2>{t}</h2>
            <dl className="legal-dl">{secs.map(([sid, st, blocks]) => <React.Fragment key={sid}><dt>{st}</dt><dd>{blocks.map((b, j) => b.ul ? <ul key={j}>{b.ul.map((x) => <li key={x}>{x}</li>)}</ul> : <p key={j}>{b.p}</p>)}</dd></React.Fragment>)}</dl>
            {id === "cookies" && <div className="btns"><Button variant="secondary" onClick={reset}>Cambiar mi elección de cookies</Button></div>}
          </section>)}</div>
        </div>
      </div>
    </section>
  </>;
}
const PrivacyPage = LegalUnified, AvisoPage = LegalUnified, CookiesPage = LegalUnified;
function NotFound() {
  return <>
    <PageHero label="Página no encontrada" title="No encontramos esta página." lead="Puede que el enlace haya cambiado." />
    <section className="ivory sec"><div className="wrap"><Button onClick={() => go("/")}>Ir al inicio</Button></div></section>
  </>;
}
const LegalPage = NotFound;

/* ---------- Libro de Reclamaciones ---------- */
const DOCS = ["DNI", "Carné de extranjería", "Pasaporte"];
const SERVS = ["Asesoría legal a inversionistas", "Asesoría legal a empresas", "Lex Securities Academia", "Otro"];

function LibroPage() {
  const blank = { name: "", doctype: "DNI", doc: "", addr: "", phone: "", mail: "", menor: false, rep: "", serv: "", desc: "", monto: "", tipo: "", det: "", ped: "", ok: false };
  const [f, setF] = React.useState(blank);
  const [err, setErr] = React.useState({});
  const [done, setDone] = React.useState(null);
  const [state, setState] = React.useState("idle");
  const [hp, setHp] = React.useState("");
  const set = mkSet(setF, setErr);
  const today = new Date().toLocaleDateString("es-PE", { day: "2-digit", month: "2-digit", year: "numeric" });
  const submit = (e) => {
    e.preventDefault();
    const x = {};
    if (!f.name.trim()) x.name = "Ingresa tu nombre completo";
    if (f.doc.trim().length < 6) x.doc = "Ingresa tu número de documento";
    if (!f.addr.trim()) x.addr = "Ingresa tu domicilio";
    if (f.phone.replace(/\D/g, "").length < 7) x.phone = "Ingresa un teléfono";
    if (!/^\S+@\S+\.\S+$/.test(f.mail)) x.mail = "Ingresa un correo válido";
    if (f.menor && !f.rep.trim()) x.rep = "Ingresa el nombre de tu padre, madre o representante";
    if (!f.serv) x.serv = "Elige el servicio";
    if (!f.tipo) x.tipo = "Elige reclamo o queja";
    if (!f.det.trim()) x.det = "Describe lo ocurrido";
    if (!f.ped.trim()) x.ped = "Indica qué pides";
    if (!f.ok) x.ok = "Debes aceptar para enviar";
    setErr(x); if (Object.keys(x).length) { scrollToId("lr-form"); return; }
    if (hp) return;
    const n = new Date().getFullYear() + "-" + String(Date.now()).slice(-6);
    setState("sending");
    postForm("libro-reclamaciones", formData({ hoja: n, fecha: today, proveedor: TITULAR.nombre + " (Lex Securities Advisory)", ...f })).then(() => {
      setDone({ n, date: today, ...f }); setF(blank); setState("idle"); window.scrollTo(0, 0);
    }).catch(() => setState("fail"));
  };
  const prov = <>{TITULAR.nombre} (Lex Securities Advisory){TITULAR.ruc && " · RUC " + TITULAR.ruc}{TITULAR.domicilio && " · " + TITULAR.domicilio}</>;
  return <>
    <PageHero label="Libro de Reclamaciones" title="Libro de Reclamaciones virtual" lead={"Registra aquí tu reclamo o queja sobre los servicios de " + TITULAR.nombre + " (Lex Securities Advisory)" + (TITULAR.ruc ? ", RUC " + TITULAR.ruc : "") + (TITULAR.domicilio ? ", " + TITULAR.domicilio : "") + "."} />
    <section className="ivory sec">
      <div className="wrap lr">
        {done ? <div className="formcard lr-done" role="status">
          <p className="k">Hoja de reclamación N.° {done.n}</p>
          <h2 className="h3">Recibimos tu {done.tipo === "queja" ? "queja" : "reclamo"}.</h2>
          <p>Fecha: {done.date}. Te responderemos en un plazo no mayor de 15 días hábiles.</p>
          <p><b>Guarda o imprime esta hoja: es tu constancia.</b></p>
          <dl className="lr-sum">
            <dt>Proveedor</dt><dd>{prov}</dd>
            <dt>Consumidor</dt><dd>{done.name} · {done.doctype} {done.doc}</dd>
            <dt>Domicilio</dt><dd>{done.addr}</dd>
            <dt>Contacto</dt><dd>{done.phone} · {done.mail}</dd>
            {done.menor && <><dt>Representante</dt><dd>{done.rep}</dd></>}
            <dt>Servicio</dt><dd>{done.serv}{done.desc && " · " + done.desc}{done.monto && " · S/ " + done.monto}</dd>
            <dt>Tipo</dt><dd>{done.tipo === "queja" ? "Queja" : "Reclamo"}</dd>
            <dt>Detalle</dt><dd>{done.det}</dd>
            <dt>Pedido</dt><dd>{done.ped}</dd>
          </dl>
          <div className="btns lr-actions"><Button variant="accent" iconStart={<Icon name="printer" size={18} />} onClick={() => window.print()}>Imprimir o guardar mi hoja</Button><Button variant="secondary" onClick={() => setDone(null)}>Registrar otra hoja</Button></div>
        </div> :
        <form className="formcard" id="lr-form" name="libro-reclamaciones" onSubmit={submit} noValidate>
          <Honeypot value={hp} onChange={(e) => setHp(e.target.value)} />
          <div className="lr-head"><span>Proveedor: {prov}</span><span>Fecha: {today}</span></div>
          <fieldset className="lr-fs"><legend>1. Identificación del consumidor</legend>
            <Input label="Nombre completo" value={f.name} error={err.name} onChange={set("name")} />
            <div className="frow"><Select label="Tipo de documento" options={DOCS} value={f.doctype} onChange={set("doctype")} /><Input label="Número de documento" value={f.doc} error={err.doc} onChange={set("doc")} /></div>
            <Input label="Domicilio" value={f.addr} error={err.addr} onChange={set("addr")} />
            <div className="frow"><Input label="Teléfono" type="tel" value={f.phone} error={err.phone} onChange={set("phone")} /><Input label="Correo" type="email" value={f.mail} error={err.mail} onChange={set("mail")} /></div>
            <Checkbox label="Soy menor de edad" checked={f.menor} onChange={set("menor")} />
            {f.menor && <Input label="Nombre del padre, madre o representante" value={f.rep} error={err.rep} onChange={set("rep")} />}
          </fieldset>
          <fieldset className="lr-fs"><legend>2. Servicio contratado</legend>
            <Select label="Servicio" placeholder="Elige uno" options={SERVS} value={f.serv} onChange={set("serv")} />
            {err.serv && <div className="ferr">{err.serv}</div>}
            <div className="frow"><Input label="Descripción (opcional)" value={f.desc} onChange={set("desc")} /><Input label="Monto reclamado en S/ (opcional)" value={f.monto} onChange={set("monto")} /></div>
          </fieldset>
          <fieldset className="lr-fs"><legend>3. Detalle</legend>
            <div><div className="flabel">Tipo</div>
              <div className="seg" role="radiogroup">{[["reclamo", "Reclamo"], ["queja", "Queja"]].map(([v, l]) => <button type="button" role="radio" aria-checked={f.tipo === v} key={v} className={f.tipo === v ? "on" : ""} onClick={() => set("tipo")(v)}>{l}</button>)}</div>
              {err.tipo && <div className="ferr" style={{ marginTop: 8 }}>{err.tipo}</div>}
              <p className="lr-def"><b>Reclamo:</b> disconformidad relacionada con el servicio contratado. <b>Queja:</b> disconformidad que no se relaciona con el servicio, o malestar con la atención recibida.</p>
            </div>
            <Input label="Detalle de lo ocurrido" multiline rows={5} value={f.det} error={err.det} onChange={set("det")} />
            <Input label="Pedido" multiline rows={3} value={f.ped} error={err.ped} onChange={set("ped")} placeholder="Qué solicitas" />
          </fieldset>
          <div><Checkbox label="Declaro que los datos son verdaderos y acepto la política de privacidad" checked={f.ok} onChange={set("ok")} />{err.ok && <div className="ferr" style={{ marginTop: 8 }}>{err.ok}</div>}</div>
          {state === "fail" && <FormFail />}
          <div className="fsend"><Button type="submit" size="lg" disabled={state === "sending"}>{state === "sending" ? "Enviando…" : "Enviar"}</Button></div>
          <p className="lr-note">Responderemos tu reclamo o queja en el plazo legal: no más de quince (15) días hábiles. Presentar un reclamo no impide acudir a otras vías de solución de controversias ni es requisito previo para presentar una denuncia ante el Indecopi.</p>
        </form>}
      </div>
    </section>
  </>;
}

Object.assign(window, { LegalUnified, PageHero, AudiencePage, TeamPage, PublicationsPage, ContactPage, PrivacyPage, AvisoPage, CookiesPage, LibroPage, NotFound, LegalPage });