// en/app.jsx — Yoga Shala welcome page (English / LTR)
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 = "/assets/hero-video.mp4";
const URL_TRIAL_IFRAME =
"https://YogaShala.web.arboxapp.com/group?whitelabel=Arbox&lang=en&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: "Dynamic flow with breath — strengthens, opens, awakens." },
  ashtanga:   { he: "אשטנגה",                     en: "Ashtanga",          tag: "yoga",     why: "A fixed, demanding series — a method for deep strength and focus." },
  iyengar:    { he: "איינגאר",                    en: "Iyengar",           tag: "yoga",     why: "Precise alignment, props, a slow pace — excellent for beginners and injuries." },
  hatha:      { he: "האטה",                       en: "Hatha",             tag: "yoga",     why: "A balanced, calming practice — a soft yet deep entry point." },
  yin:        { he: "ין יוגה",                    en: "Yin",               tag: "yoga",     why: "Long, passive holds — for softness, breath, deep release." },
  shadow:     { he: "שאדו יוגה",                  en: "Shadow",            tag: "yoga",     why: "Yogic movement inspired by martial arts — builds flexibility and presence." },
  meditation: { he: "מדיטציה",                   en: "Meditation",        tag: "yoga",     why: "Sitting, breathing, turning inward — the foundation for everything else." },
  reformer:   { he: "פילאטיס מכשירים",            en: "Reformer",          tag: "reformer", why: "Working with the machine's springs — deep strengthening and alignment, without stressing the joints." },
  mat:        { he: "פילאטיס מזרון",              en: "Mat",               tag: "reformer", why: "Classic mat Pilates — core strength, mobility, posture." },
  reformerAdv:{ he: "פילאטיס מכשירים למתקדמים", en: "Reformer Advanced", tag: "reformer", why: "Advanced practice for those already familiar with the reformer — power, coordination, precision." }
};

const YOGA_LIST     = ["Vinyasa", "Ashtanga", "Iyengar", "Hatha", "Yin", "Shadow Yoga", "Meditation"];
const REFORMER_LIST = ["Reformer Pilates", "Mat Pilates", "Advanced Reformer", "Tower"];

const STEPS = [
  { num: "01", h: "Choose your starting point",     p: "A single trial class for ₪60, or a full intro month for ₪290. No long registration, no sales calls." },
  { num: "02", h: "Come to the studio in Jaffa",    p: "The space opens 15 minutes before class. Mats, props and blocks are already here — just bring yourself, in comfortable clothes." },
  { num: "03", h: "Find your teacher and style",    p: "Try a few styles, practice with different teachers. Listen to what works for you — and from there we'll build a practice that truly fits. Feel free to consult us at any point." }
];

const TESTIMONIALS = [
  {
    q: "I enjoy the studio so much — the price, and everything it offers. The space is so pleasant and beautiful, with intimate classes. But the most amazing thing is experiencing how every teacher I've practiced with holds the space and brings herself with such care, in her own unique way. I've finally found a place that answers all my needs as a practitioner.",
    name: "S.", role: "Practitioner", initial: "S"
  },
  {
    q: "A little over a year ago I began a journey with you that turned out to be deeply meaningful for me. Your classes have been a place of calm, an anchor, a reset, balance — and a way of learning about myself. I wanted you to know that every class you teach might be exactly what someone needed most that day. And for them, it means the world.",
    name: "L.", role: "Long-time member", initial: "L"
  }
];

const FAQ = [
  { q: "What if I'm about as flexible as a plank of wood?",  a: "Perfect — this is exactly for you. People who are already flexible don't need yoga (well, not really :). Yoga isn't a competition of who can touch their toes. It's a practice of presence, breath, and connection to your body. People with plank-level flexibility usually discover they're calmer, stronger, and their back stops hurting. And within a few weeks? You'll be surprised." },
  { q: "What should I bring to class?",                       a: "Comfortable clothes you can move in. Yoga is practiced barefoot — no special sports shoes needed. Mats and props are available at the studio. If you have a personal mat you love, you're welcome to bring it — but it's not required. Reformer Pilates can be done barefoot or in socks." },
  { q: "Can I eat before class?",                             a: "It's best to avoid a heavy meal in the two hours before class. A whole pizza right before — not the greatest idea (especially in a yoga class with deep twists 😉). But if you're hungry and had something light? Totally fine." },
  { q: "I have zero experience. Literally none. Is that OK?", a: "It's not just OK — it's the best. When you arrive without old habits, the teacher can guide you properly from the very beginning. We have plenty of classes that suit beginners — Hatha yoga, Iyengar, some of the Vinyasa classes, and Reformer and Mat Pilates. In any class — just tell the teacher you're new, and they'll guide you." },
  { q: "Why an intro month and not just a regular membership?", a: "Because we want you to come and check whether this is your place — without buying blind. The intro month lets you go to different classes, meet different teachers, and discover what feels right. ₪290 for a full unlimited month + 3 Pilates sessions — significantly cheaper than a regular membership." },
  { q: "I'm pregnant / have back pain / an old injury. Can I join?", a: "Absolutely — but it's important to tell the teacher before class. Our teachers are experienced in adaptations for pregnancy, back pain and injuries. Reformer Pilates in particular is excellent for rehabilitation and targeted strengthening. Always let us know — the teachers are here to adapt, and it really matters that they know how to guide you safely." },
  { q: "I heard that at the end of class you just lie down and do nothing. Is that real?", a: "Yes! And it's the best part. It's called Savasana — a deep relaxation practice that's an integral part of yoga. The body digests everything that happened in class, the nervous system settles, and some people feel it's worth more than an hour of sleep. Fell asleep? That's completely fine too." },
  { q: "How do I book a class?",                              a: "If you've purchased an intro month or any other membership — you'll immediately receive an email with login details for our app, Arbox, where you'll see the full schedule and can book classes easily. Didn't get an email? Something not working? Need help? Message us on WhatsApp and we'll sort everything out." },
  { q: "What if I booked a class and can't make it?",         a: "You can cancel up to six hours before the class starts (for mat classes), and up to 12 hours before for Reformer Pilates. A later cancellation counts as attending the class. We understand that life happens, but a spot you held is a spot someone else couldn't take." },
  { q: "What's the difference between Vinyasa, Iyengar, Yin, Ashtanga…?", a: "Great question — and that's exactly what the intro month is for. In short: Vinyasa — flow, movement with breath, dynamic. Iyengar and Hatha yoga — precision, work with props, careful and accurate building of the postures. Ashtanga — a fixed, dynamic series combining structure and strength. Yin yoga — classes with long, restful holds, quiet and meditative work. Perfect after a busy day. Meditation — sitting, breathing, inner quiet. Come meet yourself from the inside." },
  { q: "Reformer Pilates — isn't that just for women?",       a: "Not at all. Reformer Pilates was developed by a man (Joseph Pilates), who trained World War I soldiers and professional dancers. Athletes, dancers, people recovering from injuries, people who simply want a strong, stable body — everyone. The equipment looks intimidating, but after one class you'll love it." },
  { q: "Where exactly are you?",                              a: "37 Yehuda HaYamit St., Jaffa — northern Jaffa. Close to the sea and the flea market. Street parking (blue-and-white) is available on nearby streets, plus a few free parking lots in the area. Buses reach the area, and the Bloomfield light-rail station is less than a 5-minute walk from the studio. Coming for the first time and not sure how to get here? Message us on WhatsApp and we'll guide you." }
];

const TEACHERS = [
  { name: "Shir",   role: "Meditation, Vinyasa, Yin",   photo: "/assets/teachers/shir.avif" },
  { name: "Alona",  role: "Vinyasa, Ashtanga",          photo: "/assets/teachers/alona.avif" },
  { name: "Michal", role: "Reformer Pilates",           photo: "/assets/teachers/michal.avif" },
  { name: "Kati",   role: "Reformer Pilates",           photo: "/assets/teachers/kati.avif" },
  { name: "Liron",  role: "Reformer Pilates",           photo: "/assets/teachers/liron.avif" },
  { name: "Shira",  role: "Vinyasa, Ashtanga",          photo: "/assets/teachers/shira.avif" },
  { name: "Mika",   role: "Reformer Pilates",           photo: "/assets/teachers/mika.avif" },
  { name: "Adi",    role: "Hatha Yoga, Mat Pilates",    photo: "/assets/teachers/adi.avif" }
];

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

const QUIZ_QUESTIONS = [
  {
    key: "level",
    q: "Where are you in your practice?",
    options: [
      { value: "new",  label: "Beginner",        desc: "Never practiced, or just a few classes in the past" },
      { value: "some", label: "Some experience", desc: "Practiced before, comfortable on the mat" },
      { value: "exp",  label: "Experienced",     desc: "Regular practice, looking for challenge and depth" }
    ]
  },
  {
    key: "want",
    q: "What matters most to you right now?",
    options: [
      { value: "relax",   label: "Calm & inner quiet",       desc: "Slow down, breathe, release stress" },
      { value: "strong",  label: "Strength & power",         desc: "Build strength, sweat, work out" },
      { value: "flex",    label: "Flexibility & mobility",   desc: "Open the body, free the joints" },
      { value: "connect", label: "Body–breath connection",   desc: "A practice uniting movement, breath and awareness" }
    ]
  },
  {
    key: "time",
    q: "What time of day works best for you?",
    options: [
      { value: "morning", label: "Morning", desc: "Start the day on the right foot" },
      { value: "evening", label: "Evening", desc: "Close the day, breathe deep" }
    ]
  }
];

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

  if (level === "new") {
    // beginners always get Iyengar + Hatha, plus one class matched to what they want
    if      (want === "relax")   recs.push("hatha", "iyengar", "yin");
    else if (want === "strong")  recs.push("iyengar", "hatha", "reformer");
    else if (want === "flex")    recs.push("iyengar", "hatha", "reformer");
    else                         recs.push("hatha", "iyengar", "mat");
  } else if (level === "some") {
    if      (want === "relax")   recs.push("yin", "hatha", "meditation");
    else if (want === "strong")  recs.push("vinyasa", "reformer", "ashtanga");
    else if (want === "flex")    recs.push("iyengar", "vinyasa", "hatha");
    else                         recs.push("vinyasa", "hatha", "mat");
  } else { // exp
    if (want === "strong") {
      recs.push("reformerAdv", "ashtanga", time === "morning" ? "reformer" : "shadow");
    } else if (want === "relax") {
      recs.push(time === "morning" ? "reformer" : "yin", "iyengar", "meditation");
    } else if (want === "flex") {
      recs.push(time === "morning" ? "reformer" : "shadow", "iyengar", "ashtanga");
    } else if (want === "connect") {
      recs.push(time === "morning" ? "reformer" : "shadow", "vinyasa", "ashtanga");
    } else if (time === "morning") {
      recs.push("reformer", "iyengar", "ashtanga");
    } else {
      recs.push("shadow", "vinyasa", "ashtanga");
    }
  }

  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="/en" className="brand" aria-label={studio}>
          <span className="brand-logo" role="img" aria-label={studio}></span>
        </a>
        <div className="nav-links">
          <a href="#classes">Classes</a>
          <a href="#quiz">Which class fits me?</a>
          <a href="#schedule">Schedule</a>
          <a href="#teachers">Teachers</a>
          <a href="#pricing">Pricing</a>
          <a href="#visit">Contact</a>
          <a href="/" lang="he" dir="rtl">עברית</a>
        </div>
        <div className="nav-cta">
          <a className="login" href="#" onClick={(e) => { e.preventDefault(); onTrial(); }}>Trial class</a>
          <button className="btn btn-accent" onClick={onIntro}>Intro month · ₪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" /> New to the studio? Start here.</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">A full month · no commitment</span>
            </div>
          </div>
          <div className="hero-art">
            <div className="badge">
              Intro month
              <small>₪290 · unlimited</small>
            </div>
            <image-slot id="hero-main" shape="rect" src="/assets/hero.jpg" placeholder="Photo from the studio · natural light · practitioner mid-pose" />
          </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="Wide shot · golden light from the studio windows" />
      </div>
      <div className="scrim" />
      <div className="inner">
        <span className="eyebrow">New to the studio? Start here.</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">A full month · no commitment</span>
        </div>
      </div>
    </section>
  );
}

function HeroVideo({ headline, lede, ctaIntro, ctaTrial, onIntro, onTrial }) {
  return (
    <section className="hero-full hero-video">
      <div className="bg">
        <video className="hero-video-el" autoPlay muted loop playsInline poster="/assets/hero-poster.jpg">
          <source src={URL_VIDEO_HERO} type="video/mp4" />
        </video>
        <img className="hero-poster-mobile" src="/assets/hero-poster.jpg" alt="" aria-hidden="true" />
      </div>
      <div className="scrim scrim-video" />
      <div className="inner">
        <span className="eyebrow">New to the studio? Start here.</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">A full month · no commitment</span>
        </div>
      </div>
    </section>
  );
}

function HeroMinimal({ headline, lede, ctaIntro, ctaTrial, onIntro, onTrial }) {
  return (
    <section className="hero-min">
      <div className="wrap">
        <span className="eyebrow">Yoga · Reformer Pilates · Jaffa</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)" }}>A full month · no commitment</p>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["Vinyasa", "Ashtanga", "Iyengar", "Hatha", "Yin", "Shadow Yoga", "Meditation", "Reformer Pilates", "Mat Pilates", "Advanced"];
  const doubled = [...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" /> New practitioners only</span>
          <h3>Intro month — <span className="price">₪290</span></h3>
          <div className="meta">Unlimited studio classes for a full month + 3 reformer Pilates sessions. Every style, every teacher, every hour.</div>
        </div>
        <button className="btn btn-warm btn-lg btn-arrow" onClick={onIntro}>I'm in</button>
      </div>
    </section>
  );
}

function Classes() {
  return (
    <section id="classes">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">What we teach</span>
            <h2 className="display">Two worlds,<br /><em>one home.</em></h2>
          </div>
          <p className="lede">One studio, two paths. Yoga to slow down, connect, listen. Reformer Pilates to strengthen and deepen. Choose the path that fits you — our recommendation: combine, and enjoy both worlds :)</p>
        </div>
        <div className="classes-grid">
          <article className="class-card">
            <div className="art">
              <span className="label">Yoga</span>
              <image-slot id="class-yoga" shape="rect" src="/assets/class-yoga.jpg" placeholder="Photo from the yoga hall · warm wooden floor · practice mid-pose" />
            </div>
            <div className="body">
              <h3>Yoga</h3>
              <p>Six styles, from slow and attentive to dynamic and sweaty. A different teacher for every class — a different pace, a different atmosphere, different emphases.</p>
              <div className="types">
                {YOGA_LIST.map((t) => <span key={t}>{t}</span>)}
              </div>
              <a href="#schedule" className="more">Class schedule</a>
            </div>
          </article>

          <article className="class-card">
            <div className="art">
              <span className="label">Reformer Pilates</span>
              <image-slot id="class-reformer" shape="rect" src="/assets/class-reformer.jpg" placeholder="Close-up of a reformer bed · springs, straps, wood" />
            </div>
            <div className="body">
              <h3>Reformer Pilates</h3>
              <p>Work on reformer beds + tower — deep strengthening of core and posture, without stressing the joints. Intimate classes in small groups, with professional, caring teachers.</p>
              <div className="types">
                {REFORMER_LIST.map((t) => <span key={t}>{t}</span>)}
              </div>
              <a href="#schedule" className="more">Class schedule</a>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ onIntro }) {
  return (
    <section className="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">How do I start?</span>
            <h2 className="display">From <em>curiosity</em><br />to the mat.</h2>
          </div>
          <p className="lede">No sales calls, no long questionnaires, no commitment. Choose, show up, and discover what works for you.</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}>I'm in for the intro month — ₪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 quick questions</span>
            <h3>Which class<br /><em>fits you?</em></h3>
            <p>There's no single right answer. We recommend trying a few styles and teachers — because the magic always happens in the specific meeting between a teacher and a student. The class name alone won't tell you that.</p>
            <div className="quiz-stepper">
              <span>Step {Math.min(step + 1, total + 1)} of {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 }}>Question {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">Pick →</span>
          </button>
        )}
      </div>
      <div className="quiz-nav">
        <button className="quiz-back" onClick={onBack} disabled={!canGoBack}>← Back</button>
        <span style={{ fontSize: 13, color: "var(--ink-soft)" }}>Choose an option to continue</span>
      </div>
    </>
  );
}

function ResultView({ recs, onReset, onTrial }) {
  return (
    <div className="quiz-result">
      <span className="eyebrow" style={{ marginBottom: 12, display: "block" }}>Our recommendation</span>
      <h4>These look like <em>good</em><br />starting points for you.</h4>
      <p className="lede">We picked 2–3 class types that match what you're looking for. Try them during your intro month, and see where the chemistry is best.</p>
      <ul className="quiz-rec-list">
        {recs.map((k) =>
          <li key={k}>
            <span className="name">{CLASS_CATALOG[k].en}</span>
            <span className="why">{CLASS_CATALOG[k].why}</span>
          </li>
        )}
      </ul>
      <p className="quiz-disclaimer">
        Remember — with us, the magic comes from the teachers. The same style can feel completely different with a different teacher. If something didn't click in the first class, try another teacher in the same style.
      </p>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
        <button className="btn btn-accent btn-lg btn-arrow" onClick={onTrial}>Book a trial class</button>
        <button className="btn btn-ghost" onClick={onReset}>Start over</button>
      </div>
    </div>
  );
}

function Schedule({ onIntro }) {
  return (
    <section id="schedule" style={{ background: "var(--ivory)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">The weekly schedule</span>
            <h2 className="display">A class for <em>every free hour</em><br />you have.</h2>
          </div>
          <p className="lede">From 8:00 in the morning to 9:00 at night, seven days a week. Book a trial class straight from the schedule below, or start a full intro month and practice without limits.</p>
        </div>

        <div className="sched-wa">
          <p><strong>English speakers — you're in good hands.</strong> Some of our teachers teach in English (David and Nika), and the others happily weave English into class whenever English speakers are in the room. The schedule and booking system are partly in Hebrew, though — so message us on WhatsApp and we'll help with anything: booking, styles, times, whatever you need.</p>
          <a className="btn btn-accent" href="https://wa.me/972505215558?text=Hi!%20Can%20I%20get%20some%20info%20in%20English%20about%20classes%20at%20Yoga%20Shala%3F" target="_blank" rel="noopener">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.297-.497.1-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
            </svg>
            WhatsApp us in English
          </a>
        </div>

        <div className="schedule-hint">↕ Scroll the schedule for more classes</div>
        <div className="iframe-wrap" style={{ height: "1100px", backgroundColor: "rgb(111, 122, 108)" }}>
          <iframe
            title="Class schedule — Yoga Shala"
            src={URL_TRIAL_IFRAME}
            loading="lazy"
            allow="payment"
            style={{ height: "1076px" }} />
        </div>

        <div className="sched-foot">
          <span>Single trial class ₪60 · Intro month ₪290 (includes 3 reformer sessions)</span>
          <button className="btn btn-ghost" onClick={onIntro}>I want to start an intro month</button>
        </div>
      </div>
    </section>
  );
}

function Gallery() {
  return (
    <section style={{ background: "var(--ivory)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">The space</span>
            <h2 className="display">A little home in Jaffa,<br />full of <em>light.</em></h2>
          </div>
          <p className="lede">An intimate studio: two halls, an inner courtyard, plants, books, and quiet. In small groups, there's plenty of room for everyone.</p>
        </div>
        <div className="gallery">
          <image-slot id="g1" className="g-1" shape="rect" src="/assets/gallery-1.jpg" placeholder="Yoga hall · spacious, natural light" />
          <image-slot id="g2" className="g-2" shape="rect" src="/assets/gallery-2.jpg" placeholder="Reformer room · beds neatly arranged" />
          <image-slot id="g3" className="g-3" shape="rect" src="/assets/gallery-3.jpg" placeholder="Reception corner · books, plants" />
          <image-slot id="g4" className="g-4" shape="rect" src="/assets/gallery-4.jpg" placeholder="Inner courtyard · green" />
          <image-slot id="g5" className="g-5" shape="rect" src="/assets/gallery-5.jpg" placeholder="Group practice · in morning light" />
          <image-slot id="g6" className="g-6" shape="rect" src="/assets/gallery-6.jpg" placeholder="Detail · hands in namaskar" />
        </div>
      </div>
    </section>
  );
}

function Teachers() {
  return (
    <section id="teachers" className="teachers">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">The team</span>
            <h2 className="display">The teachers — <em>the reason</em><br />you'll come back.</h2>
          </div>
          <p className="lede">Every teacher here brings herself — her pace, her voice, her way of holding the space. We choose them with care, and believe that the specific meeting between practitioner and teacher is the heart of the practice.</p>
        </div>

        <div className="teacher-featured">
          <div className="founder-single">
            <img src="/assets/teachers/founders.avif" alt="Shir and Alona" />
          </div>
          <div>
            <span className="eyebrow">A bit about us</span>
            <h3>Shir & <em>Alona.</em></h3>
            <p>We're Shir and Alona — practicing, breathing and living the path of yoga. Each of us in our own personal practice, through our relationship, and in how we meet the world around us.</p>
            <p>We opened Yoga Shala out of a deep intention to create a meeting place for people. To practice, to move together, for a community to weave itself, and for collaborations to grow.</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 style={{ marginTop: 40, textAlign: "center" }}>
          <a href="https://www.yogajaffa.com/teachers" target="_blank" rel="noopener" className="all-teachers-link">
            All teachers →
          </a>
        </div>
      </div>
    </section>
  );
}

function Pricing({ onIntro, onTrial }) {
  return (
    <section id="pricing" style={{ background: "var(--cream-deep)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Pricing</span>
            <h2 className="display">A practice that feels <em>good</em>,<br />from the very first time.</h2>
          </div>
          <p className="lede">Start small with a trial class, or go for a full intro month. If it clicks — choose a membership. If not — we're glad you practiced with us once; that's something too :)</p>
        </div>

        <div className="price-grid">
          <div className="price-card featured">
            <span className="badge-fav">Most popular · for new practitioners</span>
            <span className="tag">Intro month</span>
            <h3>30 days, unlimited</h3>
            <p className="sub">A full month to try everything — yoga, Pilates, teachers, styles.</p>
            <div className="price">₪290<span className="unit">one-time</span></div>
            <ul>
              <li>Unlimited studio classes — all yoga styles</li>
              <li>3 reformer Pilates sessions</li>
              <li>Access to all teachers and all hours</li>
              <li>One-time, new practitioners only</li>
            </ul>
            <button className="btn btn-warm btn-lg price-cta btn-arrow" onClick={onIntro}>I'm in for the intro month</button>
          </div>

          <div className="price-card">
            <span className="tag">Come once</span>
            <h3>Trial class</h3>
            <p className="sub">Start small — a single class to see how it feels.</p>
            <div className="price">₪60<span className="unit">single class</span></div>
            <ul>
              <li>Any yoga or reformer Pilates class</li>
              <li>No commitment, no registration</li>
              <li>Book straight from the schedule</li>
              <li>One-time, new practitioners only</li>
            </ul>
            <button className="btn btn-ghost price-cta btn-arrow" onClick={onTrial}>Book a trial class</button>
          </div>

          <div className="price-card">
            <span className="tag">Regular practice</span>
            <h3>Memberships & class packs</h3>
            <p className="sub">For those who already know this is their practice.</p>
            <div className="price">From ₪320<span className="unit">per month</span></div>
            <ul>
              <li>Monthly membership, renews automatically</li>
              <li>Discounts on workshops and studio events</li>
              <li>Freeze option by prior arrangement</li>
              <li>Join the studio's WhatsApp community</li>
            </ul>
            <a href="https://www.yogajaffa.com/plans" target="_blank" rel="noopener" className="btn btn-ghost price-cta">See all plans</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>· Real reviews from practitioners</span>
          </div>
          <span className="sep" />
          <div className="item"><span>A community of hundreds of practitioners</span></div>
          <span className="sep" />
          <div className="item"><span>Intimate studio · small groups</span></div>
        </div>

        <div className="section-head" style={{ marginBottom: 40 }}>
          <div>
            <span className="eyebrow">What practitioners say</span>
            <h2 className="display"><em>Real</em> words<br />practitioners wrote to us.</h2>
          </div>
          <p className="lede">We didn't run any campaigns and never asked for reviews. These are real messages that reached us — and we chose to share them because they describe what we're trying to build.</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">Before you sign up</span>
            <h2 className="display" style={{ fontSize: "clamp(36px,5vw,56px)", margin: "8px 0 24px" }}>
              Beginner questions<br />(and ones advanced students are <em>embarrassed</em> to ask).
            </h2>
            <p className="lede">
              Didn't find an answer? Message us on{" "}
              <a href="https://wa.me/972505215558" target="_blank" rel="noopener"
                 style={{ color: "var(--accent-deep)", textDecoration: "underline", textDecorationThickness: 1, textUnderlineOffset: 4 }}>
                WhatsApp
              </a>
              {" "}or just call — we're here.
            </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="Open/close">+</button>
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function LeadForm() {
  const [form, setForm] = useState({ name: "", phone: "", email: "", message: "" });
  const [status, setStatus] = useState("idle"); // idle | sending | done | error

  function set(field, val) { setForm(f => ({ ...f, [field]: val })); }

  async function submit(e) {
    e.preventDefault();
    if (!form.name.trim() || !form.phone.trim()) return;
    setStatus("sending");
    try {
      const resp = await fetch("/api/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      setStatus(resp.ok ? "done" : "error");
    } catch {
      setStatus("error");
    }
  }

  return (
    <section className="lead-section">
      <div className="wrap">
        <div className="lead-inner">
          <div className="lead-text">
            <span className="eyebrow">Want to know more?</span>
            <h2>We'd love to talk :)</h2>
            <p className="lede" style={{ maxWidth: "34ch" }}>
              Leave your details and Shir or Alona will get back to you —<br />
              no sales, just a conversation.
            </p>
          </div>

          {status === "done" ? (
            <div className="lead-success">
              <div className="lead-check">✓</div>
              <p>Thank you! We'll get back to you soon :)</p>
            </div>
          ) : (
            <form className="lead-form" onSubmit={submit} noValidate>
              <div className="lead-row">
                <div className="lead-field">
                  <label>Full name *</label>
                  <input
                    type="text" value={form.name}
                    onChange={e => set("name", e.target.value)} required
                  />
                </div>
                <div className="lead-field">
                  <label>Phone *</label>
                  <input
                    type="tel" value={form.phone} placeholder="050-000-0000"
                    onChange={e => set("phone", e.target.value)} required
                  />
                </div>
              </div>
              <div className="lead-field">
                <label>Email</label>
                <input
                  type="email" value={form.email}
                  onChange={e => set("email", e.target.value)}
                />
              </div>
              <div className="lead-field">
                <label>Anything you'd like to tell us</label>
                <textarea
                  value={form.message} placeholder="Optional — if you have a specific question, write it here :)"
                  rows={3} onChange={e => set("message", e.target.value)}
                />
              </div>
              {status === "error" && (
                <p className="lead-error">Something went wrong — try again, or message us on WhatsApp</p>
              )}
              <button
                className="btn btn-warm btn-lg"
                type="submit"
                disabled={status === "sending" || !form.name.trim() || !form.phone.trim()}
              >
                {status === "sending" ? "Sending..." : "Send"}
              </button>
            </form>
          )}
        </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">Ready to start?</span>
            <h2>A full month,<br /><em>₪290.</em></h2>
            <p className="lede">Practice with every teacher, try every style, find what works for you. New practitioners only.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn-warm btn-lg btn-arrow" onClick={onIntro}>I'm in for the intro month</button>
              <button className="btn btn-ghost btn-lg" onClick={onTrial}
                      style={{ color: "var(--ivory)", borderColor: "rgba(250,248,240,0.6)" }}>
                Trial class · ₪60
              </button>
            </div>
            <p className="cta-meta">No commitment · does not auto-renew</p>
          </div>
          <div className="info">
            <div>
              <div className="label">Come visit</div>
              <p><strong>37 Yehuda HaYamit St., Jaffa</strong><br />An intimate studio in the heart of Jaffa</p>
            </div>
            <div>
              <div className="label">Opening hours</div>
              <p><strong>Sun–Thu</strong> · 08:00–22:00<br /><strong>Fri</strong> · 08:00–16:00<br /><strong>Sat</strong> · 08:00–20:00</p>
            </div>
            <div>
              <div className="label">Contact us</div>
              <p>
                <a href="https://wa.me/972505215558" target="_blank" rel="noopener" style={{color:"inherit"}}>WhatsApp · 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>
                Call us
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ studio }) {
  return (
    <footer className="foot">
      <div className="wrap row">
        <div>© {new Date().getFullYear()} {studio} · A home for yoga & reformer Pilates · Jaffa</div>
        <div className="foot-links">
          <a href="https://www.instagram.com/yogashalajaffa" target="_blank" rel="noopener">Instagram</a>
          <a href="https://www.yogajaffa.com" target="_blank" rel="noopener">Full website</a>
          <a href="#faq">FAQ</a>
          <a href="https://www.yogajaffa.com/terms" target="_blank" rel="noopener">Terms</a>
          <a href="/" lang="he" dir="rtl">עברית</a>
        </div>
      </div>
      <div className="wrap foot-note">
        Discover more things to do in <a href="https://www.kayak.com/Tel-Aviv.54749.guide" target="_blank" rel="noopener">Tel Aviv</a>.
      </div>
    </footer>
  );
}

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

const PALETTES = [
  { name: "Sage (from the logo)",
    cream: "#ebe9df", deep: "#dadbcb", ivory: "#faf8f0",
    ink: "#2a2c25", inkSoft: "#555a4f", mute: "#8c9285",
    accent: "#8b9587", accentDeep: "#6f7a6c", warm: "#b88663" },
  { name: "Sand & stone",
    cream: "#efe8db", deep: "#e1d6c1", ivory: "#faf5ea",
    ink: "#2c2620", inkSoft: "#5a5044", mute: "#8e8576",
    accent: "#9c8260", accentDeep: "#7a5d3c", warm: "#a36b4e" },
  { name: "Evening",
    cream: "#1f231e", deep: "#272c25", ivory: "#2c3128",
    ink: "#f4efe6", inkSoft: "#c2bdb1", mute: "#928d82",
    accent: "#a8b598", accentDeep: "#c7d2b9", warm: "#d28d65" }
];

const FONT_PAIRS = [
  { name: "Heebo thin (Wix)",
    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 thin",
    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 (serif)",
    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": "Yoga Shala",
  "headline": "A practice that <em style=\"font-weight:400\">brings you</em><br/>home.",
  "lede": "An intimate yoga & reformer Pilates studio in Jaffa. An experienced, caring team of teachers, classes that take you to new heights — in body and heart. A stunning Jaffa space. Community. Home.",
  "ctaIntro": "Start with an intro month · ₪290",
  "ctaTrial": "Trial class · ₪60",
  "hero": "video",
  "palette": 0,
  "fontPair": 0,
  "showOfferStrip": true,
  "showQuiz": true,
  "showSchedule": true,
  "showGallery": true,
  "showTeachers": true,
  "showTestimonials": true,
  "showFaq": true
}/*EDITMODE-END*/;

function TransitionOverlay() {
  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 9999,
      background: "var(--cream)",
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      gap: "40px",
      animation: "fadeInOverlay 0.4s ease"
    }}>
      <div style={{ position: "relative", width: 120, height: 120, display: "flex", alignItems: "center", justifyContent: "center" }}>
        {/* Expanding breath rings */}
        <div style={{
          position: "absolute", borderRadius: "50%",
          border: "1.5px solid var(--ink)", opacity: 0.18,
          animation: "omRing1 3.5s ease-in-out infinite",
          width: 120, height: 120
        }} />
        <div style={{
          position: "absolute", borderRadius: "50%",
          border: "1.5px solid var(--ink)", opacity: 0.12,
          animation: "omRing2 3.5s ease-in-out 0.7s infinite",
          width: 120, height: 120
        }} />
        {/* Om symbol */}
        <span style={{
          fontFamily: "serif",
          fontSize: 72,
          color: "var(--ink)",
          lineHeight: 1,
          animation: "yogaBreathe 3.5s ease-in-out infinite",
          userSelect: "none"
        }}>ॐ</span>
      </div>
      <p style={{
        fontFamily: "var(--font-display)", fontSize: "clamp(17px,3vw,22px)",
        color: "var(--ink-soft)", textAlign: "center", lineHeight: 1.7, margin: 0
      }}>
        Taking you to checkout<br/>for your intro month
      </p>
    </div>
  );
}

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]);

  const [transitioning, setTransitioning] = React.useState(false);
  const [cookieOk, setCookieOk] = React.useState(() => !!localStorage.getItem("cookie_ok"));

  useEffect(() => {
    const reset = (e) => { if (e.persisted) setTransitioning(false); };
    window.addEventListener("pageshow", reset);
    return () => window.removeEventListener("pageshow", reset);
  }, []);

  function onIntro() {
    if (window.gtag) gtag('event', 'begin_checkout', { currency: 'ILS', value: 290 });
    if (window.fbq)  fbq('track', 'InitiateCheckout', { currency: 'ILS', value: 290 });
    setTransitioning(true);
    setTimeout(() => { window.location.href = URL_INTRO_MONTH; }, 2200);
  }
  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 (
    <>
      {transitioning && <TransitionOverlay />}
      {!cookieOk && (
        <div className="cookie-bar">
          <p>We use cookies to analyze traffic and improve your browsing experience. <a href="https://www.yogajaffa.com/terms" target="_blank" rel="noopener">Privacy policy</a></p>
          <button onClick={() => { localStorage.setItem("cookie_ok","1"); setCookieOk(true); }}>Got it</button>
        </div>
      )}
      <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 />
      {t.showTestimonials && <Testimonials />}
      {t.showGallery      && <Gallery />}
      {t.showTeachers     && <Teachers />}
      <HowItWorks onIntro={onIntro} />
      {t.showQuiz         && <Quiz onTrial={onTrial} />}
      {t.showSchedule     && <Schedule onIntro={onIntro} />}
      <Pricing onIntro={onIntro} onTrial={onTrial} />
      {t.showFaq          && <Faq />}
      <LeadForm />
      <FinalCta studio={t.studio} onIntro={onIntro} onTrial={onTrial} />
      <Footer studio={t.studio} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Text & CTAs" />
        <TweakText label="Studio name"   value={t.studio}   onChange={(v) => setTweak('studio', v)} />
        <TweakText label="Primary CTA"   value={t.ctaIntro} onChange={(v) => setTweak('ctaIntro', v)} />
        <TweakText label="Secondary CTA" value={t.ctaTrial} onChange={(v) => setTweak('ctaTrial', v)} />

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

        <TweakSection label="Palette & typography" />
        <TweakSelect label="Color palette" value={t.palette}  options={PALETTES.map((p, i)    => ({ value: i, label: p.name }))} onChange={(v) => setTweak('palette',  Number(v))} />
        <TweakSelect label="Font pair"     value={t.fontPair} options={FONT_PAIRS.map((p, i) => ({ value: i, label: p.name }))} onChange={(v) => setTweak('fontPair', Number(v))} />

        <TweakSection label="Page sections" />
        <TweakToggle label="Offer strip (intro month)"      value={t.showOfferStrip}   onChange={(v) => setTweak('showOfferStrip',   v)} />
        <TweakToggle label="'Which class fits me?' quiz"    value={t.showQuiz}          onChange={(v) => setTweak('showQuiz',         v)} />
        <TweakToggle label="Class schedule"                 value={t.showSchedule}      onChange={(v) => setTweak('showSchedule',     v)} />
        <TweakToggle label="Gallery"                        value={t.showGallery}       onChange={(v) => setTweak('showGallery',      v)} />
        <TweakToggle label="Teachers"                       value={t.showTeachers}      onChange={(v) => setTweak('showTeachers',     v)} />
        <TweakToggle label="Testimonials"                   value={t.showTestimonials}  onChange={(v) => setTweak('showTestimonials', v)} />
        <TweakToggle label="FAQ"                            value={t.showFaq}           onChange={(v) => setTweak('showFaq',         v)} />
      </TweaksPanel>
    </>
  );
}

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