/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "leakage",
  "industryId": "dental",
  "voice": "Ara"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [loc] = window.BD.useLocale();

  // Tweak labels — also localized for the tweaks panel
  const heroVariants = loc === 'ko' ? window.BD.HERO_VARIANTS_KO : window.BD.HERO_VARIANTS_EN;
  const variantLabels = loc === 'ko'
    ? { leakage: '매출 누수', rescue: '회수', silent: '침묵' }
    : { leakage: 'Leakage',   rescue: 'Rescue',  silent: 'Silent' };
  const tweakTitles = loc === 'ko'
    ? { panel: 'Tweaks', heroSec: '히어로 카피', heroLabel: '문구 변형',
        indSec: '업종 컨텍스트', indLabel: '업종 선택',
        voiceSec: '데모 음성', voiceLabel: 'AI 안내원 음성' }
    : { panel: 'Tweaks', heroSec: 'Hero copy', heroLabel: 'Headline variant',
        indSec: 'Industry context', indLabel: 'Choose industry',
        voiceSec: 'Demo voice', voiceLabel: 'AI receptionist voice' };

  return (
    <>
      <StickyNav />
      <main>
        <Hero heroVariant={tweaks.heroVariant} industryId={tweaks.industryId} />
        <DemoWidget
          industryId={tweaks.industryId}
          setIndustryId={(id) => setTweak('industryId', id)}
          voice={tweaks.voice}
          setVoice={(v) => setTweak('voice', v)}
        />
        <StatsShock />
        <VerticalCards industryId={tweaks.industryId} setIndustryId={(id) => setTweak('industryId', id)} />
        <HowItWorks />
        <ROICalculator industryId={tweaks.industryId} />
        <TrustStrip />
        <DesignPartners />
        <PricingInquiry />
        <FAQSection />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title={tweakTitles.panel}>
        <TweakSection title={tweakTitles.heroSec}>
          <TweakRadio
            label={tweakTitles.heroLabel}
            value={tweaks.heroVariant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={heroVariants.map(h => ({
              value: h.id,
              label: variantLabels[h.id] || h.id,
            }))}
          />
        </TweakSection>
        <TweakSection title={tweakTitles.indSec}>
          <TweakSelect
            label={tweakTitles.indLabel}
            value={tweaks.industryId}
            onChange={(v) => setTweak('industryId', v)}
            options={window.BD.INDUSTRIES.map(i => {
              const ind = window.BD.localIndustry(i.id, loc);
              return { value: i.id, label: ind.fullLabel };
            })}
          />
        </TweakSection>
        <TweakSection title={tweakTitles.voiceSec}>
          <TweakSelect
            label={tweakTitles.voiceLabel}
            value={tweaks.voice}
            onChange={(v) => setTweak('voice', v)}
            options={window.BD.VOICES.map(v => ({ value: v.value, label: `${v[loc].name} · ${v[loc].desc}` }))}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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