/* ea-app.jsx — root for the Luppy early-access page */

const EA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "pwa",
  "primaryColor": "#3b82f6",
  "headline": "What if managing your cleaning team was as simple as <span class=\"accent\">sending a text?</span>",
  "subhead": "We're building the field-service tool your team can actually use — scheduling, dispatch and proof of work, without forcing your cleaners to install another app."
}/*EDITMODE-END*/;

function EAApp() {
  const [t, setTweak] = useTweaks(EA_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--color-primary', t.primaryColor);
  }, [t.primaryColor]);

  return (
    <React.Fragment>
      <EANav />
      <main>
        <EAHero heroVariant={t.heroVariant} headline={t.headline} subhead={t.subhead} />
        <EAProblem />
        <EAProductPeek />
        <EAWhy />
        <EAWho />
        <EAJoin />
      </main>
      <EAFooter />
      <EAJoinModal />
      <EALegalModal />

      <TweaksPanel title="Tweaks" noDeckControls={true}>
        <TweakSection label="Hero">
          <TweakRadio
            label="3D illustration"
            value={t.heroVariant}
            options={[
              { value: 'tower', label: 'Tower' },
              { value: 'pwa', label: 'PWA' },
              { value: 'layers', label: 'Layers' },
              { value: 'texting', label: 'Texting' }]}
            onChange={(v) => setTweak('heroVariant', v)} />
          <TweakText
            label="Headline"
            value={t.headline.replace(/<[^>]+>/g, '')}
            placeholder="Headline copy"
            onChange={(v) => setTweak('headline', v)} />
          <TweakText
            label="Subhead"
            value={t.subhead}
            placeholder="Subhead copy"
            onChange={(v) => setTweak('subhead', v)} />
        </TweakSection>
        <TweakSection label="Brand">
          <TweakColor
            label="Primary color"
            value={t.primaryColor}
            options={['#3b82f6', '#14b8a6', '#6366f1', '#0ea5e9', '#8b5cf6']}
            onChange={(v) => setTweak('primaryColor', v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>);
}

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