/* global React, Icon */
// Hero — quiet, light, editorial. Soft gradient ground (one of only two gradients on the
// site). Portrait + text side by side. Subtle rise on entrance (opacity stays 1 → always
// readable, no heavy effects).
const Hero = ({ onNav }) => {
  const lift = (delay) => ({ animation: `mlnHeroLift 800ms var(--ease-out) ${delay}ms both` });
  return (
    <section id="hero" style={{
      position: 'relative', overflow: 'hidden',
      padding: 'clamp(116px, 16vh, 168px) 28px clamp(64px, 9vw, 104px)',
      background: 'linear-gradient(180deg, #FFFFFF 0%, var(--paper) 62%, var(--cream) 100%)',
    }}>
      {/* one soft, decorative bloom — gentle, not busy */}
      <div aria-hidden="true" style={{
        position: 'absolute', top: '-18%', insetInlineStart: '-10%', width: 620, height: 620,
        background: 'radial-gradient(circle, rgba(212,175,122,0.20), transparent 68%)',
        pointerEvents: 'none',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', bottom: '-22%', insetInlineEnd: '-8%', width: 520, height: 520,
        background: 'radial-gradient(circle, rgba(200,16,46,0.07), transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div className="mln-hero-grid" style={{
        position: 'relative', maxWidth: 'var(--maxw)', margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'clamp(36px, 5vw, 76px)', alignItems: 'center',
      }}>
        {/* text */}
        <div style={lift(0)}>
          <div style={{
            fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13,
            letterSpacing: '0.26em', color: 'var(--brand)', marginBottom: 22,
          }}>אודליה מאיר · מילים לנצח</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(2.6rem, 5.4vw, 4.6rem)', lineHeight: 1.12, letterSpacing: '-0.01em',
            color: 'var(--ink-900)', margin: '0 0 24px',
          }}>מתוך עולמות שבורים היא <span style={{ color: 'var(--brand)' }}>צומחת</span></h1>
          <p style={{
            fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 'clamp(1.1rem, 1.5vw, 1.3rem)',
            lineHeight: 1.7, color: 'var(--ink-500)', maxWidth: '46ch', margin: '0 0 36px',
          }}>
            במקום שבו הכאב היה הכי גדול, מצאתי כח. היום אני מזמינה אותכם למסע איתי.
            בהרצאות, בקריאת ספר שיריי ובחומרים היכולים ללוות אותכם ולאפשר כח לצמוח.
          </p>
          <div className="mln-hero-buttons" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button onClick={() => onNav('about')} className="mln-btn-primary" style={{
              background: 'var(--brand)', color: '#fff', border: 'none', cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5,
              padding: '15px 30px', borderRadius: 'var(--radius-pill)',
              display: 'inline-flex', alignItems: 'center', gap: 9, whiteSpace: 'nowrap',
              boxShadow: 'var(--shadow-red)',
            }}>הסיפור שלי <Icon name="arrow" size={18} /></button>
            <button onClick={() => onNav('lectures')} className="mln-btn-outline" style={{
              background: 'var(--white)', color: 'var(--ink-900)', cursor: 'pointer',
              border: '1.5px solid var(--border-strong)',
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5,
              padding: '14px 28px', borderRadius: 'var(--radius-pill)',
              display: 'inline-flex', alignItems: 'center', gap: 9, whiteSpace: 'nowrap',
            }}><Icon name="mic" size={18} /> להזמנת הרצאה</button>
            <button onClick={() => onNav('store')} className="mln-btn-outline" style={{
              background: 'var(--white)', color: 'var(--ink-900)', cursor: 'pointer',
              border: '1.5px solid var(--border-strong)',
              fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 16.5,
              padding: '14px 28px', borderRadius: 'var(--radius-pill)',
              display: 'inline-flex', alignItems: 'center', gap: 9, whiteSpace: 'nowrap',
            }}><Icon name="cart" size={18} /> לחנות</button>
          </div>
        </div>

        {/* portrait — circular with green frame */}
        <div style={lift(140)} className="mln-hero-photo" aria-hidden="false">
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            {/* Outer glow ring */}
            <div style={{
              position: 'absolute', inset: -10, borderRadius: '50%',
              background: 'radial-gradient(circle, rgba(107,191,114,0.22) 0%, transparent 70%)',
              pointerEvents: 'none',
            }} />
            {/* Portrait circle */}
            <div style={{
              width: 'clamp(260px, 32vw, 400px)',
              height: 'clamp(260px, 32vw, 400px)',
              borderRadius: '50%',
              overflow: 'hidden',
              border: '5px solid #78C47E',
              boxShadow:
                '0 0 0 10px rgba(120,196,126,0.15),' +
                '0 0 0 18px rgba(120,196,126,0.07),' +
                '0 20px 50px rgba(0,0,0,0.14)',
              flexShrink: 0,
            }}>
              <img src="images/odelia.jpeg" alt="אודליה מאיר — משוררת ומרצה"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%', display: 'block' }} />
            </div>
          </div>
        </div>
      </div>

      {/* Scroll hint */}
      <div
        className="hero-scroll-arrow"
        onClick={() => {
          const el = document.getElementById('about');
          if (el) el.scrollIntoView({ behavior: 'smooth' });
        }}
        aria-label="גלול למטה"
      >
        <span>גלול</span>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="m6 9 6 6 6-6"/>
        </svg>
      </div>
    </section>
  );
};
window.Hero = Hero;