// Shared renderer for legal / policy pages. Simple, sober layout — navbar + centered markdown + footer.
// Usage: renderLegal({ title, updated, body }) — body is an array of section objects.
//   { type:"h2", text }
//   { type:"h3", text }
//   { type:"p", text }                     // HTML allowed
//   { type:"list", items:[...] }           // HTML allowed per item
//   { type:"hr" }

function renderLegalSection(s, i) {
  switch (s.type) {
    case "h2":
      return (
        <h2 key={i} className="font-display text-[22px] md:text-[26px] font-semibold tracking-tight text-fg mt-12 mb-4">
          {s.text}
        </h2>
      );
    case "h3":
      return (
        <h3 key={i} className="font-display text-[16.5px] md:text-[17.5px] font-semibold text-fg mt-7 mb-2.5">
          {s.text}
        </h3>
      );
    case "p":
      return (
        <p key={i} className="text-[15.5px] text-fg-muted leading-[1.75] mb-4"
           dangerouslySetInnerHTML={{ __html: s.text }} />
      );
    case "list":
      return (
        <ul key={i} className="space-y-2.5 my-4 list-none">
          {s.items.map((it, j) => (
            <li key={j} className="flex gap-3 text-[15.5px] text-fg-muted leading-[1.7]">
              <span className="mt-2.5 w-1 h-1 rounded-full bg-fg-dim shrink-0"/>
              <span dangerouslySetInnerHTML={{ __html: it }}/>
            </li>
          ))}
        </ul>
      );
    case "hr":
      return <hr key={i} className="my-10 border-0 border-t border-ink-600/60"/>;
    default:
      return null;
  }
}

function renderLegal({ title, updated, intro, body }) {
  function App() {
    return (
      <div>
        <Navbar/>
        <main className="pt-28 pb-20">
          <div className="max-w-[760px] mx-auto px-5 lg:px-8">
            <nav className="flex items-center gap-2 text-[12.5px] text-fg-dim mb-6">
              <a href={(window.SW_PATH_PREFIX || "") + "StakeWorldwide.html"} className="hover:text-teal transition">Home</a>
              <span className="text-fg-dim/50">/</span>
              <span className="text-fg-muted">{title}</span>
            </nav>

            <header className="pb-8 border-b border-ink-600/60">
              <h1 className="font-display text-[34px] md:text-[42px] font-semibold tracking-tight leading-[1.1] text-fg">{title}</h1>
              <div className="mt-4 flex items-center gap-2 text-[12.5px] text-fg-dim">
                <Icon.Calendar className="w-3.5 h-3.5"/>
                <span>Last updated: {updated}</span>
              </div>
              {intro && (
                <p className="mt-6 text-[16px] text-fg-muted leading-relaxed">{intro}</p>
              )}
            </header>

            <article className="pt-4">
              {body.map(renderLegalSection)}
            </article>

            <div className="mt-14 pt-8 border-t border-ink-600/60 text-[13px] text-fg-dim">
              Questions? Reach out via{" "}
              <a href={(window.SW_DATA && window.SW_DATA.TG_LINK) || "https://t.me/Stake4Bet"} target="_blank" rel="noopener" className="text-tg hover:underline">Telegram</a>.
            </div>
          </div>
        </main>
        <Footer/>
        <FloatingTelegram/>
      </div>
    );
  }
  ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
}

window.renderLegal = renderLegal;