// sections.jsx — Landing page sections for Irit's Acutonics course

// ─────────────────────────────────────────────────────────
// WhatsApp helper — every CTA opens WhatsApp with pre-filled msg
// Uses window.open (inside iframes, plain <a target="_blank"> is often blocked
// by sandbox flags — onClick + window.open("_blank") bypasses that).
// ─────────────────────────────────────────────────────────
const WHATSAPP_PHONE = '972547521657'; // +972 54-752-1657

function waLink(message) {
  const encoded = encodeURIComponent(message);
  return `https://wa.me/${WHATSAPP_PHONE}?text=${encoded}`;
}

function openWhatsApp(message) {
  return (e) => {
    if (e) e.preventDefault();
    const url = waLink(message);
    window.open(url, '_blank', 'noopener,noreferrer');
  };
}

const CTA_MESSAGES = {
  secure: 'היי 🙏 אני מעוניין/ת להבטיח את מקומי בקורס אקיוטוניקס של אירית לרנר (19–21 במאי 2026). אשמח לקבל פרטים להרשמה.',
  more: 'היי 🙏 ראיתי את עמוד הקורס של אירית לרנר ואשמח לקבל פרטים נוספים לפני הרשמה.',
  kit: 'היי 🙏 אשמח לקבל פרטים על ערכת קולני אקיוטוניקס — מחיר, כלול בערכה, זמני אספקה.',
  register: 'היי 🙏 אני מעוניין/ת להירשם לקורס אקיוטוניקס של אירית לרנר. השם שלי: '
};

function useReveal() {
  React.useEffect(() => {}, []);
}

function Nav() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const close = () => setMenuOpen(false);
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a className="brand" href="#top" onClick={close}>
          <span className="brand-text">אירית לרנר<em>ACUTONICS®</em></span>
        </a>
        <ul className={`nav-links${menuOpen ? ' mobile-open' : ''}`}>
          <li><a href="#course" onClick={close}>הקורס</a></li>
          <li><a href="#instructor" onClick={close}>אודות</a></li>
          <li><a href="#logistics" onClick={close}>מיקום ותאריכים</a></li>
          <li><a href="#pricing" onClick={close}>השקעה</a></li>
          <li><a href="#contact" onClick={close}>יצירת קשר</a></li>
        </ul>
        <a className="btn btn-ghost" href="#pricing">הרשמה</a>
        <button
          className={`nav-hamburger${menuOpen ? ' is-open' : ''}`}
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label={menuOpen ? 'סגור תפריט' : 'פתח תפריט'}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>);
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true">
        <Icon.OrbitOrnament className="orbit-1" style={{ color: 'var(--gold)' }} />
        <Icon.OrbitOrnament className="orbit-2" style={{ color: 'var(--ink)' }} />
      </div>

      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="eyebrow reveal">הקורס של אירית · שיטת אקיוטוניקס®</span>
          <h1 className="display reveal delay-1">
            הזמנה למסע ייחודי<br />
            המשלב סודות<br />
            <span className="accent">גיאומטריה, תדרים</span><br />
            ורפואה סינית.
          </h1>
          <p className="lede reveal delay-2">
            המציאות המשתנה דורשת מאיתנו כלים מהירים, חדשים ועמוקים ליציבות הגוף והנפש.
            קורס בוטיק למטפלים ולתלמידים מתקדמים — שילוב של קולני אקיוטוניקס, תדרי פלנטות
            וגישה רגשית למרידיאנים המיוחדים.
          </p>

          <div className="hero-cta reveal delay-3">
            <a className="btn btn-primary" href="#pricing">
              הבטיחו את מקומכם עכשיו
              <Icon.ArrowLeft />
            </a>
            <a className="btn btn-ghost" href={waLink(CTA_MESSAGES.more)} onClick={openWhatsApp(CTA_MESSAGES.more)} target="_blank" rel="noopener">ספרו לי עוד</a>
          </div>

          <div className="hero-meta reveal delay-4">
            <div className="hero-meta-item">
              <span>התאריכים</span>
              <strong>19–21 במאי 2026</strong>
            </div>
            <div className="hero-meta-item">
              <span>המיקום</span>
              <strong>תל אביב</strong>
            </div>
            <div className="hero-meta-item">
              <span>קבוצה</span>
              <strong>7–15 משתתפים</strong>
            </div>
          </div>
        </div>

        <div className="hero-visual reveal delay-2" aria-hidden="true">
          <img
            src="https://acutonics.com/uploads/images/sliderImages/IMG_0823.jpeg"
            alt=""
            className="hero-photo"
            onError={(e) => {e.target.style.display = 'none';}} />
          
          <div className="hero-visual-inner">
            <Icon.Composition className="composition" />
          </div>
          <div className="hero-visual-label">
            <span>Acutonics® · 2026</span>
            <span>Frequencies of healing</span>
          </div>
        </div>
      </div>
    </section>);

}

function ValueProps() {
  const items = [
  {
    num: '01',
    icon: <Icon.Hands />,
    title: 'כלי פרקטי לטיפול הגוף והנפש',
    body: 'שיטה יישומית מבוססת-גוף, שתוכלו לשלב בפרקטיקה שלכם כבר מיום הסיום — לא רק עוד תיאוריה.',
    cls: 'large'
  },
  {
    num: '02',
    icon: <Icon.Orbit />,
    title: 'הקשר המדעי והאנרגטי',
    body: 'תדרי פלנטות, מרווחים מוזיקליים ורפואה סינית — שפה אחת.',
    cls: 'span-3'
  },
  {
    num: '03',
    icon: <Icon.Heart />,
    title: 'שיטת NSEV',
    body: 'גישה יוצאת דופן למרידיאנים המיוחדים בהיבט הרגשי.',
    cls: 'span-3'
  },
  {
    num: '04',
    icon: <Icon.Spiral />,
    title: "פרוטוקול פיבונאצ'י",
    body: 'כל המידע מרוכז בפרוטוקול טיפולי אחד, ברור וחוזר.',
    cls: 'span-3'
  },
  {
    num: '05',
    icon: <Icon.Waves />,
    title: 'עבודה עם 4 קולנים נבחרים',
    body: 'התמחות בכלים המדויקים ביותר לשינוי תודעתי ופיזי מהיר.',
    cls: 'span-3'
  }];


  return (
    <section className="section" id="course">
      <div className="wrap">
        <div className="section-head">
          <div className="title-block reveal">
            <span className="eyebrow">תכנית הקורס</span>
            <h2 className="display" style={{ width: "300px" }}>מה מחכה לך בקורס?</h2>
          </div>
          <p className="lede reveal delay-1">
            חמישה נדבכים שמחברים בין המדע של התדרים לבין עומק הרפואה הסינית —
            כל אחד עומד בפני עצמו, וכולם יחד יוצרים שיטה שלמה ומעשית.
          </p>
        </div>

        <div className="value-grid">
          {items.map((it, i) =>
          <article key={i} className={`value-card ${it.cls} reveal delay-${i % 4 + 1}`}>
              <div className="num">{it.num}</div>
              <div className="icon">{it.icon}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function AccordionCredentials() {
  const items = [
  {
    num: '01',
    title: 'Senior Faculty Member — Acutonics® Since 2003',
    body:
    <div className="acc-body-content">
          <img src="assets/logo-acutonics.png" alt="Acutonics Institute" className="acc-logo" />
          <p>אירית הוסמכה כחברת סגל בכירה של מכון אקיוטוניקס לרפואה אינטגרטיבית (Acutonics® Institute of Integrative Medicine, ניו מקסיקו, ארה״ב) — התואר הגבוה ביותר שמעניק המכון. חברות הסגל הבכיר מוסמכות ללמד את כל רמות הקורסים הרשמיים של השיטה, לפתח תוכניות לימוד מקוריות ולייצג את אקיוטוניקס בעולם.</p>
        </div>

  },
  {
    num: '02',
    title: 'הנציגה והמורה היחידה בישראל',
    body: 'אירית היא האדם היחיד המוסמך ללמד את שיטת אקיוטוניקס® בישראל. כל קורס שהיא מעבירה הוא קורס רשמי המוכר על ידי המכון הבינלאומי, ובסיומו ניתנת תעודה מוכרת. הלימוד אצל אירית מהווה את הדרך הרשמית היחידה להסמכה בשיטה בארץ.'
  },
  {
    num: '03',
    title: 'מבכירות המורים בעולם בתחום התדרים',
    body: 'לאירית ניסיון של למעלה מ-20 שנה בהוראת שיטות ריפוי בקול ובתדרים. היא הרצתה בכנסים רבים, ייסדה פרוטוקולים טיפוליים ייחודיים (NSEV ופיבונאצ\'י), ופיתחה שיטת עבודה המשלבת אסטרולוגיה רפואית, גיאומטריה קדושה, מוסיקה ורפואה סינית קלאסית — גישה שאין לה מקבילה בשום מקום אחר בעולם.'
  }];


  const [open, setOpen] = React.useState(0);

  return (
    <ul className="credentials-accordion reveal delay-3">
      {items.map((it, i) =>
      <li key={i} className={`acc-item ${open === i ? 'is-open' : ''}`}>
          <button
          className="acc-trigger"
          onClick={() => setOpen(open === i ? -1 : i)}
          aria-expanded={open === i}>
          
            <span className="acc-num">{it.num}</span>
            <span className="acc-title">{it.title}</span>
            <span className="acc-chev" aria-hidden="true"><Icon.ChevronDown /></span>
          </button>
          <div className="acc-body" aria-hidden={open !== i}>
            <div className="acc-body-inner">{it.body}</div>
          </div>
        </li>
      )}
    </ul>);

}

function Instructor() {
  return (
    <section className="instructor-section" id="instructor">
      <div className="wrap instructor-grid">
        <div className="instructor-photo reveal">
          <img
            src="https://acutonics.com/uploads/images/April_3-Irit_AL6_2558.jpg"
            alt="אירית לרנר מעבירה טיפול"
            className="real-photo"
            onError={(e) => {e.target.style.display = 'none';}} />
          
        </div>

        <div className="instructor-copy">
          <span className="eyebrow reveal">בהנחיית</span>
          <h2 className="display reveal delay-1">אירית לרנר.</h2>
          <p className="lede reveal delay-2">
            מבכירות המורים בעולם בתחום התדרים, ארבעה עשורים בגבול שבין גוף נפש, קוסמולוגיה, רפואה סינית, אסטרולוגיה, מוסיקה ומחול. אירית נושאת את שיטת אקיוטוניקס לארץ
            ומלמדת אותה בקפידה, באהבה ובעומק.
          </p>

          <AccordionCredentials />
        </div>
      </div>
    </section>);

}

function Logistics() {
  const items = [
  {
    icon: <Icon.Calendar />,
    label: 'תאריכים',
    value: '19–20–21 במאי, 2026',
    sub: 'ימי שלישי, רביעי וחמישי'
  },
  {
    icon: <Icon.Clock />,
    label: 'שעות',
    value: '10:00 – 15:00',
    sub: 'שלושה ימי לימוד מלאים'
  },
  {
    icon: <Icon.Pin />,
    label: 'מיקום',
    value: 'תל אביב',
    sub: "רח' תוצרת הארץ 1 · דקות מתחנת השלום · חנייה בתשלום בחניון ברוריה"
  },
  {
    icon: <Icon.Users />,
    label: 'מסגרת',
    value: 'קבוצת בוטיק אינטימית',
    sub: '7 עד 15 משתתפים בלבד'
  }];

  return (
    <section className="section logistics" id="logistics">
      <div className="wrap">
        <div className="section-head">
          <div className="title-block reveal">
            <span className="eyebrow">הפרטים הטכניים</span>
            <h2 className="display">מתי. איפה.</h2>
          </div>
          <p className="lede reveal delay-1">
            הקורס מתקיים במתכונת מרוכזת של שלושה ימים, במרכז תל אביב, בקבוצה קטנה
            שמאפשרת תשומת לב אישית לכל משתתף.
          </p>
        </div>

        <div className="logistics-grid">
          {items.map((it, i) =>
          <div key={i} className={`logistics-item reveal delay-${i + 1}`}>
              <div className="icon">{it.icon}</div>
              <div className="label">{it.label}</div>
              <div className="value">{it.value}</div>
              <div className="sub">{it.sub}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// New section — expand on the Acutonics kit (still standalone in course flow)
function KitDetails() {
  return null;
}

function CertifiedStripe() {
  return (
    <div className="certified-stripe">
      <div className="wrap certified-inner">
        <img src="assets/logo-acutonics.png" alt="Acutonics" className="certified-logo" />
        <div className="certified-text">
          <span className="certified-label">Certified by</span>
          <span className="certified-name">Acutonics® Institute of Integrative Medicine</span>
        </div>
        <div className="certified-divider" aria-hidden="true"></div>
        <span className="certified-sub">New Mexico, USA · Since 1994</span>
      </div>
    </div>);

}

function Pricing() {
  const [kitOpen, setKitOpen] = React.useState(false);

  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div className="title-block reveal">
            <span className="eyebrow">השקעה בעתיד המקצועי שלך</span>
            <h2 className="display">שקיפות מלאה.</h2>
          </div>
          <p className="lede reveal delay-1">
            העלות מחולקת לשני רכיבים ברורים: הקורס עצמו, וערכת הקולנים המקצועית
            שתלווה אתכם הלאה בעבודה היומיומית.
          </p>
        </div>

        <div className="pricing-grid" id="kit">
          <div className="price-box featured reveal">
            <span className="tag">הקורס</span>
            <h3>שלושה ימי הכשרה בבוטיק</h3>
            <div className="amount">
              <span>3,500</span>
              <span className="currency">₪</span>
            </div>
            <div className="terms">
              500 ₪ דמי הרשמה · היתרה משולמת בשני תשלומים שווים.
            </div>
            <a
              className="btn btn-gold"
              href={waLink(CTA_MESSAGES.secure)}
              onClick={openWhatsApp(CTA_MESSAGES.secure)}
              target="_blank"
              rel="noopener">
              
              להבטחת מקום
              <Icon.ArrowLeft />
            </a>
          </div>

          <div className="price-box reveal delay-1">
            <span className="tag">ציוד</span>
            <h3>ערכת קולני אקיוטוניקס®</h3>
            <div className="amount">
              <span>1,910</span>
              <span className="currency">₪</span>
            </div>
            <div className="terms">
              ערכה מקצועית של קולנים מכוילים — שלכם, להמשך העבודה הקלינית.
            </div>
            <button
              type="button"
              className={`btn btn-ghost kit-toggle ${kitOpen ? 'is-open' : ''}`}
              onClick={() => setKitOpen(!kitOpen)}
              aria-expanded={kitOpen}
              aria-controls="kit-drawer">
              
              {kitOpen ? 'סגור פרטים' : 'פרטים על הערכה'}
              <span className="kit-toggle-chev" aria-hidden="true">
                <Icon.ChevronDown />
              </span>
            </button>
          </div>
        </div>

        {/* Kit drawer — collapsible */}
        <div
          id="kit-drawer"
          className={`kit-drawer ${kitOpen ? 'open' : ''}`}
          aria-hidden={!kitOpen}>
          
          <div className="kit-drawer-inner">
            <div className="kit-drawer-grid">
              <div className="kit-photo">
                <img
                  src="https://acutonics.com/uploads/images/products/IMG_2489.jpeg"
                  alt="קולני Acutonics"
                  onError={(e) => {e.target.style.display = 'none';}} />
                
              </div>

              <div className="kit-content">
                <span className="eyebrow">ערכת קולני Acutonics®</span>
                <h3 className="display">הכלים שילוו אתכם הלאה.</h3>
                <p className="lede" style={{ marginBlockEnd: 28 }}>
                  קולנים מקצועיים מכוילים במדויק לתדרי הפלנטות ולמרווחים המוזיקליים
                  המרכזיים ברפואה הסינית. הערכה נמסרת אישית ומלווה בליווי מקצועי.
                </p>

                <div className="kit-feature">
                  <div className="kit-feature-icon"><Icon.Waves /></div>
                  <div>
                    <h4>דיוק מוחלט בתדר</h4>
                    <p>
                      כל זוג יוצר מרווח מוסיקלי מדויק בדיוק כמו אלה הקיימים בגוף הפיזי, הרגשי והמנטלי.
                    </p>
                  </div>
                </div>

                <div className="kit-feature">
                  <div className="kit-feature-icon"><Icon.Orbit /></div>
                  <div>
                    <h4>מכוילים לפלנטות ולמרידיאנים</h4>
                    <p>
                      הקולנים מכוילים לפי התדרים של פלנטות
                      ואסטרואידים במערכת השמש. בטיפול הם מונחים על נקודות אקופונקטורה
                      מסוימות כדי לגשת למרידיאנים ולמערכות הצ'אקרות.
                    </p>
                  </div>
                </div>

                <div className="kit-feature">
                  <div className="kit-feature-icon"><Icon.Spiral /></div>
                  <div>
                    <h4>עמידות לכל החיים</h4>
                    <p>
                      קולני Acutonics מיוצרים בארה״ב מסגסוגת אלומיניום איכותית
                      בדרגת-חלל, עמידה בקורוזיה וללא מגנטיות, עם ציפוי אלקטרוסטטי.
                      תפקוד מושלם לאורך שנים.
                    </p>
                  </div>
                </div>

                <a
                  className="btn btn-primary"
                  href={waLink(CTA_MESSAGES.kit)}
                  onClick={openWhatsApp(CTA_MESSAGES.kit)}
                  target="_blank"
                  rel="noopener"
                  style={{ marginBlockStart: 12 }}>
                  
                  לשאלות והזמנה ב-WhatsApp
                  <Icon.ArrowLeft />
                </a>
              </div>
            </div>
          </div>
        </div>

        <ul className="checklist reveal delay-2">
          <li>
            <span className="check"><Icon.Check /></span>
            תוענק תעודה אישית בסיום הקורס.
          </li>
          <li>
            <span className="check"><Icon.Check /></span>
            חומרי לימוד מקיפים יישלחו במייל.
          </li>
          <li>
            <span className="check"><Icon.Check /></span>
            ליווי וייעוץ מהצוות לאורך הקורס.
          </li>
          <li>
            <span className="check"><Icon.Check /></span>
            גישה לקהילת מטפלי אקיוטוניקס בארץ.
          </li>
        </ul>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer" id="contact">
      <div className="wrap">
        <div className="footer-top">
          <div className="reveal">
            <span className="eyebrow">יצירת קשר</span>
            <h2 className="display">לפרטים, ייעוץ והרשמה.</h2>
            <p className="lede" style={{ marginBlockEnd: 24 }}>
              שמחים לענות על שאלות, לתאם שיחת היכרות קצרה, ולעזור לך להחליט
              אם הקורס נכון עבורך.
            </p>
            <a className="btn btn-primary" href={waLink(CTA_MESSAGES.register)} onClick={openWhatsApp(CTA_MESSAGES.register)} target="_blank" rel="noopener">
              רישום לקורס ב-WhatsApp
              <Icon.ArrowLeft />
            </a>
          </div>

          <div className="contact-grid reveal delay-1">
            <a className="contact-card" href={waLink(CTA_MESSAGES.register)} onClick={openWhatsApp(CTA_MESSAGES.register)} target="_blank" rel="noopener">
              <span className="icon"><Icon.Phone /></span>
              <span>
                <div className="label">WhatsApp · טלפון</div>
                <div className="value">054-752-1657</div>
              </span>
            </a>
            <a className="contact-card" href="mailto:iritlerner7@gmail.com">
              <span className="icon"><Icon.Mail /></span>
              <span>
                <div className="label">דוא״ל</div>
                <div className="value">iritlerner7@gmail.com</div>
              </span>
            </a>

            <a className="contact-card" href="https://www.instagram.com/acutonics_sound_healing/reels/" target="_blank" rel="noopener">
              <span className="icon"><Icon.Instagram /></span>
              <span>
                <div className="label">אינסטגרם</div>
                <div className="value">@acutonics_sound_healing</div>
              </span>
            </a>
            <a className="contact-card" href="https://www.facebook.com/kolanimiritlerner" target="_blank" rel="noopener">
              <span className="icon"><Icon.Facebook /></span>
              <span>
                <div className="label">פייסבוק</div>
                <div className="value">kolanimiritlerner</div>
              </span>
            </a>

          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 אירית לרנר · כל הזכויות שמורות.</div>
          <div>Acutonics® is a registered trademark.</div>
        </div>
      </div>
    </footer>);

}

// Kept for compat — modal no longer used (CTAs go to WhatsApp).
function RegistrationModal() {return null;}

Object.assign(window, { Nav, Hero, ValueProps, Instructor, Logistics, KitDetails, Pricing, Footer, RegistrationModal, useReveal });