const LANDING_FUNNEL = {
  productName: 'בניית הגוף מבפנים ומבחוץ',
  subtitle: 'המדריך הדיגיטלי שמראה לך מה באמת משפיע על ירידה במשקל, נפיחות, הורמונים, רעב, אנרגיה והמיקרוביום - ואיך להתחיל לעבוד עם הגוף שלך בצורה חכמה ולא דרך ניחושים',
  priceLabel: '149 ש"ח במקום 380 ש"ח',
  saleLabel: 'לזמן מוגבל',
  checkoutUrl: '',
  sellerEmail: '',
  leadWebhookUrl: '',
  guideUrl: '',
};

const LANDING_PAIN_POINTS = [
  'את יכולה לאכול "בריא" ועדיין להרגיש נפוחה, תקועה, רעבה או בלי אנרגיה - כי הבעיה לא תמיד נמצאת רק בקלוריות.',
  'יכול להיות שאת מפספסת את הקשר בין מיקרוביום, הורמונים, סטרס, שינה, יציאות, רעב וירידה במשקל.',
  'אם כל פעם את מתחילה מחדש כי משהו בגוף לא מסתדר, כנראה חסרה לך מפה שמסבירה מה לבדוק קודם.',
  'את לא צריכה עוד רשימת אסור ומותר. את צריכה להבין מה הגוף שלך מנסה להגיד לך ואיך לתרגם את זה לפעולות.',
];

const LANDING_INCLUDES = [
  { icon: 'nutrition', title: 'למה את לא יורדת למרות שאת "שומרת"', desc: 'מה באמת חשוב בקלוריות, חלבון, שומן, פחמימות, רעב, שובע ובניית צלחת - בלי להיתקע על חוקים קשיחים שלא מחזיקים.' },
  { icon: 'microbiome', title: 'המיקרוביום: השכבה שרוב הנשים מפספסות', desc: 'איך חיידקי המעי קשורים לנפיחות, חשקים, מצב רוח, יציאות, דלקתיות, הורמונים ותחושת תקיעות בתהליך.' },
  { icon: 'leaf', title: '7 סוגי נפיחות ומה כל אחד מנסה לסמן לך', desc: 'גזים, עצירות, הורמונים, סטרס, היסטמין, SIBO ורגישויות - כולל איך להתחיל לזהות מה כנראה מפעיל אותך.' },
  { icon: 'moon', title: 'הורמונים, קורטיזול ושינה', desc: 'למה הגוף יכול להחזיק מים, להגביר רעב, להאט התאוששות ולהרגיש "תקוע" כשסטרס ושינה לא מאוזנים.' },
  { icon: 'calendar', title: 'תוכנית יישום של 4 שבועות', desc: 'מה לעשות קודם, איך לעקוב, איך לבנות ארוחות, ואיך להפוך את כל ההבנה הזאת לשגרה שאת באמת יכולה להחזיק.' },
];

const LANDING_RESULTS = [
  'תביני מה באמת משפיע על ירידה במשקל מעבר ל"תאכלי פחות"',
  'תלמדי איך המיקרוביום יכול להשפיע על נפיחות, רעב, הורמונים ואנרגיה',
  'תדעי לזהות סוגי נפיחות וטריגרים במקום להאשים כל מאכל',
  'תבני צלחת ושבוע אכילה בצורה חכמה, משביעה ולא קיצונית',
  'תקבלי טבלאות, תבניות, מחשבון וכלים שתוכלי לפתוח שוב ושוב',
  'תקבלי שיטה שמחברת בין אוכל, מעיים, שינה, סטרס והורמונים לתמונה אחת',
];

const LANDING_VALUE_STACK = [
  { icon: 'compass', title: 'מפה של הגוף', desc: 'תביני מה קשור למה: אוכל, יציאות, נפיחות, מיקרוביום, הורמונים, שינה, סטרס וירידה במשקל.' },
  { icon: 'tools', title: 'כלים אמיתיים', desc: 'מחשבון, טבלאות מעקב, תבניות לבניית ארוחות, תוכנית 4 שבועות וכלים שאפשר ממש להשתמש בהם.' },
  { icon: 'brain', title: 'ידע שלא נשאר תאוריה', desc: 'לא רק "מה לאכול", אלא למה הגוף שלך מגיב כמו שהוא מגיב ואיך להפוך את זה לבחירות יומיומיות.' },
  { icon: 'calendar', title: 'סדר פעולה', desc: 'במקום להתפזר בין עשרות טיפים, את מקבלת מה לבדוק קודם, מה לשנות, ואיך לעקוב בלי להרגיש מוצפת.' },
];

const LANDING_TAKEAWAYS = [
  'לדעת לבנות ארוחה שמחזיקה אותך שבעה ולא גורמת לך להרגיש שאת כל היום נלחמת בעצמך.',
  'להבין מה ההבדל בין נפיחות של גזים, הורמונים, עצירות, סטרס, היסטמין או SIBO.',
  'לזהות איפה את נופלת: חלבון, סיבים, מים, סדר יום, שינה, סטרס או טריגרים במעי.',
  'להבין למה המיקרוביום יכול להשפיע על התהליך שלך גם כשאת "עושה הכול נכון".',
  'להחזיק במקום אחד ידע וכלים שיכולים לחסוך לך חודשים של ניסוי וטעייה.',
];

const LANDING_TRANSFORMATION_POINTS = {
  before: [
    'אוכלת "בסדר" ועדיין מסיימת את היום עם בטן נפוחה וכבדה',
    'לא באמת יודעת אם הטריגר שלך הוא אוכל, הורמונים, עצירות, סטרס או המעי עצמו',
    'קופצת בין טיפים, רשימות מותר ואסור, ונשארת בלי שיטה אמיתית',
    'מרגישה שהגוף לא משתף פעולה, אבל אין לך דרך להבין מה לבדוק קודם',
  ],
  after: [
    'מבינה איזה סוג נפיחות כנראה שייך אלייך ומה הגיוני לבדוק קודם',
    'יודעת לבנות ארוחות שמחזיקות שובע, מרגיעות את הגוף ומפחיתות בלבול',
    'מקבלת כלים אמיתיים: תבניות, טבלאות, מחשבון ותוכנית יישום ל־4 שבועות',
    'יוצאת עם דרך ברורה שאפשר לחזור אליה שוב ושוב, במקום להתחיל מחדש כל שבוע',
  ],
};

const LANDING_FAQ = [
  {
    q: 'איך אני מקבלת את המדריך אחרי הרכישה?',
    a: 'מיד אחרי הרכישה תקבלי גישה מסודרת למדריך, וגם מייל עם קישור אישי כדי שתוכלי לפתוח אותו מתי שנוח לך ולחזור אליו שוב ושוב.',
  },
  {
    q: 'זה מתאים רק למי שסובלת מנפיחות?',
    a: 'לא. הנפיחות היא חלק משמעותי במדריך, אבל יש כאן גם תזונה, מיקרוביום, הורמונים ואורח חיים. זה מדריך רחב על הגוף הנשי מבפנים ומבחוץ.',
  },
  {
    q: 'זה פרקטי או רק מסביר?',
    a: 'פרקטי מאוד. יש הסברים, אבל גם טבלאות, תבניות, דוגמאות, מעקבים, ובנייה של ממש - כדי שתוכלי ליישם ולא רק לקרוא.',
  },
  {
    q: 'זה מחליף ליווי אישי?',
    a: 'לא. המדריך נותן הרבה מאוד בהירות וכלים, אבל הוא עדיין מוצר דיגיטלי כללי. אם תרצי התאמה אישית, פרקטיקה צמודה ובקרה - תוכלי לעבור אחר כך גם לתכנית הליווי.',
  },
];

function LandingIcon({ name, size = 22, color = 'var(--color-accent)' }) {
  const common = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: color,
    strokeWidth: 1.8,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    'aria-hidden': 'true',
  };

  const wrapStyle = {
    width: size + 16,
    height: size + 16,
    borderRadius: 999,
    display: 'grid',
    placeItems: 'center',
    background: 'rgba(123, 198, 164, 0.12)',
    color,
    flex: '0 0 auto',
  };

  const icons = {
    nutrition: (
      <svg {...common}>
        <path d="M8 3c1 2 1.2 4.2.5 6.4C7.7 12 6 13.6 4 14v7" />
        <path d="M4 14c-1.4-.4-2.5-1.8-2.5-3.4C1.5 7.8 3 5 6 3" />
        <path d="M15 3v8" />
        <path d="M18 3v8" />
        <path d="M15 7h3" />
        <path d="M16.5 11v10" />
      </svg>
    ),
    microbiome: (
      <svg {...common}>
        <circle cx="8" cy="8" r="3" />
        <circle cx="16.5" cy="6.5" r="2.5" />
        <circle cx="15.5" cy="15.5" r="3.5" />
        <circle cx="7" cy="16.5" r="2.5" />
        <path d="M10.5 8h3.5" />
        <path d="M8.8 10.4l4 3.1" />
        <path d="M8.6 14.6l3.4-1" />
      </svg>
    ),
    leaf: (
      <svg {...common}>
        <path d="M20 4c-7 .4-12 4.4-13.8 11.2" />
        <path d="M4 14c0 3.3 2.7 6 6 6 6.2 0 10-7.7 10-16-8.3 0-16 3.8-16 10z" />
      </svg>
    ),
    moon: (
      <svg {...common}>
        <path d="M20 14.5A8.5 8.5 0 0 1 9.5 4 9 9 0 1 0 20 14.5z" />
      </svg>
    ),
    calendar: (
      <svg {...common}>
        <rect x="3" y="5" width="18" height="16" rx="2" />
        <path d="M8 3v4" />
        <path d="M16 3v4" />
        <path d="M3 10h18" />
      </svg>
    ),
    compass: (
      <svg {...common}>
        <circle cx="12" cy="12" r="9" />
        <path d="M15.5 8.5l-2.2 6.2-6.2 2.2 2.2-6.2 6.2-2.2z" />
      </svg>
    ),
    tools: (
      <svg {...common}>
        <path d="M14 5l5 5" />
        <path d="M12 7l5 5" />
        <path d="M5 19l7-7" />
        <path d="M4 20l2-2" />
        <path d="M14.5 4.5a3 3 0 0 0 4 4L14 13l-4-4 4.5-4.5z" />
      </svg>
    ),
    brain: (
      <svg {...common}>
        <path d="M9 4a3 3 0 0 0-5 2.2A3.5 3.5 0 0 0 5 13v1a3 3 0 0 0 3 3h1" />
        <path d="M15 4a3 3 0 0 1 5 2.2A3.5 3.5 0 0 1 19 13v1a3 3 0 0 1-3 3h-1" />
        <path d="M9 4c0 1.5 1 2.5 3 2.5S15 5.5 15 4" />
        <path d="M9 20c0-1.5 1-2.5 3-2.5S15 18.5 15 20" />
        <path d="M12 6.5V17.5" />
      </svg>
    ),
    book: (
      <svg {...common}>
        <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21z" />
        <path d="M4 5.5V21" />
        <path d="M8 7h8" />
        <path d="M8 11h8" />
      </svg>
    ),
    mail: (
      <svg {...common}>
        <rect x="3" y="5" width="18" height="14" rx="2" />
        <path d="M4 7l8 6 8-6" />
      </svg>
    ),
    question: (
      <svg {...common}>
        <path d="M9.5 9a2.5 2.5 0 1 1 4.3 1.7c-.8.8-1.8 1.3-1.8 2.8" />
        <path d="M12 18h.01" />
        <circle cx="12" cy="12" r="9" />
      </svg>
    ),
  };

  return <span style={wrapStyle}>{icons[name] || icons.compass}</span>;
}

function PurchaseCta({ note = 'רכישה מאובטחת, גישה אישית למדריך נשלחת למייל.' }) {
  return (
    <div className="landing-section-cta">
      <a className="hero-cta landing-primary-cta" href="#landing-purchase">
        רכישת המדריך
      </a>
      <div className="landing-cta-note">{note}</div>
    </div>
  );
}

function StickyPurchaseCta() {
  return (
    <div className="landing-sticky-cta">
      <div>
        <strong>149 ש"ח <small>במקום 380 ש"ח</small></strong>
        <span>לזמן מוגבל · גישה מיידית</span>
      </div>
      <a href="#landing-purchase">רכישת המדריך</a>
    </div>
  );
}

function persistLandingLead(payload) {
  try {
    const current = JSON.parse(localStorage.getItem('landing_leads') || '[]');
    current.push(payload);
    localStorage.setItem('landing_leads', JSON.stringify(current));
  } catch (e) {}
}

async function createCheckout(payload) {
  persistLandingLead(payload);

  const res = await fetch('/api/orders/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });

  const data = await res.json().catch(function() {
    return { ok: false, error: 'לא הצלחנו לפתוח את הסליקה כרגע.' };
  });

  if (!res.ok || !data.ok) {
    throw new Error(data.error || 'לא הצלחנו לפתוח את הסליקה כרגע.');
  }

  return data;
}

function LandingHero() {
  return (
    <section className="hero-section landing-hero">
      <div className="hero-bg" />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1 }}>
        <div className="hero-blob hero-blob-1" />
        <div className="hero-blob hero-blob-2" />
        <div className="hero-blob hero-blob-3" />
        <div className="hero-grid-overlay" />
      </div>

      <div className="hero-content landing-hero-content">
        <div className="hero-badge">
          <div className="hero-badge-dot" />
          מדריך דיגיטלי פרימיום לנשים
          <span style={{ opacity: 0.6, marginRight: 4 }}>·</span>
          Elice Fit
        </div>

        <h1 className="hero-title">
          {LANDING_FUNNEL.productName}<br />
          <span>כל מה שלא הסבירו לך על תזונה, מיקרוביום ונפיחות - עם כלים שיעזרו לך להבין את הגוף וליישם כבר מהיום</span>
        </h1>

        <p className="hero-subtitle">
          למה את יכולה לאכול “בריא” ועדיין להיות נפוחה? איך המיקרוביום משפיע על רעב, הורמונים ואנרגיה?
          ומה עושים כשאת מרגישה תקועה למרות שאת מנסה? המדריך הזה עושה לך סדר מול העיניים.
        </p>

        <div className="hero-meta">
          {[
            { icon: 'microbiome', label: 'מיקרוביום, נפיחות והקשר לירידה במשקל' },
            { icon: 'moon', label: 'הורמונים, קורטיזול, שינה ורעב' },
            { icon: 'tools', label: 'טבלאות, מחשבון ותוכנית יישום' },
          ].map((m, i) => (
            <div key={i} className="hero-meta-item">
              <LandingIcon name={m.icon} size={18} />
              {m.label}
            </div>
          ))}
        </div>

        <div className="landing-hero-actions">
          <div className="sales-price-tag landing-hero-chip">{LANDING_FUNNEL.priceLabel}</div>
          <div className="sales-limited-tag landing-hero-chip">{LANDING_FUNNEL.saleLabel}</div>
          <div className="sales-chip landing-hero-chip">גישה דיגיטלית מלאה + חזרה חופשית למדריך</div>
        </div>

        <a className="hero-cta landing-primary-cta" href="#landing-purchase">
          רכישת המדריך
        </a>
      </div>
    </section>
  );
}

function LandingPersonalNoteSection() {
  return (
    <section className="guide-section landing-personal-note-section" style={{ paddingTop: 46 }}>
      <Reveal>
        <div className="landing-personal-note card">
          <div className="chapter-label" style={{ marginBottom: 16 }}>
            <div className="chapter-label-line" />
            נקודת התחלה
          </div>
          <h2 className="chapter-title" style={{ marginBottom: 16 }}>
            המדריך שהייתי רוצה לתת לעצמי בתחילת הדרך
          </h2>
          <div className="landing-personal-note-text">
            <p>
              אם גם את מנסה לאכול נכון ולהתאמן, אבל הגוף עדיין מרגיש נפוח, עייף או תקוע,
              המדריך הזה נכתב בשבילך. לא כדי לתת לך עוד רשימת איסורים, אלא כדי לעשות סדר בגוף,
              בהרגלים ובהבנה.
            </p>
            <p>
              במקום הבטחות גדולות, נבין מה יכול להשפיע על נפיחות, רעב, אנרגיה ובניית שריר,
              נלמד איך להרכיב ארוחות שמתאימות לחיים אמיתיים, ונבנה שגרה שאפשר להתמיד בה
              גם בלי להיות “מושלמת”.
            </p>
            <p>
              אם את עוברת בין תקופות של שליטה לבין ימים של בלבול, נשנושים ועייפות,
              חשוב לי שתדעי: בדרך כלל הבעיה היא לא חוסר כוח רצון. ברוב המקרים חסר פשוט סדר.
            </p>
          </div>
          <div className="landing-personal-photo-wrap">
            <img
              className="landing-personal-photo"
              src="assets/elice-personal-note.jpg"
              alt="אליס באימון על מזרן מול הים"
            />
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function LandingPainSection() {
  return (
    <section className="guide-section" style={{ paddingTop: 70 }}>
      <Reveal>
        <div className="card" style={{ padding: '34px 32px' }}>
          <div className="chapter-label" style={{ marginBottom: 16 }}>
            <div className="chapter-label-line" />
            אם זה נשמע כמוך
          </div>
          <h2 className="chapter-title" style={{ marginBottom: 16 }}>
            אם את מרגישה שאת עושה מאמץ אבל הגוף לא “מחזיר” לך בהתאם, יכול להיות שחסר לך ההסבר
          </h2>
          <p className="chapter-desc" style={{ marginBottom: 22 }}>
            ירידה במשקל, נפיחות, רעב, הורמונים ומעיים לא חיים בנפרד. כשאת מבינה איך הם משפיעים אחד על השני,
            הרבה דברים שחשבת שהם “בעיה בכוח רצון” מתחילים להיראות כמו מערכת שאפשר ללמוד ולנהל.
          </p>
          <div className="card-grid-2">
            {LANDING_PAIN_POINTS.map(function(point, i) {
              return (
                <div key={i} className="card" style={{ padding: '20px 22px' }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--color-accent)', fontWeight: 800 }}>•</span>
                    <div style={{ fontSize: 14, color: 'var(--color-fg2)', lineHeight: 1.75 }}>{point}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <PurchaseCta note="אם זה נשמע מוכר, המדריך בנוי בדיוק כדי לעשות לך סדר." />
      </Reveal>
    </section>
  );
}

function BellyStateCard({ title, subtitle, chips, state = 'before' }) {
  const before = state === 'before';
  const imageSrc = before ? 'assets/bloated.png' : 'assets/unbloated.png';
  const imageAlt = before ? 'דוגמה לנפיחות בבטן' : 'דוגמה לבטן רגועה יותר';
  return (
    <div className="card landing-belly-card" style={{ padding: '26px 24px', minHeight: 420 }}>
      <div
        className="landing-belly-visual"
        aria-hidden="true"
        style={{
          borderRadius: 32,
          background: before
            ? 'linear-gradient(180deg, rgba(232,93,117,0.12), rgba(232,93,117,0.04))'
            : 'linear-gradient(180deg, rgba(123,198,164,0.16), rgba(187,178,238,0.08))',
          border: '1px solid rgba(25,34,29,0.08)',
          position: 'relative',
          overflow: 'hidden',
          padding: '18px 18px 0',
          marginBottom: 22,
        }}
      >
        <div
          className="landing-belly-badge"
          style={{
            position: 'absolute',
            top: 16,
            left: 16,
            zIndex: 2,
            padding: '8px 12px',
            borderRadius: 999,
            background: before ? 'rgba(232,93,117,0.12)' : 'rgba(123,198,164,0.18)',
            color: before ? 'var(--color-accent)' : '#2E8B57',
            fontSize: 12,
            fontWeight: 700,
          }}
        >
          {before ? 'נפיחות, לחץ וכבדות' : 'יותר רוגע, יותר בהירות'}
        </div>
        <img
          className="landing-belly-image"
          src={imageSrc}
          alt={imageAlt}
          style={{
            width: '100%',
            maxWidth: 340,
            height: 'auto',
            display: 'block',
            margin: '22px auto 0',
            borderRadius: 24,
            boxShadow: before
              ? '0 24px 50px rgba(232,93,117,0.16)'
              : '0 24px 50px rgba(123,198,164,0.14)',
          }}
        />
      </div>

      <div className="landing-belly-title" style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, marginBottom: 8 }}>{title}</div>
      <div className="landing-belly-subtitle" style={{ fontSize: 14, color: 'var(--color-fg3)', lineHeight: 1.7, marginBottom: 18 }}>{subtitle}</div>

      <div className="landing-belly-points" style={{ display: 'grid', gap: 10 }}>
        {chips.map(function(chip, i) {
          return (
            <div key={i} className="landing-belly-point" style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <span style={{ color: before ? 'var(--color-accent)' : '#2E8B57', fontWeight: 800 }}>•</span>
              <div style={{ fontSize: 14, color: 'var(--color-fg2)', lineHeight: 1.7 }}>{chip}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function LandingTransformationSection() {
  return (
    <section className="guide-section" style={{ paddingTop: 10 }}>
      <Reveal>
        <div className="chapter-label" style={{ marginBottom: 16 }}>
          <div className="chapter-label-line" />
          השינוי שאת מקבלת
        </div>
        <h2 className="chapter-title" style={{ marginBottom: 14 }}>
          לא עוד “אני נפוחה ואין לי מושג למה” - אלא להבין איזה סימנים הגוף שלך נותן לך
        </h2>
        <p className="chapter-desc" style={{ marginBottom: 24 }}>
          המדריך לא מבטיח קסם. הוא נותן לך משהו הרבה יותר שימושי: להבין מה יכול לעמוד מאחורי נפיחות, רעב, עייפות,
          חשקים ותחושת תקיעות, לדעת מה לבדוק קודם, ולקבל דרך מסודרת להתחיל לשנות את זה בלי לנחש.
        </p>
      </Reveal>

      <div className="card-grid-2 landing-before-after-grid">
        <Reveal>
          <BellyStateCard
            state="before"
            title="לפני"
            subtitle="את מנסה להשתדל, אבל עדיין אין לך דרך ברורה להבין למה הגוף מגיב כמו שהוא מגיב"
            chips={LANDING_TRANSFORMATION_POINTS.before}
          />
        </Reveal>
        <Reveal delay={0.05}>
          <BellyStateCard
            state="after"
            title="אחרי"
            subtitle="יש לך סוף סוף הסבר, סדר וכלים פרקטיים שאת יכולה להתחיל ליישם כבר מהשבוע הראשון"
            chips={LANDING_TRANSFORMATION_POINTS.after}
          />
        </Reveal>
      </div>
      <PurchaseCta note="אפשר להתחיל כבר היום עם מסלול אחד ברור במקום עוד שבוע של ניחושים." />
    </section>
  );
}

function LandingValueSection() {
  return (
    <section className="guide-section" style={{ paddingTop: 10 }}>
      <Reveal>
        <div className="chapter-label" style={{ marginBottom: 16 }}>
          <div className="chapter-label-line" />
          הערך שאת מקבלת
        </div>
        <h2 className="chapter-title" style={{ marginBottom: 14 }}>
          את לא קונה רק מדריך - את קונה את היכולת להבין מה קורה בגוף שלך
        </h2>
        <p className="chapter-desc" style={{ marginBottom: 24 }}>
          המטרה היא לא שתסיימי לקרוא ותגידי “מעניין”. המטרה היא שתצאי ממנו עם תשובות:
          למה דברים קורים, מה קשור למה, ומה את יכולה לעשות כבר השבוע כדי להפסיק להתפזר.
        </p>
      </Reveal>

      <div className="card-grid-2">
        {LANDING_VALUE_STACK.map(function(item, i) {
          return (
            <Reveal key={i} delay={i * 0.05}>
              <div className="card" style={{ padding: '24px 22px', minHeight: 180 }}>
                <div style={{ marginBottom: 12 }}>
                  <LandingIcon name={item.icon} size={22} />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, marginBottom: 10 }}>{item.title}</div>
                <p style={{ fontSize: 14, color: 'var(--color-fg2)', lineHeight: 1.75, margin: 0 }}>{item.desc}</p>
              </div>
            </Reveal>
          );
        })}
      </div>
      <PurchaseCta note="כל הכלים מרוכזים במקום אחד, בלי לחפש ולחבר לבד." />
    </section>
  );
}

function LandingIncludesSection() {
  return (
    <section className="guide-section" style={{ paddingTop: 10 }}>
      <Reveal>
        <div className="chapter-label" style={{ marginBottom: 16 }}>
          <div className="chapter-label-line" />
          מה יש בפנים
        </div>
        <h2 className="chapter-title" style={{ marginBottom: 14 }}>מה את הולכת ללמוד בפנים?</h2>
        <p className="chapter-desc" style={{ marginBottom: 24 }}>
          כל פרק פותח שכבה אחרת בגוף שלך. לא בצורה כבדה או מפחידה, אלא בצורה שגורמת לך להבין:
          “אוקיי, עכשיו ברור לי למה זה קורה ומה אני אמורה לעשות עם זה”.
        </p>
      </Reveal>
      <div className="card-grid-3">
        {LANDING_INCLUDES.map(function(item, i) {
          return (
            <Reveal key={i} delay={i * 0.05}>
              <div className="card" style={{ padding: '24px 22px', minHeight: 210 }}>
                <div style={{ marginBottom: 12 }}>
                  <LandingIcon name={item.icon} size={22} />
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700, marginBottom: 10 }}>{item.title}</div>
                <p style={{ fontSize: 14, color: 'var(--color-fg2)', lineHeight: 1.75, margin: 0 }}>{item.desc}</p>
              </div>
            </Reveal>
          );
        })}
      </div>
      <PurchaseCta note="אם את רוצה להבין וליישם, זה השלב לעבור לרכישה." />
    </section>
  );
}

function LandingTakeawaySection() {
  return (
    <section className="guide-section" style={{ paddingTop: 24 }}>
      <Reveal>
        <div className="card" style={{ padding: '34px 32px' }}>
          <div className="chapter-label" style={{ marginBottom: 16 }}>
            <div className="chapter-label-line" />
            עם מה את יוצאת
          </div>
          <h2 className="chapter-title" style={{ marginBottom: 14 }}>
            את יוצאת עם ידע שאת יכולה להשתמש בו, לא רק לקרוא אותו
          </h2>
          <p className="chapter-desc" style={{ marginBottom: 22 }}>
            בסוף המדריך את לא אמורה להרגיש מוצפת. את אמורה לדעת להסתכל על הגוף שלך אחרת:
            לשים לב לדפוסים, להבין טריגרים, לבנות ארוחות, ולעבוד עם סדר במקום עם לחץ.
          </p>
          <div className="card-grid-2">
            {LANDING_TAKEAWAYS.map(function(item, i) {
              return (
                <div key={i} className="card" style={{ padding: '18px 20px' }}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--color-accent)', fontWeight: 800 }}>✓</span>
                    <div style={{ fontSize: 14, color: 'var(--color-fg2)', lineHeight: 1.75 }}>{item}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function PurchaseSection() {
  const [form, setForm] = useState(function() {
    return JSON.parse(localStorage.getItem('landing_purchase_form') || '{"name":"","email":"","phone":"","consent":true,"termsAccepted":false}');
  });
  const [status, setStatus] = useState('');

  function updateField(key, value) {
    const next = Object.assign({}, form, { [key]: value });
    setForm(next);
    localStorage.setItem('landing_purchase_form', JSON.stringify(next));
  }

  async function handleSubmit() {
    if (!form.name || !form.email) {
      setStatus('כדי להתחיל צריך לפחות שם ומייל.');
      return;
    }
    if (!form.termsAccepted) {
      setStatus('כדי להמשיך לרכישה צריך לאשר שקראת את תנאי השימוש ומדיניות הביטולים.');
      return;
    }

    const payload = {
      productName: LANDING_FUNNEL.productName,
      name: form.name,
      email: form.email,
      phone: '',
      consent: !!form.consent,
      createdAt: new Date().toISOString(),
      page: window.location.href,
    };

    setStatus('פותחת לך עמוד תשלום מאובטח...');

    try {
      const result = await createCheckout(payload);
      setStatus('מעבירה אותך לתשלום מאובטח.');
      window.location.href = result.checkoutUrl;
    } catch (error) {
      setStatus(error.message || 'לא הצלחנו לפתוח סליקה כרגע. נסי שוב בעוד רגע.');
    }
  }

  return (
    <section id="landing-purchase" className="guide-section" style={{ paddingTop: 30 }}>
      <Reveal>
        <div className="sales-purchase-shell card">
          <div className="sales-purchase-copy">
            <div className="chapter-label" style={{ marginBottom: 16 }}>
              <div className="chapter-label-line" />
              רכישה
            </div>
            <h3 className="chapter-title" style={{ marginBottom: 12 }}>{LANDING_FUNNEL.productName}</h3>
            <p className="chapter-desc" style={{ marginBottom: 16 }}>
              ברגע שהרכישה תושלם, תקבלי למייל קישור אישי למדריך ותוכלי להתחיל להבין מה הגוף שלך מנסה לסמן לך כבר היום.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
              <div className="sales-price-tag" style={{ fontSize: 16 }}>{LANDING_FUNNEL.priceLabel}</div>
              <div className="sales-limited-tag">{LANDING_FUNNEL.saleLabel}</div>
            </div>
            <div className="sales-mini-note">
              ב־149 ש"ח את מקבלת מדריך דיגיטלי עמוק, מסודר ויישומי שיעזור לך להבין את הקשר בין מיקרוביום, נפיחות, הורמונים, תזונה וירידה במשקל - עם כלים אמיתיים ליישום.
            </div>
            <div style={{ marginTop: 18, display: 'grid', gap: 8 }}>
              {LANDING_RESULTS.map(function(item, i) {
                return (
                  <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                    <span style={{ color: 'var(--color-accent)', fontWeight: 800 }}>✓</span>
                    <div style={{ fontSize: 14, color: 'var(--color-fg2)', lineHeight: 1.7 }}>{item}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="sales-form-wrap">
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, marginBottom: 8 }}>שרייני לעצמך את המדריך</div>
            <p style={{ fontSize: 14, color: 'var(--color-fg3)', lineHeight: 1.7, marginBottom: 16 }}>
              לפני המעבר לרכישה, מלאי את הפרטים כדי שנוכל לשלוח אלייך את המדריך למייל מיד לאחר התשלום.
            </p>

            <div className="sales-form-grid">
              <div>
                <label className="sales-label">שם מלא</label>
                <input className="sales-input" type="text" value={form.name} onChange={function(e) { updateField('name', e.target.value); }} placeholder="איך קוראים לך?" />
              </div>
              <div>
                <label className="sales-label">מייל</label>
                <input className="sales-input" type="email" value={form.email} onChange={function(e) { updateField('email', e.target.value); }} placeholder="name@example.com" dir="ltr" />
              </div>
              <div>
                <label className="sales-label">אופן המסירה</label>
                <div className="sales-static-box">מייל עם קישור ישיר למדריך</div>
              </div>
            </div>

            <label className="sales-consent">
              <input type="checkbox" checked={!!form.consent} onChange={function(e) { updateField('consent', e.target.checked); }} />
              <span>אני מאשרת לקבל ממך בהמשך גם עדכונים, פידבק, מוצרים נוספים או הצעה לתכנית ליווי.</span>
            </label>
            <label className="sales-consent sales-terms-consent">
              <input type="checkbox" checked={!!form.termsAccepted} onChange={function(e) { updateField('termsAccepted', e.target.checked); }} />
              <span>
                אני מאשרת שקראתי ואני מסכימה ל
                <a href="terms.html" target="_blank" rel="noopener noreferrer">תנאי השימוש ומדיניות הביטולים</a>
                .
              </span>
            </label>

            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="hero-cta" onClick={handleSubmit}>
                רכישת המדריך
              </button>
            </div>

            {status && <p style={{ marginTop: 14, fontSize: 13, color: 'var(--color-fg3)', lineHeight: 1.7 }}>{status}</p>}
          </div>
        </div>
        <PurchaseCta note="עדיין מתלבטת? הרכישה מאובטחת והגישה נשלחת ישירות למייל." />
      </Reveal>
    </section>
  );
}

function DeliverySection() {
  return (
    <section className="guide-section" style={{ paddingTop: 20 }}>
      <Reveal>
        <div className="card" style={{ padding: '30px 28px' }}>
          <div className="chapter-label" style={{ marginBottom: 16 }}>
            <div className="chapter-label-line" />
            שאלות נפוצות
          </div>
          <div style={{ display: 'grid', gap: 14 }}>
            {LANDING_FAQ.map(function(item, i) {
              return (
                <AccordionCard key={i} icon={<LandingIcon name="question" size={18} color="#7B6BCF" />} title={item.q} color="#BBB2EE">
                  <p style={{ fontSize: 15, color: 'var(--color-fg2)', lineHeight: 1.7, margin: 0 }}>{item.a}</p>
                </AccordionCard>
              );
            })}
          </div>
        </div>
      </Reveal>
    </section>
  );
}

function LandingFinalCta() {
  return (
    <section className="guide-section landing-final-section">
      <Reveal>
        <div className="sales-final-cta">
          <div>
            <div className="sales-final-kicker">הצעה מיוחדת</div>
            <div className="sales-final-title">149 ש"ח במקום 380 ש"ח</div>
            <div className="sales-limited-tag sales-final-limited">{LANDING_FUNNEL.saleLabel}</div>
            <div className="sales-final-text">
              אם חיפשת סוף סוף להבין למה הגוף שלך מגיב כמו שהוא מגיב - זה המקום להתחיל ממנו. בשביל 149 ש"ח את מקבלת מדריך שמחבר בין מיקרוביום, נפיחות, הורמונים, תזונה, שינה וסטרס לתמונה אחת ברורה.
              <br /><br />
              זה לא עוד קובץ שפותחים פעם אחת ושוכחים. זה מדריך שאפשר לחזור אליו שוב ושוב, ליישם ממנו, ולבנות בעזרתו שפה חדשה מול הגוף, האוכל, הנפיחות והתוצאות שלך.
            </div>
          </div>
          <a className="hero-cta landing-primary-cta" href="#landing-purchase">
            רכישת המדריך
          </a>
        </div>
      </Reveal>
    </section>
  );
}

function LandingLegalLinks() {
  return (
    <section className="landing-legal-links" aria-label="קישורים משפטיים">
      <a href="terms.html">תקנון ותנאי שימוש</a>
      <span aria-hidden="true">·</span>
      <a href="terms.html#refunds">מדיניות ביטולים והחזרים</a>
    </section>
  );
}

function LandingApp() {
  return (
    <div className="landing-page">
      <LandingHero />
      <LandingPersonalNoteSection />
      <LandingValueSection />
      <LandingTransformationSection />
      <LandingIncludesSection />
      <LandingPainSection />
      <LandingTakeawaySection />
      <PurchaseSection />
      <DeliverySection />
      <LandingFinalCta />
      <LandingLegalLinks />
      <StickyPurchaseCta />
    </div>
  );
}

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

setTimeout(() => {
  const el = document.getElementById('loading');
  if (el) el.classList.add('hidden');
}, 200);