/* global React, useLang, TypedHeadline */
const { useMemo } = React;
// ============ Términos y Condiciones ============
// Contenido legal servido desde i18n (claves terms.*, ver legal_messages.py).
// La estructura de cada cláusula (párrafos / listas / bloque de email) se declara
// acá; el texto sale de t(). Mismo patrón que about-page.jsx.

// Cada cláusula: id de ancla + secuencia ordenada de bloques.
//   { p: n }       -> párrafo terms.s{idx}.p{n}
//   { ul: count }  -> lista con items terms.s{idx}.li0..li{count-1}
//   { email: true }-> línea "Correo electrónico: <mailto>"
const SECTIONS = [
  { id: "titular",          blocks: [{ p: 0 }, { p: 1 }, { email: true }] },
  { id: "uso",              blocks: [{ p: 0 }, { p: 1 }, { ul: 4 }, { p: 2 }] },
  { id: "contenido",        blocks: [{ p: 0 }, { p: 1 }, { p: 2 }] },
  { id: "propiedad",        blocks: [{ p: 0 }, { ul: 13 }, { p: 1 }, { p: 2 }] },
  { id: "servicios",        blocks: [{ p: 0 }, { p: 1 }, { p: 2 }, { p: 3 }, { p: 4 }] },
  { id: "responsabilidad",  blocks: [{ p: 0 }, { p: 1 }, { p: 2 }] },
  { id: "formularios",      blocks: [{ plink: true }, { p: 1 }, { ul: 5 }, { p: 2 }] },
  { id: "enlaces",          blocks: [{ p: 0 }, { p: 1 }, { p: 2 }] },
  { id: "modificaciones",   blocks: [{ p: 0 }, { p: 1 }, { p: 2 }] },
  { id: "legislacion",      blocks: [{ p: 0 }, { p: 1 }] },
  { id: "contacto",         blocks: [{ p: 0 }, { email: true }] },
];

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

function TermsClause({ section, index }) {
  const { t } = useLang();
  const n = index + 1;                 // número visible + prefijo de clave (terms.s{n})
  const email = t("terms.email.value");

  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(`terms.s${n}.title`)}
      </h2>

      {section.blocks.map((block, bi) => {
        if (block.email) {
          return (
            <p key={bi} style={P_STYLE}>
              {t("terms.email.label")}{" "}
              <a href={`mailto:${email}`} style={{ color: "var(--ink)", fontWeight: 600 }}>
                {email}
              </a>
            </p>
          );
        }
        if (block.plink) {
          // Párrafo con enlace a la Política de Privacidad (cláusula 7).
          return (
            <p key={bi} style={P_STYLE}>
              {t("terms.s7.p0a")}
              <a href="privacy.html" style={{ color: "var(--ink)", fontWeight: 600 }}>
                {t("terms.s7.p0link")}
              </a>
              {t("terms.s7.p0b")}
            </p>
          );
        }
        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(`terms.s${n}.li${j}`)}
                </li>
              ))}
            </ul>
          );
        }
        return (
          <p key={bi} style={P_STYLE}>
            {t(`terms.s${n}.p${block.p}`)}
          </p>
        );
      })}
    </article>
  );
}

function TermsContent() {
  const { t, lang } = useLang();
  const segments = useMemo(() => [
    { type: "text", value: t("terms.hero.h1a") },
    { type: "underline", value: t("terms.hero.h1u") },
    { type: "text", value: t("terms.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("terms.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("terms.hero.updated")}
            </p>
            <p className="hero-sub" style={{ maxWidth: "68ch", marginTop: 18 }}>
              {t("terms.hero.intro")}
            </p>
            <nav className="fp-toc" aria-label="Índice de cláusulas">
              {SECTIONS.map((s, i) => (
                <a key={s.id} href={`#${s.id}`}>{t(`terms.toc.${i}`)}</a>
              ))}
            </nav>
          </div>
        </div>
      </section>

      <section className="on-paper">
        <div className="container">
          <div style={{ maxWidth: 860 }}>
            {SECTIONS.map((s, i) => (
              <TermsClause key={s.id} section={s} index={i} />
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.TermsClause = TermsClause;
window.TermsContent = TermsContent;