// scene-skills.jsx — Section 3: scroll-driven 3D fan grid

const SKILL_CATS = [
  { icon: "layers", title: "Analytics & BI", tags: ["Power BI", "DAX", "RLS", "Tableau", "Power Query", "Excel (VBA, Macros)"] },
  { icon: "code",   title: "Programming & Data",  tags: ["Python", "Pandas", "Matplotlib", "SQL", "MySQL", "Google Colab"] },
  { icon: "tool",   title: "Data Operations",  tags: ["ETL Pipelines", "Data Wrangling", "Data Modeling", "Aggregation", "Business Logic"] },
  { icon: "spark",  title: "Analytical Techniques",    tags: ["RCA", "KPI Tracking", "Metrics Design", "Segmentation", "Market Analysis"] },
  { icon: "zap",    title: "AI & Automation", tags: ["ChatGPT", "Excel AI", "Power BI Copilot", "GenAI Workflows"] },
  { icon: "circle", title: "Communication",  tags: ["Stakeholder Reporting", "Strategic Storytelling", "Cross-functional"] },
];

const SKILL_ICON = (k) => ({
  layers: <ILayers size={20}/>,
  code:   <ICode size={20}/>,
  tool:   <ITool size={20}/>,
  spark:  <ISpark size={20}/>,
  zap:    <IZap size={20}/>,
  circle: <ICircleDot size={20}/>,
}[k]);

function Skills() {
  const [ref, p] = useElementProgress();
  // p ~0.0 entering bottom → ~0.5 centered → ~1.0 leaving top
  // Header zoom-in 0.0..0.35; cards stagger zoom 0.15..0.6; whole section
  // gets a slight zoom-out as it leaves (0.7..1.0).
  const headP   = clamp((p - 0.0) / 0.30);
  const exitP   = clamp((p - 0.7) / 0.3);
  const sceneScale = lerp(1, 0.96, exitP);
  const sceneOpacity = lerp(1, 0.4, exitP);

  return (
    <section id="skills" className="skills-stage scene" ref={ref}
             style={{ transform: `scale(${sceneScale.toFixed(3)})`, opacity: sceneOpacity }}>
      <div className="wrap">
        <div className="section-head" style={{
          opacity: headP,
          transform: `translateY(${lerp(40, 0, headP).toFixed(1)}px) scale(${lerp(0.95, 1, headP).toFixed(3)})`,
          transition: "none",
        }}>
          <span className="eyebrow">// Skills</span>
          <h2 className="h2">What I work with.</h2>
          <p>The stack I reach for — and why. Not exhaustive, just honest.</p>
        </div>

        <div className="skills-grid">
          {SKILL_CATS.map((c, i) => {
            // each card animates between its own [start, end] window of p
            const start = 0.10 + i * 0.05;
            const end   = start + 0.30;
            const cp = clamp((p - start) / (end - start));
            const opacity = cp;
            const ty = lerp(60, 0, cp);
            const sc = lerp(0.88, 1, cp);
            const rx = lerp(14, 0, cp);  // subtle 3D
            return (
              <div key={c.title} className="skill-card" style={{
                opacity,
                transform: `translateY(${ty.toFixed(1)}px) scale(${sc.toFixed(3)}) rotateX(${rx.toFixed(1)}deg)`,
                transition: "none",
              }}>
                <span className="skill-icon">{SKILL_ICON(c.icon)}</span>
                <h3>{c.title}</h3>
                <div className="skill-tags">
                  {c.tags.map((t) => <span key={t} className="code-tag">{t}</span>)}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Skills });