// Education sections — intro (sand BG) + programs

function EducationIntro({ t }) {
  return (
    <section id="education" className="section edu-intro" style={{
      background: 'var(--sand)',
      color: 'var(--ink)',
      paddingTop: 'calc(140px * var(--density))',
      paddingBottom: 'calc(80px * var(--density))',
      overflow: 'hidden',
    }}>
      {/* Animated concentric rings — the hero graphic of this section */}
      <div className="edu-rings" data-parallax="0.4" aria-hidden="true">
        <svg viewBox="0 0 900 900" style={{ width: '100%', height: '100%' }}>
          <defs>
            <linearGradient id="ring-fade" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="var(--ink)" stopOpacity="0.25"/>
              <stop offset="50%" stopColor="var(--ink)" stopOpacity="1"/>
              <stop offset="100%" stopColor="var(--ink)" stopOpacity="0.4"/>
            </linearGradient>
          </defs>

          {/* Outermost ring — slowest rotation, dashed, breathing */}
          <g className="ring-outer" style={{ transformOrigin: '450px 450px' }}>
            <circle cx="450" cy="450" r="420" fill="none"
                    stroke="var(--ink)" strokeOpacity="0.35" strokeWidth="1"
                    strokeDasharray="2 10"/>
          </g>

          {/* Big draw-in ring */}
          <g className="ring-draw" style={{ transformOrigin: '450px 450px' }}>
            <circle cx="450" cy="450" r="340" fill="none"
                    stroke="url(#ring-fade)" strokeWidth="1.2"
                    pathLength="1" strokeDasharray="1 1" strokeDashoffset="1"/>
          </g>

          {/* Inner ring — counter-rotates, has one gap + orbiting dot */}
          <g className="ring-inner" style={{ transformOrigin: '450px 450px' }}>
            <circle cx="450" cy="450" r="220" fill="none"
                    stroke="var(--ink)" strokeWidth="1.2"
                    pathLength="100" strokeDasharray="78 100" strokeLinecap="round"/>
            <circle cx="450" cy="230" r="5" fill="var(--ink)"/>
          </g>

          {/* Pulsing inner-most ring */}
          <g className="ring-pulse" style={{ transformOrigin: '450px 450px' }}>
            <circle cx="450" cy="450" r="120" fill="none"
                    stroke="var(--ink)" strokeOpacity="0.55" strokeWidth="1"/>
          </g>

          {/* Tiny off-center accent ring */}
          <g className="ring-accent" style={{ transformOrigin: '620px 300px' }}>
            <circle cx="620" cy="300" r="48" fill="none"
                    stroke="var(--ink)" strokeOpacity="0.5" strokeWidth="1"
                    strokeDasharray="3 6"/>
          </g>
        </svg>
      </div>

      <style>{`
        .edu-rings {
          position: absolute;
          left: -320px; top: 50%; margin-top: -450px;
          width: 900px; height: 900px;
          opacity: 0.62;
          pointer-events: none;
          z-index: 1;
        }
        @keyframes edu-spin-cw {
          from { transform: rotate(0deg); }
          to   { transform: rotate(360deg); }
        }
        @keyframes edu-spin-ccw {
          from { transform: rotate(0deg); }
          to   { transform: rotate(-360deg); }
        }
        @keyframes edu-breathe {
          0%, 100% { transform: scale(1); opacity: 0.9; }
          50%      { transform: scale(1.06); opacity: 1; }
        }
        @keyframes edu-pulse {
          0%, 100% { transform: scale(0.92); opacity: 0.35; }
          50%      { transform: scale(1.14); opacity: 0.9; }
        }
        @keyframes edu-draw {
          0%   { stroke-dasharray: 0 1; stroke-dashoffset: 0; opacity: 0; }
          25%  { opacity: 1; }
          100% { stroke-dasharray: 1 0; stroke-dashoffset: 0; opacity: 1; }
        }
        .edu-rings .ring-outer {
          animation: edu-spin-cw 120s linear infinite, edu-breathe 14s ease-in-out infinite;
        }
        .edu-rings .ring-draw circle {
          animation: edu-draw 2.4s cubic-bezier(.65,.05,.2,1) both;
        }
        .edu-rings .ring-draw {
          animation: edu-spin-ccw 80s linear infinite 2.4s;
        }
        .edu-rings .ring-inner {
          animation: edu-spin-cw 28s linear infinite;
        }
        .edu-rings .ring-pulse {
          animation: edu-pulse 6s ease-in-out infinite;
        }
        .edu-rings .ring-accent {
          animation: edu-spin-ccw 18s linear infinite, edu-breathe 9s ease-in-out infinite;
        }
      `}</style>

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 56 }}>
          <span style={{
            width: 36, height: 36, borderRadius: '50%',
            border: '1.5px solid var(--ink)', position: 'relative',
          }} />
          <h3 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink)' }}>
            <span>sendar</span>
            <span style={{ opacity: 0.6 }}> education</span>
          </h3>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'end', minHeight: '50vh' }}>
          <div />
          <div>
            <h2 className="display reveal-headline reveal-lines" style={{
              fontSize: 'clamp(44px, 5.8vw, 88px)',
              color: 'var(--ink)',
              margin: 0,
              overflow: 'hidden',
            }}>
              <span>{t('education.title1')}</span>
              <span>{t('education.title2')}</span>
              <span>{t('education.title3')}</span>
              <span>{t('education.title4')}</span>
            </h2>
            <p className="reveal reveal-delay-1" style={{
              maxWidth: 520, marginTop: 32,
              fontSize: 16, lineHeight: 1.55, color: 'var(--ink)', opacity: 0.82,
            }}>
              {t('education.body')}
            </p>
            <div className="reveal reveal-delay-2" style={{ marginTop: 28 }}>
              <AppStoreButton label={t('about.appStore')} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function EducationPrograms({ t }) {
  const programs = t('education.programs') || [];
  return (
    <section className="section edu-programs" style={{
      background: 'var(--sand)',
      color: 'var(--ink)',
      paddingTop: 0,
      paddingBottom: 'calc(140px * var(--density))',
    }}>
      <div className="container reveal">
        <div className="kicker" style={{ color: 'var(--ink)', opacity: 0.72, marginBottom: 24 }}>
          {t('education.programsKicker')}
        </div>
      </div>
      <div className="prog-track-wrap reveal reveal-delay-1">
        <div className="prog-track">
          <div style={{ flexShrink: 0, width: 'calc(48px * var(--density))' }} />
          {programs.map((p, i) => (
            <ProgramCard key={i} item={p} cta={t('education.cta')} i={i} />
          ))}
          <div style={{ flexShrink: 0, width: 'calc(48px * var(--density))' }} />
        </div>
      </div>
      <style>{`
        .prog-track-wrap { position: relative; }
        .prog-track {
          display: flex; gap: 20px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding: 10px 0 24px;
          scrollbar-width: none;
        }
        .prog-track::-webkit-scrollbar { display: none; }
      `}</style>
    </section>
  );
}

function ProgramCard({ item, cta, i = 0 }) {
  return (
    <article className={`prog-card reveal-card stagger-${Math.min(i, 4)}`}>
      <div className={`prog-art ph prog-${item.tone}`}>
        <span className="ph-label" style={{
          background: 'rgba(0,0,0,0.4)', color: 'rgba(240,217,166,0.75)',
          position: 'absolute', top: 16, right: 16, margin: 0,
        }}>PHOTO · {item.title.slice(0, 12)}</span>
      </div>
      <div className="prog-overlay" />
      <div className="prog-body">
        <div className="prog-audience mono">{item.audience}</div>
        <h3 className="display prog-title">{item.title}</h3>
        <div className="prog-meta">
          {item.meta.map((m, i) => <div key={i}>{m}</div>)}
        </div>
        <a href="/education" className="news-card-cta" style={{ marginTop: 14, textDecoration: 'none' }}>{cta}</a>
      </div>

      <style>{`
        .prog-card {
          position: relative;
          flex-shrink: 0;
          width: 460px;
          height: 280px;
          border-radius: var(--radius-card);
          overflow: hidden;
          scroll-snap-align: start;
          transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
        }
        .prog-card:hover { transform: translateY(-4px); }
        .prog-art { position: absolute; inset: 0; }
        .prog-art::after {
          content: '';
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.8) 100%);
        }
        .prog-overlay { display: none; }
        .prog-body {
          position: absolute;
          left: 24px; right: 24px; bottom: 20px;
          color: #fff; z-index: 2;
        }
        .prog-audience { color: rgba(255,255,255,0.8); font-size: 11px; margin-bottom: 6px; }
        .prog-title {
          font-size: 24px; font-weight: 800;
          margin: 0 0 12px;
          color: #fff;
          line-height: 1.05;
          letter-spacing: -0.01em;
        }
        .prog-meta { font-size: 13px; color: rgba(255,255,255,0.78); line-height: 1.4; }
      `}</style>
    </article>
  );
}

Object.assign(window, { EducationIntro, EducationPrograms });