/* Learning section — skills in development */

const { useState: useLS, useEffect: useLE, useRef: useLR } = React;

function Learning({ t }) {
  const [secRef, secIn] = window.PortfolioPart1.useReveal();
  const [progress, setProgress] = useLS(0);

  useLE(() => {
    if (!secIn) return;
    let p = 0;
    const id = setInterval(() => {
      p = Math.min(p + 0.02, 1);
      setProgress(p);
      if (p >= 1) clearInterval(id);
    }, 30);
    return () => clearInterval(id);
  }, [secIn]);

  return (
    <section id="learning" ref={secRef}>
      <div className={`section-tag reveal ${secIn ? 'in' : ''}`}>{t.skills.learningTag}</div>
      <h2 className={`section-title reveal d1 ${secIn ? 'in' : ''}`}>
        {t.skills.learningTitle.map((seg, i) => typeof seg === 'string' ? <span key={i}>{seg}</span> : seg)}
      </h2>
      <p className={`reveal d2 ${secIn ? 'in' : ''}`} style={{ color: 'var(--fg-dim)', marginTop: '-40px', marginBottom: '40px', fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>
        {t.skills.learningSub}
      </p>

      <div className="learning-grid">
        {t.skills.learning.map((item, i) => (
          <LearningCard key={i} idx={i} item={item} secIn={secIn} progress={progress} />
        ))}
      </div>
    </section>
  );
}

function LearningCard({ idx, item, secIn, progress }) {
  // Stagger fill per card
  const localProg = Math.max(0, Math.min(1, (progress - idx * 0.08) / 0.6));
  const pct = Math.round(localProg * (40 + idx * 12));
  return (
    <div className={`learning-card reveal d${(idx % 3) + 1} ${secIn ? 'in' : ''}`}>
      <div className="learning-head">
        <div className="learning-lang">{item.lang}</div>
        <div className="learning-status">
          <span className="learning-pulse" />
          <span>{item.status}</span>
        </div>
      </div>

      <div className="learning-bar-wrap">
        <div className="learning-bar" style={{ transform: `scaleX(${localProg})` }} />
        <div className="learning-bar-pct">{pct}%</div>
      </div>

      <div className="learning-topics">
        {item.topics.map((tp, j) => (
          <span key={j} className="learning-chip" style={{
            opacity: secIn ? 1 : 0,
            transform: secIn ? 'translateY(0)' : 'translateY(8px)',
            transition: `all .5s cubic-bezier(.2,.8,.2,1) ${0.4 + idx * 0.1 + j * 0.06}s`
          }}>
            {tp}
          </span>
        ))}
      </div>

      <div className="learning-foot">
        <span className="learning-icon">{['{', '⟨', '⌥', 'λ'][idx % 4]}</span>
        <svg width="100%" height="40" viewBox="0 0 200 40" preserveAspectRatio="none">
          <path
            d={`M 0 30 Q 50 ${30 - idx * 4} 100 25 T 200 ${15 - idx * 2}`}
            stroke="var(--accent)" strokeWidth="1" fill="none" opacity={localProg}
            strokeDasharray="3 3"
          />
        </svg>
      </div>
    </div>
  );
}

window.PortfolioLearning = { Learning };