// Surface 7 — Brand & Course settings
//
// Fully bound to the app-level `courseSettings` slice (see data.jsx
// SAMPLE_COURSE_SETTINGS and app.jsx). Every control reads from `settings`
// and writes through `setSettings` via the local `set(path, value)` helper.
// Section order is fixed: Course basics → Organisations → Assessment flow →
// Cover → Screen toggles → Gaming quiz flow.
//
// Localisation note: there is no dedicated `LocalizedStringEditor` primitive
// gap — it exists and is used for the genuinely-localised display strings
// (Cover overlay, intro, CTA label, org labels). The Course-basics *title*
// and *topic* are bound to a single language key (`.en`) for now to keep the
// tight 2-col grid clean; a later localisation pass can promote them.

function SurfaceBrand({ course, settings, setSettings }) {
  const s = settings || window.SAMPLE_COURSE_SETTINGS;
  // Generic immutable path setter — reuses setAtPath from field-widgets.jsx.
  const set = React.useCallback((path, value) => {
    setSettings(prev => window.setAtPath(prev, path, value));
  }, [setSettings]);

  const flagMeta = window.FEATURE_FLAG_META || [];
  // Only author-facing screen toggles are shown. Technical / always-on flags
  // (accessibility widget, SCORM, analytics, xAPI, alt-text gate…) are hidden
  // from the UI entirely — they keep their configured defaults and are never
  // surfaced as toggles. `alwaysOn` flags (e.g. accessibility widget) stay on.
  const visibleFlags = flagMeta.filter(f => f.core && !f.alwaysOn);

  // Languages the author may pick as default. Cross-surface read: the
  // Localisation surface owns the enabled-languages list; until that slice is
  // shared we fall back to the course's declared languages.
  const enabledLangs = course?.languages || ['en'];

  return (
    <div style={{ height: '100%', background: 'var(--bg)', overflowY: 'auto' }}
         data-screen-label="Surface 7 · Course settings">
      <div style={{ padding: '20px 28px 40px',
        display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* ── Course basics ─────────────────────────────────────────── */}
        <SettingsPanel title="Course basics" defaultOpen>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Course title">
              {/* Bound to a single language key for now (see header note). */}
              <input className="field" value={s.metadata.title.en || ''}
                onChange={e => set(['metadata', 'title', 'en'], e.target.value)}
                style={{ width: '100%' }} />
            </Field>
            <Field label="Topic / category">
              <input className="field" value={s.metadata.topic || ''}
                onChange={e => set(['metadata', 'topic'], e.target.value)}
                style={{ width: '100%' }} />
            </Field>
            <Field label="Default language"
              hint="Choose from the languages enabled on the Localisation surface.">
              <select className="field select-elegant" value={s.metadata.defaultLanguage}
                onChange={e => set(['metadata', 'defaultLanguage'], e.target.value)}
                style={{ width: '100%', paddingRight: 26 }}>
                {enabledLangs.map(l => (
                  <option key={l} value={l}>
                    {LANG_FLAGS[l] || ''} {LANG_NAMES[l] || l}
                  </option>
                ))}
              </select>
            </Field>
            <Field label="SCORM version">
              <div style={{ display: 'flex', gap: 8 }}>
                <RadioPill label="1.2" selected={s.metadata.scormVersion === '1.2'}
                  onClick={() => set(['metadata', 'scormVersion'], '1.2')} />
                <RadioPill label="2004 4th Ed" selected={s.metadata.scormVersion === '2004'}
                  onClick={() => set(['metadata', 'scormVersion'], '2004')} />
              </div>
            </Field>
          </div>
        </SettingsPanel>

        {/* ── Organisations ─────────────────────────────────────────── */}
        <SettingsPanel title="Organisations" badge={String(s.organisations.length)} defaultOpen>
          <p style={{ margin: '0 0 12px', fontSize: 12.5, color: 'var(--text-muted)' }}>
            One row per organisation. Per-organisation logos, label translations,
            and the primary organisation shown by default.
          </p>
          <div style={{ display: 'grid', gap: 10 }}>
            {s.organisations.map((org, i) => (
              <OrgCard key={org.id} org={org} languages={enabledLangs.slice(0, 2)}
                onUpdate={patch => set(['organisations', i], { ...org, ...patch })}
                onSetPrimary={() => setSettings(prev => ({
                  ...prev,
                  organisations: prev.organisations.map(o => ({ ...o, isPrimary: o.id === org.id })),
                }))}
                onDelete={() => setSettings(prev => ({
                  ...prev,
                  organisations: prev.organisations.filter(o => o.id !== org.id)
                    // Never leave zero primaries: if we removed the primary, promote the first.
                    .map((o, idx, arr) => arr.some(x => x.isPrimary) ? o : { ...o, isPrimary: idx === 0 }),
                }))} />
            ))}
            <button className="btn sm" style={{ alignSelf: 'flex-start' }}
              onClick={() => setSettings(prev => ({
                ...prev,
                organisations: [...prev.organisations, {
                  id: 'org-' + Date.now().toString(36),
                  label: { en: 'New organisation' },
                  isPrimary: prev.organisations.length === 0,
                  logo: null,
                  logoVariants: { inactive: null, big: null, activeBig: null },
                }],
              }))}>
              <I.Plus size={12} />Add organisation
            </button>
          </div>
        </SettingsPanel>

        {/* ── Assessment flow ───────────────────────────────────────── */}
        <SettingsPanel title="Assessment flow" defaultOpen>
          <p style={{ margin: '0 0 12px', fontSize: 12.5, color: 'var(--text-muted)' }}>
            Pre-assessment is a course-level feature, not a per-role setting — configure it here.
            Question content lives on the Assessments surface.
          </p>
          <div style={{ display: 'grid', gap: 8 }}>
            <FieldRow label="Enable pre-assessment"
              hint="Run a diagnostic quiz before the course so learners can test out of content they already know.">
              <SettingToggle value={s.assessmentFlow.pre}
                onChange={v => set(['assessmentFlow', 'pre'], v)} />
            </FieldRow>
            <FieldRow label="Let learners choose pre-assessment vs full course"
              hint="Show the pre-assessment / full-course choice screen on entry.">
              <SettingToggle value={s.assessmentFlow.learnerChoice}
                onChange={v => set(['assessmentFlow', 'learnerChoice'], v)}
                disabled={!s.assessmentFlow.pre}
                disabledHint="Requires Pre-assessment ON to take effect." />
            </FieldRow>
            <FieldRow label="Skip pre-assessment"
              hint="Learners are taken straight to Home.">
              <SettingToggle value={s.assessmentFlow.skipReturnees}
                onChange={v => set(['assessmentFlow', 'skipReturnees'], v)}
                disabled={!s.assessmentFlow.pre}
                disabledHint="Requires Pre-assessment ON to take effect." />
            </FieldRow>
          </div>
        </SettingsPanel>

        {/* ── Cover screen ──────────────────────────────────────────── */}
        <SettingsPanel title="Cover screen">
          <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 14 }}>
            <LogoSlot value={s.cover.image} kind="image" label="Cover image (16:9)"
              previewBg="linear-gradient(135deg, #475569 0%, #1e293b 100%)"
              onSet={v => set(['cover', 'image'], v)}
              onClear={() => set(['cover', 'image'], null)} />
            <div style={{ display: 'grid', gap: 12 }}>
              <Field label="Title overlay"
                hint="Source language. Translations are managed on the Localisation surface.">
                <input className="field" value={s.cover.title.en || ''}
                  onChange={e => set(['cover', 'title', 'en'], e.target.value)}
                  style={{ width: '100%' }} />
              </Field>
              <Field label="Intro paragraph">
                <textarea className="field" value={s.cover.intro.en || ''}
                  onChange={e => set(['cover', 'intro', 'en'], e.target.value)}
                  style={{ width: '100%', minHeight: 72 }} />
              </Field>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Field label="CTA colour">
                  <ColorField value={s.cover.ctaColor}
                    onChange={v => set(['cover', 'ctaColor'], v)} />
                </Field>
                <Field label="CTA label">
                  <input className="field" value={s.cover.ctaLabel.en || ''}
                    onChange={e => set(['cover', 'ctaLabel', 'en'], e.target.value)}
                    style={{ width: '100%' }} />
                </Field>
              </div>
            </div>
          </div>
        </SettingsPanel>

        {/* ── Screen toggles ────────────────────────────────────────── */}
        <SettingsPanel title="Screen toggles" badge={String(visibleFlags.length)}>
          <FlagGrid flags={visibleFlags} settings={s} set={set} />
        </SettingsPanel>

        {/* ── Gaming quiz flow ──────────────────────────────────────── */}
        <SettingsPanel title="Gaming quiz flow"
          badge={s.dftiFlow.enabled ? 'on' : 'off'}>
          <p style={{ margin: '0 0 12px', fontSize: 12.5, color: 'var(--text-muted)' }}>
            The gaming quiz wraps a quiz in a mini-game with start/end screens
            and a running correct/wrong counter. Enabling it here makes the
            <strong style={{ fontWeight: 600 }}> Quiz · gaming </strong>
            layout type available in the course. Each gaming quiz is configured
            inside its own layout editor.
          </p>
          <FieldRow label="Enable gaming quiz flow"
            hint={s.dftiFlow.enabled
              ? 'Authors can add Quiz · gaming layouts in Course architecture.'
              : 'Quiz · gaming is hidden from the layout-type switcher while this is off.'}>
            <SettingToggle value={s.dftiFlow.enabled}
              onChange={v => set(['dftiFlow', 'enabled'], v)} />
          </FieldRow>
        </SettingsPanel>
      </div>
    </div>
  );
}

// ─── Screen-toggle grid + Core/Advanced disclosure ──────────────────────────
function FlagGrid({ flags, settings, set }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
      {flags.map(f => (
        <div key={f.key} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          gap: 10, padding: '8px 10px', background: 'var(--surface)',
          border: '1px solid var(--border)', borderRadius: 'var(--radius)',
        }}>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, lineHeight: 1.3 }}>{f.label}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginTop: 2 }}>
              <span style={{ fontSize: 10.5, color: 'var(--text-faint)',
                fontFamily: 'var(--font-mono)' }}>{f.key}</span>
              <InfoTip text={<>Controls the <code style={{
                fontFamily: 'var(--font-mono)', fontSize: 10.5,
                background: 'rgba(255,255,255,.14)', padding: '0 3px', borderRadius: 3,
              }}>&lt;{f.key}&gt;</code> tag in config.xml. {f.desc}</>} />
            </div>
          </div>
          <SettingToggle value={!!settings.featureFlags[f.key]}
            onChange={v => set(['featureFlags', f.key], v)} />
        </div>
      ))}
    </div>
  );
}

// ─── Organisation card — editable label, primary radio, logo, delete ────────
function OrgCard({ org, onUpdate, onSetPrimary, onDelete }) {
  const [confirming, setConfirming] = React.useState(false);
  const [moreLogos, setMoreLogos] = React.useState(false);
  // The 3 secondary logo variants. The runtime distinguishes them by state,
  // but authors only need the target pixel size — so we surface dimensions,
  // not the internal "inactive / big / active-big" names.
  const variants = [
    { key: 'inactive',  dim: '240 × 80 px' },
    { key: 'big',       dim: '480 × 160 px' },
    { key: 'activeBig', dim: '960 × 320 px' },
  ];

  return (
    <div style={{
      background: 'var(--surface)',
      border: '1px solid', borderColor: org.isPrimary ? 'var(--accent-border)' : 'var(--border)',
      boxShadow: org.isPrimary ? '0 0 0 1px var(--accent-border)' : 'none',
      borderRadius: 'var(--radius-md)', padding: 12,
    }}>
      {/* Header row — logo left, name right (compact) */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <OrgLogo value={org.logo} dim="240 × 80 px"
          onSet={v => onUpdate({ logo: v })}
          onClear={() => onUpdate({ logo: null })} />
        <input className="field" value={org.label.en || ''} placeholder="Organisation name"
          onChange={e => onUpdate({ label: { ...org.label, en: e.target.value } })}
          style={{ flex: 1, minWidth: 0, fontWeight: 600 }} />
        <PrimaryRadio selected={org.isPrimary} onSelect={onSetPrimary} />
        {confirming ? (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
            <button className="btn sm danger" onClick={onDelete}>Delete</button>
            <button className="btn sm ghost" onClick={() => setConfirming(false)}>Cancel</button>
          </div>
        ) : (
          <button className="btn sm ghost danger" title="Delete organisation"
            onClick={() => setConfirming(true)}
            style={{ width: 28, height: 28, padding: 0, justifyContent: 'center', flexShrink: 0 }}>
            <I.Trash size={12} />
          </button>
        )}
      </div>

      {/* More logo variants — contained, scrollable, dimensions surfaced */}
      <div style={{ marginTop: 10 }}>
        <button onClick={() => setMoreLogos(o => !o)}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
            padding: '2px 0', border: 0, background: 'transparent',
            cursor: 'default', fontFamily: 'inherit', color: 'var(--text-muted)',
            fontSize: 12, fontWeight: 500,
          }}>
          {moreLogos ? <I.ChevronUp size={13} /> : <I.ChevronDown size={13} />}
          More logo variants
          <span style={{ fontSize: 10.5, color: 'var(--text-faint)' }}>· 3 sizes</span>
        </button>
        {moreLogos && (
          <div className="slide-in" style={{ marginTop: 8, maxHeight: 150, overflowY: 'auto',
            display: 'grid', gap: 6, padding: 8, background: 'var(--surface-2)',
            border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
            {variants.map(v => (
              <LogoVariantRow key={v.key} dim={v.dim} value={org.logoVariants?.[v.key]}
                onSet={u => onUpdate({ logoVariants: { ...org.logoVariants, [v.key]: u } })}
                onClear={() => onUpdate({ logoVariants: { ...org.logoVariants, [v.key]: null } })} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ─── OrgLogo — compact active-logo thumbnail (header, left) ──────────────────
function OrgLogo({ value, dim, onSet, onClear }) {
  const setImg = () => onSet && onSet(`logo_${Date.now().toString(36)}.png`);
  if (value) {
    return (
      <div title={String(value).split('/').pop()}
        style={{ position: 'relative', width: 80, height: 48, flexShrink: 0, borderRadius: 6,
          overflow: 'hidden', border: '1px solid var(--border)',
          background: 'linear-gradient(135deg, #334155, #0f172a)' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'flex',
          alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,.55)' }}>
          <I.Image size={17} />
        </div>
        <button title="Remove logo" onClick={onClear}
          style={{ position: 'absolute', top: 3, right: 3, width: 16, height: 16, borderRadius: '50%',
            border: 0, cursor: 'default', background: 'rgba(15,23,42,.7)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <I.X size={10} />
        </button>
      </div>
    );
  }
  return (
    <button onClick={setImg} title={`Add logo · ${dim}`}
      style={{ width: 80, height: 48, flexShrink: 0, borderRadius: 6,
        border: '1px dashed var(--border-strong)', background: 'var(--surface-inset)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        gap: 2, cursor: 'default', color: 'var(--text-muted)', fontFamily: 'inherit' }}>
      <I.Image size={15} style={{ color: 'var(--text-faint)' }} />
      <span style={{ fontSize: 9.5, fontWeight: 500 }}>Add logo</span>
    </button>
  );
}

// ─── LogoVariantRow — compact variant slot: thumb + dimension + filename ─────
function LogoVariantRow({ dim, value, onSet, onClear }) {
  const setImg = () => onSet && onSet(`logo_${Date.now().toString(36)}.png`);
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 6px',
      background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
      <div style={{ width: 44, height: 30, flexShrink: 0, borderRadius: 4,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: value ? 'linear-gradient(135deg, #334155, #0f172a)' : 'var(--surface-inset)',
        border: value ? 'none' : '1px dashed var(--border-strong)',
        color: value ? 'rgba(255,255,255,.55)' : 'var(--text-faint)' }}>
        <I.Image size={13} />
      </div>
      <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)',
        width: 88, flexShrink: 0 }}>{dim}</span>
      <span className="truncate" style={{ flex: 1, minWidth: 0, fontSize: 12,
        color: value ? 'var(--text)' : 'var(--text-faint)',
        fontFamily: value ? 'var(--font-mono)' : 'inherit' }}>
        {value ? String(value).split('/').pop() : 'No image'}
      </span>
      {value ? (
        <button className="btn sm ghost danger" title="Remove" onClick={onClear}
          style={{ width: 26, height: 26, padding: 0, justifyContent: 'center', flexShrink: 0 }}>
          <I.Trash size={11} />
        </button>
      ) : (
        <button className="btn sm ghost" onClick={setImg} style={{ flexShrink: 0 }}>
          <I.Plus size={11} />Add
        </button>
      )}
    </div>
  );
}

// ─── PrimaryRadio — single-select "primary org" affordance ──────────────────
function PrimaryRadio({ selected, onSelect }) {
  return (
    <button onClick={onSelect} title={selected ? 'Primary organisation' : 'Make primary'}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '4px 9px', height: 28, borderRadius: 'var(--radius)',
        border: '1px solid', borderColor: selected ? 'var(--accent-border)' : 'var(--border-strong)',
        background: selected ? 'var(--accent-bg)' : 'var(--surface)',
        color: selected ? 'var(--accent-text)' : 'var(--text-muted)',
        cursor: 'default', fontFamily: 'inherit', fontSize: 11.5,
        fontWeight: selected ? 600 : 500,
      }}>
      <span style={{
        width: 12, height: 12, borderRadius: '50%', flexShrink: 0,
        border: '1.5px solid', borderColor: selected ? 'var(--accent)' : 'var(--border-strong)',
        background: selected ? 'var(--accent)' : 'transparent',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {selected && <span style={{ width: 4, height: 4, borderRadius: '50%', background: '#fff' }} />}
      </span>
      Primary
    </button>
  );
}

// ─── LogoSlot — compact image slot composed over MediaSlot ───────────────────
// Filled state delegates to MediaSlot's bound preview (replace / remove wired);
// empty state is a dashed click-to-add tile that sets a placeholder image, so
// the field is always functional without MediaSlot's heavier AI-prompt unbound
// card. (Media upload itself is stubbed to a placeholder path — flagged for the
// asset-pipeline pass.)
function LogoSlot({ value, kind = 'image', label, previewBg, compact, onSet, onClear }) {
  const setPlaceholder = () => onSet?.(`placeholder:${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}_${Date.now().toString(36)}.png`);
  if (value) {
    return (
      <MediaSlot kind={kind} label={label} compact={compact}
        bound={{ alt: String(value).replace('placeholder:', ''), previewBg }}
        onReplace={setPlaceholder}
        onRemove={onClear} />
    );
  }
  return (
    <button onClick={setPlaceholder}
      style={{
        width: '100%', minHeight: compact ? 96 : 132,
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', gap: 6, textAlign: 'center',
        background: 'var(--surface-inset)', cursor: 'default',
        border: '1px dashed var(--border-strong)', borderRadius: 'var(--radius-md)',
        color: 'var(--text-muted)', fontFamily: 'inherit', padding: 12,
      }}>
      <I.Image size={18} style={{ color: 'var(--text-faint)' }} />
      <span style={{ fontSize: 12, fontWeight: 500 }}>{label}</span>
      <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>
        <I.Plus size={10} /> Add image
      </span>
    </button>
  );
}

// ─── InfoTip — small "i" with a hover tooltip ───────────────────────────────
function InfoTip({ text }) {
  const [show, setShow] = React.useState(false);
  return (
    <span style={{ position: 'relative', display: 'inline-flex', flexShrink: 0 }}
      onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
      <I.Info size={13} style={{ color: 'var(--text-faint)' }} />
      {show && (
        <span style={{
          position: 'absolute', bottom: 'calc(100% + 7px)', left: '50%',
          transform: 'translateX(-50%)', width: 230, zIndex: 50,
          padding: '8px 10px', background: 'var(--text-strong)', color: '#fff',
          borderRadius: 'var(--radius)', fontSize: 11, lineHeight: 1.45,
          fontWeight: 400, textAlign: 'left', boxShadow: '0 8px 20px rgba(15,23,42,.22)',
          pointerEvents: 'none',
        }}>
          {text}
          <span style={{
            position: 'absolute', top: '100%', left: '50%', marginLeft: -4,
            width: 8, height: 8, transform: 'translateY(-50%) rotate(45deg)',
            background: 'var(--text-strong)',
          }} />
        </span>
      )}
    </span>
  );
}

// ─── SettingToggle — controlled Toggle with an optional disabled state ───────
// Wraps field-widgets' value-based Toggle. When disabled, the inner control is
// click-blocked but the wrapper still surfaces `disabledHint` as a tooltip.
function SettingToggle({ value, onChange, disabled, disabledHint }) {
  return (
    <span title={disabled ? disabledHint : undefined}
      style={{ display: 'inline-flex', opacity: disabled ? 0.45 : 1 }}>
      <span style={{ pointerEvents: disabled ? 'none' : 'auto' }}>
        <Toggle value={value} onChange={onChange} />
      </span>
    </span>
  );
}

// ─── Layout helpers ──────────────────────────────────────────────────────────
function SettingsPanel({ title, badge, defaultOpen, children }) {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <section className="card">
      <button onClick={() => setOpen(o => !o)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10, width: '100%',
          padding: '14px 18px', border: 0, background: 'transparent',
          cursor: 'default', fontFamily: 'inherit', color: 'var(--text)', textAlign: 'left',
        }}>
        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 600 }}>{title}</h3>
        {badge && <span className="pill" style={{ fontSize: 10.5 }}>{badge}</span>}
        <div style={{ flex: 1 }} />
        {open ? <I.ChevronUp size={15} /> : <I.ChevronDown size={15} />}
      </button>
      {open && (
        <div style={{ padding: '0 18px 18px', borderTop: '1px solid var(--border)' }}>
          <div style={{ paddingTop: 16 }}>{children}</div>
        </div>
      )}
    </section>
  );
}

function Field({ label, hint, wide, children }) {
  return (
    <div style={{ gridColumn: wide ? 'span 2' : 'auto' }}>
      <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginBottom: 4, fontWeight: 500 }}>
        {label}
      </div>
      {children}
      {hint && <div style={{ fontSize: 11, color: 'var(--text-faint)', marginTop: 4 }}>{hint}</div>}
    </div>
  );
}

function RadioPill({ label, selected, onClick }) {
  return (
    <button className="focusable" onClick={onClick} style={{
      padding: '4px 12px', height: 30, fontSize: 12.5,
      background: selected ? 'var(--accent-bg)' : 'var(--surface)',
      color: selected ? 'var(--accent-text)' : 'var(--text-muted)',
      border: '1px solid', borderColor: selected ? 'var(--accent-border)' : 'var(--border-strong)',
      borderRadius: 'var(--radius)', cursor: 'default', fontFamily: 'inherit',
      fontWeight: selected ? 600 : 500,
    }}>{label}</button>
  );
}

Object.assign(window, { SurfaceBrand });