/* global React, Reveal, Icon */
// הרצאות — what the live lecture is, for whom, and a "request a quote" CTA.
const LEC_POINTS = [
  { icon: 'heart', t: 'סיפור אישי שנוגע ללב', d: 'המסע מהאובדן אל הבחירה בחיים — בכנות, בלי מליצות.' },
  { icon: 'sprout', t: 'צמיחה מטראומה', d: 'איך הופכים שבר לכוח, ומשבר להזדמנות לצמיחה.' },
  { icon: 'mic', t: 'מותאם לקהל שלך', d: 'לארגונים, קהילות, כנסים וצוותים — בכל גודל ובכל אווירה.' },
];

const LecturesSection = ({ onInquiry }) => (
  <section id="lectures" style={{ background: 'var(--cream)', padding: 'var(--section-y) 28px' }}>
    <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(36px, 5vw, 80px)', alignItems: 'center' }} className="mln-lectures-grid">
        <div>
          <Reveal>
            <div className="mln-eyebrow">הרצאות</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.9rem, 3.4vw, 2.8rem)', lineHeight: 1.2, margin: '0 0 22px', color: 'var(--ink-900)' }}>
              הרצאה שמשאירה<br/>חותם.
            </h2>
          </Reveal>
          <Reveal delay={100}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem, 1.4vw, 1.2rem)', lineHeight: 1.8, color: 'var(--ink-700)', maxWidth: '52ch', margin: '0 0 30px' }}>
              מזמינה אתכם לפגוש את כוחה של הרוח האנושית, עם הבחירות שאנו עושים מול משברי החיים ועם האפשרות לצמוח גם מתוך האתגרים. סיפור חיים מעורר השראה ומחשבה, המהווה פתח להתבוננות תקווה וצמיחה. כל מפגש יותאם לקהל היעד, ולאופי האירוע.
            </p>
          </Reveal>
          <Reveal delay={180}>
            <button onClick={() => onInquiry({
              topic: 'lecture', lockTopic: true, icon: 'mic', title: 'הזמנת הרצאה',
              heading: 'נדבר על ההרצאה שלך', sub: 'ספר/י לי על האירוע ואחזור אליך עם הצעת מחיר מותאמת אישית.',
            })} className="mln-btn-primary" style={{
              background: 'var(--brand)', color: '#fff', border: 'none', cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 17, padding: '15px 32px',
              borderRadius: 'var(--radius-pill)', display: 'inline-flex', alignItems: 'center',
              gap: 10, boxShadow: 'var(--shadow-red)',
            }}><Icon name="calendar" size={18} /> בקשה להזמנת הרצאה</button>
          </Reveal>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {LEC_POINTS.map((p, i) => (
            <Reveal key={i} delay={i * 110}>
              <div style={{
                display: 'flex', gap: 18, alignItems: 'flex-start', background: 'var(--white)',
                borderRadius: 'var(--radius-lg)', padding: '22px 24px', border: '1px solid rgba(28,20,19,0.05)',
                boxShadow: 'var(--shadow-sm)',
              }}>
                <div style={{ flexShrink: 0, width: 48, height: 48, borderRadius: 14, background: 'var(--surface-tint)', color: 'var(--brand)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={p.icon} size={24} /></div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, margin: '2px 0 6px', color: 'var(--ink-900)' }}>{p.t}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.65, color: 'var(--ink-500)', margin: 0 }}>{p.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </div>
  </section>
);
window.LecturesSection = LecturesSection;