/* MC Chatbot section + CTA + Opportunities */

function MCChatbot() {
  const C = window.CLIENT_DATA;
  const [messages, setMessages] = useState([{ role: "assistant", content: C.chatbot.welcomeMessage }]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, loading]);

  const send = async (text) => {
    if (!text || loading) return;
    const newMsgs = [...messages, { role: "user", content: text }];
    setMessages(newMsgs); setInput(""); setLoading(true);
    try {
      const reply = await window.claude.complete({
        messages: [{ role: "user", content: `${C.chatbot.systemPrompt}\n\n---\nSamtal:\n${newMsgs.map(m => (m.role === "user" ? "Kund" : C.chatbot.botName) + ": " + m.content).join("\n")}\n${C.chatbot.botName}:` }],
      });
      setMessages([...newMsgs, { role: "assistant", content: reply.trim() }]);
    } catch {
      setMessages([...newMsgs, { role: "assistant", content: "Hoppsan, något gick fel — testa igen." }]);
    } finally { setLoading(false); }
  };

  return (
    <section className="mc-section">
      <div className="mc-container">
        <Reveal><div className="mc-eyebrow">Bonus · ingen extra kostnad</div></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18 }}>
            En AI som svarar på era kunder<br/>
            <span className="mc-grad">medan ni sover.</span>
          </h2>
        </Reveal>

        <div className="mc-stack-mobile" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 40, alignItems: "start" }}>
          <Reveal delay={0.1}>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {[
                { t: "Tränad på ert företag", d: "Priser, garantier, områden, vanliga frågor — vi matar boten med er info." },
                { t: "Aldrig stängt", d: "Svarar mitt i natten, på lunchen, under semestern. Ni missar inga leads." },
                { t: "Bokar hembesök", d: "Boten samlar kontaktuppgifter och skickar dem direkt till er mejl." },
                { t: "Ingår i ert paket", d: "Ingen extra kostnad. Inga 'från X kr/mån'. Bara ingår." },
              ].map((f, i) => (
                <div key={i} className="mc-panel" style={{ padding: 18, display: "flex", gap: 14 }}>
                  <div style={{ flexShrink: 0, width: 36, height: 36, borderRadius: 8, background: "rgba(230,57,70,.1)", border: "1px solid rgba(230,57,70,.2)", color: "#FF6B6B", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "ui-monospace, Menlo, monospace", fontSize: 12, fontWeight: 700 }}>
                    {String(i+1).padStart(2,"0")}
                  </div>
                  <div>
                    <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 16, color: "#fff" }}>{f.t}</div>
                    <div style={{ fontSize: 13.5, color: "#A3A3A3", marginTop: 4, lineHeight: 1.5 }}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={0.15}>
            <div className="mc-panel mc-panel-bracket" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column", height: 540 }}>
              <div style={{ padding: "14px 18px", borderBottom: "1px solid rgba(255,255,255,.06)", display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 999, background: "linear-gradient(135deg,#E63946,#FF6B6B)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 700, fontFamily: "Bricolage Grotesque" }}>{C.chatbot.botName[0]}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, color: "#fff", fontSize: 14 }}>{C.chatbot.botName}</div>
                  <div className="mono" style={{ fontSize: 11, color: "#10B981", display: "flex", alignItems: "center", gap: 6 }}>
                    <span className="mc-hud-dot" />på plats
                  </div>
                </div>
                <span className="mc-tag ok">demo</span>
              </div>
              <div style={{ padding: "8px 14px", background: "rgba(245,158,11,.08)", borderBottom: "1px solid rgba(245,158,11,.2)", color: "#F59E0B", fontFamily: "ui-monospace, Menlo, monospace", fontSize: 11, lineHeight: 1.4, display: "flex", gap: 8, alignItems: "flex-start" }}>
                <span>⚠</span>
                <span>Det här är en exempel-chattbot — inte den färdiga produkten. Den riktiga versionen tränas på era tjänster, priser och tonalitet innan den går live.</span>
              </div>
              <div ref={scrollRef} style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 10 }}>
                {messages.map((m, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: m.role === "user" ? "flex-end" : "flex-start" }}>
                    <div style={{ maxWidth: "82%", padding: "10px 14px", borderRadius: m.role === "user" ? "12px 12px 4px 12px" : "12px 12px 12px 4px", background: m.role === "user" ? "linear-gradient(135deg,#E63946,#FF6B6B)" : "rgba(255,255,255,.05)", border: m.role === "user" ? "none" : "1px solid rgba(255,255,255,.06)", color: "#fff", fontSize: 13.5, lineHeight: 1.5, whiteSpace: "pre-wrap" }}>{m.content}</div>
                  </div>
                ))}
                {loading && (
                  <div style={{ display: "flex" }}>
                    <div style={{ padding: "10px 14px", borderRadius: "12px 12px 12px 4px", background: "rgba(255,255,255,.05)", display: "flex", gap: 4 }}>
                      {[0,1,2].map(i => <span key={i} style={{ width: 6, height: 6, borderRadius: 999, background: "#737373", animation: `blink 1.4s infinite ${i*.2}s` }} />)}
                    </div>
                  </div>
                )}
              </div>
              {messages.length <= 1 && !loading && (
                <div style={{ padding: "0 18px 12px", display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {C.chatbot.suggestions.map((s, i) => (
                    <button key={i} onClick={() => send(s)} style={{ padding: "6px 11px", borderRadius: 6, background: "rgba(230,57,70,.06)", border: "1px solid rgba(230,57,70,.2)", color: "#FF6B6B", fontSize: 11.5, cursor: "pointer", fontFamily: "ui-monospace, Menlo, monospace" }}>{s}</button>
                  ))}
                </div>
              )}
              <form onSubmit={(e) => { e.preventDefault(); send(input); }} style={{ padding: "12px 14px", borderTop: "1px solid rgba(255,255,255,.06)", display: "flex", gap: 8 }}>
                <input value={input} onChange={(e) => setInput(e.target.value)} placeholder={`Skriv till ${C.chatbot.botName}…`} style={{ flex: 1, padding: "9px 13px", borderRadius: 8, background: "rgba(255,255,255,.04)", border: "1px solid rgba(255,255,255,.08)", color: "#fff", fontSize: 13, outline: "none", fontFamily: "inherit" }} />
                <button type="submit" disabled={!input.trim() || loading} style={{ padding: "9px 16px", borderRadius: 8, border: "none", background: input.trim() ? "linear-gradient(135deg,#E63946,#FF6B6B)" : "rgba(255,255,255,.08)", color: "#fff", fontSize: 12, fontWeight: 600, cursor: input.trim() ? "pointer" : "default", fontFamily: "ui-monospace, Menlo, monospace" }}>Skicka</button>
              </form>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function MCOpportunities() {
  const C = window.CLIENT_DATA;
  return (
    <section className="mc-section">
      <div className="mc-container">
        <Reveal><div className="mc-eyebrow">Vad öppnar sig nu</div></Reveal>
        <Reveal delay={0.05}>
          <h2 className="mc-h2" style={{ marginTop: 18, maxWidth: 880 }}>
            Vad ni får — på <span className="mc-grad">3 till 6 månader.</span>
          </h2>
        </Reveal>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))", gap: 16 }}>
          {C.opportunities.map((o, i) => (
            <Reveal key={i} delay={i * 0.05}>
              <div className="mc-panel mc-panel-bracket" style={{ padding: 24, height: "100%" }}>
                <div className="mono" style={{ fontSize: 11, color: "#FF6B6B", letterSpacing: ".15em", textTransform: "uppercase" }}>
                  ▸ Möjlighet {String(i+1).padStart(2,"0")}
                </div>
                <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 19, color: "#fff", margin: "12px 0 10px", letterSpacing: "-.02em", lineHeight: 1.2 }}>
                  {o.title}
                </div>
                <div style={{ fontSize: 14, color: "#A3A3A3", lineHeight: 1.6 }}>
                  {o.desc}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function MCCTA() {
  const C = window.CLIENT_DATA;
  return (
    <section id="kontakt" className="mc-section" style={{ paddingBottom: 140 }}>
      <div className="mc-container" style={{ maxWidth: 940 }}>
        <div className="mc-panel mc-panel-bracket" style={{ padding: "56px 48px", textAlign: "center", background: "linear-gradient(135deg, rgba(230,57,70,.08), rgba(245,158,11,.04))" }}>
          <Reveal>
            <div className="mc-eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>
              ▸ Klart för uppskjutning
            </div>
          </Reveal>
          <Reveal delay={0.05}>
            <h2 className="mc-h2" style={{ marginTop: 18 }}>
              Säg ja — så är ni igång<br/>
              <span className="mc-grad">inom 14 dagar.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.1}>
            <p style={{ fontSize: 17, color: "#A3A3A3", maxWidth: 540, margin: "20px auto 32px", lineHeight: 1.6 }}>
              Ni har sett rapporten. Ni har sett vad vi byggt. Inga timpriser, ingen startavgift — bara fast månadskostnad och vi sätter igång.
            </p>
          </Reveal>
          <Reveal delay={0.15}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center" }}>
              <a href={`tel:${C.contact.phone.replace(/\s/g,"")}`} style={btnPrimary}>📞 Ring {C.contact.name.split(" ")[0]} direkt</a>
              <a href={`mailto:${C.contact.email}?subject=${encodeURIComponent("Säg ja — " + C.client.name)}`} style={btnGhost}>✉ Säg ja via mejl</a>
            </div>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{ marginTop: 36, paddingTop: 28, borderTop: "1px solid rgba(255,255,255,.06)", display: "flex", flexWrap: "wrap", gap: "10px 24px", justifyContent: "center", fontSize: 12, color: "#737373" }} className="mono">
              {["100% nöjd-kund-garanti", "Domän & webbhotell ingår", "Fri support", "Inga timpriser"].map(t => (
                <span key={t} style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ width: 5, height: 5, borderRadius: 999, background: "#10B981" }} />
                  {t}
                </span>
              ))}
            </div>
          </Reveal>
        </div>

        {/* Säljarkort */}
        <Reveal delay={0.1}>
          <div className="mc-panel" style={{ marginTop: 40, padding: 28, display: "flex", gap: 22, alignItems: "center", flexWrap: "wrap" }}>
            <img src={C.contact.photo} alt={C.contact.name} onError={(e) => { e.currentTarget.style.display = "none"; }} style={{ width: 72, height: 72, borderRadius: 999, objectFit: "cover", background: "linear-gradient(135deg,#E63946,#F59E0B)" }} />
            <div style={{ flex: 1, minWidth: 220 }}>
              <div style={{ fontFamily: "Bricolage Grotesque", fontWeight: 700, fontSize: 20, color: "#fff" }}>{C.contact.name}</div>
              <div style={{ fontSize: 12, color: "#FF6B6B", fontFamily: "ui-monospace, Menlo, monospace", marginTop: 2 }}>{C.contact.role}</div>
              <div style={{ fontSize: 13.5, color: "#A3A3A3", marginTop: 8, lineHeight: 1.55 }}>{C.contact.bio}</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 13 }} className="mono">
              <a href={`tel:${C.contact.phone.replace(/\s/g,"")}`} style={{ color: "#fff", textDecoration: "none" }}>📞 {C.contact.phone}</a>
              <a href={`mailto:${C.contact.email}`} style={{ color: "#fff", textDecoration: "none" }}>✉ {C.contact.email}</a>
            </div>
          </div>
        </Reveal>

        <div className="mono" style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.04)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontSize: 11, color: "#525252", letterSpacing: ".1em", textTransform: "uppercase" }}>
          <span>WLM-Scan v2.0 · Konfidentiellt arbetsmaterial</span>
          <span>Skapat med ♥ i Sverige</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MCChatbot, MCOpportunities, MCCTA });