// Main app — orchestrates sections and exposes Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2A6FDB",
  "headline": "koniec_excela",
  "heroLayout": "centered",
  "ctaVariant": "wypróbuj",
  "sectionOrder": "problem_first",
  "vimeoId": "",
  "ctaHref": "#demo"
}/*EDITMODE-END*/;

const HEADLINES = {
  stracone_leady: {
    h1: 'Przestań tracić leady po 17:00.',
    sub: 'Konfigurator, w którym Twój klient sam projektuje i wycenia garaż blaszany. Działa w sobotę o 22:47, kiedy Twój handlowiec już śpi.',
  },
  konkurencja_247: {
    h1: 'Twoja konkurencja sprzedaje garaże 24/7. A Ty?',
    sub: 'Klient nie czeka do poniedziałku. Dostaje wycenę w 60 sekund — albo idzie do tego, kto mu ją da. Wybór wciąż należy do Ciebie.',
  },
  koniec_excela: {
    h1: 'Koniec z ręcznymi wycenami w Excelu.',
    sub: 'Klient sam ustawia wymiary, kolor, dach, bramę. Wycena leci automatycznie. Twój handlowiec dzwoni już tylko do gotowych zamówień.',
  },
};

const CTAS = {
  'wypróbuj':  'Wypróbuj konfigurator',
  'demo_60':   'Zobacz demo 60 sek.',
  'umów':      'Umów rozmowę',
  'wycena':    'Sprawdź wycenę dla siebie',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const headline = HEADLINES[t.headline] || HEADLINES.stracone_leady;
  const ctaLabel = CTAS[t.ctaVariant] || CTAS['wypróbuj'];

  // Section order
  const sections = {
    problem: <ProblemsSection key="problem" />,
    porownanie: <ComparisonSection key="porownanie" />,
    liczby: <NumbersSection key="liczby" />,
    demo: <DemoSection key="demo" />,
  };

  const order = t.sectionOrder === 'demo_first'
    ? ['problem', 'demo', 'porownanie', 'liczby']
    : t.sectionOrder === 'liczby_first'
    ? ['liczby', 'problem', 'porownanie', 'demo']
    : ['problem', 'porownanie', 'liczby', 'demo'];

  return (
    <div style={{ '--accent': t.accent,
                  '--accent-soft': `color-mix(in oklab, ${t.accent} 12%, white)`,
                  '--accent-ink':  `color-mix(in oklab, ${t.accent} 85%, black)` }}>
      <Nav cta={ctaLabel} ctaHref={t.ctaHref} />
      <Hero
        headline={headline.h1}
        sub={headline.sub}
        cta={ctaLabel}
        layout={t.heroLayout}
        vimeoId={t.vimeoId}
        ctaHref={t.ctaHref}
      />

      {order.map(k => sections[k])}

      <FinalCTA cta={ctaLabel} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline">
          <TweakSelect label="Wariant"
                       value={t.headline}
                       options={[
                         { value: 'stracone_leady', label: 'Stracone leady po 17:00' },
                         { value: 'konkurencja_247', label: 'Konkurencja sprzedaje 24/7' },
                         { value: 'koniec_excela', label: 'Koniec z ręcznymi wycenami' },
                       ]}
                       onChange={v => setTweak('headline', v)} />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio label="Układ"
                      value={t.heroLayout}
                      options={[
                        { value: 'centered', label: 'Centered' },
                        { value: 'split', label: 'Split' },
                      ]}
                      onChange={v => setTweak('heroLayout', v)} />
        </TweakSection>

        <TweakSection label="CTA">
          <TweakSelect label="Tekst przycisku"
                       value={t.ctaVariant}
                       options={[
                         { value: 'wypróbuj', label: 'Wypróbuj konfigurator' },
                         { value: 'demo_60',  label: 'Zobacz demo 60 sek.' },
                         { value: 'umów',     label: 'Umów rozmowę' },
                         { value: 'wycena',   label: 'Sprawdź wycenę' },
                       ]}
                       onChange={v => setTweak('ctaVariant', v)} />
          <TweakText label="Link CTA"
                     value={t.ctaHref}
                     placeholder="#demo lub https://..."
                     onChange={v => setTweak('ctaHref', v)} />
        </TweakSection>

        <TweakSection label="Wideo w Hero">
          <TweakText label="Vimeo ID"
                     value={t.vimeoId}
                     placeholder="np. 76979871"
                     onChange={v => setTweak('vimeoId', v)} />
        </TweakSection>

        <TweakSection label="Kolor akcentu">
          <TweakColor label="Accent"
                      value={t.accent}
                      options={['#2A6FDB', '#E85D04', '#0F7B5A', '#7A5AE0', '#0a0a0a']}
                      onChange={v => setTweak('accent', v)} />
        </TweakSection>

        <TweakSection label="Kolejność sekcji">
          <TweakSelect label="Układ"
                       value={t.sectionOrder}
                       options={[
                         { value: 'problem_first', label: 'Problem → Porównanie → Liczby → Demo' },
                         { value: 'demo_first',    label: 'Problem → Demo → Porównanie → Liczby' },
                         { value: 'liczby_first',  label: 'Liczby → Problem → Porównanie → Demo' },
                       ]}
                       onChange={v => setTweak('sectionOrder', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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