// mediacion-civil-mercantil.jsx — sub-landing for Mediación Civil y Mercantil

const { useState, useEffect, useLayoutEffect } = React;

const CASOS = [
  "Conflictos entre socios o en órganos de administración",
  "Disputas derivadas de incumplimiento de contratos",
  "Conflictos en arrendamientos de local o vivienda",
  "Reclamaciones civiles entre particulares o empresas",
  "Conflictos entre franquiciadores y franquiciados",
  "Disputas en relaciones de distribución o agencia comercial",
  "Conflictos con proveedores, clientes o colaboradores",
  "Incidencias en relaciones con entidades financieras",
];

const VENTAJAS = [
  {
    num: "01",
    title: "Más rápido que el proceso judicial",
    body: "Un proceso de mediación puede resolverse en semanas, frente a los años que puede durar un litigio.",
  },
  {
    num: "02",
    title: "Confidencialidad total",
    body: "Lo tratado en mediación no trasciende ni puede usarse como prueba en procedimientos judiciales.",
  },
  {
    num: "03",
    title: "Preserva la relación comercial",
    body: "La mediación busca acuerdos que permitan a las partes seguir trabajando juntas cuando sea posible.",
  },
  {
    num: "04",
    title: "Acuerdos con fuerza legal",
    body: "El Acuerdo de Mediación tiene carácter vinculante y puede elevarse a escritura notarial para su ejecución.",
  },
];

const PROCESO = [
  {
    num: "01",
    title: "Consulta inicial",
    body: "Reunión para valorar si la mediación es adecuada para el conflicto y explicar el proceso.",
  },
  {
    num: "02",
    title: "Sesiones de mediación",
    body: "Sesiones individuales con cada parte y sesiones conjuntas según la fase del proceso. Rosa acompaña el análisis del conflicto y la búsqueda de soluciones, de forma presencial o telemática.",
  },
  {
    num: "03",
    title: "Acuerdo de Mediación",
    body: "El acuerdo alcanzado se redacta por escrito con plena eficacia legal. Puede elevarse a escritura pública ante notario para facilitar su ejecución.",
  },
];

function MediacionCivilMercantilPage() {
  const [lang, setLang] = useState(() => localStorage.getItem('rcl') || 'es');
  const [langLoading, setLangLoading] = useState(false);

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", "light");
    document.documentElement.setAttribute("data-palette", "malva");
  }, []);

  useReveal();

  useLayoutEffect(() => {
    const rawDict = (window.TRANSLATIONS && window.TRANSLATIONS[lang]) || {};
    const dict = {}; Object.keys(rawDict).forEach(k => { dict[k.trim().replace(/\s+/g, " ")] = rawDict[k]; });
    document.querySelectorAll("[data-i18n]").forEach((n) => {
      if (!n.dataset.i18nSrc) n.dataset.i18nSrc = n.textContent.trim().replace(/\s+/g, " ");
      if (lang === "es") {
        n.textContent = n.dataset.i18nSrc;
      } else if (Object.keys(dict).length) {
        const translated = dict[n.dataset.i18nSrc];
        if (translated) n.textContent = translated;
      }
    });
  });

  async function changeLang(next) {
    if (next === lang) return;
    setLangLoading(true);
    try {
      await window.applyLanguage(next);
      localStorage.setItem('rcl', next);
      setLang(next);
    } finally {
      setLangLoading(false);
    }
  }

  return (
    <React.Fragment>
      <Nav lang={lang} onLang={changeLang} langLoading={langLoading} isSubPage={true} />

      <main>
        {/* Hero */}
        <section className="sublanding-hero reveal">
          <div className="container">
            <p className="eyebrow" data-i18n>Mediación Civil y Mercantil · Barcelona</p>
            <h1><span data-i18n>Resolver conflictos empresariales</span><br /><em data-i18n>sin llegar a los tribunales</em></h1>
            <p className="sublanding-hero__sub" data-i18n>
              La Ley 1/2025 exige intentar la negociación antes de interponer demandas civiles o mercantiles.
              La mediación es uno de los medios reconocidos para cumplir ese requisito y, a menudo, para resolver el conflicto
              de forma definitiva y confidencial.
            </p>
            <a href="contacto.html" className="btn btn--primary" data-i18n>Solicitar información</a>
          </div>
        </section>

        {/* Imagen reunión empresarial */}
        <section className="container" style={{ paddingTop: "2.5rem", paddingBottom: "0" }}>
          <img
            src="reunion-empresarial.jpg"
            alt="Reunión profesional — mediación civil y mercantil"
            style={{ width: "100%", aspectRatio: "2/1", objectFit: "cover", borderRadius: "12px", display: "block" }}
          />
        </section>

        {/* Ley 1/2025 destacado */}
        <section className="ley-dark-block reveal">
          <div className="container">
            <span className="eyebrow" style={{ color: "var(--accent)" }} data-i18n>Novedades legislativas</span>
            <h2 data-i18n>Ley 1/2025: la mediación, requisito previo a la demanda</h2>
            <p data-i18n>
              Desde el 3 de abril de 2025, la Ley 1/2025 obliga a intentar una negociación antes de presentar
              demandas civiles o mercantiles en España. La mediación es uno de los medios reconocidos para
              cumplir este requisito. Iniciar un proceso de mediación no solo puede evitar el litigio: también
              acredita el cumplimiento de este requisito legal si finalmente fuese necesario acudir al juzgado.
            </p>
            <a href="ley-1-2025.html" className="btn btn--ghost" data-i18n>Más sobre la Ley 1/2025 →</a>
          </div>
        </section>

        {/* Casos */}
        <section className="container reveal" style={{ padding: "4rem 1.5rem" }}>
          <div className="sublanding-cols">
            <div className="sublanding-cols__main">
              <h2 data-i18n>¿Para qué tipo de conflictos?</h2>
              <p data-i18n>
                La mediación civil y mercantil es adecuada para una amplia variedad de disputas entre
                particulares, empresas o profesionales, especialmente cuando existe o existió una relación
                continuada y se quiere preservar o cerrar ordenadamente.
              </p>
              <ul className="checklist">
                {CASOS.map((c, i) => (
                  <li key={i} data-i18n>{c}</li>
                ))}
              </ul>
            </div>
            <aside className="sublanding-cols__aside">
              <div className="aside-card">
                <h3>Rosa Chover</h3>
                <p style={{ fontSize: "0.9rem", marginBottom: "1rem" }} data-i18n>
                  Máster en Derecho Empresarial Europeo (París, 1993). Trayectoria en Bruselas, Madrid y Barcelona.
                  Máster en Mediación Profesional Civil y Mercantil (2015).
                </p>
                <dl className="aside-stats">
                  <dt>2 registros</dt>
                  <dd>Centre de Mediació de Catalunya<br />Centre ADR del ICAB</dd>
                  <dt data-i18n>5 idiomas</dt>
                  <dd>ES · CA · FR · EN · IT</dd>
                </dl>
                <a href="index.html#sobre" className="acc-more-link" data-i18n>Conoce a Rosa →</a>
              </div>
            </aside>
          </div>
        </section>

        {/* Ventajas */}
        <section className="process-section reveal">
          <div className="container">
            <h2 className="section-title" data-i18n>¿Por qué elegir la mediación?</h2>
            <div className="steps-grid">
              {VENTAJAS.map((v) => (
                <div className="step-card" key={v.title}>
                  <span className="step-num">{v.num}</span>
                  <h3 data-i18n>{v.title}</h3>
                  <p data-i18n>{v.body}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Proceso */}
        <section className="container reveal" style={{ padding: "4rem 1.5rem" }}>
          <h2 className="section-title" data-i18n>El proceso paso a paso</h2>
          <div className="steps-grid">
            {PROCESO.map((s) => (
              <div className="step-card" key={s.num}>
                <span className="step-num">{s.num}</span>
                <h3 data-i18n>{s.title}</h3>
                <p data-i18n>{s.body}</p>
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="cta-block reveal">
          <div className="container cta-block__inner">
            <h2 data-i18n>¿Necesita resolver un conflicto?</h2>
            <p data-i18n>Consulta sin compromiso. Rosa valorará si la mediación es la opción más adecuada para su caso.</p>
            <a href="contacto.html" className="btn btn--primary" data-i18n>Contactar</a>
          </div>
        </section>
      </main>

      <Footer />
    </React.Fragment>
  );
}

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