// Events & Education sections
const { useEffect: useE4, useState: useS4, useRef: useR4 } = React;

function Events({ t }) {
  const ref = useR4(null);
  const [inView, setInView] = useS4(false);
  const [hover, setHover] = useS4(null);
  useE4(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.15 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section ref={ref} id="events" className="section" style={{ position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, marginBottom: 56 }}>
          <div style={{ gridColumn: 'span 4' }}>
            <span className={`eyebrow reveal ${inView ? 'in' : ''}`}>{t.events.eyebrow}</span>
          </div>
          <div style={{ gridColumn: 'span 8' }}>
            <h2 className={`h2 reveal d1 ${inView ? 'in' : ''}`}>
              {t.events.title1} <em style={{ fontStyle: 'italic' }}>{t.events.title2}</em> — {t.events.title3}
            </h2>
          </div>
        </div>

        {/* Partnership banner */}
        <div className={`reveal d2 ${inView ? 'in' : ''}`} style={{
          display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap',
          padding: '20px 24px',
          border: '1px solid var(--rule)',
          borderRadius: 999,
          marginBottom: 48,
          background: 'rgba(251,244,240,.02)',
        }}>
          <span className="mono" style={{ fontSize: 10.5, letterSpacing: '.18em', color: 'var(--text-faint)', textTransform: 'uppercase' }}>
            {t.events.partner}
          </span>
          <div style={{ flex: 1, height: 1, background: 'var(--rule)', minWidth: 20 }} />
          <span className="serif" style={{ fontStyle: 'italic', fontSize: 22, color: 'var(--ivory)' }}>
            LU Innovation
          </span>
          <span style={{ color: 'var(--text-faint)', fontSize: 12 }}>×</span>
          <span className="serif" style={{ fontStyle: 'italic', fontSize: 22 }} >
            <span className="gradient-text">Build Like A Girl</span>
          </span>
          <div style={{ flex: 1, height: 1, background: 'var(--rule)', minWidth: 20 }} />
          <a href="#" style={{ fontSize: 13, color: 'var(--text-dim)' }}>
            {t.events.series} →
          </a>
        </div>

        {/* Events list */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 1, background: 'var(--rule)', border: '1px solid var(--rule)' }}>
          {t.events.list.map((ev, i) => (
            <article key={i}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(null)}
              className={`reveal d${(i % 4) + 1} ${inView ? 'in' : ''}`}
              style={{
                background: hover === i ? 'rgba(240,107,143,.08)' : 'var(--bg)',
                padding: 32,
                transition: 'background .35s',
                cursor: 'pointer',
                position: 'relative',
                overflow: 'hidden',
                minHeight: 360,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 24,
              }}
            >
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--pink)', textTransform: 'uppercase' }}>
                    {ev.kind}
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div className="serif" style={{ fontSize: 34, lineHeight: 1, fontWeight: 300 }}>{ev.day}</div>
                    <div className="mono" style={{ fontSize: 10.5, letterSpacing: '.14em', color: 'var(--text-faint)', textTransform: 'uppercase', marginTop: 4 }}>
                      {ev.month}
                    </div>
                  </div>
                </div>
                <h3 className="h3" style={{ fontSize: 'clamp(24px, 2.2vw, 32px)', marginBottom: 12 }}>
                  {ev.title}
                </h3>
                <p style={{ color: 'var(--text-dim)', fontSize: 14.5, lineHeight: 1.5 }}>
                  {ev.desc}
                </p>
              </div>

              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.08em', color: 'var(--text-dim)', textTransform: 'uppercase' }}>
                <span>{ev.location}</span>
                <span style={{
                  color: ev.status === 'Open' ? 'var(--pink)' : 'var(--text-faint)',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                  <span style={{
                    width: 6, height: 6, borderRadius: '50%',
                    background: ev.status === 'Open' ? 'var(--pink)' : 'var(--text-faint)',
                  }} />
                  {ev.status}
                </span>
              </div>

              {/* hover arrow */}
              <div style={{
                position: 'absolute', top: 24, right: 24,
                opacity: hover === i ? 1 : 0,
                transform: hover === i ? 'translate(0,0)' : 'translate(-6px, 6px)',
                transition: 'all .4s cubic-bezier(.2,.8,.2,1)',
                fontSize: 20, color: 'var(--pink)',
              }}>↗</div>
            </article>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, flexWrap: 'wrap', gap: 12 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--text-faint)', textTransform: 'uppercase' }}>
            {t.events.count} &nbsp;/&nbsp; {t.events.cities}
          </div>
          <a href="#" style={{ fontSize: 13, color: 'var(--ivory)', borderBottom: '1px solid var(--rule)', paddingBottom: 2 }}>
            {t.events.calendar} →
          </a>
        </div>
      </div>
    </section>
  );
}

function Education({ t }) {
  const ref = useR4(null);
  const [inView, setInView] = useS4(false);
  useE4(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setInView(true), { threshold: 0.1 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <section ref={ref} id="education" className="section on-ivory-bg" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24, marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 5' }}>
            <span className={`eyebrow on-ivory reveal ${inView ? 'in' : ''}`}>{t.education.eyebrow}</span>
            <h2 className={`h2 reveal d1 ${inView ? 'in' : ''}`} style={{ marginTop: 24 }}>
              {t.education.title1} <em style={{ fontStyle: 'italic' }}>{t.education.title2}</em>, {t.education.title3}.
            </h2>
          </div>
          <div style={{ gridColumn: '8 / span 5' }}>
            <p className={`body-lg reveal d2 ${inView ? 'in' : ''}`} style={{ color: 'var(--ink-dim)', marginTop: 24 }}>
              {t.education.intro}
            </p>
          </div>
        </div>

        {/* Featured article */}
        <div className={`reveal d1 ${inView ? 'in' : ''}`} style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)',
          gap: 40, alignItems: 'center', marginBottom: 64,
          paddingBottom: 64, borderBottom: '1px solid var(--rule-ink)',
        }}>
          <div style={{
            aspectRatio: '4/3', borderRadius: 4, overflow: 'hidden',
            background: '#0a0608', position: 'relative',
          }}>
            <img src="assets/ai-fluency.jpg" alt="" style={{
              width: '100%', height: '100%', objectFit: 'cover',
              transition: 'transform 1.2s cubic-bezier(.2,.8,.2,1)',
            }}
              onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
            />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '.14em', color: 'var(--rose)', textTransform: 'uppercase' }}>
              {t.education.featured} · {t.education.feature.kind}
            </div>
            <h3 className="h3" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)' }}>
              {t.education.feature.title}
            </h3>
            <p style={{ color: 'var(--ink-dim)', fontSize: 15.5, lineHeight: 1.6, maxWidth: '52ch' }}>
              {t.education.feature.desc}
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 12 }}>
              <a href="#" className="btn btn-ghost on-ivory">{t.education.feature.cta} <span className="arrow">→</span></a>
              <span className="mono" style={{ alignSelf: 'center', fontSize: 11, letterSpacing: '.12em', color: 'var(--ink-dim)', textTransform: 'uppercase' }}>
                {t.education.feature.read}
              </span>
            </div>
          </div>
        </div>

        {/* Resource grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
          {t.education.items.map((it, i) => (
            <article key={i} className={`edu-card reveal d${(i % 4) + 1} ${inView ? 'in' : ''}`} style={{
              background: '#fff',
              border: '1px solid var(--rule-ink)',
              borderRadius: 4,
              padding: 28,
              display: 'flex', flexDirection: 'column', gap: 16,
              transition: 'transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s',
              cursor: 'pointer',
            }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.borderColor = 'var(--rose)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--rule-ink)'; }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="mono" style={{ fontSize: 10.5, letterSpacing: '.14em', color: 'var(--rose)', textTransform: 'uppercase' }}>
                  {it.kind}
                </span>
                <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-dim)', letterSpacing: '.1em' }}>
                  {it.time}
                </span>
              </div>
              <h4 className="serif" style={{ fontSize: 24, lineHeight: 1.1, letterSpacing: '-0.015em', fontWeight: 400, flex: 1 }}>
                {it.title}
              </h4>
              <p style={{ fontSize: 13.5, color: 'var(--ink-dim)', lineHeight: 1.5 }}>
                {it.desc}
              </p>
              <div style={{ fontSize: 13, fontWeight: 500, display: 'flex', justifyContent: 'space-between', borderTop: '1px solid var(--rule-ink)', paddingTop: 14 }}>
                <span>{it.author}</span>
                <span>→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Events = Events;
window.Education = Education;