// components.jsx — Rosa Chover

const { useState, useEffect, useLayoutEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────────
// SHARED HOOKS

function useReveal() {
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// Placeholder image component — shows descriptive text above + dashed box
function PlaceholderImg({ suggestion, label, aspectRatio }) {
  return (
    <div>
      <p className="ph-suggestion">📷 {suggestion}</p>
      <div className="placeholder-img" style={aspectRatio ? { aspectRatio } : {}}>
        <div className="phi-icon">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
            <polyline points="21 15 16 10 5 21"/>
          </svg>
        </div>
        <span className="phi-label">{label}</span>
        <span className="phi-tag">IMAGEN POR AÑADIR</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// NAV

function Nav({ lang, onLang, langLoading, isSubPage }) {
  const [openLang, setOpenLang] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const ref = useRef(null);
  const prefix = isSubPage ? "index.html" : "";

  useEffect(() => {
    function onDoc(e) {
      if (ref.current && !ref.current.contains(e.target)) setOpenLang(false);
    }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  useEffect(() => {
    document.body.classList.toggle("menu-open", menuOpen);
    return () => document.body.classList.remove("menu-open");
  }, [menuOpen]);

  const links = [
    { href: prefix + "#servicios",   label: "Mediación" },
    { href: "ley-1-2025.html",       label: "Ley 1/2025" },
    { href: prefix + "#sobre",       label: "Sobre mí" },
    { href: "contacto.html",         label: "Contacto" },
  ];

  return (
    <React.Fragment>
      <header className="nav">
        <div className="container nav-inner">
          <a href={prefix || "#top"} className="nav-brand" aria-label="Inicio" onClick={() => setMenuOpen(false)}>
            <span className="mark">r</span>
            <span className="name" data-i18n>Rosa Chover</span>
            <span className="role" data-i18n>· Mediadora Profesional</span>
          </a>
          <nav className="nav-links">
            {links.map((l) => (
              <a key={l.href} href={l.href} data-i18n>{l.label}</a>
            ))}
          </nav>
          <div className="nav-cta-wrap">
            <div className="lang" ref={ref}>
              <button className="lang-btn" onClick={() => setOpenLang(v => !v)} aria-haspopup="listbox" aria-expanded={openLang}>
                <span>{LANG_LABELS[lang].code}</span>
                <svg width="9" height="6" viewBox="0 0 10 6" fill="none" aria-hidden="true">
                  <path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <div className={`lang-menu ${openLang ? "open" : ""}`} role="listbox">
                {Object.entries(LANG_LABELS).map(([code, info]) => (
                  <div
                    key={code}
                    className={`lang-item ${code === lang ? "active" : ""}`}
                    role="option"
                    aria-selected={code === lang}
                    onClick={() => { onLang(code); setOpenLang(false); }}
                  >
                    <span>{info.label}</span>
                    <span className="code">{info.code}</span>
                  </div>
                ))}
              </div>
            </div>
            <a href="contacto.html" className="btn btn-primary desktop-cta" style={{ padding: "11px 18px", fontSize: 14 }}>
              <span data-i18n>Pedir cita</span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
            <button
              className={`burger ${menuOpen ? "open" : ""}`}
              onClick={() => setMenuOpen(v => !v)}
              aria-label={menuOpen ? "Cerrar menú" : "Abrir menú"}
              aria-expanded={menuOpen}
            >
              <span className="lines" aria-hidden="true">
                <span></span><span></span><span></span>
              </span>
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-menu ${menuOpen ? "open" : ""}`} aria-hidden={!menuOpen}>
        <div className="mobile-menu-inner">
          {links.map((l, i) => (
            <a
              key={l.href}
              href={l.href}
              className="m-link"
              onClick={() => setMenuOpen(false)}
            >
              <span data-i18n>{l.label}</span>
              <span className="num">{String(i + 1).padStart(2, "0")}</span>
            </a>
          ))}
          <div className="m-cta">
            <a href="contacto.html" className="btn btn-primary" onClick={() => setMenuOpen(false)}>
              <span data-i18n>Pedir cita</span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
          </div>
          <div className="m-foot">
            <span data-i18n>Roger de Llúria 5, Barcelona</span>
            <a href="mailto:rosachover@icab.cat">rosachover@icab.cat</a>
          </div>
        </div>
      </div>

      <div className={`lang-loader ${langLoading ? "on" : ""}`}>
        <span className="spin" aria-hidden="true"></span>
        <span>Traduciendo…</span>
      </div>
    </React.Fragment>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HERO

function Hero() {
  return (
    <section className="hero" id="top">
      <video
        className="hero-video"
        autoPlay muted loop playsInline
        poster="fallback-ordenador.jpg"
        aria-hidden="true"
      >
        <source src="hero-ordenador.mp4" type="video/mp4" />
      </video>
      <div className="hero-overlay" aria-hidden="true"></div>
      <div className="hero-content">
        <div className="hero-eyebrow eyebrow"><span data-i18n>Mediación · Barcelona</span></div>
        <h1 className="display">
          <span data-i18n>Hay conversaciones difíciles</span>{" "}
          <span className="em" data-i18n>que merecen ser bien acompañadas.</span>
        </h1>
        <p className="sub" data-i18n>
          Acompaño a personas, familias y empresas en la resolución de sus conflictos, con escucha activa, proceso estructurado y respeto por todas las partes. Desde 1993.
        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="contacto.html">
            <span data-i18n>Reservar una primera conversación</span>
            <span className="arrow" aria-hidden="true">→</span>
          </a>
          <a className="btn btn-ghost" href="#servicios">
            <span data-i18n>Ver servicios</span>
          </a>
        </div>
      </div>
      <div className="hero-meta">
        <div className="loc"><span data-i18n>Roger de Llúria 5, Barcelona</span></div>
        <div data-i18n>Atención en ES · CA · EN · FR · IT</div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// TRUST STRIP

function Trust() {
  const items = [
    {
      big: "Desde", unit: " 1993",
      labelI18n: "Trayectoria profesional",
      capI18n: "Tres décadas trabajando en resolución de conflictos entre Bruselas, Madrid y Barcelona.",
    },
    {
      big: "Desde", unit: " 2015",
      labelI18n: "Mediación profesional",
      capI18n: "Máster en Mediación Profesional Civil y Mercantil. Práctica privada y municipal desde entonces.",
    },
    {
      big: "2", unit: " registros",
      labelI18n: "Acreditaciones",
      capI18n: "Inscrita en el Centre de Mediació de Catalunya y en el Centre ADR del ICAB.",
    },
    {
      big: "5", unit: " idiomas",
      labelI18n: "Atención multilingüe",
      capI18n: "Mediaciones en castellano, català, english, français e italiano.",
    },
  ];
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-grid">
          {items.map((it, i) => (
            <div className="trust-cell reveal" key={i}>
              <div className="label" data-i18n>{it.labelI18n}</div>
              <div className="big">
                <span data-i18n>{it.big}</span>
                {it.unit && <span className="unit" data-i18n>{it.unit}</span>}
              </div>
              <div className="caption" data-i18n>{it.capI18n}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// WHAT IS MEDIATION

function WhatIsMediation() {
  const principles = [
    {
      num: "01",
      title: "Voluntaria",
      body: "Las partes deciden cuándo empezar y cuándo terminar. La mediadora también puede no iniciarla si observa mala fe en alguna de las partes.",
    },
    {
      num: "02",
      title: "Confidencial",
      body: "Todo lo hablado en mediación permanece en mediación. Partes y mediadora se comprometen a guardar confidencialidad absoluta.",
    },
    {
      num: "03",
      title: "Neutral e imparcial",
      body: "La mediadora no asesora ni toma partido. Gestiona el proceso, asegura que todas las partes tengan voz y que los acuerdos sean equitativos.",
    },
    {
      num: "04",
      title: "Con asesoría legal propia",
      body: "Es aconsejable que las partes dispongan de asesoría jurídica independiente durante el proceso y antes de firmar cualquier acuerdo.",
    },
    {
      num: "05",
      title: "Orientada al futuro",
      body: "No podemos cambiar el pasado, pero sí nuestra mirada hacia él. La mediación es un proceso colaborativo que construye desde hoy en adelante.",
    },
  ];

  return (
    <section className="what-is block" id="que-es">
      <div className="container">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow"><span data-i18n>Mediación</span></span>
            <h2 className="display">
              <span data-i18n>¿Qué es</span>{" "}
              <span className="em" data-i18n>la mediación?</span>
            </h2>
          </div>
          <div className="sec-intro" data-i18n>
            El conflicto surge cuando hay una divergencia de intereses y/o necesidades que las partes perciben como incompatibles entre sí. La mediación es el proceso estructurado en el que un tercero neutral les acompaña a transformar esa divergencia en acuerdos.
          </div>
        </div>

        <div className="role-block reveal">
          <div>
            <h3 className="rb-heading">
              <span data-i18n>Mi papel como</span>{" "}
              <span className="em" data-i18n>mediadora</span>
            </h3>
            <img
              src="dialogo-mediacion.jpg"
              alt="Dos personas en diálogo — mediación"
              className="role-img"
            />
          </div>
          <div>
            <div className="rb-body" data-i18n>
              Te acompaño en el análisis del conflicto y en la escucha de todas las partes implicadas. Gestiono el proceso formal de mediación y sus tiempos. Si en algún momento veo necesaria la ayuda de otros profesionales —abogados, economistas, arquitectos, psicólogos—, te lo sugiero.
              <br /><br />
              Cuando llegamos a buen puerto, redacto los <strong>Acuerdos de Mediación</strong>: acuerdos privados con fuerza jurídica vinculante que, si las partes lo requieren, pueden elevarse a escritura pública ante Notario para convertirse en acuerdos ejecutivos y oponibles frente a terceros.
            </div>
            <div className="rb-note" data-i18n>
              La mediadora no puede ofrecer su opinión personal sobre los temas tratados, proponer soluciones al conflicto ni prestar asesoría de ningún tipo. Su papel es exclusivamente gestionar el proceso.
            </div>
          </div>
        </div>

        <img
          src="dialogo-mediacion.jpg"
          alt="Dos personas en diálogo — mediación"
          className="reveal role-img-mobile"
        />
        <p className="principles-label reveal" data-i18n>Los principios de la mediación</p>
        <div className="principles-grid">
          {principles.map((p, i) => (
            <div className="principle-card reveal" key={i}>
              <span className="pc-num">{p.num}</span>
              <span className="pc-title" data-i18n>{p.title}</span>
              <span className="pc-body" data-i18n>{p.body}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SERVICES (accordion)

const SERVICES = [
  {
    tag: "Mediación",
    title: "Mediación familiar",
    lead: "Separaciones, divorcios, herencias, conflictos intergeneracionales. Un espacio neutral donde todas las partes tienen voz y donde los acuerdos se construyen pensando en quienes más importan.",
    points: [
      "Acuerdos parentales y planes de parentalidad",
      "Pensiones, uso de la vivienda familiar y reparto patrimonial",
      "Herencias y conflictos entre hermanos o generaciones",
      "Empresa familiar y sucesión",
    ],
    link: "mediacion-familiar.html",
  },
  {
    tag: "Mediación",
    title: "Mediación civil y mercantil",
    lead: "Conflictos entre socios, disputas contractuales, relaciones comerciales. Procesos confidenciales que preservan la relación y el negocio. Especialmente relevante con la nueva Ley 1/2025.",
    points: [
      "Disputas entre socios y consejos de administración",
      "Conflictos contractuales y de cumplimiento",
      "Sucesión en empresa familiar",
      "Mediación pre-procesal (Ley 1/2025) y derivada del juzgado",
    ],
    link: "mediacion-civil-mercantil.html",
  },
  {
    tag: "Comunitaria",
    title: "Mediación comunitaria, escolar y vecinal",
    lead: "Conflictos entre vecinos, en comunidades de propietarios y en entornos educativos. Más de diez años de experiencia en servicios de mediación municipal.",
    points: [
      "Servicios de mediación municipal (Esplugues, Sant Pere de Ribes, Sant Vicenç dels Horts)",
      "Comunidades de propietarios y convivencia",
      "Mediación escolar entre familias y centros",
      "Conflictos de barrio y vecindad",
    ],
    link: "mediacion-comunitaria.html",
  },
  {
    tag: "Especialidad",
    title: "Acompañamiento en búsqueda de orígenes",
    lead: "Acompañamiento personalizado en los procesos de búsqueda de orígenes para personas adoptadas. Un camino que requiere delicadeza, escucha y un ritmo muy particular.",
    points: [
      "Orientación y acompañamiento en el proceso de búsqueda",
      "Coordinación con servicios especializados y entidades colaboradoras",
      "Acompañamiento emocional durante las distintas fases",
      "Información sobre recursos y organismos competentes",
    ],
    link: null,
    cta: "contacto.html",
  },
];

function Services() {
  const [open, setOpen] = useState(0);
  return (
    <section className="block" id="servicios">
      <div className="container">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow"><span data-i18n>Servicios</span></span>
            <h2 className="display">
              <span data-i18n>Lo que puedo</span>{" "}
              <span className="em" data-i18n>hacer por ti.</span>
            </h2>
          </div>
          <div className="sec-intro" data-i18n>
            Cada conflicto tiene su forma. A veces basta con sentarse a hablar bien acompañados. Otras veces hace falta un proceso más estructurado. Estos son los ámbitos en los que trabajo.
          </div>
        </div>

        <div className="acc">
          {SERVICES.map((s, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`acc-item ${isOpen ? "open" : ""}`}>
                <button className="acc-btn" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span className="acc-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="acc-title" data-i18n>{s.title}</span>
                  <span className="acc-tag" data-i18n>{s.tag}</span>
                  <span className="acc-plus" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                  </span>
                </button>
                {s.link && (
                  <div className="acc-visible-link" onClick={(e) => e.stopPropagation()}>
                    <a href={s.link} className="acc-more-link">
                      <span data-i18n>Ver más sobre este servicio</span>
                      <span className="arrow" aria-hidden="true">→</span>
                    </a>
                  </div>
                )}
                {!s.link && s.cta && (
                  <div className="acc-visible-link" onClick={(e) => e.stopPropagation()}>
                    <a href={s.cta} className="acc-more-link">
                      <span data-i18n>Consultar con Rosa</span>
                      <span className="arrow" aria-hidden="true">→</span>
                    </a>
                  </div>
                )}
                <div className="acc-panel">
                  <div className="acc-panel-inner">
                    <div className="acc-content">
                      <span></span>
                      <div>
                        <p className="lead" data-i18n>{s.lead}</p>
                      </div>
                      <ul>
                        {s.points.map((p, j) => <li key={j} data-i18n>{p}</li>)}
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// LEY 1/2025 BANNER (home teaser)

function LeyBanner() {
  return (
    <section className="ley-banner-section">
      <div className="container">
        <div className="ley-banner reveal">
          <div>
            <div className="lb-eyebrow" data-i18n>Nueva ley · Vigente desde 2025</div>
            <h3>
              <span data-i18n>La Ley 1/2025 obliga a intentar la</span>{" "}
              <span className="em" data-i18n>negociación antes de ir a juicio.</span>
            </h3>
            <p data-i18n>
              La nueva ley de eficiencia procesal establece la obligatoriedad de acudir a un medio adecuado de resolución de conflictos antes de presentar una demanda civil. La mediación es uno de esos medios. Te explico cómo funciona y qué supone para tu situación.
            </p>
          </div>
          <div className="lb-cta">
            <a href="ley-1-2025.html" className="btn btn-primary">
              <span data-i18n>Saber más</span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ABOUT

function About() {
  return (
    <section className="block" id="sobre">
      <div className="container">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow"><span data-i18n>Sobre mí</span></span>
            <h2 className="display">
              <span data-i18n>Más de treinta años</span>{" "}
              <span className="em" data-i18n>escuchando.</span>
            </h2>
          </div>
          <div className="sec-intro" data-i18n>
            Terminé el Máster en Derecho Europeo de los Negocios en 1993 en París, y desde entonces he trabajado de manera continuada, primero en Bruselas, luego en Madrid y desde 1998 en Barcelona. En 2015 me especialicé en mediación, y desde entonces es mi dedicación exclusiva.
          </div>
        </div>

        <div className="about-grid">
          <div className="photo-slot reveal" aria-label="Foto profesional de Rosa Chover">
            <img
              src="foto-sobre-mi.jpg"
              alt="Rosa Chover · Mediadora Profesional en Barcelona"
              loading="lazy"
            />
          </div>

          <div className="about-body reveal">
            <p className="pull" data-i18n>
              Creo en los acuerdos. En los acuerdos hablados, pensados y firmados con calma. Los que duran.
            </p>
            <p data-i18n>
              Mi trayectoria nació en el Derecho europeo de los negocios —trabajé entre Bruselas, Madrid y Barcelona durante más de veinte años— y encontró su vocación definitiva en la mediación. En 2015 terminé el Máster en Mediación Profesional Civil y Mercantil, y desde entonces me dedico exclusivamente a acompañar a personas, familias y empresas en la resolución de sus conflictos.
            </p>
            <p data-i18n>
              Ejerzo como mediadora profesional en Barcelona, colaborando con diversos ayuntamientos del área metropolitana como mediadora comunitaria y familiar, y llevando mi práctica privada de mediación familiar, civil y mercantil.
            </p>
            <p>
              <span data-i18n>Además, soy colaboradora del despacho profesional</span>{" "}
              <a href="https://tzabogados.com/es/el-equipo/" target="_blank" rel="noopener">TZ Abogados</a>.
            </p>

            <div className="badges">
              <span className="badge">
                <span className="dot" aria-hidden="true">✓</span>
                <span data-i18n>Inscrita en el Centre de Mediació de Catalunya — Generalitat de Catalunya</span>
              </span>
              <span className="badge">
                <span className="dot" aria-hidden="true">✓</span>
                <span data-i18n>Acreditada en el Centre ADR del ICAB — Il·lustre Col·legi de l'Advocacia de Barcelona</span>
              </span>
              <span className="badge">
                <span className="dot" aria-hidden="true">✓</span>
                <span data-i18n>Participa en el proyecto piloto de mediación exprés de la AP de Barcelona</span>
              </span>
            </div>

            <div className="creds">
              <div className="cred">
                <div className="yr">1987 — 1991</div>
                <div className="ti" data-i18n>Licenciatura en Derecho</div>
                <div className="sub" data-i18n>Universitat de València</div>
              </div>
              <div className="cred">
                <div className="yr">1992 — 1993</div>
                <div className="ti" data-i18n>Máster en Derecho Europeo de los Negocios</div>
                <div className="sub" data-i18n>París</div>
              </div>
              <div className="cred">
                <div className="yr">2007 — 2008</div>
                <div className="ti" data-i18n>Postgrado en Protección de la Infancia y Adopción</div>
                <div className="sub" data-i18n>Universitat de Barcelona · Sobresaliente</div>
              </div>
              <div className="cred">
                <div className="yr">2014 — 2015</div>
                <div className="ti" data-i18n>Máster en Mediación Profesional Civil y Mercantil</div>
                <div className="sub" data-i18n>IDEC · Universitat Pompeu Fabra</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CTA BLOCK

function CTABlock() {
  return (
    <section className="cta-block" id="contacto">
      <div className="container cta-inner">
        <div>
          <span className="eyebrow" style={{ color: "currentColor", opacity: .7 }}>
            <span data-i18n>Primera conversación</span>
          </span>
          <h2 style={{ marginTop: 14 }}>
            <span data-i18n>Si estás dudando si llamar,</span>{" "}
            <span className="em" data-i18n>quizá es buen momento para hacerlo.</span>
          </h2>
          <p className="sub" data-i18n>
            La primera conversación es siempre tranquila y sin compromiso. Sirve para entender qué te preocupa y ver, juntos, si la mediación es el camino adecuado.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="contacto.html" className="btn btn-primary">
              <span data-i18n>Ir al formulario</span>
              <span className="arrow" aria-hidden="true">→</span>
            </a>
            <a href="mailto:rosachover@icab.cat" className="btn btn-ghost" style={{ color: "inherit", borderColor: "currentColor" }}>
              <span data-i18n>Escribir a rosachover@icab.cat</span>
            </a>
          </div>
        </div>
        <aside className="cta-side">
          <div className="row">
            <span className="k" data-i18n>Despacho</span>
            <span className="v" data-i18n>Roger de Llúria 5, 5º 1ª — 08010 Barcelona</span>
          </div>
          <div className="row">
            <span className="k">Email</span>
            <span className="v"><a href="mailto:rosachover@icab.cat">rosachover@icab.cat</a></span>
          </div>
          <div className="row">
            <span className="k" data-i18n>Horario</span>
            <span className="v" data-i18n>Lunes a viernes, con cita previa</span>
          </div>
          <div className="row">
            <span className="k" data-i18n>Idiomas</span>
            <span className="v">ES · CA · EN · FR · IT</span>
          </div>
          <div className="row">
            <span className="k" data-i18n>Primera sesión</span>
            <span className="v" data-i18n>60 € + IVA — orientativa y sin compromiso</span>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FOOTER

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="mk">r</div>
            <div className="nm" data-i18n>Rosa Chover</div>
            <div className="rl" data-i18n>Mediadora Profesional · Barcelona</div>
          </div>
          <div className="foot-col">
            <h4 data-i18n>Despacho</h4>
            <ul>
              <li data-i18n>Roger de Llúria 5, 5º 1ª</li>
              <li data-i18n>08010 Barcelona</li>
              <li><a href="mailto:rosachover@icab.cat">rosachover@icab.cat</a></li>
              <li><a href="https://www.linkedin.com/in/rosa-chover-taberner-62999ab" target="_blank" rel="noopener">LinkedIn</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4 data-i18n>Web</h4>
            <ul>
              <li><a href="index.html#servicios" data-i18n>Mediación</a></li>
              <li><a href="ley-1-2025.html" data-i18n>Ley 1/2025</a></li>
              <li><a href="index.html#sobre" data-i18n>Sobre mí</a></li>
              <li><a href="contacto.html" data-i18n>Contacto</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4 data-i18n>Legal</h4>
            <ul>
              <li><a href="aviso-legal.html" data-i18n>Aviso legal</a></li>
              <li><a href="politica-privacidad.html" data-i18n>Política de privacidad</a></li>
              <li><a href="aviso-legal.html#cookies" data-i18n>Política de cookies</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span data-i18n>© 2026 Rosa Chover. Todos los derechos reservados.</span>
          <span className="legal">
            <span data-i18n>Inscrita en el Centre de Mediació de Catalunya y en el Registro del Centre ADR del ICAB</span>
          </span>
        </div>
        <div className="foot-credit">
          Hecho por <a href="https://mateoroncagliolo.com" target="_blank" rel="noopener">Mateo Roncagliolo</a>
        </div>
      </div>
    </footer>
  );
}

// Export to window
Object.assign(window, {
  Nav, Hero, Trust, WhatIsMediation, Services, LeyBanner,
  About, CTABlock, Footer, PlaceholderImg, useReveal,
});