/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* cierre-mensual.jsx — landing "Producto" para /cierre-mensual (redesign
   2026-09). Textos definitivos del handoff: no reescribir. Página en
   español únicamente (sin toggle EN) — mismo criterio que las páginas de
   industria (agro.jsx, etc.), no está en el copy tree de i18n.jsx. 

   Casos anonimizados (pedido del usuario, 2026-09-18): ningún caso
   citado en el sitio lleva nombre de persona ni de empresa cliente; se
   atribuyen por función y tamaño. Los originales quedan en git. */

const PROBLEM_CARDS = [
  { icon: 'ph-clock-countdown', title: 'Dos semanas de consolidación manual', body: 'Bajás CSVs del ERP, los pegás en un Excel, aplicás ajustes, conciliás con la planilla del jefe de operaciones, corregís, publicás. El día 10 el número está — pero ya llegó tarde.' },
  { icon: 'ph-git-branch', title: 'Ajustes sin log de cambios', body: 'Alguien cambió una celda en marzo y nadie sabe quién ni por qué. Cuando el auditor pregunta de dónde sale el número, la respuesta vive en la memoria de una persona.' },
  { icon: 'ph-calendar-x', title: 'Números tardíos para el directorio', body: 'El directorio pide el número el día 5, el equipo llega el día 12. Todo mes la misma escena.' },
];

const HOW_CHECKLIST = [
  'Consolidación multi-entidad y multi-moneda',
  'Ajustes con log de cambios y responsable identificado',
  'P&L, balance y flujo de caja al toque',
  'Conciliación automática entre ERP y planillas',
  'Versiones anteriores accesibles para comparar',
];

/* `href` solo en los ERP que tienen página propia. Dynamics y Softland
   siguen sin link porque su mecanismo de conexión no está confirmado y
   no hay página adónde mandar — un <a> a una URL inexistente sería peor
   que un logo sin link. */
const INTEGRATION_LOGOS = [
  { src: 'brand/integrations/sap.png', alt: 'SAP', h: 34, href: '/integraciones/sap.html' },
  { src: 'brand/integrations/netsuite.png', alt: 'NetSuite', h: 26, href: '/integraciones/netsuite.html' },
  { src: 'brand/integrations/dynamics.png', alt: 'Microsoft Dynamics', h: 30, href: null },
  { src: 'brand/integrations/odoo.png', alt: 'Odoo', h: 28, href: '/integraciones/odoo.html' },
  { src: 'brand/integrations/tango.png', alt: 'Tango Gestión', h: 28, href: '/integraciones/tango.html' },
  { src: 'brand/integrations/softland.png', alt: 'Softland', h: 24, href: null },
];

const FAQ_ITEMS = [
  { q: '¿Cómo maneja Teramot los ajustes manuales?', a: 'Los definís como <b>reglas versionadas</b>, no como celdas sueltas. Cada ajuste queda con fecha, responsable, comentario y el valor anterior, y se vuelve a aplicar solo en los meses siguientes. Podés revertir uno sin recalcular el resto.' },
  { q: '¿Qué pasa si mi ERP no está en la lista?', a: 'Lo conectamos igual. Leemos <b>la base de datos de tu ERP con un usuario de solo lectura</b> — o entramos por su API cuando la expone. También tomamos exports programados y planillas. Si tu ERP es local o a medida, lo vemos en la demo y te decimos qué necesita de tu lado.' },
  { q: '¿Puedo mantener mis planillas de control?', a: 'Sí. <b>Tus planillas siguen funcionando</b>: Teramot las lee como fuente y también puede escribir el resultado consolidado de vuelta en Excel o Google Sheets. Nadie tiene que cambiar cómo trabaja el día uno.' },
  { q: '¿Es compatible con normas contables locales (NIIF/US GAAP)?', a: 'Teramot no impone un criterio contable: <b>replica el tuyo</b>. Configurás el plan de cuentas, los mapeos y las reglas de conversión según la norma que uses, y podés mantener más de un juego de reportes en paralelo para reporte local y casa matriz.' },
  { q: '¿Cuántas entidades puede consolidar?', a: 'La consolidación es <b>multi-entidad y multi-moneda</b> de forma nativa, con eliminación de operaciones entre compañías y tipo de cambio por período. El límite lo define tu plan, no la arquitectura.' },
  { q: '¿Cierra el mes solo, sin revisión humana?', a: 'No, y no debería. Teramot hace la consolidación, la conciliación y el armado del reporte; <b>la publicación la aprobás vos</b>. Cada número llega con su fuente y su fórmula a la vista, justamente para que la revisión sea rápida.' },
];

const { useState: useStateCM, useEffect: useEffectCM, useRef: useRefCM } = React;

/* Scroll reveal — identical hook to home.jsx/agro.jsx (same idiom
   reused verbatim across the site, not extracted to chrome.jsx). */
const useScrollReveal = (rootRef) => {
  useEffectCM(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const root = rootRef.current;
    if (!root) return;
    const groups = [];
    root.querySelectorAll('section, footer').forEach((sec) => {
      const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec;
      const kids = Array.from(wrap.children).filter((el) => (
        el.nodeType === 1 && !el.classList.contains('tm-drawer') && !el.classList.contains('tm-drawer-overlay')
      ));
      if (kids.length) groups.push(kids);
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          en.target.classList.add('rv-in');
          io.unobserve(en.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    groups.forEach((kids) => kids.forEach((el, i) => {
      el.classList.add('rv');
      el.style.transitionDelay = Math.min(i, 4) * 70 + 'ms';
      io.observe(el);
    }));
    return () => io.disconnect();
  }, []);
};

const CierreHero = () => {
  const { c } = useLang();
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="cierre-mensual" />
      <div className="tm-prod-hero-grid">
        <div className="tm-prod-hero-copy">
          <p className="tm-prod-hero-eyebrow">Automatización con IA · Sin proyecto de IT</p>
          <h1>Automatizá el cierre contable mensual: cerrá el mes en <span>minutos, no en semanas</span>.</h1>
          <p className="tm-prod-hero-sub">Consolidación multi-entidad, ajustes trazables y P&amp;L consolidado, con IA sobre tu ERP y tus planillas. Sin migrar nada.</p>
          <div className="tm-prod-hero-actions">
            <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-white">Pedí tu demo <i className="ph ph-arrow-right" /></a>
            <a href={c.links.app} className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-ghost-light"><i className="ph ph-play-circle" style={{ fontSize: 21 }} /> Comenzá Gratis</a>
          </div>
        </div>
        <div className="tm-prod-hero-art">
          <div className="tm-prod-hero-art-glow" />
          <div className="tm-prod-hero-mockup" style={{ position: 'relative', zIndex: 1, width: '100%', background: 'rgba(255,255,255,.96)', border: '1px solid rgba(255,255,255,.55)', borderRadius: 16, padding: 18, boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }} role="img" aria-label="Panel de cierre mensual en Teramot">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 9999, background: '#253DE5', color: '#fff', fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap' }}><i className="ph-bold ph-check-square-offset" style={{ fontSize: 12 }} /> Cierre mensual</span>
              <span style={{ fontSize: 10.5, fontWeight: 600, letterSpacing: '.12em', textTransform: 'uppercase', color: '#6B7280' }}>Marzo 2026</span>
            </div>
            <div style={{ marginTop: 16, borderRadius: 10, background: '#fff', border: '1px solid #EEF0F4', overflow: 'hidden' }}>
              {[
                { icon: 'ph-buildings', label: 'Consolidación multi-entidad', status: 'Listo' },
                { icon: 'ph-arrows-left-right', label: 'Conciliación ERP vs planillas', status: 'Listo' },
                { icon: 'ph-sliders-horizontal', label: 'Ajustes del período', status: 'Con log', neutral: true },
                { icon: 'ph-table', label: 'P&L consolidado', status: 'Publicado' },
              ].map((row, i, arr) => (
                <div key={row.label} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '14px 16px', borderBottom: i < arr.length - 1 ? '1px solid rgba(11,15,20,.05)' : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}><i className={`ph ${row.icon}`} style={{ fontSize: 15, color: '#253DE5', flex: 'none' }} /><span style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-.005em', color: '#0B0F14' }}>{row.label}</span></div>
                  {row.neutral ? (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', padding: '4px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', background: '#fff', fontSize: 10.5, fontWeight: 600, color: '#4B5563' }}>{row.status}</span>
                  ) : (
                    <span style={{ flex: 'none', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.22)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-check" style={{ fontSize: 11 }} /> {row.status}</span>
                  )}
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', minHeight: 80, padding: '18px 100px 0 4px' }}>
              <p style={{ fontSize: 11.5, fontWeight: 500, lineHeight: 1.45, color: '#4B5563' }}>Cada número abre su fuente y su fórmula</p>
            </div>
          </div>
          <div style={{ position: 'absolute', right: -16, bottom: -24, zIndex: 2, width: 172, background: '#fff', border: '1px solid #E5E7EB', borderRadius: 11, boxShadow: '0 2px 4px rgba(11,15,20,.06), 0 1px 2px rgba(11,15,20,.04)', padding: '12px 13px' }}>
            <p style={{ fontSize: 8.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF' }}>Cierre · Marzo</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 9 }}>
              <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 9999, background: '#263185', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ph-bold ph-check" style={{ color: '#91DFC8', fontSize: 11 }} /></span>
              <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>P&amp;L consolidado</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 9, paddingTop: 9, borderTop: '1px solid #EEF0F4' }}>
              <i className="ph ph-git-commit" style={{ color: '#253DE5', fontSize: 12, flex: 'none' }} />
              <span style={{ fontSize: 10, fontWeight: 500, lineHeight: 1.35, color: '#4B5563' }}>Cada número con fuente y fórmula</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const ProblemaSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div className="tm-prod-head">
        <h2>Cómo se ve el cierre contable en la mayoría de los equipos hoy</h2>
        <p>Si te suena familiar, no sos vos: es cómo funciona el proceso cuando el ERP no habla con las planillas.</p>
      </div>
      <div className="tm-prod-cards">
        {PROBLEM_CARDS.map((card) => (
          <article className="tm-prod-card" key={card.title}>
            <div className="tm-prod-card-icon"><i className={`ph ${card.icon}`} /></div>
            <h3>{card.title}</h3>
            <p>{card.body}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const ComoFuncionaSection = () => (
  <section className="tm-prod-section tm-prod-section-wash">
    <div className="tm-container">
      <h2 style={{ maxWidth: 820, margin: '0 auto 48px', textAlign: 'center', fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536', textWrap: 'pretty' }}>De datos dispersos a P&amp;L consolidado, automático</h2>
      <div className="tm-prod-split">
        <div style={{ borderRadius: 12, overflow: 'hidden', background: '#fff', border: '1px solid rgba(11,15,20,.06)', boxShadow: '0 2px 4px rgba(11,15,20,.05), 0 1px 2px rgba(11,15,20,.03)' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '13px 18px', borderBottom: '1px solid #EEF0F4', background: '#FCFCFE' }}>
            <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF' }}>Cierre · Marzo</p>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 9999, background: 'rgba(123,193,173,.18)', fontSize: 10.5, fontWeight: 600, color: '#2F6B58' }}><i className="ph-bold ph-check-circle" style={{ fontSize: 12 }} /> Consolidado</span>
          </div>
          <div style={{ display: 'grid', gap: 6, padding: '16px 18px' }}>
            <div style={{ border: '1px solid #EEF0F4', borderRadius: 10, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-plugs-connected" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Fuentes conectadas</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 11 }}>
                {['ERP · asientos', 'Planilla de ajustes', 'Centros de costo'].map((t) => (
                  <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 9999, border: '1px solid #E5E7EB', fontSize: 11, fontWeight: 500, color: '#374151' }}><span style={{ width: 6, height: 6, borderRadius: 9999, background: '#7BC1AD' }} /> {t}</span>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid #EEF0F4', borderRadius: 10, padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <i className="ph ph-sliders-horizontal" style={{ fontSize: 14, color: '#253DE5' }} />
                  <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>Reglas de ajuste</span>
                </div>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.1em', textTransform: 'uppercase', color: '#253DE5' }}>Con log</span>
              </div>
              <div style={{ display: 'grid', gap: 7, marginTop: 11 }}>
                {['Reclasificación de gastos indirectos', 'Tipo de cambio de cierre'].map((t) => (
                  <div key={t} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '7px 10px', borderRadius: 7, background: '#F7F8FD' }}>
                    <span style={{ fontSize: 11, fontWeight: 500, color: '#374151' }}>{t}</span>
                    <span style={{ fontSize: 10, color: '#6B7280' }}>aplicada</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', color: '#9CA3AF' }}><i className="ph ph-arrow-down" style={{ fontSize: 14 }} /></div>
            <div style={{ border: '1px solid rgba(37,61,229,.18)', borderRadius: 10, padding: '13px 14px', background: '#F7F8FD' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <i className="ph ph-table" style={{ fontSize: 14, color: '#253DE5' }} />
                <span style={{ fontSize: 12, fontWeight: 600, letterSpacing: '-.01em', color: '#0B0F14' }}>P&amp;L consolidado</span>
              </div>
              <div style={{ display: 'grid', gap: 1, marginTop: 11, borderRadius: 7, overflow: 'hidden', border: '1px solid #E5E7EB', background: '#E5E7EB' }}>
                {[['Ingresos', false], ['Costo de ventas', false], ['Resultado operativo', true]].map(([label, bold]) => (
                  <div key={label} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 14, padding: '8px 11px', background: '#fff' }}>
                    <span style={{ fontSize: 11, fontWeight: bold ? 600 : 500, color: bold ? '#0B0F14' : '#4B5563' }}>{label}</span>
                    <span style={{ fontSize: 11, fontWeight: bold ? 600 : 400, color: '#0B0F14' }}>—</span>
                    <i className="ph ph-git-commit" style={{ fontSize: 12, color: '#253DE5' }} />
                  </div>
                ))}
              </div>
              <p style={{ marginTop: 10, fontSize: 10.5, fontWeight: 500, color: '#6B7280' }}>Cada línea abre su fuente y su fórmula</p>
            </div>
          </div>
        </div>
        <div className="tm-prod-split-copy">
          <p>Teramot se conecta a tu ERP y a las planillas de ajuste. La IA multi-agente lee tu plan de cuentas, mapea los centros de costo, aplica las reglas de ajuste que definiste (con log completo) y genera el P&amp;L consolidado. Cada número viene con su fuente y su fórmula. Vos revisás y publicás.</p>
          <div className="tm-prod-checklist">
            {HOW_CHECKLIST.map((t) => (
              <div className="tm-prod-checklist-item" key={t}><i className="ph-bold ph-check" />{t}</div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const TestimoniosSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div className="tm-prod-testi-grid">
        <article className="tm-prod-testi tm-prod-testi-before">
          <p className="tm-prod-testi-kicker">Antes de Teramot</p>
          <blockquote>&ldquo;Seguimos con el Excel, seguimos con la bajada de SAP, con el extra contable, con el análisis paralelo… son cosas que no logramos resolver.&rdquo;</blockquote>
          <div className="tm-prod-testi-sig">
            <span className="tm-prod-testi-avatar"><i className="ph ph-user" /></span>
            <span>Equipo de Finanzas · <b>Mid-market</b></span>
          </div>
        </article>
        <article className="tm-prod-testi tm-prod-testi-after">
          <p className="tm-prod-testi-kicker">Con Teramot · Métrica referencial</p>
          <blockquote>&ldquo;Cierre de 205 horas a 5 minutos.&rdquo;</blockquote>
          <div className="tm-prod-testi-sig">
            <span className="tm-prod-testi-avatar"><i className="ph ph-chart-line-up" /></span>
            <span>Caso citado por <b>KPMG</b> · Mid-market</span>
          </div>
        </article>
      </div>
    </div>
  </section>
);

const IntegracionesSection = () => (
  <section className="tm-prod-section tm-prod-section-paper" style={{ textAlign: 'center' }}>
    <div className="tm-container">
      <h2 style={{ fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Se conecta con tu ERP</h2>
      <p style={{ marginTop: 14, fontSize: 15.5, color: '#4B5563' }}>Sin migración. Sin proyecto de IT. Enchufás y funciona.</p>
      <div className="tm-prod-logos">
        {INTEGRATION_LOGOS.map((logo) => {
          const img = <img src={logo.src} alt={logo.alt} style={{ height: logo.h }} />;
          return logo.href
            ? <a key={logo.alt} href={logo.href} aria-label={`Integración con ${logo.alt}`}>{img}</a>
            : <React.Fragment key={logo.alt}>{img}</React.Fragment>;
        })}
      </div>
      <a href="/integraciones.html" className="tm-btn tm-btn-md" style={{ marginTop: 44, background: 'transparent', color: '#253DE5', border: '1px solid rgba(37,61,229,.28)', borderRadius: 9999, fontWeight: 600 }}>Ver todas las integraciones <i className="ph ph-arrow-right" /></a>
    </div>
  </section>
);

const FaqSection = () => {
  useJsonLd({
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: FAQ_ITEMS.map((item) => ({
      '@type': 'Question',
      name: item.q,
      acceptedAnswer: { '@type': 'Answer', text: item.a.replace(/<\/?b>/g, '') },
    })),
  });
  return (
    <section className="tm-prod-section tm-prod-section-white">
      <div className="tm-container">
        <div className="tm-prod-faq-grid">
          <aside className="tm-prod-faq-aside">
            <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Preguntas frecuentes</span>
            <h2>Preguntas frecuentes sobre <span>cierre contable</span> con Teramot</h2>
          </aside>
          <div className="tm-prod-faq-list">
            {FAQ_ITEMS.map((item, i) => (
              <details className="tm-prod-faq-item" key={item.q} open={i === 0 ? true : undefined}>
                <summary>
                  <span className="tm-prod-faq-q">{item.q}</span>
                  <span className="tm-prod-faq-icon"><i className="ph-bold ph-plus" /></span>
                </summary>
                <p className="tm-prod-faq-a" dangerouslySetInnerHTML={{ __html: item.a }} />
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const CtaFinalSection = () => {
  const { c } = useLang();
  return (
    <section id="demo" className="tm-prod-cta">
      <div className="tm-prod-cta-inner">
        <p className="tm-prod-cta-kicker">Empezá ahora</p>
        <h2>Empezá con el cierre de este mes</h2>
        <p className="tm-prod-cta-sub">Agendá 30 minutos y te mostramos Teramot sobre tu propio caso, no un demo genérico.</p>
        <div className="tm-prod-cta-actions">
          <a href={c.links.call} target="_blank" rel="noopener noreferrer" className="tm-btn tm-btn-lg" style={{ background: '#fff', color: '#253DE5', borderColor: 'transparent', borderRadius: 9999, fontWeight: 600 }}>Pedí tu demo</a>
          <a href={c.links.app} className="tm-btn tm-btn-lg" style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.5)', borderRadius: 9999, fontWeight: 600 }}>Comenzá Gratis</a>
        </div>
        <p className="tm-prod-cta-fine">Sin proyecto de IT · Setup en semanas, no meses · Tus planillas siguen funcionando</p>
      </div>
    </section>
  );
};

const CierreMensualApp = () => {
  const rootRef = useRefCM(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <CierreHero />
      <ProblemaSection />
      <ComoFuncionaSection />
      <TestimoniosSection />
      <IntegracionesSection />
      <FaqSection />
      <CtaFinalSection />
      <Footer />
    </main>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider defaultLang="es">
    <CierreMensualApp />
  </LangProvider>
);