/* NearAway homepage — app state, tweaks, composition. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scene": "shelf",
  "headline": "tagline",
  "accent": "#D6A378"
}/*EDITMODE-END*/;

const HKEY_BY_LABEL = {
  'Near. Even when away.': 'tagline',
  'For the ones who wait.': 'wait',
  'They’re somewhere beautiful.': 'beautiful',
};
const HLABEL_BY_KEY = Object.fromEntries(Object.entries(HKEY_BY_LABEL).map(([k, v]) => [v, k]));

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent || '#D6A378';
  const setScene = (v) => setTweak('scene', v);

  return (
    <>
      <Nav accent={accent} />
      <Hero scene={t.scene} setScene={setScene} headlineKey={t.headline} accent={accent} />
      <HowItWorks />
      <Privacy />
      <TheObject />
      <ForWhom />
      <Story />
      <ClosingCTA accent={accent} />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero scene" />
        <TweakRadio
          label="Photo"
          value={t.scene}
          options={['shelf', 'parents', 'father']}
          labels={['The frame', 'A warm glow', 'Always near']}
          onChange={(v) => setTweak('scene', v)}
        />
        <TweakSection label="Words" />
        <TweakSelect
          label="Headline"
          value={HLABEL_BY_KEY[t.headline] || HLABEL_BY_KEY.tagline}
          options={Object.keys(HKEY_BY_LABEL)}
          onChange={(v) => setTweak('headline', HKEY_BY_LABEL[v])}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Button color"
          value={accent}
          options={['#D6A378', '#E8C9A0', '#7B9EB0']}
          onChange={(v) => setTweak('accent', v)}
        />
      </TweaksPanel>
    </>
  );
}

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