/* MC Reference Offer (SE) — "vi handplockade just er till vårt nya koncept".
   Egen amber/guld-stil för att skilja sig från resten av rapporten. */

function MCReferenceOffer() {
  const C = window.CLIENT_DATA;
  const cfg = window.TEMPLATE_CONFIG.referenceOffer;
  const reasons = (C.referenceReasons && C.referenceReasons.length)
    ? C.referenceReasons
    : ["Ni är exakt den typ av kund vi vill lansera detta med."];

  const spotsLeft = Math.max(1, cfg.spotsTotal - cfg.spotsTaken);
  const filledPct = Math.min(100, Math.round((cfg.spotsTaken / cfg.spotsTotal) * 100));

  return (
    <section className="mc-section" style={{ position: "relative" }}>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: -1,
        background: "radial-gradient(900px 500px at 50% 30%, rgba(245,158,11,.08), transparent 60%)",
      }} />

      <div className="mc-container">
        <Reveal>
          <div className="mc-eyebrow" style={{ color: "#F59E0B" }}>
            Referenskund-program · {cfg.spotsTaken} av {cfg.spotsTotal} platser tagna
          </div>
        </Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 920 }}>
            Vi handplockade <span style={{
              background: "linear-gradient(135deg,#F59E0B 0%,#FCD34D 50%,#F59E0B 100%)",
              WebkitBackgroundClip: "text", backgroundClip: "text",
              WebkitTextFillColor: "transparent",
            }}>{C.client.name}</span> till vårt nya program.
          </h2>
        </Reveal>
        <Reveal delay={0.1}>
          <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 680, marginTop: 18, lineHeight: 1.6 }}>
            Vi lanserar ett nytt managed-website-koncept i Sverige och letar efter {cfg.spotsTotal} referenskunder vi kan visa upp resultatet med. Det här är inte ett massmejl — vi byggde den här rapporten specifikt för er, för hand, innan vi hörde av oss.
          </p>
        </Reveal>

        <Reveal delay={0.15}>
          <div className="mc-panel mc-panel-bracket" style={{
            marginTop: 40, padding: 32,
            background: "linear-gradient(180deg, rgba(245,158,11,.04), rgba(255,255,255,.015))",
            border: "1px solid rgba(245,158,11,.25)",
          }}>
            <div className="mono" style={{ fontSize: 11, color: "#F59E0B", letterSpacing: ".15em", textTransform: "uppercase", marginBottom: 18 }}>
              ▸ Varför vi valde just er
            </div>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
              {reasons.map((r, i) => (
                <li key={i} style={{ display: "flex", gap: 14, fontSize: 15, lineHeight: 1.55, color: "#D4D4D4" }}>
                  <span style={{
                    flexShrink: 0, width: 26, height: 26, borderRadius: 6,
                    background: "linear-gradient(135deg,#F59E0B,#FCD34D)",
                    color: "#0A0A0A", fontWeight: 800, fontSize: 12,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "ui-monospace, Menlo, monospace",
                  }}>{i+1}</span>
                  <span>{r}</span>
                </li>
              ))}
            </ul>
          </div>
        </Reveal>

        <Reveal delay={0.2}>
          <div className="mc-stack-mobile" style={{
            marginTop: 24, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 24, alignItems: "stretch",
          }}>
            <div className="mc-panel mc-panel-bracket" style={{
              padding: 32,
              background: "linear-gradient(180deg, rgba(245,158,11,.06), rgba(245,158,11,.02))",
              border: "1px solid rgba(245,158,11,.3)",
            }}>
              <div className="mono" style={{ fontSize: 11, color: "#F59E0B", letterSpacing: ".15em", textTransform: "uppercase" }}>
                ▸ Referenskund-pris
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginTop: 16, flexWrap: "wrap" }}>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 800,
                  fontSize: "clamp(56px, 8vw, 88px)", lineHeight: .95, letterSpacing: "-.04em",
                  background: "linear-gradient(135deg,#F59E0B,#FCD34D)",
                  WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
                }}>
                  {cfg.introPriceSek.toLocaleString("sv-SE")} kr<span style={{ fontSize: ".4em", color: "#737373", WebkitTextFillColor: "#737373" }}>/mån</span>
                </div>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 600, fontSize: 24,
                  color: "#737373", textDecoration: "line-through",
                }}>
                  {cfg.fullPriceSek.toLocaleString("sv-SE")} kr/mån
                </div>
              </div>
              <div style={{ fontSize: 14, color: "#D4D4D4", marginTop: 14, lineHeight: 1.55 }}>
                Låst på <strong style={{ color: "#F59E0B" }}>{cfg.introPriceSek.toLocaleString("sv-SE")} kr/månad så länge ni stannar hos oss</strong> — även när vi höjer ordinariepriset till {cfg.fullPriceSek.toLocaleString("sv-SE")} kr/mån för resten av marknaden.
              </div>
              <div style={{ marginTop: 18, padding: "12px 14px", background: "rgba(0,0,0,.2)", borderRadius: 8, fontSize: 13, color: "#A3A3A3" }} className="mono">
                <strong style={{ color: "#fff" }}>Vad vi ber av er:</strong> {cfg.obligationLine}
              </div>
            </div>

            <div className="mc-panel" style={{ padding: 28, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div>
                <div className="mono" style={{ fontSize: 11, color: "#737373", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  ▸ Programstatus
                </div>
                <div style={{
                  fontFamily: "Bricolage Grotesque", fontWeight: 800,
                  fontSize: 56, lineHeight: 1, letterSpacing: "-.04em", color: "#fff", marginTop: 14,
                }}>
                  {spotsLeft} <span style={{ color: "#737373", fontSize: 24, fontWeight: 600 }}>av {cfg.spotsTotal} kvar</span>
                </div>
                <div style={{ marginTop: 18, height: 10, background: "rgba(255,255,255,.05)", borderRadius: 999, overflow: "hidden" }}>
                  <div style={{
                    height: "100%", width: `${filledPct}%`,
                    background: "linear-gradient(90deg,#F59E0B,#FCD34D)",
                    boxShadow: "0 0 12px rgba(245,158,11,.4)",
                  }} />
                </div>
                <div className="mono" style={{ fontSize: 11, color: "#737373", marginTop: 6 }}>
                  {cfg.spotsTaken} signade · {spotsLeft} kvar
                </div>
              </div>

              {cfg.deadlineLabel && (
                <div style={{ marginTop: 20, padding: "10px 14px", background: "rgba(230,57,70,.08)", border: "1px solid rgba(230,57,70,.2)", borderRadius: 8, fontSize: 12.5, color: "#FF6B6B" }} className="mono">
                  ⏰ {cfg.deadlineLabel}
                </div>
              )}

              <a href="#kontakt" style={{
                marginTop: 20, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                padding: "14px 22px", fontWeight: 700, fontSize: 14, borderRadius: 10,
                background: "linear-gradient(135deg,#F59E0B,#FCD34D)", color: "#0A0A0A",
                textDecoration: "none", letterSpacing: "-.01em",
                boxShadow: "0 12px 32px rgba(245,158,11,.25), inset 0 1px 0 rgba(255,255,255,.3)",
                fontFamily: "ui-monospace, Menlo, monospace",
              }}>
                Säkra er plats →
              </a>
            </div>
          </div>
        </Reveal>

        <Reveal delay={0.25}>
          <div className="mono" style={{ marginTop: 20, fontSize: 12, color: "#525252", textAlign: "center" }}>
            Detta erbjudande är unikt för {C.client.name}. När de {cfg.spotsTotal} referensplatserna är tagna gäller ordinariepriset {cfg.fullPriceSek.toLocaleString("sv-SE")} kr/mån för alla — även för er, om ni väntar.
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.MCReferenceOffer = MCReferenceOffer;