/* global React, useLang, TypedHeadline */
const { useMemo } = React;
// ============ Política de Privacidad ============
// Contenido legal servido desde i18n (claves privacy.*, ver legal_messages.py).
// Espeja terms-page.jsx: la estructura de cada cláusula se declara acá; el texto
// sale de t(). Bloques: { p:n } párrafo, { ul:count } lista, { email:true } mailto.
const SECTIONS = [
  { id: "datos",          blocks: [{ p: 0 }, { ul: 6 }] },
  { id: "uso",            blocks: [{ p: 0 }, { ul: 5 }, { p: 1 }] },
  { id: "base-legal",     blocks: [{ p: 0 }, { ul: 3 }] },
  { id: "comparte",       blocks: [{ p: 0 }, { ul: 2 }, { p: 1 }] },
  { id: "transferencias", blocks: [{ p: 0 }] },
  { id: "seguridad",      blocks: [{ p: 0 }] },
  { id: "retencion",      blocks: [{ p: 0 }] },
  { id: "derechos",       blocks: [{ p: 0 }, { ul: 5 }, { p: 1 }, { email: true }] },
  { id: "cambios",        blocks: [{ p: 0 }] },
  { id: "contacto",       blocks: [{ p: 0 }, { email: true }] },
];

const P_STYLE = {
  color: "var(--neutral-2)",
  fontSize: 16,
  lineHeight: 1.75,
  maxWidth: "72ch",
  marginTop: 14,
};

function PrivacyEmail() {
  const { t } = useLang();
  const email = t("privacy.email.value");
  return (
    <p style={P_STYLE}>
      {t("privacy.email.label")}{" "}
      <a href={`mailto:${email}`} style={{ color: "var(--ink)", fontWeight: 600 }}>
        {email}
      </a>
    </p>
  );
}

function PrivacyClause({ section, index }) {
  const { t } = useLang();
  const n = index + 1;                 // número visible + prefijo de clave (privacy.s{n})

  return (
    <article
      id={section.id}
      style={{ scrollMarginTop: 96, marginTop: index === 0 ? 0 : 56 }}
    >
      <h2
        style={{
          fontSize: "clamp(22px, 2.4vw, 30px)",
          lineHeight: 1.15,
          letterSpacing: "-0.02em",
          color: "var(--ink)",
          margin: 0,
        }}
      >
        <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: "0.7em", marginRight: 10 }}>
          {String(n).padStart(2, "0")}
        </span>
        {t(`privacy.s${n}.title`)}
      </h2>

      {section.blocks.map((block, bi) => {
        if (block.email) return <PrivacyEmail key={bi} />;
        if (block.ul != null) {
          return (
            <ul key={bi} style={{ margin: "14px 0 0", paddingLeft: 22, maxWidth: "72ch" }}>
              {Array.from({ length: block.ul }, (_, j) => (
                <li key={j} style={{ color: "var(--neutral-2)", fontSize: 16, lineHeight: 1.6, marginTop: 8 }}>
                  {t(`privacy.s${n}.li${j}`)}
                </li>
              ))}
            </ul>
          );
        }
        return (
          <p key={bi} style={P_STYLE}>
            {t(`privacy.s${n}.p${block.p}`)}
          </p>
        );
      })}
    </article>
  );
}

function PrivacyContent() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "text", value: t("privacy.hero.h1a") },
    { type: "underline", value: t("privacy.hero.h1u") },
    { type: "text", value: t("privacy.hero.h1b") }
  ], [lang, t]);
  return (
    <>
      <section className="hero" id="top">
        <div className="container">
          <div className="hero-lower-left" style={{ maxWidth: 1100 }}>
            <span className="kicker"><span className="dot" />{t("privacy.hero.kicker")}</span>
            <h1 className="hero-headline hero-headline-narrow" style={{ marginTop: 22 }}>
              <TypedHeadline key={lang} segments={segments} />
            </h1>
            <p style={{ fontFamily: "var(--font-mono)", fontSize: 13, letterSpacing: "0.04em", color: "var(--neutral-3)", marginTop: 28 }}>
              {t("privacy.hero.updated")}
            </p>
            <p className="hero-sub" style={{ maxWidth: "68ch", marginTop: 18 }}>
              {t("privacy.hero.intro")}
            </p>
            <nav className="fp-toc" aria-label="Índice de secciones">
              {SECTIONS.map((s, i) => (
                <a key={s.id} href={`#${s.id}`}>{t(`privacy.toc.${i}`)}</a>
              ))}
            </nav>
          </div>
        </div>
      </section>

      <section className="on-paper">
        <div className="container">
          <div style={{ maxWidth: 860 }}>
            <p style={{ ...P_STYLE, marginTop: 0 }}>{t("privacy.intro.body")}</p>
            <PrivacyEmail />
            <div style={{ marginTop: 40 }}>
              {SECTIONS.map((s, i) => (
                <PrivacyClause key={s.id} section={s} index={i} />
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.PrivacyEmail = PrivacyEmail;
window.PrivacyClause = PrivacyClause;
window.PrivacyContent = PrivacyContent;