/* Legal-page renderer for Integritetspolicy / Användarvillkor
 * Reads structured content from window.LEGAL_DATA (set by legal-data.js).
 * Single component, doc prop selects which document to render.
 */

const Paragraphs = ({ items }) =>
  (items || []).map((p, i) => <p key={i}>{p}</p>);

const Bullets = ({ items }) => {
  if (!items || items.length === 0) return null;
  return (
    <ul>
      {items.map((b, i) => <li key={i}>{b}</li>)}
    </ul>
  );
};

const Tables = ({ items }) => {
  if (!items || items.length === 0) return null;
  return items.map((t, ti) => (
    <div key={ti} className="legal-table-wrap">
      <table className="legal-table">
        {t.headers && t.headers.length > 0 && (
          <thead>
            <tr>{t.headers.map((h, i) => <th key={i}>{h}</th>)}</tr>
          </thead>
        )}
        <tbody>
          {(t.rows || []).map((row, ri) => (
            <tr key={ri}>
              {row.map((cell, ci) => <td key={ci}>{cell}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  ));
};

const SubSection = ({ sub }) => (
  <div className="legal-sub">
    <h3>{sub.heading}</h3>
    <Paragraphs items={sub.paragraphs} />
    <Bullets items={sub.bullets} />
    <Tables items={sub.tables} />
  </div>
);

const Section = ({ section }) => (
  <section className="legal-section">
    {section.heading && <h2>{section.heading}</h2>}
    <Paragraphs items={section.paragraphs} />
    <Bullets items={section.bullets} />
    <Tables items={section.tables} />
    {(section.sub || []).map((sub, i) => <SubSection key={i} sub={sub} />)}
  </section>
);

const LegalPage = ({ doc }) => {
  const data = (window.LEGAL_DATA || {})[doc];
  if (!data) {
    return (
      <section className="section paper">
        <div className="container">
          <p>Dokumentet kunde inte hittas.</p>
        </div>
      </section>
    );
  }
  return (
    <section className="section paper legal-page" id="legal">
      <div className="container">
        <div className="legal-shell">
          <span className="eyebrow"><span className="dot"></span>{data.eyebrow}</span>
          <h1 className="display" style={{ marginTop: 12 }}>{data.title}</h1>
          <p className="legal-meta">
            Senast uppdaterad: {data.last_updated}
            {data.version ? ` · Version ${data.version}` : ""}
          </p>
          <div className="legal-prose">
            {data.sections.map((s, i) => <Section key={i} section={s} />)}
          </div>
        </div>
      </div>
    </section>
  );
};

window.LegalPage = LegalPage;