/* global React, ReactDOM, PageShell, PageHero, Crown, Icon, useLang */
const { useState } = React;

const LegalEntityCard = () => {
  const lang = useLang();
  const tr = (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {};
  const e = tr.legalEntity || {};
  return (
    <aside className="legal-entity-card">
      <h3>{e.heading || "Legal entity"}</h3>
      <div className="legal-entity-card__row"><strong>{e.name || "Norge House SIA"}</strong></div>
      <div className="legal-entity-card__row">{e.regNo}</div>
      <div className="legal-entity-card__row">{e.vat}</div>
      <div className="legal-entity-card__row">{e.address}</div>
      <div className="legal-entity-card__row">{e.phones}</div>
      <div className="legal-entity-card__row">
        <a href={"mailto:" + (e.email || "info@norgehouse.com")}>{e.email || "info@norgehouse.com"}</a>
      </div>
    </aside>
  );
};

const LegalInner = () => {
  const lang = useLang();
  const section = window.NH_LEGAL_PAGE || "privacyPage";
  const tr = (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS[lang]) || (window.NH_TRANSLATIONS && window.NH_TRANSLATIONS.EN) || {};
  const t = tr[section] || {};
  const blocks = Array.isArray(t.blocks) ? t.blocks : [];
  const blocksAfter = Array.isArray(t.blocksAfter) ? t.blocksAfter : [];
  const cookies = Array.isArray(t.cookies) ? t.cookies : null;
  const th = t.tableHead || {};
  return (
    <>
      <PageHero eyebrow={t.eyebrow} title={t.h2} lead={t.lead}/>
      <section className="section">
        <div className="container legal-grid">
          <article className="legal-body">
            {blocks.map((b, i) => (
              <div className="legal-block" key={"b" + i}>
                {b.h && <h2 className="legal-block__h">{b.h}</h2>}
                {b.body && <p className="legal-block__body">{b.body}</p>}
              </div>
            ))}
            {cookies && (
              <div className="legal-block legal-cookies-table-wrap">
                {t.tableHeading && <h2 className="legal-block__h">{t.tableHeading}</h2>}
                <div className="legal-cookies-table">
                  <table>
                    <thead>
                      <tr>
                        <th>{th.name || "Name"}</th>
                        <th>{th.provider || "Provider"}</th>
                        <th>{th.purpose || "Purpose"}</th>
                        <th>{th.duration || "Duration"}</th>
                        <th>{th.category || "Category"}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {cookies.map((c, i) => (
                        <tr key={i}>
                          <td><code>{c.name}</code></td>
                          <td>{c.provider}</td>
                          <td>{c.purpose}</td>
                          <td>{c.duration}</td>
                          <td>{c.category}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
            {blocksAfter.map((b, i) => (
              <div className="legal-block" key={"a" + i}>
                {b.h && <h2 className="legal-block__h">{b.h}</h2>}
                {b.body && <p className="legal-block__body">{b.body}</p>}
              </div>
            ))}
            {t.lastUpdated && <p className="legal-updated">{t.lastUpdated}</p>}
          </article>
          <LegalEntityCard/>
        </div>
      </section>
    </>
  );
};

const LegalPage = () => (
  <PageShell current="">
    <LegalInner/>
  </PageShell>
);

ReactDOM.createRoot(document.getElementById("root")).render(<LegalPage/>);