/* MC Time Machine — drag a slider between 0% (today) and 100% (after).
   Numbers, bars, status all morph in real-time. */

function MCTimeMachine() {
  const C = window.CLIENT_DATA;
  const [t, setT] = useState(0); // 0 = before, 1 = after

  const score = Math.round(C.scores.before.total + (C.scores.after.total - C.scores.before.total) * t);
  const lerp = (a, b) => Math.round(a + (b - a) * t);

  return (
    <section id="timemachine" className="mc-section">
      <div className="mc-container">
        <Reveal><div className="mc-eyebrow">Tidsmaskin</div></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 920 }}>
            Dra reglaget. Se sajten <span className="mc-grad">resa sig.</span>
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 620, marginTop: 18, lineHeight: 1.6 }}>
            Vänster: er sajt idag. Höger: vad ni får. Allt däremellan är resan.
          </p>
        </Reveal>

        {/* Stage */}
        <div style={{ marginTop: 56 }}>
          <div className="mc-panel mc-panel-bracket" style={{ padding: 32 }}>
            {/* Big score readout */}
            <div className="mc-tm-readout" style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  SEO-betyg just nu
                </div>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 800,
                  fontSize: "clamp(72px, 14vw, 200px)", lineHeight: .9, letterSpacing: "-.04em",
                  color: t < 0.4 ? "#FF6B6B" : t < 0.7 ? "#F59E0B" : "#10B981",
                  textShadow: `0 0 60px ${t < 0.4 ? "rgba(230,57,70,.4)" : t < 0.7 ? "rgba(245,158,11,.4)" : "rgba(16,185,129,.4)"}`,
                  transition: "color .3s, text-shadow .3s",
                  marginTop: 6,
                }}>
                  {score}
                  <span style={{ fontSize: ".4em", color: "#737373" }}>/100</span>
                </div>
                <div className="mono" style={{ fontSize: 13, color: t < .5 ? "#FF6B6B" : "#10B981", marginTop: 4 }}>
                  {t < 0.05 ? "▸ Status: Underkänd" : t < 0.5 ? "▸ Status: Pågår…" : t < 0.95 ? "▸ Status: Nästan klar" : "▸ Status: Topp 5 % i Sverige"}
                </div>
              </div>

              {/* Categories */}
              <div style={{ flex: 1, minWidth: 320, maxWidth: 540, display: "flex", flexDirection: "column", gap: 8 }}>
                {C.categories.map((cat, i) => {
                  const v = lerp(cat.before, cat.after);
                  return (
                    <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 50px", gap: 12, alignItems: "center" }}>
                      <div>
                        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                          <span style={{ fontSize: 12, color: "#A3A3A3" }}>{cat.label}</span>
                        </div>
                        <div style={{ height: 6, background: "rgba(255,255,255,.05)", borderRadius: 999, overflow: "hidden" }}>
                          <div style={{
                            height: "100%", width: `${v}%`,
                            background: v < 50 ? "linear-gradient(90deg,#E63946,#FF6B6B)" : v < 80 ? "linear-gradient(90deg,#FF6B6B,#F59E0B)" : "linear-gradient(90deg,#F59E0B,#10B981)",
                            transition: "background .3s",
                          }} />
                        </div>
                      </div>
                      <div className="mono" style={{ textAlign: "right", fontSize: 13, color: "#fff", fontWeight: 600 }}>{v}</div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* The slider — full width */}
            <div style={{ marginTop: 40 }}>
              <div style={{ position: "relative", height: 60 }}>
                <div style={{ position: "absolute", inset: "27px 0", height: 6, background: "rgba(255,255,255,.05)", borderRadius: 999 }} />
                <div style={{ position: "absolute", left: 0, top: 27, height: 6, width: `${t*100}%`, background: "linear-gradient(90deg,#E63946,#F59E0B,#10B981)", borderRadius: 999, boxShadow: "0 0 16px rgba(245,158,11,.4)" }} />
                <input type="range" min="0" max="1000" value={t * 1000}
                  onChange={(e) => setT(e.target.value / 1000)}
                  style={{
                    position: "absolute", inset: 0, width: "100%", height: 60,
                    opacity: 0, cursor: "ew-resize", margin: 0,
                  }}
                />
                <div style={{
                  position: "absolute", left: `calc(${t*100}% - 16px)`, top: 14,
                  width: 32, height: 32, borderRadius: 999,
                  background: "linear-gradient(135deg,#E63946,#F59E0B)",
                  border: "2px solid #fff",
                  boxShadow: "0 8px 24px rgba(0,0,0,.4), 0 0 0 6px rgba(245,158,11,.15)",
                  pointerEvents: "none", transition: "left .05s",
                }} />
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
                <span className="mono" style={{ fontSize: 11, color: "#FF6B6B", letterSpacing: ".1em", textTransform: "uppercase" }}>
                  ◀ Idag · {C.client.oldStack || "Nuvarande sajt"}
                </span>
                <span className="mono" style={{ fontSize: 11, color: "#10B981", letterSpacing: ".1em", textTransform: "uppercase" }}>
                  Ny sajt — av oss ▶
                </span>
              </div>
            </div>

            {/* Quick presets */}
            <div style={{ display: "flex", gap: 8, marginTop: 20, flexWrap: "wrap" }}>
              {[{ l: "Idag", v: 0 }, { l: "Mitten av resan", v: 0.5 }, { l: "Vid lansering", v: 1 }].map(p => (
                <button key={p.l} onClick={() => setT(p.v)} style={{
                  padding: "8px 14px", fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12,
                  background: Math.abs(t - p.v) < .02 ? "rgba(230,57,70,.12)" : "rgba(255,255,255,.04)",
                  border: `1px solid ${Math.abs(t - p.v) < .02 ? "rgba(230,57,70,.3)" : "rgba(255,255,255,.08)"}`,
                  color: Math.abs(t - p.v) < .02 ? "#FF6B6B" : "#A3A3A3", borderRadius: 6, cursor: "pointer",
                }}>{p.l}</button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.MCTimeMachine = MCTimeMachine;