// projects.jsx — interactive project cases with animated charts

function ImpactChart({ kind, color }) {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        let start;
        const animate = (ts) => {
          if (!start) start = ts;
          const p = Math.min(1, (ts - start) / 1400);
          setProgress(p);
          if (p < 1) requestAnimationFrame(animate);
        };
        requestAnimationFrame(animate);
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const w = 280, h = 60;
  const ease = (x) => 1 - Math.pow(1 - x, 3);
  const p = ease(progress);
  const c = color || "oklch(82% 0.12 220)";

  if (kind === "growth") {
    // Hockey stick: developer adoption curve
    const points = [];
    for (let i = 0; i <= 30; i++) {
      const x = (i / 30) * w;
      const norm = i / 30;
      const y = h - 4 - (Math.pow(norm, 2.3) * (h - 8)) * p;
      points.push(`${x},${y}`);
    }
    return (
      <svg ref={ref} viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
        <line x1="0" y1={h-1} x2={w} y2={h-1} stroke="rgba(255,255,255,0.15)"/>
        <polyline points={points.join(" ")} fill="none" stroke={c} strokeWidth="1.5"/>
        <polygon points={`${points.join(" ")} ${w},${h} 0,${h}`} fill={c} opacity="0.12"/>
      </svg>
    );
  }

  if (kind === "speed") {
    // Two bars: weeks → minutes
    return (
      <svg ref={ref} viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
        <text x="0" y="14" fill="rgba(255,255,255,0.6)" fontSize="9" fontFamily="JetBrains Mono, monospace">VORHER</text>
        <rect x="60" y="6" width={(w - 70) * p} height="14" fill="rgba(255,255,255,0.18)" rx="2"/>
        <text x="0" y="44" fill={c} fontSize="9" fontFamily="JetBrains Mono, monospace">JETZT</text>
        <rect x="60" y="36" width={Math.max(8, (w - 70) * 0.05) * p} height="14" fill={c} rx="2"/>
      </svg>
    );
  }

  if (kind === "cost") {
    // Cost reduction: descending bars
    return (
      <svg ref={ref} viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
        <line x1="0" y1={h-1} x2={w} y2={h-1} stroke="rgba(255,255,255,0.15)"/>
        {[1.0, 0.85, 0.78, 0.7, 0.65, 0.6].map((v, i) => {
          const bw = (w - 12) / 6;
          const bh = (h - 8) * v * Math.min(1, p * 1.5 - i * 0.08);
          const isLast = i === 5;
          return (
            <rect key={i}
              x={i * bw + 2} y={h - 4 - Math.max(0, bh)}
              width={bw - 4} height={Math.max(0, bh)}
              fill={isLast ? c : "rgba(255,255,255,0.18)"}
              rx="1"/>
          );
        })}
      </svg>
    );
  }
  return null;
}

function Projects({ t }) {
  const charts = ["growth", "speed", "cost"];
  return (
    <section className="section" data-screen-label="04 Projekte">
      <div className="section-tag">{t.projects.tag}</div>
      <h2 className="section-title">{t.projects.title} <em>{t.projects.titleEm}</em></h2>
      <p className="section-sub">{t.projects.sub}</p>
      <div className="proj-list">
        {t.projects.items.map((p, i) => (
          <article key={p.n} className="proj">
            <div className="id">{p.n}</div>
            <div>
              <h3>{p.t}<span className="client">{p.c}</span></h3>
            </div>
            <p>{p.d}</p>
            <div className="impact">
              <div className="label">IMPACT</div>
              <div className="stat">
                <span className="num">{p.stat.num}</span>
                <span className="unit">{p.stat.unit}</span>
              </div>
              <div className="desc">{p.stat.desc}</div>
              <div className="chart"><ImpactChart kind={charts[i]}/></div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

window.Projects = Projects;