/* MC Pricing — Det här kostar mindre än ni redan förlorar.
   Stora prisargument från säljhandboken: 995 kr/mån, 0 startavgift, allt ingår. */

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

  // Räkna ut förlust per månad i kr (summa av alla brister med kr-tag)
  const monthlyLoss = 24000 + 18000 + 12000 + 8000 + 5000 + 4000; // = 71 000 kr

  return (
    <section className="mc-section">
      <div className="mc-container">
        <Reveal><div className="mc-eyebrow">Investering vs. förlust</div></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 1000 }}>
            Det här kostar <span className="mc-grad">mindre än ni redan förlorar.</span>
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 640, marginTop: 18, lineHeight: 1.6 }}>
            995 kr i månaden. Inga timpriser. Ingen startavgift. Allt — design, hosting, SEO, ändringar — ingår.
          </p>
        </Reveal>

        {/* Kontrast: 995 kr/mån vs. förlust/mån */}
        <Reveal delay={0.15}>
          <div className="mc-panel mc-panel-bracket" style={{ marginTop: 56, padding: 40 }}>
            <div className="mc-pricing-contrast" style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 32, alignItems: "center" }}>
              <div style={{ textAlign: "center" }}>
                <div className="mono" style={{ fontSize: 11, color: "#FF6B6B", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  ▸ Kostar att inte göra något
                </div>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 800,
                  fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1, letterSpacing: "-.04em",
                  color: "#FF6B6B", marginTop: 16,
                }}>
                  ≈ {monthlyLoss.toLocaleString("sv-SE")} kr
                </div>
                <div style={{ fontSize: 14, color: "#737373", marginTop: 10 }}>
                  per månad i missade offerter & jobb
                </div>
              </div>

              <div style={{ fontSize: 48, color: "#525252" }}>vs.</div>

              <div style={{ textAlign: "center" }}>
                <div className="mono" style={{ fontSize: 11, color: "#10B981", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  ▸ Kostar att fixa det
                </div>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 800,
                  fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1, letterSpacing: "-.04em",
                  color: "#10B981", marginTop: 16,
                }}>
                  995 kr
                </div>
                <div style={{ fontSize: 14, color: "#737373", marginTop: 10 }}>
                  per månad — allt ingår
                </div>
              </div>
            </div>

            <div style={{
              marginTop: 32, padding: "16px 20px",
              background: "rgba(16,185,129,.05)", border: "1px solid rgba(16,185,129,.2)",
              borderRadius: 10, textAlign: "center", fontSize: 15, color: "#D4D4D4",
            }}>
              Ni betalar <strong style={{ color: "#10B981" }}>71×</strong> mindre per månad än ni förlorar idag.
            </div>
          </div>
        </Reveal>

        {/* Vad ingår — 9 paneler */}
        <Reveal delay={0.2}>
          <div style={{ marginTop: 56 }}>
            <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 20 }}>
              ▸ Allt som ingår — för 995 kr/mån
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 12 }}>
              {C.included.map((it, i) => (
                <div key={i} className="mc-panel" style={{ padding: 22 }}>
                  <div style={{ fontSize: 22 }}>{it.icon}</div>
                  <div style={{
                    fontFamily: "Bricolage Grotesque", fontWeight: 700,
                    fontSize: 17, color: "#fff", marginTop: 10, letterSpacing: "-.01em",
                  }}>{it.title}</div>
                  <div style={{ fontSize: 13.5, color: "#A3A3A3", marginTop: 6, lineHeight: 1.55 }}>
                    {it.desc}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Prisjämförelse mot marknaden */}
        <Reveal delay={0.25}>
          <div style={{ marginTop: 64 }}>
            <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 20 }}>
              ▸ Vad alternativen kostar
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 12 }}>
              {C.pricingCompare.map((p, i) => (
                <div key={i} className={`mc-panel ${p.highlight ? "mc-panel-bracket" : ""}`} style={{
                  padding: 24,
                  border: p.highlight ? "1px solid rgba(230,57,70,.4)" : undefined,
                  background: p.highlight ? "rgba(230,57,70,.04)" : undefined,
                  position: "relative",
                }}>
                  {p.highlight && (
                    <div style={{
                      position: "absolute", top: -10, left: 16,
                      background: "#E63946", color: "#fff",
                      padding: "4px 10px", borderRadius: 6,
                      fontFamily: "ui-monospace, Menlo, monospace", fontSize: 10,
                      fontWeight: 700, letterSpacing: ".1em",
                    }}>
                      ER OFFERT
                    </div>
                  )}
                  <div style={{
                    fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 16,
                    color: p.highlight ? "#fff" : "#D4D4D4", letterSpacing: "-.01em",
                  }}>
                    {p.label}
                  </div>
                  <div style={{ marginTop: 16, paddingBottom: 14, borderBottom: "1px solid rgba(255,255,255,.06)" }}>
                    <div className="mono" style={{ fontSize: 10, color: "#737373", letterSpacing: ".1em", textTransform: "uppercase" }}>Startavgift</div>
                    <div style={{ fontSize: 18, color: p.highlight ? "#10B981" : "#A3A3A3", fontWeight: 600, marginTop: 2 }}>
                      {p.startup}
                    </div>
                  </div>
                  <div style={{ marginTop: 14, paddingBottom: 14, borderBottom: "1px solid rgba(255,255,255,.06)" }}>
                    <div className="mono" style={{ fontSize: 10, color: "#737373", letterSpacing: ".1em", textTransform: "uppercase" }}>Löpande</div>
                    <div style={{ fontSize: 18, color: "#D4D4D4", fontWeight: 600, marginTop: 2 }}>
                      {p.monthly}
                    </div>
                  </div>
                  <div style={{ marginTop: 14, paddingBottom: 14, borderBottom: "1px solid rgba(255,255,255,.06)" }}>
                    <div className="mono" style={{ fontSize: 10, color: "#737373", letterSpacing: ".1em", textTransform: "uppercase" }}>År 1 totalt</div>
                    <div style={{
                      fontFamily: "Bricolage Grotesque", fontWeight: 800, fontSize: 24,
                      color: p.highlight ? "#10B981" : "#FF6B6B", marginTop: 2, letterSpacing: "-.02em",
                    }}>
                      {p.yearOne}
                    </div>
                  </div>
                  <ul style={{ margin: "16px 0 0", padding: 0, listStyle: "none", display: "grid", gap: 8 }}>
                    {p.includes.map((line, j) => (
                      <li key={j} style={{
                        fontSize: 12.5, color: "#A3A3A3", lineHeight: 1.5,
                        paddingLeft: 18, position: "relative",
                      }}>
                        <span style={{
                          position: "absolute", left: 0, top: 1,
                          color: p.highlight ? "#10B981" : "#525252",
                          fontFamily: "ui-monospace, Menlo, monospace",
                        }}>{p.highlight ? "✓" : "·"}</span>
                        {line}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        {/* Garantier */}
        <Reveal delay={0.3}>
          <div style={{ marginTop: 64 }}>
            <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 20 }}>
              ▸ Det här lovar vi
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 12 }}>
              {C.guarantees.map((g, i) => (
                <div key={i} style={{
                  padding: 22, borderRadius: 12,
                  background: "rgba(255,255,255,.02)",
                  border: "1px solid rgba(255,255,255,.06)",
                }}>
                  <div style={{ fontSize: 24 }}>{g.icon}</div>
                  <div style={{
                    fontFamily: "Bricolage Grotesque", fontWeight: 700,
                    fontSize: 17, color: "#fff", marginTop: 10, letterSpacing: "-.01em",
                  }}>{g.title}</div>
                  <div style={{ fontSize: 13.5, color: "#A3A3A3", marginTop: 6, lineHeight: 1.55 }}>
                    {g.desc}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.MCPricing = MCPricing;