/* MC Impact — den affärsmässiga "money shot": mer intäkter, mindre tid */

function MCImpact() {
  const C = window.CLIENT_DATA;
  const r = C.roi;

  // Lead-räknare-animation
  const [leadCount, setLeadCount] = useState(0);
  const targetLeads = r.projected6mo.leadsFromWebsite;
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        let n = 0;
        const id = setInterval(() => {
          n++; setLeadCount(n);
          if (n >= targetLeads) clearInterval(id);
        }, 90);
        io.disconnect();
      }
    }, { rootMargin: "0px 0px -10% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [targetLeads]);

  return (
    <section className="mc-section">
      <div className="mc-container">
        <Reveal><div className="mc-eyebrow">Vad det här är värt för er</div></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 980 }}>
            Mer pengar in. <span className="mc-grad">Mindre tid förbränt.</span>
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 640, marginTop: 18, lineHeight: 1.6 }}>
            Skippa de tekniska detaljerna. Det här är vad ni faktiskt får tillbaka i kalendern och på kontot.
          </p>
        </Reveal>

        {/* Stora siffror */}
        <div ref={ref} style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16 }}>
          {C.businessImpact.map((b, i) => (
            <Reveal key={i} delay={i * 0.06}>
              <div className="mc-panel mc-panel-bracket" style={{ padding: 28, height: "100%" }}>
                <div style={{ fontSize: 26 }}>{b.icon}</div>
                <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase", marginTop: 12 }}>
                  {b.title}
                </div>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 800,
                  fontSize: "clamp(28px, 3.5vw, 40px)", lineHeight: 1.05,
                  letterSpacing: "-.03em", color: "#fff", marginTop: 8,
                }}>
                  <span className="mc-grad">{b.headline}</span>
                </div>
                <div style={{ fontSize: 13.5, color: "#A3A3A3", marginTop: 14, lineHeight: 1.55 }}>
                  {b.detail}
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Lead-jämförelse */}
        <Reveal delay={0.2}>
          <div className="mc-panel mc-panel-bracket" style={{ marginTop: 32, padding: 32 }}>
            <div className="mono" style={{ fontSize: 11, color: "#FF6B6B", letterSpacing: ".15em", textTransform: "uppercase" }}>
              ▸ Offerter via sajten — per månad
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 20, alignItems: "center" }}>
              <div>
                <div className="mono" style={{ fontSize: 12, color: "#737373" }}>Idag</div>
                <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
                  {Array.from({ length: r.currentMonthly.leadsFromWebsite }).map((_, i) => (
                    <span key={i} style={{ width: 26, height: 26, borderRadius: 6, background: "rgba(230,57,70,.15)", border: "1px solid rgba(230,57,70,.3)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13 }}>👤</span>
                  ))}
                </div>
                <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 800, fontSize: 48, color: "#FF6B6B", marginTop: 12, letterSpacing: "-.03em" }}>
                  {r.currentMonthly.leadsFromWebsite} <span style={{ fontSize: 18, color: "#737373" }}>nya offerter / mån</span>
                </div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 12, color: "#10B981" }}>Efter 6 månader</div>
                <div style={{ display: "flex", gap: 6, marginTop: 12, flexWrap: "wrap" }}>
                  {Array.from({ length: leadCount }).map((_, i) => (
                    <span key={i} style={{
                      width: 26, height: 26, borderRadius: 6,
                      background: "rgba(16,185,129,.15)", border: "1px solid rgba(16,185,129,.3)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      fontSize: 13,
                      animation: "popIn .4s",
                    }}>👤</span>
                  ))}
                </div>
                <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 800, fontSize: 48, color: "#10B981", marginTop: 12, letterSpacing: "-.03em" }}>
                  {leadCount} <span style={{ fontSize: 18, color: "#737373" }}>nya offerter / mån</span>
                </div>
              </div>
            </div>
            <style>{`@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}`}</style>
          </div>
        </Reveal>

        {/* Investeringen */}
        <Reveal delay={0.25}>
          <div style={{ marginTop: 24, padding: "20px 28px", borderRadius: 14, background: "linear-gradient(135deg, rgba(230,57,70,.06), rgba(16,185,129,.06))", border: "1px solid rgba(255,255,255,.08)", display: "flex", flexWrap: "wrap", justifyContent: "space-between", alignItems: "center", gap: 20 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase" }}>Vad det kostar</div>
              <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 28, color: "#fff", marginTop: 4 }}>
                {r.investment.monthlyFee.toLocaleString("sv-SE")} kr/mån
              </div>
            </div>
            <div style={{ fontSize: 32, color: "#525252" }}>→</div>
            <div>
              <div className="mono" style={{ fontSize: 11, color: "#10B981", letterSpacing: ".15em", textTransform: "uppercase" }}>Tjänar tillbaka det på</div>
              <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 28, color: "#10B981", marginTop: 4 }}>
                {r.investment.paybackMonths} extra jobb
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.MCImpact = MCImpact;