/* global React */
// Haya Yahaly — landing, part 2: Testimonials, Services, Contact

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

function Testimonials() {
  const { TestimonialCard } = window.HayaYahalyDesignSystem_9b2aeb;
  const WaveDivider = window.HYWaveDivider;
  return (
    <section id="testimonials" data-screen-label="Testimonials" style={{ background: 'var(--surface-pink)', padding: 'var(--space-12) 0 0' }}>
      <div className="container">
        <h2 className="section-title">מה הלקוחות מספרים?</h2>
        <div className="testimonial-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)', marginTop: 'var(--space-10)', maxWidth: 920, marginInline: 'auto' }}>
          <TestimonialCard {...TESTIMONIALS[0]} />
          <TestimonialCard {...TESTIMONIALS[1]} />
          <div style={{ gridColumn: '1 / -1', maxWidth: 560, marginInline: 'auto' }}>
            <TestimonialCard {...TESTIMONIALS[2]} />
          </div>
        </div>
      </div>
      <WaveDivider fill="var(--cream-50)" />
    </section>
  );
}

function Services() {
  const { ServiceCard } = window.HayaYahalyDesignSystem_9b2aeb;
  const WaveDivider = window.HYWaveDivider;
  return (
    <section id="services" data-screen-label="Services" style={{ background: 'var(--surface-page)', padding: 'var(--space-12) 0 0' }}>
      <div className="container">
        <div style={{ textAlign: 'right', marginBottom: 'var(--space-8)' }}>
          <h2 className="section-title" style={{ textAlign: 'right', marginBottom: 4 }}>שירותיי</h2>
          <p style={{ margin: 0, fontSize: 'var(--text-lg)', color: 'var(--text-accent)' }}>אשמח לעמוד לרשותכם</p>
        </div>
        <div className="services-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)' }}>
          <ServiceCard title="יעוץ זוגי" tint="peach" image={(window.__resources && window.__resources.serviceCouples) || "assets/service-couples.png"}>
            היעוץ הזוגי מתאים לזוגות החווים: ריחוק רגשי<br />
            ,תחושת בדידות<br />
            , ריבים חוזרים<br />
            קשיי תקשורת,<br />
            בגידה,<br />
            משברים כתוצאה משינויי חיים<br />
            (...כהריון,לידה,מוות של קרוב,מעבר דירה, וכו)<br />
            זוגות בעלי מודעות גבוהה,שרוצים ללמוד"זוגיות",כדי להיות במקום של שיתוף
          </ServiceCard>
          <ServiceCard title="מפגשים זוגיים ואישיים" tint="sky" image={(window.__resources && window.__resources.serviceMeetings) || "assets/service-meetings.png"}>
            יעוץ זוגי-ליווי מיקצועי לבניית זוגיות יציבה,מקרבת ומפרה, כל אחד בנפרד וביחד. היעוץ הזוגי מציע מרחב בטוח,מכיל ולא שיפוטי,בו בני הזוג יכולים לעצור,להתבונן בדפוסי התקשורת וההקשרות ביניהם,להבין מה גורם לקונפליקטים חוזרים ונשנים ולרכוש כלים מעשיים לשיפור הקשר. בכל מפגש נעמיק,נזהה צרכים רגשיים שאינם מקבלים מענה,נחזק את האמון ונשקם את תחושת השותפות.
          </ServiceCard>
        </div>
      </div>
      <WaveDivider fill="var(--cream-100)" />
    </section>
  );
}

function Contact() {
  const { Button, Input, Checkbox } = window.HayaYahalyDesignSystem_9b2aeb;
  const WaveDivider = window.HYWaveDivider;
  const [agree, setAgree] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  return (
    <section id="contact" data-screen-label="Contact" style={{ position: 'relative', background: 'var(--sky-tint)', padding: 'var(--space-12) 0 0', overflow: 'hidden' }}>
      <div className="container contact-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 'var(--space-10)', alignItems: 'center' }}>
        <div>
          <h2 style={{ fontSize: 'var(--text-3xl)', fontWeight: 700, color: 'var(--text-heading)', margin: '0 0 var(--space-4)' }}>נשמח לשמוע מכם</h2>
          <p style={{ fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-body)', margin: 0 }}>הצעד הראשון מתחיל בשיחה. מלאו את הפרטים ואחזור אליכם עם מענה אישי, מקצועי וללא התחייבות.</p>
          <a href="tel:0547894214" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 'var(--space-6)', color: 'var(--text-accent)', textDecoration: 'none', fontSize: 'var(--text-xl)', fontWeight: 700 }}>
            <i data-lucide="phone" style={{ width: 22, height: 22 }}></i> 054-789-4214
          </a>
        </div>

        <div style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: 'var(--space-7)' }}>
          <h2 style={{ margin: '0 0 6px', fontSize: 'var(--text-2xl)', fontWeight: 700, color: 'var(--text-heading)' }}>בואו נדבר</h2>
          <p style={{ margin: '0 0 var(--space-5)', fontSize: 'var(--text-sm)', color: 'var(--text-body)' }}>מלאו את הפרטים ואחזור אליכם עם מענה אישי, מקצועי וללא התחייבות.</p>
          {sent ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, padding: 'var(--space-7) 0', textAlign: 'center', color: 'var(--text-heading)' }}>
              <i data-lucide="heart-handshake" style={{ width: 40, height: 40, color: 'var(--color-primary)' }}></i>
              <strong style={{ fontSize: 'var(--text-lg)' }}>תודה! קיבלתי את הפרטים</strong>
              <span style={{ color: 'var(--text-body)' }}>אחזור אליכם בהקדם.</span>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
              <div className="contact-fields" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
                <Input label="שם פרטי" placeholder="שם פרטי" required />
                <Input label="שם משפחה" placeholder="שם משפחה" />
                <Input label="אימייל" type="email" placeholder="name@email.com" />
                <Input label="טלפון" type="tel" placeholder="050-0000000" required />
              </div>
              <Checkbox checked={agree} onChange={(e) => setAgree(e.target.checked)}
                label={<>פרטיי יישמרו לצורך יצירת קשר ומתן מידע, בהתאם ל<a href="#" style={{ color: 'var(--color-primary)' }}>מדיניות הפרטיות</a>.</>} />
              <Button type="submit" fullWidth>שליחה</Button>
            </form>
          )}
        </div>
      </div>
      <WaveDivider fill="var(--white)" />
    </section>
  );
}

Object.assign(window, { HYTestimonials: Testimonials, HYServices: Services, HYContact: Contact });