// Gamification — dark "night mode" section with interactive flame
function Gamification() {
  const flameRef = React.useRef(null);
  const [tilt, setTilt] = React.useState({ x: 0, y: 0 });

  const onMove = (e) => {
    if (!flameRef.current) return;
    const r = flameRef.current.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    const dx = (e.clientX - cx) / r.width;
    const dy = (e.clientY - cy) / r.height;
    setTilt({ x: Math.max(-1, Math.min(1, dx)), y: Math.max(-1, Math.min(1, dy)) });
  };
  React.useEffect(() => {
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section id="gami" className="section-pad" style={{ paddingBottom: 0 }}>
      <div className="night">
        <div className="night-glow-1"/>
        <div className="night-glow-2"/>
        <div className="container night-grid">
          <div>
            <span className="section-eyebrow">Гейміфікація</span>
            <h2 className="section-title">Стрік-режим. <br/>Як у грі.</h2>
            <p className="section-sub" style={{ marginTop: 12 }}>
              Стріки, XP, рівні, досягнення. Кожен день — це новий експ. Кожна правильна відповідь — новий рівень.
              Підготовка до НМТ перетворюється на гру, в яку хочеться повертатися.
            </p>

            {/* interactive flame */}
            <div ref={flameRef}
              style={{
                marginTop: 36,
                display: "inline-flex", alignItems: "center", gap: 24,
                padding: "20px 26px",
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.08)",
                borderRadius: 24,
                backdropFilter: "blur(8px)",
              }}>
              <div style={{
                transform: `translate(${tilt.x * 6}px, ${tilt.y * 6}px) rotate(${tilt.x * 8}deg)`,
                transition: "transform 200ms ease-out",
                filter: `drop-shadow(0 0 ${20 + Math.abs(tilt.x*20)}px rgba(249,115,22,0.7))`,
              }}>
                <Icon name="fire" size={56}/>
              </div>
              <div>
                <div style={{ fontSize: 44, fontWeight: 900, lineHeight: 1, letterSpacing: "-0.03em" }}>7</div>
                <div style={{ fontSize: 13, color: "rgba(226,232,240,0.6)", fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>днів поспіль</div>
              </div>
              <div style={{ borderLeft: "1px solid rgba(255,255,255,0.1)", paddingLeft: 24 }}>
                <div style={{ fontSize: 44, fontWeight: 900, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--o-400)" }}>+120</div>
                <div style={{ fontSize: 13, color: "rgba(226,232,240,0.6)", fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>XP сьогодні</div>
              </div>
            </div>
          </div>

          <div className="gami-cards">
            <div className="gami-card">
              <div style={{ width: 40, height: 40, background: "rgba(249,115,22,0.2)", color: "var(--o-400)", borderRadius: 12, display: "grid", placeItems: "center", marginBottom: 14 }}>
                <Icon name="bolt"/>
              </div>
              <div className="num">2 460</div>
              <div className="lbl">Загальний XP</div>
            </div>
            <div className="gami-card">
              <div style={{ width: 40, height: 40, background: "rgba(34,197,94,0.18)", color: "var(--g-400)", borderRadius: 12, display: "grid", placeItems: "center", marginBottom: 14 }}>
                <Icon name="book"/>
              </div>
              <div className="num">2 460</div>
              <div className="lbl">Питань пройдено</div>
            </div>
            <div className="gami-card">
              <div style={{ width: 40, height: 40, background: "rgba(96,165,250,0.18)", color: "var(--b-400)", borderRadius: 12, display: "grid", placeItems: "center", marginBottom: 14 }}>
                <Icon name="target"/>
              </div>
              <div className="num">82%</div>
              <div className="lbl">Точність</div>
            </div>
            <div className="gami-card">
              <div style={{ width: 40, height: 40, background: "rgba(250,204,21,0.18)", color: "var(--y-400)", borderRadius: 12, display: "grid", placeItems: "center", marginBottom: 14 }}>
                <Icon name="star"/>
              </div>
              <div className="num">23</div>
              <div className="lbl">Тем пройдено</div>
            </div>
            <div className="gami-card accent">
              <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
                <div style={{ width: 56, height: 56, background: "rgba(255,255,255,0.18)", borderRadius: 16, display: "grid", placeItems: "center" }}>
                  <span style={{ fontSize: 28 }}>🎓</span>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.85 }}>Рівень 3</div>
                  <div style={{ fontSize: 26, fontWeight: 900, letterSpacing: "-0.02em" }}>Літописець</div>
                  <div style={{ height: 6, background: "rgba(255,255,255,0.2)", borderRadius: 9999, marginTop: 8, overflow: "hidden" }}>
                    <div style={{ width: "62%", height: "100%", background: "#fff", borderRadius: 9999 }}/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Gamification = Gamification;