// app.jsx — יוגה שאלה / Yoga Shala welcome page
const { useState, useEffect, useMemo, useRef } = React;

/* ────────────────────────────────────────────────
   Real URLs (from studio)
   ──────────────────────────────────────────────── */
const URL_INTRO_MONTH =
"https://www.yogajaffa.com/plans/payment/eyJpbnRlZ3JhdGlvbkRhdGEiOnsicGxhbklkcyI6WyIxN2Y3MGUxNy0wODVlLTQ0NmQtOTUzOC0xYTZmNjBiMjc5Y2MiXX0sInBsYW5JZCI6IjE3ZjcwZTE3LTA4NWUtNDQ2ZC05NTM4LTFhNmY2MGIyNzljYyJ9";
const URL_VIDEO_HERO = "https://video.wixstatic.com/video/10a155_62f322ea0596415f83a892989ed19ffc/1080p/mp4/file.mp4";
const URL_TRIAL_IFRAME =
"https://YogaShala.web.arboxapp.com/group?whitelabel=Arbox&lang=he&location=15638&referrer=PLUGIN&filters=%7B%22trial%22%3A%22trial%22%2C%22pageName%22%3A%22group%22%7D";

/* ────────────────────────────────────────────────
   Content
   ──────────────────────────────────────────────── */

const CLASS_CATALOG = {
  vinyasa:    { he: "ויניאסה",                    en: "Vinyasa",           tag: "yoga",     why: "זרימה דינמית עם נשימה — מחזק, פותח, מעיר." },
  ashtanga:   { he: "אשטנגה",                     en: "Ashtanga",          tag: "yoga",     why: "סדרה קבועה ותובענית — שיטה לחיזוק עומק ומיקוד." },
  iyengar:    { he: "איינגאר",                    en: "Iyengar",           tag: "yoga",     why: "דיוק ביישור, אביזרים, קצב איטי — מצוין למתחילים ולפציעות." },
  hatha:      { he: "האטה",                       en: "Hatha",             tag: "yoga",     why: "תרגול מאוזן ומרגיע — נקודת כניסה רכה ועמוקה." },
  yin:        { he: "ין יוגה",                    en: "Yin",               tag: "yoga",     why: "החזקות ארוכות במצב פסיבי — לרכמות, נשימה, רגיעה עמוקה." },
  shadow:     { he: "שאדו יוגה",                  en: "Shadow",            tag: "yoga",     why: "תנועה איטית עם דגש על מבנה — בונה גמישות ונוכחות." },
  meditation: { he: "מדיטציה",                   en: "Meditation",        tag: "yoga",     why: "ישיבה, נשימה, התכנסות — בסיס לכל השאר." },
  reformer:   { he: "פילאטיס מכשירים",            en: "Reformer",          tag: "reformer", why: "עבודה עם קפיצי המכשיר — חיזוק עמוק, יישור, בלי עומס על המפרקים." },
  mat:        { he: "פילאטיס מזרון",              en: "Mat",               tag: "reformer", why: "פילאטיס קלאסי על מזרון — חיזוק ליבה, ניידות, יציבה." },
  reformerAdv:{ he: "פילאטיס מכשירים למתקדמים", en: "Reformer Advanced", tag: "reformer", why: "תרגול מתקדם לאחר היכרות עם המכשיר — עוצמה, תיאום, דיוק." }
};

const YOGA_LIST    = ["ויניאסה", "אשטנגה", "איינגאר", "האטה", "ין יוגה", "שאדו יוגה", "מדיטציה"];
const REFORMER_LIST = ["פילאטיס מכשירים", "פילאטיס מזרון", "פילאטיס מכשירים למתקדמים"];

const STEPS = [
  { num: "01", h: "בוחרים נקודת התחלה",       p: "שיעור ניסיון בודד ב‑60 ₪, או חודש היכרות מלא ב‑290 ₪. בלי הרשמה ארוכה, בלי שיחות מכירה." },
  { num: "02", h: "מגיעים לסטודיו ביפו",       p: "המרחב פתוח 15 דק׳ לפני השיעור. מזרנים, אביזרים, ובלוקים כבר כאן — הביאו רק את עצמכם עם לבוש נח." },
  { num: "03", h: "מוצאים את המורה והסגנון",  p: "תרגלו כמה סגנונות, התנסו עם מורים שונים. הקשיבו למה שעובד לכם — ומשם נבנה תרגול שבאמת מתאים עבורכם. מוזמנים להתייעץ איתנו בכל שלב." }
];

const TESTIMONIALS = [
  {
    q: "אני כל כך נהנת מהסטודיו, המחיר שלו ומה שהוא מציע. המרחב כל כך נעים ויפה לעין עם שיעורים אינטימיים, אבל הכי הכי מפליא ונעים לחוות איך כל מורה שהייתי אצלה מחזיקה מרחב ומביאה את עצמה בתשומת לב ובדרך הייחודית שלה. סוף סוף מצאתי מקום שעונה על כל הצרכים שלי כמתרגלת.",
    name: "ס.", role: "מתרגלת", initial: "ס"
  },
  {
    q: "לפני יותר משנה התחלתי איתכם דרך שהתגלתה עבורי כמאוד משמעותית. השיעורים שלכם היו בשבילי מקום של שלווה, עוגן, ריסט, איזון, וגם לימוד על עצמי. רציתי שתדעו שכל שיעור שאתם מעבירים יכול להיות בדיוק מה שמישהו מהמתאמנים היה הכי זקוק לו באותו יום. ובשבילו זה עולם ומלואו.",
    name: "ל.", role: "מנוי ותיק", initial: "ל"
  }
];

const FAQ = [
  { q: "מה אם אני גמיש כמו קרש?",                       a: "מעולה, בדיוק בשבילך. אנשים שכבר גמישים לא צריכים יוגה (לא באמת :). יוגה היא לא תחרות על מי מגיע לאצבעות הרגליים. זה תרגול של נוכחות, נשימה, וחיבור לגוף. אנשים עם גמישות של קרש בדרך כלל מגלים שהם רגועים יותר, חזקים יותר, ועם גב שמפסיק לכאוב. ותוך כמה שבועות? אתם תופתעו." },
  { q: "מה להביא לשיעור?",                               a: "בגדים נוחים שאפשר לנוע בהם. יוגה עושים יחפים — אין צורך בנעלי ספורט מיוחדות. מזרנים ואביזרים קיימים בסטודיו. אם יש לכם מזרן אישי שאתם אוהבים, הביאו אותו בשמחה — אבל לא חובה. פילאטיס מכשירים אפשר לעשות יחפים או עם גרביים." },
  { q: "אפשר לאכול לפני שיעור?",                         a: "עדיף לא לאכול ארוחה כבדה שעתיים לפני השיעור. פיצה שלמה ממש לפני — לא הרעיון הכי טוב (במיוחד בשיעור יוגה עם פיתולים עמוקים 😉). אבל אם אתם רעבים ואכלתם משהו קל? בסדר גמור." },
  { q: "אין לי שום ניסיון. ממש אפס. זה בסדר?",           a: "לא רק שזה בסדר — זה הכי טוב. כשמגיעים בלי הרגלים ישנים, המורה יכול להדריך אתכם מההתחלה בצורה הנכונה. יש לנו שיעורים רבים שמתאימים למתחילים — האטה יוגה, איינגאר, חלק משיעורי הויניאסה ופילאטיס מכשירים ומזרון. בכל שיעור — פשוט אמרו למורה שאתם חדשים, והם יכוונו אתכם." },
  { q: "למה חודש היכרות ולא פשוט מנוי חודשי רגיל?",     a: "כי אנחנו רוצים שתגיעו ותבדקו אם זה המקום שלכם — בלי לקנות חתול בשק. חודש היכרות נותן לכם ללכת לשיעורים שונים, לפגוש מורים שונים, ולגלות מה מרגיש נכון. ₪290 לחודש שלם ללא הגבלה + 3 פילאטיס — זה משמעותית זול ממנוי רגיל." },
  { q: "אני בהריון / יש לי כאב גב / פציעה ישנה. אפשר?", a: "בהחלט — אבל חשוב לספר למורה לפני השיעור. יש לנו מורים עם ניסיון בהתאמות לנשים בהריון, לאנשים עם כאבי גב ופציעות. פילאטיס מכשירים בפרט מצוין לשיקום ולחיזוק ממוקד. תמיד תספרו — המורים כאן בשביל להתאים, וממש חשוב שהם ידעו לכוון אתכם נכון." },
  { q: "שמעתי שבסוף השיעור שוכבים ולא עושים כלום. זה אמיתי?", a: "כן! וזה החלק הכי טוב. זה נקרא שאוואסנה — תרגול הרפיה עמוקה שהוא חלק אינטגרלי מהיוגה. הגוף מעכל את כל מה שהיה בשיעור, מערכת העצבים נרגעת, ויש אנשים שמרגישים שזה שווה יותר משעת שינה. גם אם נרדמתם — זה בסדר לגמרי." },
  { q: "איך נרשמים לשיעור?",                             a: "אם רכשתם חודש היכרות או כל מנוי אחר — תקבלו מייד מייל עם פרטי כניסה לאפליקציה שלנו Arbox, שם תראו את כל לוח השיעורים ותוכלו להירשם בקלות. לא קיבלתם מייל? משהו לא עובד? צריכים עזרה? כתבו לנו ב‑WhatsApp ונסדר הכל." },
  { q: "מה אם נרשמתי לשיעור ואני לא יכול להגיע?",       a: "ביטול אפשרי עד שש שעות לפני תחילת השיעור (לשיעורי מזרן), ועד 12 שעות לפני לפילאטיס מכשירים. ביטול מאוחר יותר נחשב כהגעה לשיעור. אנחנו מבינים שהחיים קורים, אבל מקום ששמרתם הוא מקום שמישהו אחר לא יכול היה לתפוס." },
  { q: "מה ההבדל בין ויניאסה, איינגאר, ין, אשטנגה...?", a: "שאלה מצוינת — ובשביל זה יש את חודש ההיכרות. בקצרה: ויניאסה — זרימה, תנועה בנשימה, דינמי. איינגאר והאטה יוגה — דיוק, עבודה עם כלי עזר, בנייה נכונה ומדוייקת של המנחים. אשטנגה — סדרה קבועה, דינאמית משלבת עבודה על מבנה וכוח. ין יוגה — שיעורים עם שהיה ארוכה בתנוחות הרפיה, עבודה מדיטטיבית ושקטה. מושלם לאחרי יום עמוס. מדיטציה — ישיבה, נשימה, שקט פנימי. בואו לפגוש את עצמכם מבפנים." },
  { q: "פילאטיס מכשירים — זה לא רק לנשים?",             a: "ממש לא. פילאטיס מכשירים פותח על ידי גבר (ג'וזף פילאטס), שאימן לוחמי מלחמת העולם הראשונה ורקדנים מקצועיים. ספורטאים, רקדנים, אנשים עם פציעות, אנשים שרק מחפשים גוף חזק ויציב — כולם. הציוד נראה מאיים, אבל אחרי שיעור אחד אתם תאהבו אותו." },
  { q: "איפה בדיוק אתם?",                                a: "יהודה הימית 37, יפו — צפון יפו. קרוב לים ולשוק הפשפשים. חנייה אפשר בכחול-לבן ברחובות בסביבה ויש כמה חניונים חינמיים באזור. יש אוטובוסים שמגיעים לאזור, ותחנת רכבת קלה — בלומפילד — פחות מ-5 דקות הליכה מהסטודיו. אם אתם מגיעים בפעם הראשונה ואתם לא בטוחים — כתבו לנו ב‑WhatsApp ונדריך אתכם." }
];

const TEACHERS = [
  { name: "שיר",   role: "מדיטציה, ויניאסה, ין יוגה",          photo: "assets/teachers/shir.avif" },
  { name: "אלונה", role: "ויניאסה, אשטנגה",                     photo: "assets/teachers/alona.avif" },
  { name: "מיכל",  role: "פילאטיס מכשירים",                     photo: "assets/teachers/michal.avif" },
  { name: "קטי",   role: "פילאטיס מכשירים",                     photo: "assets/teachers/kati.avif" },
  { name: "לירון", role: "פילאטיס מכשירים",                     photo: "assets/teachers/liron.avif" },
  { name: "שירה",  role: "ויניאסה, אשטנגה",                     photo: "assets/teachers/shira.avif" },
  { name: "מיקה",  role: "פילאטיס מכשירים",                     photo: "assets/teachers/mika.avif" },
  { name: "עדי",   role: "האטה יוגה, פילאטיס מזרן",             photo: "assets/teachers/adi.avif" }
];

/* ────────────────────────────────────────────────
   Quiz logic
   ──────────────────────────────────────────────── */

const QUIZ_QUESTIONS = [
  {
    key: "level",
    q: "איפה אתם בתרגול?",
    options: [
      { value: "new",  label: "מתחילים",     desc: "אף פעם לא תרגלתי, או רק כמה שיעורים בעבר" },
      { value: "some", label: "קצת ניסיון",  desc: "תרגלתי בעבר, מרגישים בנוח על המזרן" },
      { value: "exp",  label: "מנוסים",      desc: "תרגול קבוע, מחפשים אתגר ועומק" }
    ]
  },
  {
    key: "want",
    q: "מה הכי חשוב לכם עכשיו?",
    options: [
      { value: "relax",   label: "רגיעה ושקט פנימי",        desc: "להאט, לנשום, להוריד מתח" },
      { value: "strong",  label: "חיזוק וטונוס",             desc: "לבנות כוח, להזיע, להתאמן" },
      { value: "flex",    label: "גמישות וניידות",           desc: "פתיחה של הגוף, ניידות מפרקים" },
      { value: "connect", label: "חיבור לגוף ולנשימה",      desc: "תרגול שמאחד תנועה, נשימה ותודעה" }
    ]
  },
  {
    key: "time",
    q: "איזה זמן ביום עובד לכם הכי טוב?",
    options: [
      { value: "morning", label: "בוקר",   desc: "להתחיל את היום ברגל ימין" },
      { value: "midday",  label: "צהריים", desc: "הפסקה באמצע יום עמוס" },
      { value: "evening", label: "ערב",    desc: "לסגור את היום, לנשום עמוק" }
    ]
  }
];

function recommend({ level, want, time }) {
  const recs = [];

  if (level === "exp") {
    if (want === "strong") {
      recs.push("reformerAdv", "ashtanga", "shadow");
    } else if (time === "morning") {
      recs.push("shadow", "iyengar", "ashtanga");
    } else {
      recs.push("shadow", "vinyasa", "ashtanga");
    }
  } else if (want === "relax") {
    recs.push("yin", "meditation", "hatha");
  } else if (want === "strong") {
    recs.push(level === "new" ? "hatha" : "ashtanga", "reformer", "vinyasa");
  } else if (want === "flex") {
    recs.push("iyengar", "shadow", "hatha");
  } else if (want === "connect") {
    recs.push("vinyasa", "hatha", "mat");
  }

  if (level === "new" && recs.includes("ashtanga")) recs.splice(recs.indexOf("ashtanga"), 1, "vinyasa");

  const seen = new Set();
  const out  = [];
  for (const k of recs) {
    if (!seen.has(k) && CLASS_CATALOG[k]) { seen.add(k); out.push(k); }
    if (out.length >= 3) break;
  }
  return out;
}

/* ────────────────────────────────────────────────
   Sub-components
   ──────────────────────────────────────────────── */

function Nav({ studio, onIntro, onTrial }) {
  const [compact, setCompact] = useState(false);
  useEffect(() => {
    const onScroll = () => setCompact(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (compact ? " compact" : "")}>
      <div className="nav-inner">
        <a href="#" className="brand" aria-label={studio}>
          <span className="brand-logo" role="img" aria-label={studio}></span>
        </a>
        <div className="nav-links">
          <a href="#classes">שיעורים</a>
          <a href="#quiz">איזה שיעור מתאים לי?</a>
          <a href="#schedule">לוח שיעורים</a>
          <a href="#teachers">מורים</a>
          <a href="#pricing">מחירים</a>
          <a href="#visit">צור קשר</a>
        </div>
        <div className="nav-cta">
          <a className="login" href="#" onClick={(e) => { e.preventDefault(); onTrial(); }}>שיעור ניסיון</a>
          <button className="btn btn-accent" onClick={onIntro}>חודש היכרות · 290 ₪</button>
        </div>
      </div>
    </nav>
  );
}

function HeroSplit({ studio, headline, lede, ctaIntro, ctaTrial, onIntro, onTrial }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <span className="eyebrow"><span className="dot" /> חדשים בסטודיו? התחילו כאן.</span>
            <h1 className="display" dangerouslySetInnerHTML={{ __html: headline }}
                style={{ fontFamily: "Heebo", fontWeight: "200", fontSize: "64px" }} />
            <p className="lede">{lede}</p>
            <div className="hero-ctas">
              <button className="btn btn-accent btn-lg btn-arrow" onClick={onIntro}>{ctaIntro}</button>
              <button className="btn btn-ghost btn-lg" onClick={onTrial}>{ctaTrial}</button>
              <span className="helper">חודש מלא · בלי התחייבות</span>
            </div>
          </div>
          <div className="hero-art">
            <div className="badge">
              חודש היכרות
              <small>290 ₪ · ללא הגבלה</small>
            </div>
            <image-slot id="hero-main" shape="rect" src="assets/hero.jpg" placeholder="תמונה מהסטודיו · אור טבעי · מתרגלת באמצע תנוחה" />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroFull({ headline, lede, ctaIntro, ctaTrial, onIntro, onTrial }) {
  return (
    <section className="hero-full">
      <div className="bg">
        <image-slot id="hero-full-bg" shape="rect" placeholder="תמונת רוחב · אור זהוב מהחלונות של הסטודיו" />
      </div>
      <div className="scrim" />
      <div className="inner">
        <span className="eyebrow">חדשים בסטודיו? התחילו כאן.</span>
        <h1 className="display" dangerouslySetInnerHTML={{ __html: headline }} />
        <p className="lede" style={{ maxWidth: 560, marginTop: 24 }}>{lede}</p>
        <div className="hero-ctas" style={{ marginTop: 32 }}>
          <button className="btn btn-accent btn-lg btn-arrow" onClick={onIntro}>{ctaIntro}</button>
          <button className="btn btn-ghost btn-lg" onClick={onTrial}>{ctaTrial}</button>
          <span className="helper">חודש מלא · בלי התחייבות</span>
        </div>
      </div>
    </section>
  );
}

function HeroVideo({ headline, lede, ctaIntro, ctaTrial, onIntro, onTrial }) {
  return (
    <section className="hero-full hero-video">
      <div className="bg">
        <video
          autoPlay muted loop playsInline
          poster="assets/hero-poster.jpg"
        >
          <source src={URL_VIDEO_HERO} type="video/mp4" />
        </video>
      </div>
      <div className="scrim scrim-video" />
      <div className="inner">
        <span className="eyebrow">חדשים בסטודיו? התחילו כאן.</span>
        <h1 className="display" dangerouslySetInnerHTML={{ __html: headline }} />
        <p className="lede" style={{ maxWidth: 560, marginTop: 24 }}>{lede}</p>
        <div className="hero-ctas" style={{ marginTop: 32 }}>
          <button className="btn btn-accent btn-lg btn-arrow" onClick={onIntro}>{ctaIntro}</button>
          <button className="btn btn-ghost btn-lg" onClick={onTrial}>{ctaTrial}</button>
          <span className="helper">חודש מלא · בלי התחייבות</span>
        </div>
      </div>
    </section>
  );
}

function HeroMinimal({ headline, lede, ctaIntro, ctaTrial, onIntro, onTrial }) {
  return (
    <section className="hero-min">
      <div className="wrap">
        <span className="eyebrow">יוגה · פילאטיס מכשירים · יפו</span>
        <h1 className="display" dangerouslySetInnerHTML={{ __html: headline }} />
        <p className="lede">{lede}</p>
        <div className="hero-ctas">
          <button className="btn btn-accent btn-lg btn-arrow" onClick={onIntro}>{ctaIntro}</button>
          <button className="btn btn-ghost btn-lg" onClick={onTrial}>{ctaTrial}</button>
        </div>
        <p style={{ marginTop: 18, fontSize: 13, color: "var(--mute)" }}>חודש מלא · בלי התחייבות</p>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["ויניאסה", "אשטנגה", "איינגאר", "האטה", "ין יוגה", "שאדו יוגה", "מדיטציה", "פילאטיס מכשירים", "פילאטיס מזרון", "מתקדמים"];
  const doubled = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((s, i) =>
          <React.Fragment key={i}>
            <span>{s}</span>
            <span className="sep">◆</span>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function OfferStrip({ onIntro }) {
  return (
    <section className="offer-strip">
      <div className="wrap row">
        <div>
          <span className="pill"><span className="dot" /> רק למתרגלים חדשים</span>
          <h3>חודש היכרות — <span className="price">290 ₪</span></h3>
          <div className="meta">שיעורי סטודיו ללא הגבלה למשך חודש מלא + 3 שיעורי פילאטיס מכשירים. כל הסגנונות, כל המורים, כל השעות.</div>
        </div>
        <button className="btn btn-warm btn-lg btn-arrow" onClick={onIntro}>אני בפנים</button>
      </div>
    </section>
  );
}

function Classes() {
  return (
    <section id="classes">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">מה מלמדים אצלנו</span>
            <h2 className="display">שני עולמות,<br /><em>בית אחד.</em></h2>
          </div>
          <p className="lede">סטודיו אחד, שתי דרכים. יוגה כדי להאט, להתחבר, להקשיב. פילאטיס מכשירים כדי לחזק ולהעמיק. יכולים לבחור את הדרך שמתאימה לכם. ההמלצה שלנו — לשלב וליהנות משני העולמות :)</p>
        </div>
        <div className="classes-grid">
          <article className="class-card">
            <div className="art">
              <span className="label">יוגה</span>
              <image-slot id="class-yoga" shape="rect" src="assets/class-yoga.jpg" placeholder="תמונה מאולם היוגה · רצפת עץ חמה · תרגול בתנוחה" />
            </div>
            <div className="body">
              <h3>יוגה</h3>
              <p>שבעה סגנונות, מאיטי וקשוב ועד דינמי ומזיע. מורה אחר לכל שיעור — קצב אחר, מוסיקה אחרת, דגש אחר. כל המורים אצלנו מחזיקים מרחב לכולם.</p>
              <div className="types">
                {YOGA_LIST.map((t) => <span key={t}>{t}</span>)}
              </div>
              <a href="#schedule" className="more">לוח השיעורים</a>
            </div>
          </article>

          <article className="class-card">
            <div className="art">
              <span className="label">פילאטיס מכשירים</span>
              <image-slot id="class-reformer" shape="rect" src="assets/class-reformer.jpg" placeholder="תקריב של מיטת רפורמר · קפיצים, רצועות, עץ" />
            </div>
            <div className="body">
              <h3>פילאטיס מכשירים</h3>
              <p>עבודה על מיטות רפורמר — חיזוק עמוק של ליבה ויציבה, בלי עומס על המפרקים. שיעורים אינטימיים בקבוצות קטנות, מורים בעלי הכשרה מקצועית.</p>
              <div className="types">
                {REFORMER_LIST.map((t) => <span key={t}>{t}</span>)}
              </div>
              <a href="#schedule" className="more">לוח השיעורים</a>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ onIntro }) {
  return (
    <section className="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">איך מתחילים?</span>
            <h2 className="display">מ<em>סקרנות</em><br />למזרן.</h2>
          </div>
          <p className="lede">בלי שיחות מכירה, בלי שאלון ארוך, בלי התחייבות. בוחרים, מגיעים, ומגלים מה מתאים לכם.</p>
        </div>
        <div className="steps">
          {STEPS.map((s) =>
            <div className="step" key={s.h}>
              <span className="num">{s.num}</span>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          )}
        </div>
        <div style={{ marginTop: 56, display: "flex", justifyContent: "center" }}>
          <button className="btn btn-primary btn-lg btn-arrow" onClick={onIntro}>אני בפנים לחודש ההיכרות — 290 ₪</button>
        </div>
      </div>
    </section>
  );
}

function Quiz({ onTrial }) {
  const [step, setStep]       = useState(0);
  const [answers, setAnswers] = useState({});
  const total    = QUIZ_QUESTIONS.length;
  const progress = step === total ? 100 : Math.round(step / total * 100);

  function pick(key, value) {
    const next = { ...answers, [key]: value };
    setAnswers(next);
    setTimeout(() => setStep((s) => s + 1), 220);
  }
  function reset() { setAnswers({}); setStep(0); }

  const recs = step === total ? recommend(answers) : [];

  return (
    <section id="quiz">
      <div className="wrap">
        <div className="quiz">
          <div className="quiz-aside">
            <span className="eyebrow">3 שאלות קצרות</span>
            <h3>איזה שיעור<br /><em>מתאים לכם?</em></h3>
            <p>אין תשובה אחת נכונה. אנחנו ממליצים לנסות כמה סגנונות ומורים — כי הקסם תמיד קורה במפגש הספציפי בין מורה למתרגל. שם השיעור לא יוכל לגלות לכם את זה.</p>
            <div className="quiz-stepper">
              <span>שלב {Math.min(step + 1, total + 1)} מתוך {total + 1}</span>
              <div className="bar"><i style={{ width: `${progress}%` }} /></div>
            </div>
          </div>

          <div className="quiz-main">
            {step < total
              ? <QuestionView
                  question={QUIZ_QUESTIONS[step]}
                  value={answers[QUIZ_QUESTIONS[step].key]}
                  onPick={(v) => pick(QUIZ_QUESTIONS[step].key, v)}
                  onBack={() => setStep((s) => Math.max(0, s - 1))}
                  canGoBack={step > 0}
                  index={step} />
              : <ResultView recs={recs} onReset={reset} onTrial={onTrial} />
            }
          </div>
        </div>
      </div>
    </section>
  );
}

function QuestionView({ question, value, onPick, onBack, canGoBack, index }) {
  return (
    <>
      <span className="eyebrow" style={{ marginBottom: 12 }}>שאלה {index + 1}</span>
      <h4 className="quiz-q">{question.q}</h4>
      <div className="quiz-options">
        {question.options.map((o) =>
          <button
            key={o.value}
            className={"quiz-opt" + (value === o.value ? " selected" : "")}
            onClick={() => onPick(o.value)}>
            <span>
              {o.label}
              {o.desc && <span className="desc">{o.desc}</span>}
            </span>
            <span className="pick">בחירה ←</span>
          </button>
        )}
      </div>
      <div className="quiz-nav">
        <button className="quiz-back" onClick={onBack} disabled={!canGoBack}>→ חזרה</button>
        <span style={{ fontSize: 13, color: "var(--ink-soft)" }}>בחרו אפשרות כדי להמשיך</span>
      </div>
    </>
  );
}

function ResultView({ recs, onReset, onTrial }) {
  return (
    <div className="quiz-result">
      <span className="eyebrow" style={{ marginBottom: 12, display: "block" }}>ההמלצה שלנו</span>
      <h4>נראה לנו ש<em>אלה</em><br />נקודות התחלה טובות.</h4>
      <p className="lede">בחרנו עבורכם 2–3 סוגי שיעורים שיענו על מה שחיפשתם. נסו אותם בחודש ההיכרות, וראו עם מי הכימיה הכי טובה.</p>
      <ul className="quiz-rec-list">
        {recs.map((k) =>
          <li key={k}>
            <span className="name">{CLASS_CATALOG[k].he}</span>
            <span className="why">{CLASS_CATALOG[k].why}</span>
          </li>
        )}
      </ul>
      <p className="quiz-disclaimer">
        זכרו — אצלנו הקסם בא מהמורים. אותו סגנון יכול להרגיש שונה לגמרי אצל מורה אחר. אם משהו לא התחבר מהשיעור הראשון, נסו מורה אחר באותו סגנון.
      </p>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <button className="btn btn-accent btn-lg btn-arrow" onClick={onTrial}>הזמינו שיעור ניסיון</button>
        <button className="btn btn-ghost" onClick={onReset}>התחילו מחדש</button>
      </div>
    </div>
  );
}

function Schedule({ onIntro }) {
  return (
    <section id="schedule">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">לוח השיעורים השבועי</span>
            <h2 className="display">שיעור ל<em>כל שעה פנויה</em><br />שיש לכם.</h2>
          </div>
          <p className="lede">מ8:00 בבוקר עד 21:00 בערב, שבעה ימים בשבוע. הזמינו שיעור ניסיון ישירות מהלו״ז למטה, או צאו לחודש היכרות מלא ותרגלו בלי הגבלה.</p>
        </div>

        <div className="schedule-hint">↕ אפשר לגלול את המערכת לעוד שיעורים</div>
        <div className="iframe-wrap" style={{ height: "800px", backgroundColor: "rgb(111, 122, 108)" }}>
          <iframe
            title="לוח שיעורים — Yoga Shala"
            src={URL_TRIAL_IFRAME}
            loading="lazy"
            allow="payment"
            style={{ height: "776px" }} />
        </div>

        <div className="sched-foot">
          <span>שיעור ניסיון בודד 60 ₪ · חודש היכרות 290 ₪ (כולל 3 שיעורי מכשירים)</span>
          <button className="btn btn-ghost" onClick={onIntro}>אני רוצה להתחיל חודש היכרות</button>
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section style={{ background: "var(--ivory)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">המרחב</span>
            <h2 className="display">בית קטן ביפו,<br />עם <em>אור.</em></h2>
          </div>
          <p className="lede">סטודיו אינטימי, שני אולמות, חצר פנימית, צמחים, ספרים, ושקט. בקבוצות קטנות יש הרבה מקום לכל אחד.</p>
        </div>
        <div className="gallery">
          <image-slot id="g1" className="g-1" shape="rect" src="assets/gallery-1.jpg" placeholder="אולם יוגה · רחב, אור טבעי" />
          <image-slot id="g2" className="g-2" shape="rect" src="assets/gallery-2.jpg" placeholder="חדר רפורמר · מיטות מסודרות" />
          <image-slot id="g3" className="g-3" shape="rect" src="assets/gallery-3.jpg" placeholder="פינת קבלה · ספרים, צמחים" />
          <image-slot id="g4" className="g-4" shape="rect" src="assets/gallery-4.jpg" placeholder="חצר פנימית · ירוקה" />
          <image-slot id="g5" className="g-5" shape="rect" src="assets/gallery-5.jpg" placeholder="תרגול קבוצתי · באור בוקר" />
          <image-slot id="g6" className="g-6" shape="rect" src="assets/gallery-6.jpg" placeholder="פרט · ידיים בנמסקאר" />
        </div>
      </div>
    </section>
  );
}

function Teachers() {
  return (
    <section id="teachers" className="teachers">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">הצוות</span>
            <h2 className="display">המורים — <em>הסיבה</em><br />שתחזרו.</h2>
          </div>
          <p className="lede">כל מורה אצלנו מביאה את עצמה — את הקצב שלה, את הקול שלה, את הדרך שלה להחזיק את המרחב. אנחנו בוחרים אותם בקפידה, ומאמינים שהמפגש הספציפי בין מתרגל למורה הוא הלב של התרגול.</p>
        </div>

        <div className="teacher-featured">
          <div className="founder-single">
            <img src="assets/teachers/founders.avif" alt="שיר ואלונה" />
          </div>
          <div>
            <span className="eyebrow">קצת עלינו</span>
            <h3>שיר ו<em>אלונה.</em></h3>
            <p>אנחנו שיר ואלונה — מתרגלים, נושמים וחיים את דרך היוגה. כל אחד בתרגול האישי שלו, דרך מערכת היחסים שלנו, ובאינטראקציה עם העולם סביבנו.</p>
            <p>פתחנו את יוגה שאלה מתוך כוונה עמוקה ורצון לאפשר מקום מפגש לאנשים. לתרגל, לנוע יחד, לקהילה להירקם, ולשיתופי פעולה להיווצר.</p>
          </div>
        </div>

        <div className="teachers-grid">
          {TEACHERS.map((t, i) =>
            <div className="teacher" key={i}>
              <div className="portrait">
                <img src={t.photo} alt={t.name} />
              </div>
              <h5>{t.name}</h5>
              <span className="role">{t.role}</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Pricing({ onIntro, onTrial }) {
  return (
    <section id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">מחירים</span>
            <h2 className="display">תרגול שעושה <em>טוב</em>,<br />כבר מהפעם הראשונה.</h2>
          </div>
          <p className="lede">התחילו בקטן עם שיעור ניסיון, או צאו לחודש היכרות מלא. אם זה מסתדר — בחרו מנוי. אם לא — נשמח שתרגלתם פעם אחת אצלנו, גם זה משהו :)</p>
        </div>

        <div className="price-grid">
          <div className="price-card featured">
            <span className="badge-fav">הכי פופולרי · למתרגלים חדשים</span>
            <span className="tag">חודש היכרות</span>
            <h3>30 ימים, ללא הגבלה</h3>
            <p className="sub">חודש מלא לנסות הכל — יוגה, פילאטיס, מורים, סגנונות.</p>
            <div className="price">290 ₪<span className="unit">חד‑פעמי</span></div>
            <ul>
              <li>שיעורי סטודיו ללא הגבלה — כל סגנונות היוגה</li>
              <li>3 שיעורי פילאטיס מכשירים</li>
              <li>גישה לכל המורים ולכל השעות</li>
              <li>חד‑פעמי, רק למתרגלים חדשים</li>
            </ul>
            <button className="btn btn-warm btn-lg price-cta btn-arrow" onClick={onIntro}>קבלו את חודש ההיכרות</button>
          </div>

          <div className="price-card">
            <span className="tag">לבוא פעם אחת</span>
            <h3>שיעור ניסיון</h3>
            <p className="sub">להתחיל קטן — שיעור בודד לראות איך זה.</p>
            <div className="price">60 ₪<span className="unit">שיעור בודד</span></div>
            <ul>
              <li>כל שיעור יוגה או פילאטיס מכשירים</li>
              <li>בלי התחייבות, בלי הרשמה</li>
              <li>הזמנה ישירות מלוח השיעורים</li>
              <li>חד‑פעמי, רק למתרגלים חדשים</li>
            </ul>
            <button className="btn btn-ghost price-cta btn-arrow" onClick={onTrial}>הזמינו שיעור ניסיון</button>
          </div>

          <div className="price-card">
            <span className="tag">תרגול קבוע</span>
            <h3>מנויים וכרטיסיות</h3>
            <p className="sub">למי שכבר יודע שזה התרגול שלו.</p>
            <div className="price">מ‑320 ₪<span className="unit">לחודש</span></div>
            <ul>
              <li>מנוי חודשי, מתחדש בהוראת קבע</li>
              <li>הנחה לסדנאות ואירועים בסטודיו</li>
              <li>אפשרות להקפיא בתיאום מראש</li>
              <li>הצטרפות לקבוצת הוואטסאפ של הסטודיו</li>
            </ul>
            <a href="https://www.yogajaffa.com/plans" target="_blank" rel="noopener" className="btn btn-ghost price-cta">לכל המסלולים</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section style={{ background: "var(--cream-deep)" }}>
      <div className="wrap">
        <div className="review-strip">
          <div className="item">
            <span className="rating">5.0</span>
            <span className="stars">★★★★★</span>
            <span>· ביקורות אמיתיות של מתרגלים</span>
          </div>
          <span className="sep" />
          <div className="item"><span>קהילה של מאות מתרגלים</span></div>
          <span className="sep" />
          <div className="item"><span>סטודיו אינטימי · קבוצות קטנות</span></div>
        </div>

        <div className="section-head" style={{ marginBottom: 40 }}>
          <div>
            <span className="eyebrow">מה אומרים המתרגלים</span>
            <h2 className="display">דברים <em>אמיתיים</em><br />שמתרגלים כתבו לנו.</h2>
          </div>
          <p className="lede">לא הוצאנו שום פרסום ולא ביקשנו ביקורות. אלה הודעות אמיתיות שהגיעו אלינו — ובחרנו לחלוק כי הן מתארות את מה שאנחנו מנסים לבנות.</p>
        </div>

        <div className="testi-wrap">
          {TESTIMONIALS.map((t, i) =>
            <div className="testi" key={i}>
              <div className="quote-mark">"</div>
              <blockquote>{t.q}</blockquote>
              <div className="who">
                <div className="avatar">{t.initial}</div>
                <div>
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">לפני שתרשמו</span>
            <h2 className="display" style={{ fontSize: "clamp(36px,5vw,56px)", margin: "8px 0 24px" }}>
              שאלות של מתחילים<br />(ושל מתקדמים ש<em>מתביישים</em> לשאול).
            </h2>
            <p className="lede">
              לא מצאתם תשובה? כתבו לנו ב‑
              <a href="https://wa.me/972505215558" target="_blank" rel="noopener"
                 style={{ color: "var(--accent-deep)", textDecoration: "underline", textDecorationThickness: 1, textUnderlineOffset: 4 }}>
                וואטסאפ
              </a>
              {" "}או פשוט תתקשרו — אנחנו זמינים.
            </p>
          </div>
          <div>
            {FAQ.map((f, i) =>
              <div className={"faq-item" + (i === open ? " open" : "")} key={i}>
                <div className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
                  <h4>{f.q}</h4>
                  <button className="faq-toggle" aria-label="פתח/סגור">+</button>
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCta({ studio, onIntro, onTrial }) {
  return (
    <section id="visit" className="final-cta">
      <div className="wrap">
        <div className="grid">
          <div>
            <span className="eyebrow">מוכנים להתחיל?</span>
            <h2>חודש מלא,<br /><em>290 ₪.</em></h2>
            <p className="lede">תרגלו עם כל המורים, נסו כל סגנון, מצאו מה עובד לכם. רק למתרגלים חדשים.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-warm btn-lg btn-arrow" onClick={onIntro}>קבלו את חודש ההיכרות</button>
              <button className="btn btn-ghost btn-lg" onClick={onTrial}
                      style={{ color: "var(--ivory)", borderColor: "rgba(250,248,240,0.6)" }}>
                שיעור ניסיון · 60 ₪
              </button>
            </div>
            <p className="cta-meta">בלי התחייבות · לא מתחדש אוטומטית</p>
          </div>
          <div className="info">
            <div>
              <div className="label">בואו לבקר</div>
              <p><strong>יהודה הימית 37, יפו</strong><br />סטודיו אינטימי בלב יפו</p>
            </div>
            <div>
              <div className="label">שעות פעילות</div>
              <p><strong>א׳–ה׳</strong> · 08:00–22:00<br /><strong>ו׳</strong> · 08:00–16:00<br /><strong>ש׳</strong> · 08:00–20:00</p>
            </div>
            <div>
              <div className="label">צרו קשר</div>
              <p>
                <a href="https://wa.me/972505215558" target="_blank" rel="noopener" style={{color:"inherit"}}>וואטסאפ · 050-521-5558</a>
                <br />
                <a href="mailto:yogajaffa@gmail.com" style={{color:"inherit"}}>yogajaffa@gmail.com</a>
              </p>
              <a href="tel:+972505215558" className="btn-call">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.27h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.06 6.06l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
                התקשרו אלינו
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ studio }) {
  return (
    <footer className="foot">
      <div className="wrap row">
        <div>© {new Date().getFullYear()} {studio} · בית ליוגה ופילאטיס מכשירים · יפו</div>
        <div className="foot-links">
          <a href="https://www.instagram.com/yogashalajaffa" target="_blank" rel="noopener">אינסטגרם</a>
          <a href="https://www.yogajaffa.com" target="_blank" rel="noopener">האתר המלא</a>
          <a href="#faq">שאלות נפוצות</a>
          <a href="#visit">תקנון</a>
        </div>
      </div>
    </footer>
  );
}

/* ────────────────────────────────────────────────
   Palettes & font pairs
   ──────────────────────────────────────────────── */

const PALETTES = [
  { name: "סייג (מהלוגו)",
    cream: "#ebe9df", deep: "#dadbcb", ivory: "#faf8f0",
    ink: "#2a2c25", inkSoft: "#555a4f", mute: "#8c9285",
    accent: "#8b9587", accentDeep: "#6f7a6c", warm: "#b88663" },
  { name: "חול ואבן",
    cream: "#efe8db", deep: "#e1d6c1", ivory: "#faf5ea",
    ink: "#2c2620", inkSoft: "#5a5044", mute: "#8e8576",
    accent: "#9c8260", accentDeep: "#7a5d3c", warm: "#a36b4e" },
  { name: "ערב",
    cream: "#1f231e", deep: "#272c25", ivory: "#2c3128",
    ink: "#f4efe6", inkSoft: "#c2bdb1", mute: "#928d82",
    accent: "#a8b598", accentDeep: "#c7d2b9", warm: "#d28d65" }
];

const FONT_PAIRS = [
  { name: "Heebo דק (וויקס)",
    display: '"Heebo", "Assistant", system-ui, sans-serif',
    body: '"Heebo", "Assistant", system-ui, sans-serif',
    displayWeight: 200, emWeight: 500, tracking: "0.18em", lineHeight: 1.25 },
  { name: "Assistant דק",
    display: '"Assistant", "Heebo", system-ui, sans-serif',
    body: '"Assistant", "Heebo", system-ui, sans-serif',
    displayWeight: 300, emWeight: 600, tracking: "0.12em", lineHeight: 1.2 },
  { name: "Frank Ruhl + Heebo (סריף)",
    display: '"Frank Ruhl Libre", "Cormorant Garamond", Georgia, serif',
    body: '"Heebo", "Manrope", system-ui, sans-serif',
    displayWeight: 400, emWeight: 500, tracking: "-0.005em", lineHeight: 1.05 }
];

/* ────────────────────────────────────────────────
   App
   ──────────────────────────────────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "studio": "יוגה שאלה",
  "headline": "תרגול ש<em style=\"font-weight:400\">מחזיר אתכם</em><br/>הביתה.",
  "lede": "סטודיו אינטימי ביפו ליוגה ופילאטיס מכשירים. צוות מורים מנוסה ואכפתי, שיעורים שיקחו אתכם לגבהים חדשים, בגוף ובלב. חלל יפואי מרהיב. קהילה. בית.",
  "ctaIntro": "התחילו עם חודש היכרות · 290 ₪",
  "ctaTrial": "שיעור ניסיון · 60 ₪",
  "hero": "video",
  "palette": 0,
  "fontPair": 0,
  "showOfferStrip": true,
  "showQuiz": true,
  "showSchedule": true,
  "showGallery": true,
  "showTeachers": true,
  "showTestimonials": true,
  "showFaq": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const pal   = PALETTES[t.palette]  || PALETTES[0];
  const fonts = FONT_PAIRS[t.fontPair] || FONT_PAIRS[0];

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--cream",        pal.cream);
    r.setProperty("--cream-deep",   pal.deep);
    r.setProperty("--ivory",        pal.ivory);
    r.setProperty("--ink",          pal.ink);
    r.setProperty("--ink-soft",     pal.inkSoft);
    r.setProperty("--mute",         pal.mute);
    r.setProperty("--accent",       pal.accent);
    r.setProperty("--accent-deep",  pal.accentDeep);
    r.setProperty("--warm",         pal.warm);
    r.setProperty("--font-display", fonts.display);
    r.setProperty("--font-body",    fonts.body);
    r.setProperty("--display-weight",   String(fonts.displayWeight ?? 400));
    r.setProperty("--display-em-weight",String(fonts.emWeight ?? 500));
    r.setProperty("--display-tracking", fonts.tracking ?? "-0.005em");
    r.setProperty("--display-line",     String(fonts.lineHeight ?? 1.05));
    document.body.style.background = pal.cream;
    document.body.style.color      = pal.ink;
  }, [t.palette, t.fontPair]);

  function onIntro() { window.open(URL_INTRO_MONTH, "_blank", "noopener"); }
  function onTrial() {
    const el = document.getElementById("schedule");
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: "smooth" });
    }
  }

  const heroProps = { studio: t.studio, headline: t.headline, lede: t.lede,
                      ctaIntro: t.ctaIntro, ctaTrial: t.ctaTrial, onIntro, onTrial };

  return (
    <>
      <Nav studio={t.studio} onIntro={onIntro} onTrial={onTrial} />

      {t.hero === "video"   && <HeroVideo   {...heroProps} />}
      {t.hero === "full"    && <HeroFull    {...heroProps} />}
      {t.hero === "split"   && <HeroSplit   {...heroProps} />}
      {t.hero === "minimal" && <HeroMinimal {...heroProps} />}

      <Marquee />
      {t.showOfferStrip   && <OfferStrip onIntro={onIntro} />}
      <Classes />
      <HowItWorks onIntro={onIntro} />
      {t.showQuiz         && <Quiz onTrial={onTrial} />}
      {t.showSchedule     && <Schedule onIntro={onIntro} />}
      {t.showGallery      && <Gallery />}
      {t.showTeachers     && <Teachers />}
      <Pricing onIntro={onIntro} onTrial={onTrial} />
      {t.showTestimonials && <Testimonials />}
      {t.showFaq          && <Faq />}
      <FinalCta studio={t.studio} onIntro={onIntro} onTrial={onTrial} />
      <Footer studio={t.studio} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="טקסט וקריאות פעולה" />
        <TweakText label="שם הסטודיו"  value={t.studio}   onChange={(v) => setTweak('studio', v)} />
        <TweakText label="CTA ראשי"    value={t.ctaIntro} onChange={(v) => setTweak('ctaIntro', v)} />
        <TweakText label="CTA משני"    value={t.ctaTrial} onChange={(v) => setTweak('ctaTrial', v)} />

        <TweakSection label="הירו (Hero)" />
        <TweakRadio label="גרסה" value={t.hero} options={["video", "split", "full", "minimal"]} onChange={(v) => setTweak('hero', v)} />

        <TweakSection label="פלטה וטיפוגרפיה" />
        <TweakSelect label="פלטת צבעים" value={t.palette}  options={PALETTES.map((p, i)    => ({ value: i, label: p.name }))} onChange={(v) => setTweak('palette',  Number(v))} />
        <TweakSelect label="זוג פונטים"  value={t.fontPair} options={FONT_PAIRS.map((p, i) => ({ value: i, label: p.name }))} onChange={(v) => setTweak('fontPair', Number(v))} />

        <TweakSection label="חלקי הדף" />
        <TweakToggle label="פס מבצע (חודש היכרות)"          value={t.showOfferStrip}   onChange={(v) => setTweak('showOfferStrip',   v)} />
        <TweakToggle label="שאלון 'איזה שיעור מתאים לי?'"  value={t.showQuiz}          onChange={(v) => setTweak('showQuiz',         v)} />
        <TweakToggle label="לוח שיעורים"                    value={t.showSchedule}      onChange={(v) => setTweak('showSchedule',     v)} />
        <TweakToggle label="גלריה"                          value={t.showGallery}       onChange={(v) => setTweak('showGallery',      v)} />
        <TweakToggle label="מורים"                          value={t.showTeachers}      onChange={(v) => setTweak('showTeachers',     v)} />
        <TweakToggle label="המלצות"                         value={t.showTestimonials}  onChange={(v) => setTweak('showTestimonials', v)} />
        <TweakToggle label="שאלות נפוצות"                   value={t.showFaq}           onChange={(v) => setTweak('showFaq',         v)} />
      </TweaksPanel>
    </>
  );
}

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