// Shared legal page layout — used by Terms / Privacy / Accessibility

const LegalBreadcrumb = ({ title }) => (
  <nav className="legal-breadcrumb container" aria-label="breadcrumb">
    <a href="/index.html">לומיווט</a>
    <span>›</span>
    <span className="cur">{title}</span>
  </nav>
);
window.LegalBreadcrumb = LegalBreadcrumb;

const LegalHero = ({ eyebrow, title, lead, lastUpdated, version }) => (
  <header className="legal-hero">
    <div className="container">
      <span className="eyebrow">{eyebrow}</span>
      <h1>{title}</h1>
      <p className="lead">{lead}</p>
      <div className="meta-row">
        <span className="legal-meta-pill">
          <strong>עודכן לאחרונה:</strong>&nbsp;{lastUpdated}
        </span>
        {version && (
          <span className="legal-meta-pill">
            <strong>גרסה:</strong>&nbsp;{version}
          </span>
        )}
        <span className="legal-meta-pill">
          <strong>ע״מ:</strong>&nbsp;305135220
        </span>
      </div>
    </div>
  </header>
);
window.LegalHero = LegalHero;

const LegalToc = ({ items }) => (
  <aside className="legal-toc" aria-label="ניווט בעמוד">
    <h4>תוכן עניינים</h4>
    <ol>
      {items.map((it) => (
        <li key={it.id}>
          <a href={`#${it.id}`}>{it.label}</a>
        </li>
      ))}
    </ol>
  </aside>
);
window.LegalToc = LegalToc;

const LegalContactCard = ({ title, body, contactRows }) => (
  <div className="legal-contact-card">
    <h3>{title}</h3>
    <p>{body}</p>
    <div className="row">
      {contactRows.map((r, i) => (
        <div key={i}>
          <span className="lbl">{r.lbl}</span>
          <span className="val">{r.val}</span>
        </div>
      ))}
    </div>
  </div>
);
window.LegalContactCard = LegalContactCard;