function Legal({ pages, onSave, lang, setLang }) {
  const [selected, setSelected]   = React.useState(pages[0]?.slug || null);
  const [drafts,   setDrafts]     = React.useState(
    Object.fromEntries(pages.map(p => [p.slug, p.content_json]))
  );
  const [saving,   setSaving]     = React.useState({});
  const [addSlug,  setAddSlug]    = React.useState('');
  const [addOpen,  setAddOpen]    = React.useState(false);

  React.useEffect(() => {
    setDrafts(Object.fromEntries(pages.map(p => [p.slug, p.content_json])));
    if (!selected && pages[0]) setSelected(pages[0].slug);
  }, [pages]);

  const draft    = drafts[selected] || {};
  const setDraft = (k, v) =>
    setDrafts(d => ({ ...d, [selected]: { ...d[selected], [k]: v } }));

  const handleSave = async () => {
    setSaving(s => ({ ...s, [selected]: true }));
    await onSave(selected, drafts[selected]);
    setTimeout(() => setSaving(s => ({ ...s, [selected]: false })), 1600);
  };

  const handleAddPage = async () => {
    const slug = addSlug.trim().toLowerCase().replace(/\s+/g, '-');
    if (!slug) return;
    const blank = { title: i18nBlank(), content: i18nBlank() };
    setDrafts(d => ({ ...d, [slug]: blank }));
    await onSave(slug, blank);
    setAddSlug('');
    setAddOpen(false);
    setSelected(slug);
  };

  return (
    <div>
      <h1 className="page-title">Legal Pages</h1>
      <p className="page-subtitle">Privacy policy, terms of service, and custom pages — multilingual</p>

      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginBottom: 'var(--space-6)' }}>
        <span style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--fg-secondary)', fontWeight: 'var(--fw-medium)' }}>
          Editing in:
        </span>
        <LangTabs lang={lang} onChange={setLang || (() => {})} />
      </div>

      <div className="content-layout">
        <nav className="content-nav">
          {pages.map(p => (
            <button
              key={p.slug}
              className={`content-nav__item${selected === p.slug ? ' active' : ''}`}
              onClick={() => setSelected(p.slug)}
            >
              {i18nOf(p.content_json?.title, 'en') || p.slug}
            </button>
          ))}

          {addOpen ? (
            <div style={{ padding: 'var(--space-3) var(--space-4)', borderBottom: '1px solid var(--border-subtle)' }}>
              <input
                autoFocus
                value={addSlug}
                onChange={e => setAddSlug(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter') handleAddPage(); if (e.key === 'Escape') setAddOpen(false); }}
                placeholder="page-slug"
                style={{ marginBottom: 'var(--space-2)' }}
              />
              <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
                <button className="btn btn--primary" style={{ fontSize: 'var(--fs-caption)', padding: '5px var(--space-3)' }} onClick={handleAddPage}>Add</button>
                <button className="btn btn--ghost"   style={{ fontSize: 'var(--fs-caption)', padding: '5px var(--space-3)' }} onClick={() => setAddOpen(false)}>Cancel</button>
              </div>
            </div>
          ) : (
            <button className="content-nav__item" onClick={() => setAddOpen(true)}>+ New page</button>
          )}
        </nav>

        <div className="content-section">
          {selected && (
            <div className="settings-section">
              <div className="settings-section__title">
                {i18nOf(draft.title, 'en') || selected}
              </div>
              <div className="field">
                <label>Page Title</label>
                <I18nInput
                  value={draft.title}
                  lang={lang}
                  onChange={v => setDraft('title', v)}
                  placeholder="Privacy Policy"
                />
              </div>
              <div className="field">
                <label>Content <span style={{ fontSize: 'var(--fs-caption)', color: 'var(--fg-secondary)', fontWeight: 'var(--fw-regular)' }}>Markdown supported</span></label>
                <I18nTextarea
                  value={draft.content}
                  lang={lang}
                  onChange={v => setDraft('content', v)}
                  style={{ minHeight: 360 }}
                  placeholder={`# ${i18nOf(draft.title, lang) || 'Page title'}\n\nWrite your content here...`}
                />
              </div>
              <button className="btn btn--primary" onClick={handleSave}>
                {saving[selected] ? 'Saved' : 'Save Page'}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}