// App.jsx — Direction A as primary full-bleed site; Tweaks for palette/type/headline

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "consPalette": "paper",
  "consType": "editorial",
  "consHeadline": "Smart money.\nSmooth transaction.",
  "viewMode": "desktop"
}/*EDITMODE-END*/;

function TweaksPanel({ state, setState, visible }) {
  const update = (patch) => {
    const next = { ...state, ...patch };
    setState(next);
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); } catch(e) {}
  };
  return (
    <div className={'tw-panel' + (visible ? ' active' : '')}>
      <h4>Tranzom · Tweaks</h4>
      <div className="tw-row">
        <label>Preview</label>
        <select value={state.viewMode} onChange={e => update({ viewMode: e.target.value })}>
          <option value="desktop">Desktop (responsive)</option>
          <option value="mobile">Mobile frame (390w)</option>
        </select>
      </div>
      <div className="tw-row">
        <label>Palette</label>
        <div className="tw-swatches">
          {Object.entries(window.CONS_PALETTES).map(([k, P]) => (
            <div key={k} onClick={() => update({ consPalette: k })}
              className={'tw-sw' + (state.consPalette === k ? ' active' : '')}
              style={{ background: `linear-gradient(135deg, ${P.bg} 50%, ${P.accent} 50%)` }} title={k}/>
          ))}
        </div>
      </div>
      <div className="tw-row">
        <label>Typography</label>
        <select value={state.consType} onChange={e => update({ consType: e.target.value })}>
          <option value="editorial">Fraunces + Inter (editorial)</option>
          <option value="instrument">Instrument Serif + Inter</option>
          <option value="grotesk">Space Grotesk + Inter</option>
        </select>
      </div>
      <div className="tw-row">
        <label>Headline (use \n for line break)</label>
        <input type="text" value={state.consHeadline.replace(/\n/g, '\\n')}
          onChange={e => update({ consHeadline: e.target.value.replace(/\\n/g, '\n') })}/>
      </div>
    </div>
  );
}

function App() {
  const [tw, setTw] = React.useState(TWEAKS_DEFAULTS);
  const [edit, setEdit] = React.useState(false);
  const [vw, setVw] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1200);

  React.useEffect(() => {
    const handler = (e) => {
      const d = e?.data;
      if (!d || typeof d !== 'object') return;
      if (d.type === '__activate_edit_mode') setEdit(true);
      if (d.type === '__deactivate_edit_mode') setEdit(false);
    };
    const onResize = () => setVw(window.innerWidth);
    window.addEventListener('message', handler);
    window.addEventListener('resize', onResize);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch(e) {}
    return () => { window.removeEventListener('message', handler); window.removeEventListener('resize', onResize); };
  }, []);

  // Responsive: below 760 auto-switch to mobile layout, or force via tweak
  const autoMobile = vw < 760;
  const mobile = tw.viewMode === 'mobile' ? true : autoMobile;

  if (tw.viewMode === 'mobile' && !autoMobile) {
    // Show phone frame preview
    return (
      <>
        <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40, background: '#e8e8ec' }}>
          <div style={{ width: 390, height: 844, overflow: 'auto', background: '#fff', borderRadius: 32, border: '8px solid #1a1a22', boxShadow: '0 30px 80px rgba(0,0,0,.2)' }}>
            <SiteConservative palette={tw.consPalette} typePair={tw.consType} headline={tw.consHeadline} mobile={true}/>
          </div>
        </div>
        <TweaksPanel state={tw} setState={setTw} visible={edit}/>
      </>
    );
  }

  return (
    <>
      <SiteConservative palette={tw.consPalette} typePair={tw.consType} headline={tw.consHeadline} mobile={mobile}/>
      <TweaksPanel state={tw} setState={setTw} visible={edit}/>
    </>
  );
}

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