// ============================================================
//  App — root. Persists tweaks in localStorage so we can refresh
//  without losing iteration state.
// ============================================================

function App() {
  const [assistantOpen, setAssistantOpen] = React.useState(false);
  const [initialMsg, setInitialMsg] = React.useState('');
  const [tweaksVisible, setTweaksVisible] = React.useState(false);
  const [tweaks, setTweaks] = React.useState(() => {
    const saved = localStorage.getItem('cumulus-tweaks');
    return saved ? JSON.parse(saved) : (window.TWEAK_DEFAULTS || { primary: 'green', imagery: 'cumulus', radius: 'rounded' });
  });

  const onTweakChange = (patch) => {
    const merged = { ...tweaks, ...patch };
    setTweaks(merged);
    localStorage.setItem('cumulus-tweaks', JSON.stringify(merged));
    if (window.parent) {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
    }
  };

  // Edit mode protocol
  React.useEffect(() => {
    const handler = (e) => {
      if (!e.data || typeof e.data !== 'object') return;
      if (e.data.type === '__activate_edit_mode') setTweaksVisible(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksVisible(false);
    };
    window.addEventListener('message', handler);
    window.parent && window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const startChat = (msg) => {
    setInitialMsg(msg);
    setAssistantOpen(true);
  };

  return (
    <>
      {/* Homepage: search band sits above hero as the agentic entry ramp */}
      <QbeAlertBar />
      <QbeHeader onOpenAssistant={() => startChat('Looking for insurance')} />
      <AgenticSearchBand onStartChat={startChat} />
      <QbeHero onOpenAssistant={() => startChat('I\'d like a car quote')} />
      <WhyChooseQbe />
      <FeefoBand />
      <Awards />
      <HelpAndSupport />
      <QbeFooter />

      {assistantOpen && (
        <AgenticExperience
          initialMessage={initialMsg}
          onExit={() => setAssistantOpen(false)}
        />
      )}

      <TweaksPanel visible={tweaksVisible} values={tweaks} onChange={onTweakChange} />
    </>
  );
}

// Apply any saved tweaks on page load
(function applySavedTweaks() {
  try {
    const saved = JSON.parse(localStorage.getItem('cumulus-tweaks') || 'null') || (window.TWEAK_DEFAULTS || {});
    if (saved.primary === 'blue') {
      document.documentElement.style.setProperty('--action-primary-bg', '#2A94D6');
      document.documentElement.style.setProperty('--action-primary-bg-hover', '#1F82C3');
      document.documentElement.style.setProperty('--accent-stripe', '#47B4EA');
    } else if (saved.primary === 'sky') {
      document.documentElement.style.setProperty('--action-primary-bg', '#47B4EA');
      document.documentElement.style.setProperty('--action-primary-bg-hover', '#2A94D6');
    }
    if (saved.radius === 'softer') {
      document.documentElement.style.setProperty('--radius-card-br', '14px');
    } else if (saved.radius === 'sharp') {
      document.documentElement.style.setProperty('--radius-card-br', '0px');
    }
  } catch {}
})();

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