/* global React */

/* ============================================
   SKILLS
   ============================================ */

const SKILLS = [
  { name: 'JavaScript', icon: 'JS', lvl: 0.92, color: '#f0db4f' },
  { name: 'React.js', icon: 'R', lvl: 0.90, color: '#5ef3ff' },
  { name: 'Vue.js', icon: 'V', lvl: 0.88, color: '#42b883' },
  { name: 'Node.js', icon: 'N', lvl: 0.80, color: '#7af0c2' },
  { name: 'Express.js', icon: 'Ex', lvl: 0.78, color: '#ffffff' },
  { name: 'Python', icon: 'Py', lvl: 0.80, color: '#4d9fff' },
  { name: 'Django', icon: 'Dj', lvl: 0.75, color: '#0c4b33' },
  { name: 'Tailwind CSS', icon: '~', lvl: 0.90, color: '#38bdf8' },
  { name: 'SQL · MySQL', icon: 'DB', lvl: 0.82, color: '#ff7ad1' },
  { name: 'MongoDB', icon: 'M', lvl: 0.75, color: '#7af0c2' },
  { name: 'Git · GitHub', icon: 'G', lvl: 0.88, color: '#a26bff' },
  { name: 'HTML · CSS', icon: '◇', lvl: 0.95, color: '#ff7ad1' },
];

function SkillCard({ s, i }) {
  const ref = React.useRef(null);
  const inRef = React.useRef(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.classList.add('is-in');
          inRef.current = true;
          io.unobserve(el);
        }
      });
    }, { threshold: 0.2 });
    io.observe(el);

    const move = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--mx', `${e.clientX - r.left}px`);
      el.style.setProperty('--my', `${e.clientY - r.top}px`);
    };
    el.addEventListener('mousemove', move);
    return () => { io.disconnect(); el.removeEventListener('mousemove', move); };
  }, []);

  return (
    <div className="skill-card reveal" ref={ref} style={{ '--lvl': s.lvl, transitionDelay: `${(i % 4) * 0.06}s` }}>
      <div className="flex" style={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div className="skill-icon" style={{ color: s.color, boxShadow: `0 0 24px ${s.color}40` }}>
          {s.icon}
        </div>
        <span className="lvl">{Math.round(s.lvl * 100).toString().padStart(2, '0')}</span>
      </div>
      <div>
        <div className="name">{s.name}</div>
        <div className="skill-bar"><div className="skill-bar-fill" /></div>
      </div>
    </div>
  );
}

function Skills() {
  return (
    <section id="skills" data-screen-label="03 Skills">
      <div className="container">
        <div className="skills-head">
          <div className="reveal">
            <span className="eyebrow eyebrow-dot">/ 02 — Toolkit</span>
            <h2 className="section-title" style={{ marginTop: 22 }}>
              A versatile <span className="alt">stack</span>,<br/>
              built for the modern web.
            </h2>
          </div>
          <div className="reveal reveal-delay-2">
            <p className="section-lead">
              From frontend frameworks to backend APIs and databases — a
              practical toolkit refined through real-world projects and
              professional experience across multiple teams.
            </p>
            <div className="skill-orb-wrap">
              <div className="skill-orb">
                <div className="ring r2"></div>
                <div className="ring r1"></div>
                <div className="orb-core float-slow"></div>
              </div>
            </div>
          </div>
        </div>

        <div className="skill-grid">
          {SKILLS.map((s, i) => <SkillCard key={s.name} s={s} i={i} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Skills, SKILLS });