// App — composes all 9 sections
const FloatingWA = () => (
  <a href="https://wa.me/97233035033?text=שלום, אני מתעניין/ת בעיקור עדין לכלב/ה שלי 🐾"
     className="floating-wa" aria-label="שלח WhatsApp">
    <WhatsappIcon size={28} />
  </a>
);

const TweaksPanel = ({ active, onClose, settings, setSettings }) => {
  if (!active) return null;
  return (
    <div className="tweaks-panel active">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <h4 style={{ margin: 0 }}>Tweaks</h4>
        <button onClick={onClose}><XIcon size={18} /></button>
      </div>
      <div className="tweak-row">
        <label>Hero headline</label>
        <select value={settings.heroVariant} onChange={(e) => setSettings({ ...settings, heroVariant: e.target.value })}>
          <option value="a">הפרוצדורה העדינה לכלב שלך</option>
          <option value="b">כירורגיה עדינה. חזרה מהירה.</option>
          <option value="c">5 מ״מ. 24 שעות. בלי צווארון.</option>
        </select>
      </div>
      <div className="tweak-row">
        <label>צבע CTA ראשי</label>
        <select value={settings.ctaColor} onChange={(e) => setSettings({ ...settings, ctaColor: e.target.value })}>
          <option value="#BF124D">Crimson (default)</option>
          <option value="#0046FF">Brand Blue</option>
          <option value="#000E34">Deep Navy</option>
        </select>
      </div>
      <div className="tweak-row">
        <label>רקע סקציות חלופיות</label>
        <select value={settings.surfaceColor} onChange={(e) => setSettings({ ...settings, surfaceColor: e.target.value })}>
          <option value="#F3F5F9">Cool gray (default)</option>
          <option value="#F6F2EC">Warm beige</option>
          <option value="#F0F4FF">Blue tint</option>
        </select>
      </div>
    </div>
  );
};

const App = () => {
  const [editMode, setEditMode] = React.useState(false);
  const [settings, setSettings] = React.useState(/*EDITMODE-BEGIN*/{
    "heroVariant": "a",
    "ctaColor": "#BF124D",
    "surfaceColor": "#F3F5F9"
  }/*EDITMODE-END*/);

  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--crimson', settings.ctaColor);
    document.documentElement.style.setProperty('--surface', settings.surfaceColor);
  }, [settings]);

  const saveTweak = (next) => {
    setSettings(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*');
  };

  return (
    <>
      <SiteHeader active="home" />
      <Hero />
      <SplitComparison />
      <HowItWorks />
      <CostPlanner />
      <DoctorCard />
      <Stories />
      <FAQ />
      <CTASection />
      <SiteFooter />
      <FloatingWA />
      <TweaksPanel
        active={editMode}
        onClose={() => setEditMode(false)}
        settings={settings}
        setSettings={saveTweak}
      />
    </>
  );
};

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