// About page — Tweaks: swap the hero portrait photo

const PORTRAITS = {
  'theatre-blue':    { label: 'Theatre (blue jacket)',  src: 'assets/photos/theatre-blue-portrait.avif' },
  'poster-wall':     { label: 'Poster wall',            src: 'assets/photos/poster-wall-portrait.avif' },
  'auditorium-team': { label: 'Auditorium, with team',  src: 'assets/photos/theatre-auditorium.avif' },
  'gbea-2025':       { label: 'GBEA 2025',              src: 'assets/photos/gbea-2025-brick.jpg' },
  'centrestage-patrons': { label: 'CentreStage patrons', src: 'assets/photos/centrestage-patrons.jpg' },
  'headshot':        { label: 'Original headshot',      src: 'assets/david-headshot.jpg' },
  'parade':          { label: 'Street parade',          src: 'assets/photos/parade.jpg' },
  'niffa':           { label: 'NIFFA red carpet',       src: 'assets/photos/niffa-redcarpet.jpg' },
  'groundbreaking':  { label: 'Ground-breaking',        src: 'assets/photos/groundbreaking.jpg' },
  'pulse-radio':     { label: 'The Pulse 94.7 FM',      src: 'assets/photos/pulse-radio.jpg' },
};

const DEFAULTS = window.__ABOUT_TWEAKS_DEFAULTS || { portrait: 'theatre-blue' };

function applyPortrait(key) {
  const opt = PORTRAITS[key] || PORTRAITS['theatre-blue'];
  const img = document.querySelector('#about-hero-portrait');
  if (img) img.src = opt.src;
}

function AboutTweaks() {
  const [t, setTweak] = window.useTweaks(DEFAULTS);

  React.useEffect(() => { applyPortrait(t.portrait); }, [t.portrait]);

  const options = Object.entries(PORTRAITS).map(([value, { label }]) => ({ value, label }));

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection title="Hero photo">
        <window.TweakSelect
          label="Photo"
          value={t.portrait}
          onChange={(v) => setTweak('portrait', v)}
          options={options}
        />
        <p style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, letterSpacing: '0.06em',
          color: 'rgba(41,38,27,.55)', margin: '4px 0 0',
        }}>
          Choice persists across reloads.
        </p>
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// Apply chosen portrait BEFORE React mounts so there's no flash of default
applyPortrait(DEFAULTS.portrait);

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<AboutTweaks />);