/* Hero — "Live SEO Scan" terminal that boots, scans the customer's site,
   and reveals the verdict. Fully-staged sequence with status lines. */

function MCScan() {
  const C = window.CLIENT_DATA;
  const [phase, setPhase] = useState(0); // 0 boot, 1 scanning, 2 verdict
  const [logIdx, setLogIdx] = useState(0);
  const [progress, setProgress] = useState(0);

  // Per-client scan-rader (C.scanLogs) är källan — de speglar den faktiska
  // analysen av kundens sajt. Faller tillbaka till generiska default-rader
  // bara om en rapport saknar scanLogs (bakåtkompatibilitet).
  const logs = useMemo(() => (
    Array.isArray(C.scanLogs) && C.scanLogs.length
      ? C.scanLogs
      : [
          `> ansluter till ${C.client.domain}…`,
          `> ssl-certifikat: saknas · VARNING`,
          `> sidladdning: 4.8s · KRITISKT`,
          `> meta-beskrivning: saknas`,
          `> delningsförhandsvisning: saknas`,
          `> ortssidor: 1 av 4`,
          `> bedömer 13 kontrollpunkter…`,
          `> resultat klart.`,
        ]
  ), [C]);

  useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 800);
    return () => clearTimeout(t1);
  }, []);

  useEffect(() => {
    if (phase !== 1) return;
    let i = 0;
    const id = setInterval(() => {
      i++;
      setLogIdx(i);
      setProgress(Math.min(100, (i / logs.length) * 100));
      if (i >= logs.length) {
        clearInterval(id);
        setTimeout(() => setPhase(2), 600);
      }
    }, 380);
    return () => clearInterval(id);
  }, [phase, logs.length]);

  return (
    <section className="mc-section" style={{ paddingTop: 140, minHeight: "100vh", display: "flex", alignItems: "center" }}>
      <div className="mc-container" style={{ width: "100%" }}>
        <div className="mc-stack-mobile" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}>
          {/* Left: copy */}
          <div>
            <Reveal>
              <div className="mc-eyebrow">Skanningsrapport · {C.client.reportDate}</div>
            </Reveal>
            <Reveal delay={0.05}>
              <h1 className="mc-h1" style={{ marginTop: 24 }}>
                Vi har röntgat<br />
                <span className="mc-grad">{C.client.domain}</span><br />
                <span style={{ color: "rgba(255,255,255,.7)" }}>och hittat allt.</span>
              </h1>
            </Reveal>
            <Reveal delay={0.12}>
              <p style={{ marginTop: 26, fontSize: 18, lineHeight: 1.6, color: "#A3A3A3", maxWidth: 560 }}>
                Vad du ser till höger är en <strong style={{ color: "#fff" }}>levande genomlysning</strong> av er nuvarande sajt. Varje rad är något som påverkar om kunder hittar er på Google — eller väljer någon annan.
              </p>
            </Reveal>
            <Reveal delay={0.18}>
              <div style={{ display: "flex", gap: 10, marginTop: 32, flexWrap: "wrap" }}>
                <a href="#timemachine" style={btnPrimary}>Se före vs efter →</a>
                <a href="#kontakt" style={btnGhost}>Säg ja, kör igång</a>
              </div>
            </Reveal>
            <Reveal delay={0.24}>
              <div className="mc-hero-kpi" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, maxWidth: 540 }}>
                {[
                  { l: "Brister hittade", v: C.issues.length, c: "#FF6B6B" },
                  { l: "Nuvarande betyg", v: C.scores.before.total, c: "#F59E0B" },
                  { l: "Nytt betyg", v: C.scores.after.total, c: "#10B981" },
                ].map((s, i) => (
                  <div key={i} className="mc-panel" style={{ padding: "14px 16px" }}>
                    <div className="mono" style={{ fontSize: 10, color: "#737373", letterSpacing: ".1em", textTransform: "uppercase" }}>{s.l}</div>
                    <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 800, fontSize: 32, color: s.c, lineHeight: 1.1, marginTop: 4 }}>
                      <AnimatedNumber end={s.v} duration={1400} delay={0.4 + i*.1} />
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          {/* Right: terminal */}
          <Reveal delay={0.1}>
            <div className="mc-panel mc-panel-bracket mc-hero-terminal" style={{ padding: 0, overflow: "hidden", minHeight: 460 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 16px", borderBottom: "1px solid rgba(255,255,255,.06)" }}>
                <span style={{ width: 10, height: 10, borderRadius: 999, background: "#E63946" }} />
                <span style={{ width: 10, height: 10, borderRadius: 999, background: "#F59E0B" }} />
                <span style={{ width: 10, height: 10, borderRadius: 999, background: "#10B981" }} />
                <span className="mono" style={{ marginLeft: 10, fontSize: 11, color: "#737373" }}>wlm-scan · {C.client.domain}</span>
                <span style={{ marginLeft: "auto" }} className="mc-tag ok">direkt</span>
              </div>
              <div style={{ padding: "20px 22px", minHeight: 380, fontFamily: "ui-monospace, Menlo, monospace", fontSize: 13, lineHeight: 1.85 }}>
                <div style={{ color: "#10B981" }}>
                  $ wlm-skanna {C.client.domain} <span className="mc-cursor" />
                </div>
                {phase >= 1 && logs.slice(0, logIdx).map((l, i) => (
                  <div key={i} style={{
                    color: l.includes("CRIT") ? "#FF6B6B" : l.includes("WARN") || l.includes("missing") ? "#F59E0B" : "#A3A3A3",
                    opacity: 0, animation: "fadeUp .3s forwards",
                  }}>
                    {l}
                  </div>
                ))}
                {phase === 1 && (
                  <div style={{ marginTop: 20 }}>
                    <div style={{ height: 6, background: "rgba(255,255,255,.05)", borderRadius: 999, overflow: "hidden" }}>
                      <div style={{ width: `${progress}%`, height: "100%", background: "linear-gradient(90deg,#E63946,#F59E0B)", transition: "width .3s linear" }} />
                    </div>
                    <div className="mono" style={{ fontSize: 11, color: "#737373", marginTop: 8 }}>
                      Skannar… {Math.round(progress)}%
                    </div>
                  </div>
                )}
                {phase === 2 && (
                  <div style={{ marginTop: 28, padding: 20, border: "1px solid rgba(230,57,70,.3)", borderRadius: 12, background: "rgba(230,57,70,.06)", animation: "fadeUp .5s" }}>
                    <div className="mono" style={{ fontSize: 11, color: "#FF6B6B", letterSpacing: ".15em", textTransform: "uppercase" }}>
                      ▶ Resultat
                    </div>
                    <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 800, fontSize: 38, color: "#fff", marginTop: 6, letterSpacing: "-.03em" }}>
                      {C.scores.before.total} <span style={{ color: "#737373" }}>/100</span>
                      <span style={{ display: "inline-block", margin: "0 14px", color: "#525252" }}>→</span>
                      <span className="mc-grad">{C.scores.after.total}</span>
                    </div>
                    <div style={{ fontSize: 13, color: "#A3A3A3", marginTop: 6 }}>
                      {C.issues.length} brister · 13 kontroller · ny sajt redo att lansera
                    </div>
                  </div>
                )}
                <style>{`@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}`}</style>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const btnPrimary = {
  display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 22px",
  fontWeight: 600, fontSize: 14, borderRadius: 10, color: "#fff",
  background: "linear-gradient(135deg,#E63946,#FF6B6B)",
  boxShadow: "0 12px 32px rgba(230,57,70,.25), inset 0 1px 0 rgba(255,255,255,.2)",
  textDecoration: "none", letterSpacing: "-.01em",
  fontFamily: "ui-monospace, Menlo, monospace",
};
const btnGhost = {
  display: "inline-flex", alignItems: "center", gap: 10, padding: "14px 22px",
  fontWeight: 600, fontSize: 14, borderRadius: 10, color: "#FAFAF9",
  background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.12)",
  textDecoration: "none", letterSpacing: "-.01em",
  fontFamily: "ui-monospace, Menlo, monospace",
};

Object.assign(window, { MCScan, btnPrimary, btnGhost });