/* global React */
// Haya Yahaly — landing, part 1: Navbar, Hero, Features, About

const NAV = [
  { label: 'אודות', href: '#about' },
  { label: 'המלצות', href: '#testimonials' },
  { label: 'שירותים', href: '#services' },
  { label: 'צור קשר', href: '#contact' },
];

function Navbar() {
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50, background: 'var(--white)',
      borderBottom: '1px solid var(--color-border)', boxShadow: 'var(--shadow-xs)',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '76px' }}>
        {/* Right (logical start in RTL): logo */}
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: '10px', textDecoration: 'none' }}>
          <img src={(window.__resources && window.__resources.logoHearts) || "assets/logo-hearts.png"} alt="" style={{ height: '38px' }} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.1 }}>
            <strong style={{ color: 'var(--text-blue)', fontSize: '1.15rem', fontWeight: 700 }}>חיה יהלי</strong>
            <span style={{ color: 'var(--text-accent)', fontSize: '0.72rem', letterSpacing: '0.14em' }}>יעוץ זוגי</span>
          </span>
        </a>

        {/* Left: nav links + mobile hamburger */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }}>
          <nav className="nav-links" style={{ display: 'flex', gap: 'var(--space-6)' }}>
            {NAV.map((n) => (
              <a key={n.href} href={n.href} style={{
                color: 'var(--text-heading)', textDecoration: 'none', fontSize: 'var(--text-base)',
                fontWeight: 500, whiteSpace: 'nowrap', transition: 'color var(--transition-fast)',
              }}
                onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--text-accent)')}
                onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-heading)')}>
                {n.label}
              </a>
            ))}
          </nav>
          <button className="hamburger" onClick={() => setOpen((o) => !o)} aria-label="תפריט" style={{
            display: 'none', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, padding: 0,
            border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-heading)',
          }}>
            <i data-lucide="menu"></i>
          </button>
        </div>
      </div>
      {open && (
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '8px 24px 16px' }}>
          {NAV.map((n) => <a key={n.href} href={n.href} onClick={() => setOpen(false)} style={{ padding: '10px 0', color: 'var(--text-heading)', textDecoration: 'none', borderBottom: '1px solid var(--color-border)' }}>{n.label}</a>)}
          <a href="tel:0547894214" onClick={() => setOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 0 2px', color: 'var(--text-accent)', textDecoration: 'none', fontWeight: 700 }}>
            <i data-lucide="phone" style={{ width: 18, height: 18 }}></i> 054-789-4214
          </a>
        </nav>
      )}
    </header>
  );
}

function Hero() {
  const { Button } = window.HayaYahalyDesignSystem_9b2aeb;
  return (
    <section id="top" data-screen-label="Hero" style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface-hero)', padding: '88px 0 0' }}>
      <div className="container" style={{ position: 'relative', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', paddingBottom: '72px' }}>
        <img src={(window.__resources && window.__resources.logoFull) || "assets/logo-full.png"} alt="חיה יהלי — יעוץ זוגי" style={{ width: 'min(440px, 78vw)', height: 'auto', marginBottom: '40px' }} />
        <Button href="tel:0547894214" size="lg" icon={<i data-lucide="phone" style={{ width: 19, height: 19 }}></i>}>חייגו עכשיו</Button>
      </div>

      {/* wave bottom */}
      <svg viewBox="0 0 1440 120" preserveAspectRatio="none" style={{ display: 'block', width: '100%', height: '90px' }}>
        <path d="M0,64 C240,128 480,16 720,48 C960,80 1200,128 1440,72 L1440,120 L0,120 Z" fill="var(--cream-50)"></path>
      </svg>
    </section>
  );
}

const FEATURES = [
  { tint: 'lavender', icon: 'sprout', title: 'ממוקדת תוצאה', body: 'הייעוץ משלב הקשבה, הבנה וכלים מעשיים לתקשורת מקרבת.' },
  { tint: 'teal', icon: 'heart-handshake', title: 'ליווי אישי', body: 'העבודה נעשית מתוך גישה אישית, רגישה ומכבדת.' },
  { tint: 'blue', icon: 'messages-square', title: 'אמינות ושקיפות מלאה', body: 'התהליך מתבסס על תקשורת פתוחה, כנות והקשבה עמוקה לשני בני הזוג.' },
  { tint: 'rose', icon: 'sparkles', title: 'חשיבה יצירתית וחדשנית', body: 'בתהליך הייעוץ אנו יוצרים מרחב פתוח לחשיבה חדשה על הזוגיות.' },
];

function Features() {
  const { FeatureItem } = window.HayaYahalyDesignSystem_9b2aeb;
  return (
    <section data-screen-label="Features" style={{ background: 'var(--surface-page)', padding: 'var(--space-12) 0' }}>
      <div className="container">
        <h2 className="section-title">היתרונות שלי</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-7)', marginTop: 'var(--space-10)' }} className="features-grid">
          {FEATURES.map((f) => (
            <FeatureItem key={f.title} tint={f.tint} title={f.title}
              icon={<i data-lucide={f.icon} style={{ width: 34, height: 34 }}></i>}>
              {f.body}
            </FeatureItem>
          ))}
        </div>
      </div>
    </section>
  );
}

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

const MISUD_BULLETS = [
  'חזון משותף-חלומות וציפיות מהחיים המשותפים',
  'התנהלות כלכלית',
  'קריירה',
  'מקום מגורים',
  'הרחבת המשפחה/חינוך',
  'משפחה מורחבת',
  'חלוקת תפקידים',
  'גבולות אישיים',
];

function About() {
  const { Button } = window.HayaYahalyDesignSystem_9b2aeb;
  return (
    <section id="about" data-screen-label="About" style={{ background: 'var(--surface-page)', padding: 'var(--space-12) 0 0' }}>
      <div className="container about-grid" style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 'var(--space-10)', alignItems: 'stretch' }}>
        <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid var(--color-border)', minHeight: 420, alignSelf: 'stretch' }}>
          <img src={(window.__resources && window.__resources.hayaPortrait) || "assets/haya-portrait.png"} alt="חיה יהלי" style={{ width: '100%', height: '100%', minHeight: 420, objectFit: 'cover', objectPosition: '50% 30%', display: 'block' }} />
        </div>
        <div>
          <h2 className="section-title" style={{ textAlign: 'right' }}>אודות</h2>
          <p className="lead">מחפשים דרך חדשה בזוגיות?</p>
          <p className="body-text">שמי חיה יהלי, בעלת תואר ראשון במדעים בטכניון, אשת עסקים ובוגרת מספר קורסים להתפתחות אישית. בשנים האחרונות,במסגרת עבודתי כיועצת רפואית,הבנתי שאני אוהבת לעזור לאנשים וללוותם בתהליכים משמעותיים בחייהם. אני רואה בתפקידי כיועצת זוגית שליחות חשובה.בעיני,זוגיות הינה ערך עליון.</p>
          <h3 className="sub-title">מה מייחד את התהליך אצלי?</h3>
          <ul className="check-list">
            {ABOUT_BULLETS.map((b) => (
              <li key={b}><i data-lucide="check" style={{ width: 18, height: 18, color: 'var(--color-primary)' }}></i><span>{b}</span></li>
            ))}
          </ul>
          <p className="body-text">אני מלווה אתכם במסע הזה,כדי שתחזרו להיות צוות.<br />אני מזמינה אתכם למפגש איתי ,כדי להתחיל תהליך עוצמתי.</p>
          <p className="body-text" style={{ fontWeight: 600, color: 'var(--text-heading)' }}>זיכרו-אהבה היא רגש, זוגיות היא בחירה</p>
        </div>
      </div>

      <div className="container" style={{ marginTop: 'var(--space-12)', maxWidth: 820 }}>
        <h3 className="sub-title">מדוע חשוב לפנות לייעוץ זוגי?</h3>
        <p className="body-text">זוגיות הינה מסע משותף.עם השנים מצטברים אתגרי חיים,שינויים,קריירה,ילדים, עומסים וחוויות.</p>
        <p className="body-text">לא תמיד שמים לב מתי הריחוק מתחיל להזדחל לזוגיות-הוא מגיע בשקט..</p>
        <p className="body-text">זוגות ,שנמצאים יחד מספר שנים,שחווים את הריחוק, חושבים לפעמים-"נסתדר לבד" "זה יעבור"</p>
        <p className="body-text">האמת היא,שככל שמחכים יותר,כך הפערים מעמיקים.</p>
        <p className="body-text">יעוץ זוגי אינו כישלון, אלא לקיחת אחריות על חיינו ולעיתים גם על חיי ילדינו והדוגמא שאנחנו נותנים להם.</p>
        <p className="body-text">זהו מרחב בטוח,שבו אפשר לעצור לרגע,לקחת נשימה עמוקה ולהקשיב באמת,להבין מה כל אחד מבני הזוג צריך.</p>
        <p className="body-text">ללמוד כלים פרקטיים לתקשורת מקרבת,חיזוק החיבור הרגשי,לדעת להתמודד עם קונפליקטים.</p>

        <h3 className="sub-title">יעוץ זוגי לפני מיסוד הקשר-מתנה לזוגיות שלכם</h3>
        <p className="body-text">אף אחד לא לימד אותנו איך להתנהל בשניים.</p>
        <p className="body-text">אם אתם זוג לפני חתונה(מיסוד קשר) או לפני מעבר למגורים משותפים,בראייה לעתיד משותף, ישנה הזדמנות יקרה מפז-לבדוק,לבחון,לשאול, לדבר על הדברים החשובים באמת:</p>
        <ul className="check-list">
          {MISUD_BULLETS.map((b) => (
            <li key={b}><i data-lucide="check" style={{ width: 18, height: 18, color: 'var(--color-primary)' }}></i><span>{b}</span></li>
          ))}
        </ul>
        <p className="body-text">יעוץ זוגי לפני מיסוד הקשר, מיועד לזוגות בשלים, בעלי אינטליגנציה רגשית גבוהה ,שמסוגלים ובוחרים לקחת אחריות על חייהם ורוצים לבנות תשתית יציבה לקשר שלהם, רוצים להבין לעומק את ההבדלים ביניהם וללמוד להתמודד עם השוני בצורה מכילה .</p>
        <p className="body-text">כשמדברים על הכל בצורה פתוחה, נכנסים לנישואין מתוך מודעות,בהירות ובטחון.</p>

        <h3 className="sub-title">המסר המרכזי</h3>
        <p className="body-text">זוגיות מיטיבה אינה מבוססת רק על אהבה ומשיכה מינית,אלא גם על תקשורת מקרבת,פתיחות,הבנה,כבוד,הקשבה,חברות וכלים פרקטיים,שניתן ללמוד אותם.</p>
        <p className="body-text">חשוב לזכור,שזוגיות זקוקה להזנה תמידית.</p>

        <div style={{ marginTop: 'var(--space-6)' }}>
          <Button href="#contact" variant="primary">בואו נדבר</Button>
        </div>
      </div>
      <WaveDivider fill="var(--pink-tint)" />
    </section>
  );
}

function Photo({ label, tall, src, pos }) {
  return (
    <div style={{
      borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--cream-100)',
      border: '1px solid var(--color-border)', minHeight: tall ? 260 : 180,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8,
      color: 'var(--text-muted)',
    }}>
      {src ? (
        <img src={src} alt={label} style={{ width: '100%', height: '100%', minHeight: tall ? 260 : 180, objectFit: 'cover', objectPosition: pos || 'center', display: 'block' }} />
      ) : (
        <React.Fragment>
          <i data-lucide="image" style={{ width: 28, height: 28 }}></i>
          <span style={{ fontSize: 'var(--text-sm)' }}>{label}</span>
        </React.Fragment>
      )}
    </div>
  );
}

function WaveDivider({ fill, flip, mt = 'var(--space-12)' }) {
  return (
    <svg viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true"
      style={{ display: 'block', width: '100%', height: '90px', marginTop: mt, transform: flip ? 'scaleX(-1)' : 'none' }}>
      <path d="M0,64 C240,128 480,16 720,48 C960,80 1200,128 1440,72 L1440,120 L0,120 Z" fill={fill}></path>
    </svg>
  );
}

Object.assign(window, { HYNavbar: Navbar, HYHero: Hero, HYFeatures: Features, HYAbout: About, HYWaveDivider: WaveDivider });