// Gentle Spay — Tweaks panel: 3 expressive controls (mood / voice / density)

window.GS_VOICE_COPY = {
  direct: {
    eyebrow: '★ הדגל של לומיווט',
    h1a: 'העיקור',
    h1b: 'העדין',
    sub: 'אותה הפרוצדורה. ללא כאב מיותר. ללא צווארון. חזרה לשגרה ב־24 שעות.',
  },
  promise: {
    eyebrow: '★ ההבטחה',
    h1a: '24 שעות.',
    h1b: 'בלי כאב.',
    sub: 'בלי צווארון. בלי שבועיים של החלמה. רק חזרה מהירה לשגרה — מובטח.',
  },
  story: {
    eyebrow: '★ כי היא משפחה',
    h1a: 'בחזרה',
    h1b: 'הביתה',
    sub: 'כי כלבה היא לא מטופלת. היא משפחה. ההחלמה שלה — היא של כולנו.',
  },
};

const GSTweaksMount = () => {
  const [tweaks, setTweak] = useTweaks(window.GS_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.mood = tweaks.mood;
    document.body.dataset.density = tweaks.density;
    window.__gsVoice = tweaks.voice;
    window.dispatchEvent(new CustomEvent('gs-voice-change'));
  }, [tweaks.mood, tweaks.density, tweaks.voice]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Mood" subtitle="Color register & atmosphere">
        <TweakRadio
          value={tweaks.mood}
          onChange={(v) => setTweak('mood', v)}
          options={[
            { value: 'clinical', label: 'Clinical' },
            { value: 'warm', label: 'Warm' },
            { value: 'premium', label: 'Premium' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Voice" subtitle="Headline & sub-copy register">
        <TweakRadio
          value={tweaks.voice}
          onChange={(v) => setTweak('voice', v)}
          options={[
            { value: 'direct', label: 'Direct' },
            { value: 'promise', label: 'Promise' },
            { value: 'story', label: 'Story' },
          ]}
        />
      </TweakSection>
      <TweakSection title="Density" subtitle="Rhythm, scale, breathing">
        <TweakRadio
          value={tweaks.density}
          onChange={(v) => setTweak('density', v)}
          options={[
            { value: 'generous', label: 'Generous' },
            { value: 'editorial', label: 'Editorial' },
            { value: 'punchy', label: 'Punchy' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

ReactDOM.createRoot(document.getElementById('gs-tweaks-root')).render(<GSTweaksMount />);


// Gentle Spay landing page - app entry
const GentleSpayApp = () => {
  const wa = "https://wa.me/97233035033?text=" + encodeURIComponent("שלום, אני מתעניין/ת בעיקור העדין לכלבה שלי 🐾");
  return (
    <>
      <SiteHeader active="gentle-spay" />
      <main>
        <GSHero waUrl={wa} />
        <GSWhatWhy />
        <GSComparisonTable />
        <GSJourney />
        <CostPlanner />
        <GSEquipment />
        <GSFaq />
        <GSStory />
        <CTASection />
      </main>
      <SiteFooter />
    </>
  );
};

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