// Päikeseraja talu — Legal modal (company info, privacy, terms)

function LegalModal({ kind, t, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  const c = t.legal[kind];
  if (!c) return null;

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal legal-modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label={t.legal.close}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" width="14" height="14"><path d="M5 5 L19 19 M19 5 L5 19" /></svg>
        </button>
        <div className="modal-header">
          <div className="eyebrow">{t.legal.eyebrow}</div>
          <h2 className="serif">{c.title[0]} <em>{c.title[1]}</em></h2>
        </div>
        <div className="modal-body legal-body">
          {c.sections.map((s, i) => (
            <section className="legal-section" key={i}>
              {s.h && <h4>{s.h}</h4>}
              {s.p.map((para, j) => <p key={j}>{para}</p>)}
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}

window.LegalModal = LegalModal;