// Tweaks panel for the Asmae landing page
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "warm",
  "heroCalligraphy": "سلام",
  "animationIntensity": "bold",
  "ctaText": "Start the Course",
  "headline": "Speak Arabic with confidence — in 90 days.",
  "showVideo": true,
  "showAbout": true,
  "showCurriculum": true,
  "showSampler": true,
  "showPricing": true,
  "showTestimonials": true,
  "showFAQ": true
}/*EDITMODE-END*/;

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

  // Apply theme
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
  }, [tweaks.theme]);

  // Apply hero calligraphy
  React.useEffect(() => {
    if (window.setHeroCalligraphy) window.setHeroCalligraphy(tweaks.heroCalligraphy);
  }, [tweaks.heroCalligraphy]);

  // Animation intensity
  React.useEffect(() => {
    if (window.setAnimationIntensity) window.setAnimationIntensity(tweaks.animationIntensity);
  }, [tweaks.animationIntensity]);

  // Headline copy
  React.useEffect(() => {
    const h1 = document.getElementById('hero-headline');
    if (!h1) return;
    // Split last 2 words into accent
    const words = tweaks.headline.split(' ');
    if (words.length >= 3) {
      const accent = words.slice(-3).join(' ');
      const main = words.slice(0, -3).join(' ');
      h1.innerHTML = `${main} <br/><span class="accent">${accent}</span>`;
    } else {
      h1.textContent = tweaks.headline;
    }
  }, [tweaks.headline]);

  // CTA text
  React.useEffect(() => {
    const c = document.getElementById('cta-text');
    if (c) c.textContent = tweaks.ctaText;
  }, [tweaks.ctaText]);

  // Section visibility
  React.useEffect(() => {
    const map = {
      showVideo: '#video',
      showAbout: '#about',
      showCurriculum: '#curriculum',
      showSampler: '#sampler',
      showPricing: '#pricing',
      showFAQ: '#faq'
    };
    Object.entries(map).forEach(([k, sel]) => {
      const el = document.querySelector(sel);
      if (el) el.style.display = tweaks[k] ? '' : 'none';
    });
  }, [tweaks.showVideo, tweaks.showAbout, tweaks.showCurriculum, tweaks.showSampler, tweaks.showPricing, tweaks.showFAQ]);

  const T = window.TweaksPanel;
  const TS = window.TweakSection;
  const TR = window.TweakRadio;
  const TT = window.TweakText;

  return (
    <T title="Tweaks">
      <TS label="Color theme">
        <TR
          value={tweaks.theme}
          options={[
            { value: 'warm', label: 'Warm' },
            { value: 'editorial', label: 'Editorial' },
            { value: 'bold', label: 'Bold' }
          ]}
          onChange={v => setTweak('theme', v)}
        />
      </TS>
      <TS label="Hero calligraphy word">
        <TR
          value={tweaks.heroCalligraphy}
          options={[
            { value: 'سلام', label: 'سلام' },
            { value: 'حُبّ', label: 'حُبّ' },
            { value: 'مرحبا', label: 'مرحبا' },
            { value: 'جميل', label: 'جميل' }
          ]}
          onChange={v => setTweak('heroCalligraphy', v)}
        />
      </TS>
      <TS label="Animation intensity">
        <TR
          value={tweaks.animationIntensity}
          options={[
            { value: 'subtle', label: 'Subtle' },
            { value: 'medium', label: 'Medium' },
            { value: 'bold', label: 'Bold' }
          ]}
          onChange={v => setTweak('animationIntensity', v)}
        />
      </TS>
      <TS label="Headline">
        <TT value={tweaks.headline} onChange={v => setTweak('headline', v)} multiline />
      </TS>
      <TS label="CTA button text">
        <TT value={tweaks.ctaText} onChange={v => setTweak('ctaText', v)} />
      </TS>
      <TS label="Show sections">
        {[
          ['showVideo', 'Video preview'],
          ['showAbout', 'About Asmae'],
          ['showCurriculum', 'Curriculum'],
          ['showSampler', 'Phrases sampler'],
          ['showPricing', 'Pricing'],
          ['showFAQ', 'FAQ']
        ].map(([k, label]) => (
          <window.TweakToggle key={k} label={label} value={tweaks[k]} onChange={v => setTweak(k, v)} />
        ))}
      </TS>
    </T>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);