// =====================================================================
// Inteli-K — Legal pages (Privacy / Terms)
// Renders bilingual content from window.IK_LEGAL using the shared
// V4 nav + footer. Language follows the global useV4 toggle.
// =====================================================================

const legalStyles = {
  hero: {
    paddingTop: "clamp(96px, 12vw, 150px)",
    paddingBottom: "clamp(36px, 5vw, 60px)",
  },
  updated: {
    fontFamily: "var(--font-mono)",
    fontSize: 12.5,
    letterSpacing: ".04em",
    color: "var(--ink-mute)",
    marginTop: 22,
  },
  body: {
    paddingTop: "clamp(8px, 2vw, 24px)",
    paddingBottom: "clamp(80px, 11vw, 140px)",
  },
  grid: {
    display: "grid",
    gridTemplateColumns: "minmax(0, 760px)",
    gap: "clamp(40px, 5vw, 56px)",
  },
  section: {
    borderTop: "1px solid var(--rule)",
    paddingTop: "clamp(28px, 3.4vw, 40px)",
  },
  h: {
    fontFamily: "var(--font-display)",
    fontWeight: 500,
    fontSize: "clamp(20px, 2.1vw, 26px)",
    letterSpacing: "-0.01em",
    color: "var(--ink)",
    margin: "0 0 18px",
  },
  p: {
    fontSize: 16.5,
    lineHeight: 1.7,
    color: "var(--ink-soft)",
    margin: "0 0 16px",
    maxWidth: "68ch",
    textWrap: "pretty",
  },
  ul: {
    margin: "0 0 16px",
    paddingLeft: 0,
    listStyle: "none",
    display: "flex",
    flexDirection: "column",
    gap: 12,
    maxWidth: "68ch",
  },
  li: {
    position: "relative",
    paddingLeft: 26,
    fontSize: 16.5,
    lineHeight: 1.6,
    color: "var(--ink-soft)",
  },
  liDot: {
    position: "absolute",
    left: 2,
    top: 11,
    width: 7,
    height: 7,
    borderRadius: "50%",
    background: "var(--accent)",
  },
  sub: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 17,
    color: "var(--ink-2)",
    margin: "22px 0 12px",
  },
};

function LegalBody({ items }) {
  return (
    <React.Fragment>
      {items.map((item, i) => {
        if (typeof item === "string") {
          return <p key={i} style={legalStyles.p}>{item}</p>;
        }
        if (item && item.sub) {
          return <h3 key={i} style={legalStyles.sub}>{item.sub}</h3>;
        }
        if (item && item.list) {
          return (
            <ul key={i} style={legalStyles.ul}>
              {item.list.map((li, j) => (
                <li key={j} style={legalStyles.li}>
                  <span style={legalStyles.liDot} aria-hidden="true"></span>
                  {li}
                </li>
              ))}
            </ul>
          );
        }
        return null;
      })}
    </React.Fragment>
  );
}

function V4LegalPage({ docKey, active }) {
  window.useReveal();
  const { lang } = window.useV4();
  const dict = (window.IK_LEGAL && window.IK_LEGAL[lang]) || window.IK_LEGAL.es;
  const doc = dict[docKey];

  return (
    <React.Fragment>
      <window.V4Nav active={active} />

      {/* Hero */}
      <section className="section" style={legalStyles.hero}>
        <div className="wrap">
          <div data-reveal style={{ marginBottom: 26 }}>
            <span className="eyebrow">{doc.eyebrow}</span>
          </div>
          <h1 className="h-display" data-reveal style={{ marginBottom: 8 }}>{doc.title}</h1>
          <p className="lead" data-reveal style={{ marginTop: 18 }}>{doc.intro}</p>
          {doc.updated ? <div data-reveal style={legalStyles.updated}>{doc.updated}</div> : null}
        </div>
      </section>

      {/* Body */}
      <section style={legalStyles.body}>
        <div className="wrap">
          <div style={legalStyles.grid}>
            {doc.sections.map((s, i) => (
              <div key={i} data-reveal style={legalStyles.section}>
                <h2 style={legalStyles.h}>{s.h}</h2>
                <LegalBody items={s.body} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <window.V5Contact />
      <window.V4Footer />
    </React.Fragment>
  );
}

window.V4PrivacyPage = function V4PrivacyPage() {
  return <V4LegalPage docKey="privacy" active="" />;
};

window.V4TermsPage = function V4TermsPage() {
  return <V4LegalPage docKey="terms" active="" />;
};