/* global React, Reveal, Icon */
// מי אני — child illustration + first-person story (editable via admin)
const AboutSection = ({ about }) => {
  const title = (about && about.title) || 'הסיפור שלי הוא לא הסוף.\nהוא ההתחלה.';
  const titleLines = title.split('\n');
  const paragraphs = (about && about.paragraphs) || [
    'שמי אודליה מאיר.',
    'בילדותי חוויתי טראומת ילדות, כאשר אימי נרצחה בהיותי רק בת שש. הרגע הזה הגדיר אותי ואת המשך חיי.',
    'גדלתי עם השאלה "איך ממשיכים לגדול ולחיות ללא אמא?"',
    'חלפו שנים ובבגרותי הבנתי שהכאב שאני נושאת אפשר להפוך לכח ולאור.',
    'בעזרת המילים אני מקבלת ריפוי ואותם מבקשת להעביר הלאה.',
    'לא נולדתי חזקה, בחרתי להיות.',
    'ואני כאן כדי להראות שכל אחד יכול לצמוח, גם מהמקום הכי נמוך.',
  ];
  return (
  <section id="about" style={{ position: 'relative', background: 'var(--cream)', padding: 'var(--section-y) 28px' }}>
    <div style={{
      maxWidth: 'var(--maxw)', margin: '0 auto',
      display: 'grid', gridTemplateColumns: '1.04fr 0.96fr',
      gap: 'clamp(32px, 5vw, 76px)', alignItems: 'center',
    }} className="mln-about-grid">

      {/* Child illustration — main image */}
      <Reveal>
        <div style={{
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          padding: '20px 0 40px',
        }}>
          <div style={{
            transform: 'rotate(-4deg)',
            filter: 'drop-shadow(0 16px 36px rgba(10,8,0,0.38))',
            transition: 'transform 500ms var(--ease-out)',
          }}
            onMouseEnter={e => e.currentTarget.style.transform = 'rotate(-1deg) scale(1.03)'}
            onMouseLeave={e => e.currentTarget.style.transform = 'rotate(-4deg)'}
          >
            <img
              src="images/ילדה.png"
              alt="אודליה בילדותה — בשביל הסביונים"
              style={{
                width: 'clamp(240px, 30vw, 360px)',
                height: 'auto',
                display: 'block',
                borderRadius: '18px',
              }}
            />
          </div>
        </div>
      </Reveal>

      {/* Text column */}
      <div>
        <Reveal>
          <div className="mln-eyebrow">מי אני</div>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(2rem, 3.6vw, 3rem)',
            lineHeight: 1.2, margin: '0 0 10px', color: 'var(--ink-900)',
          }}>{titleLines.map((line, i) => (
            <React.Fragment key={i}>{line}{i < titleLines.length - 1 && <br/>}</React.Fragment>
          ))}</h2>
          <div aria-hidden="true" style={{ width: 64, height: 2, background: 'var(--gold)', margin: '0 0 26px', borderRadius: 2 }} />
        </Reveal>

        <Reveal delay={120}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem, 1.35vw, 1.18rem)',
            lineHeight: 1.85, color: 'var(--ink-700)', maxWidth: '58ch',
            display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            {paragraphs.map((para, i) => (
              <p key={i} style={i === paragraphs.length - 1
                ? { margin: 0, color: 'var(--ink-900)', fontWeight: 600 }
                : { margin: 0 }}>{para}</p>
            ))}
          </div>
        </Reveal>

        <Reveal delay={220}>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 34 }}>
            {[
              { icon: 'mic', t: 'הרצאות' },
              { icon: 'book', t: 'ספרים' },
              { icon: 'heart', t: 'קלפי טיפול' },
            ].map((s, i) => (
              <div key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 9,
                padding: '10px 18px', borderRadius: 'var(--radius-pill)',
                background: 'var(--white)', border: '1px solid var(--border)',
                boxShadow: 'var(--shadow-sm)', color: 'var(--ink-700)',
                fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14.5,
              }}>
                <span style={{ color: 'var(--brand)' }}><Icon name={s.icon} size={18} /></span> {s.t}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </div>
  </section>
  );
};
window.AboutSection = AboutSection;