/* Tweaks panel — accent color picker for the Archeve site.
   Loaded as a Babel/JSX script. Persists the chosen accent via the
   host's __edit_mode_set_keys protocol (writes back to the EDITMODE block). */

const { useState, useEffect } = React;

const ACCENT_OPTIONS = [
  { id: 'coral',  label: 'Brand coral',    swatch: '#F75F49', sub: 'Default · sampled from the logo' },
  { id: 'ink',    label: 'Ink only',       swatch: '#15110F', sub: 'Monochrome · maximum restraint' },
  { id: 'indigo', label: 'Drafting indigo', swatch: '#3A4FB2', sub: 'Engineering-blue alt' },
  { id: 'forest', label: 'Civic forest',    swatch: '#1F6E54', sub: 'Sustainability alt' },
];

function ArcheveTweaks() {
  const initial = (window.ARCHEVE_TWEAKS && window.ARCHEVE_TWEAKS.accent) || 'coral';
  const [accent, setAccent] = useState(initial);

  useEffect(() => {
    if (window.ArcheveAccent) window.ArcheveAccent.apply(accent);
  }, [accent]);

  const onPick = (id) => {
    setAccent(id);
    try {
      window.parent.postMessage(
        { type: '__edit_mode_set_keys', edits: { accent: id } },
        '*'
      );
    } catch (_) {}
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent color">
        <div style={{ marginBottom: 12, fontSize: 12, color: '#6B5A4E', lineHeight: 1.4 }}>
          Applies across nav, arches, CTAs, project pins, and the closing line.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {ACCENT_OPTIONS.map((opt) => {
            const active = opt.id === accent;
            return (
              <button
                key={opt.id}
                onClick={() => onPick(opt.id)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 14,
                  padding: '12px 14px',
                  border: active ? '1.5px solid #15110F' : '1px solid #E8DFD7',
                  borderRadius: 12,
                  background: active ? '#FBF8F4' : '#fff',
                  cursor: 'pointer',
                  textAlign: 'left',
                  transition: 'all 140ms ease',
                  fontFamily: 'inherit',
                }}
              >
                <span
                  style={{
                    width: 22, height: 22, borderRadius: 999,
                    background: opt.swatch,
                    boxShadow: active ? '0 0 0 3px #FBF8F4, 0 0 0 4px #15110F' : 'inset 0 0 0 1px rgba(0,0,0,0.1)',
                    flexShrink: 0,
                  }}
                />
                <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                  <span style={{ fontWeight: 600, fontSize: 14, color: '#15110F', letterSpacing: '-0.005em' }}>
                    {opt.label}
                  </span>
                  <span style={{ fontSize: 12, color: '#6B5A4E' }}>{opt.sub}</span>
                </span>
              </button>
            );
          })}
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksHost = document.createElement('div');
document.body.appendChild(tweaksHost);
ReactDOM.createRoot(tweaksHost).render(<ArcheveTweaks />);