/* ============================================================
   HÔTEL OMÉGA — Policies Page
   4 sections in tabs: Cancellation, Terms, Privacy, Legal
   Trilingual, deep-linkable via #policies?tab=cancel
   ============================================================ */

function PoliciesPage() {
  const [t] = window.useT();
  const [tab, setTab] = React.useState(() => {
    if (typeof window === "undefined") return "cancel";
    const m = (window.location.hash || "").match(/tab=(\w+)/);
    return m ? m[1] : "cancel";
  });

  const tabs = [
    { id: "cancel",  label: t("pol.tab.cancel") },
    { id: "terms",   label: t("pol.tab.terms") },
    { id: "privacy", label: t("pol.tab.privacy") },
    { id: "legal",   label: t("pol.tab.legal") },
  ];

  const onTab = (id) => {
    setTab(id);
    try {
      const h = window.location.hash.split("?")[0] || "#policies";
      window.history.replaceState(null, "", `${h}?tab=${id}`);
    } catch (_) {}
  };

  return (
    <section className="page policies-page" data-screen-label="Politiques">
      <header className="page-head">
        <div className="page-eyebrow">{t("pol.eyebrow")}</div>
        <h1 className="page-title">
          {t("pol.title1")}<em>{t("pol.titleEm")}</em>{t("pol.title2")}
        </h1>
        <p className="page-sub">{t("pol.sub")}</p>
      </header>

      <nav className="pol-tabs" role="tablist">
        {tabs.map(tt => (
          <button
            key={tt.id}
            className={"pol-tab" + (tab === tt.id ? " is-active" : "")}
            onClick={() => onTab(tt.id)}
            role="tab"
            aria-selected={tab === tt.id}
          >
            {tt.label}
          </button>
        ))}
      </nav>

      <article className="pol-content" role="tabpanel">
        {tab === "cancel"  && <PolCancel />}
        {tab === "terms"   && <PolTerms />}
        {tab === "privacy" && <PolPrivacy />}
        {tab === "legal"   && <PolLegal />}
      </article>

      <footer className="pol-foot">
        <div className="pol-foot-key">{t("pol.lastUpdated")}</div>
        <div className="pol-foot-val">{t("pol.lastUpdatedVal")}</div>
      </footer>
    </section>
  );
}

/* ---------- helper: render bullet list from i18n ---------- */
function PolList({ k, n }) {
  const [t] = window.useT();
  return (
    <ul className="pol-ul">
      {Array.from({ length: n }).map((_, i) => (
        <li key={i}>{t(`${k}.${i + 1}`)}</li>
      ))}
    </ul>
  );
}

function PolH({ k }) {
  const [t] = window.useT();
  return <h2 className="pol-h2">{t(k)}</h2>;
}

function PolP({ k }) {
  const [t] = window.useT();
  return <p className="pol-p">{t(k)}</p>;
}

/* ---------- 1. Cancellation ---------- */
function PolCancel() {
  return (
    <>
      <PolH k="pol.cancel.h1" />
      <PolP k="pol.cancel.p1" />

      <div className="pol-tiers">
        <div className="pol-tier pol-tier-good">
          <div className="pol-tier-tag">{window.useT()[0]("pol.cancel.tier1.tag")}</div>
          <div className="pol-tier-title">{window.useT()[0]("pol.cancel.tier1.title")}</div>
          <div className="pol-tier-desc">{window.useT()[0]("pol.cancel.tier1.desc")}</div>
        </div>
        <div className="pol-tier pol-tier-warn">
          <div className="pol-tier-tag">{window.useT()[0]("pol.cancel.tier2.tag")}</div>
          <div className="pol-tier-title">{window.useT()[0]("pol.cancel.tier2.title")}</div>
          <div className="pol-tier-desc">{window.useT()[0]("pol.cancel.tier2.desc")}</div>
        </div>
        <div className="pol-tier pol-tier-bad">
          <div className="pol-tier-tag">{window.useT()[0]("pol.cancel.tier3.tag")}</div>
          <div className="pol-tier-title">{window.useT()[0]("pol.cancel.tier3.title")}</div>
          <div className="pol-tier-desc">{window.useT()[0]("pol.cancel.tier3.desc")}</div>
        </div>
      </div>

      <PolH k="pol.cancel.h2" />
      <PolP k="pol.cancel.p2" />

      <PolH k="pol.cancel.h3" />
      <PolList k="pol.cancel.list3" n={4} />

      <PolH k="pol.cancel.h4" />
      <PolP k="pol.cancel.p4" />
    </>
  );
}

/* ---------- 2. Terms (CGV) ---------- */
function PolTerms() {
  return (
    <>
      <PolH k="pol.terms.h1" />
      <PolP k="pol.terms.p1" />
      <PolH k="pol.terms.h2" />
      <PolList k="pol.terms.list2" n={5} />
      <PolH k="pol.terms.h3" />
      <PolP k="pol.terms.p3" />
      <PolH k="pol.terms.h4" />
      <PolList k="pol.terms.list4" n={4} />
      <PolH k="pol.terms.h5" />
      <PolP k="pol.terms.p5" />
      <PolH k="pol.terms.h6" />
      <PolP k="pol.terms.p6" />
      <PolH k="pol.terms.h7" />
      <PolP k="pol.terms.p7" />
    </>
  );
}

/* ---------- 3. Privacy ---------- */
function PolPrivacy() {
  return (
    <>
      <PolH k="pol.priv.h1" />
      <PolP k="pol.priv.p1" />
      <PolH k="pol.priv.h2" />
      <PolList k="pol.priv.list2" n={5} />
      <PolH k="pol.priv.h3" />
      <PolList k="pol.priv.list3" n={4} />
      <PolH k="pol.priv.h4" />
      <PolP k="pol.priv.p4" />
      <PolH k="pol.priv.h5" />
      <PolList k="pol.priv.list5" n={5} />
      <PolH k="pol.priv.h6" />
      <PolP k="pol.priv.p6" />
      <PolH k="pol.priv.h7" />
      <PolP k="pol.priv.p7" />
    </>
  );
}

/* ---------- 4. Legal mentions ---------- */
function PolLegal() {
  const [t] = window.useT();
  return (
    <>
      <PolH k="pol.legal.h1" />
      <dl className="pol-dl">
        <dt>{t("pol.legal.f1.k")}</dt><dd>{t("pol.legal.f1.v")}</dd>
        <dt>{t("pol.legal.f2.k")}</dt><dd>{t("pol.legal.f2.v")}</dd>
        <dt>{t("pol.legal.f3.k")}</dt><dd>{t("pol.legal.f3.v")}</dd>
        <dt>{t("pol.legal.f4.k")}</dt><dd>{t("pol.legal.f4.v")}</dd>
        <dt>{t("pol.legal.f5.k")}</dt><dd>{t("pol.legal.f5.v")}</dd>
        <dt>{t("pol.legal.f6.k")}</dt><dd>{t("pol.legal.f6.v")}</dd>
      </dl>
      <PolH k="pol.legal.h2" />
      <PolP k="pol.legal.p2" />
      <PolH k="pol.legal.h3" />
      <PolP k="pol.legal.p3" />
      <PolH k="pol.legal.h4" />
      <PolP k="pol.legal.p4" />
    </>
  );
}

window.PoliciesPage = PoliciesPage;