import { StrictMode, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import './i18n';
import App from './App.jsx';
import AppV2 from './AppV2.jsx';
import Landing from './Landing.jsx';

const LAYOUT_KEY = 're-portfolio-layout-v1';

const Root = () => {
  const [layout, setLayout] = useState(
    () => localStorage.getItem(LAYOUT_KEY) || null
  );

  const select = (v) => {
    localStorage.setItem(LAYOUT_KEY, v);
    setLayout(v);
  };

  const goHome = () => {
    localStorage.removeItem(LAYOUT_KEY);
    setLayout(null);
  };

  if (!layout) return <Landing onSelect={select} />;

  return layout === 'v2'
    ? <AppV2 onSwitchLayout={() => select('v1')} onGoHome={goHome} />
    : <App   onSwitchLayout={() => select('v2')} onGoHome={goHome} />;
};

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Root />
  </StrictMode>,
);