/* Trepa't — Página Legal (Aviso legal · Privacidad · Cookies) */
function Legal({ lang, go }) {
  const t = window.TPT_I18N[lang].legal;
  const initialTab = () => {
    const wanted = sessionStorage.getItem("tpt-legal-tab");
    const i = wanted ? t.docs.findIndex((d) => d.id === wanted) : -1;
    return i >= 0 ? i : 0;
  };
  const [active, setActive] = React.useState(initialTab);
  window.useLucide("legal" + lang + active);

  const jump = (i) => {
    setActive(i);
    const el = document.getElementById("legal-" + t.docs[i].id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  React.useEffect(() => {
    const wanted = sessionStorage.getItem("tpt-legal-tab");
    if (wanted) {
      sessionStorage.removeItem("tpt-legal-tab");
      const el = document.getElementById("legal-" + wanted);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  }, []);

  return (
    <main className="view-enter">
      <window.Hero variant="teal" ghost="cream" title={t.hero.title} lead={t.hero.lead} />
      <window.Band tone="coral" />

      <section className="sec">
        <div className="container legal">
          <nav className="legal__tabs" aria-label={t.hero.title}>
            {t.docs.map((d, i) => (
              <button key={d.id} type="button"
                className={"legal__tab" + (active === i ? " is-active" : "")}
                onClick={() => jump(i)}>{d.title}</button>
            ))}
          </nav>
          <p className="legal__updated">{t.updated}</p>

          {t.docs.map((d) => (
            <article key={d.id} id={"legal-" + d.id} className="legal-doc">
              <h2>{d.title}</h2>
              {d.sections.map((s) => (
                <div key={s.h} className="legal-doc__section">
                  <h3>{s.h}</h3>
                  <p>{s.p}</p>
                </div>
              ))}
            </article>
          ))}
        </div>
      </section>
      <window.Band tone="ink" />
    </main>
  );
}
window.Legal = Legal;