/* eslint-disable */
// MS BRIDGE — Beta (globe community CTA) + FAQ (Mindly-style), restyle
//  · BetaV2 : white→black gradient, headline + CTA + dotted globe with member nodes
//  · FaqV2  : dark, ghost title + accordion (MS Bridge FAQ)

;(function () {
const { useState } = React;

const INK   = "#16150F";
const INK60 = "#6B6A64";
const INK40 = "#9A9994";
const TXT_HI = "#F6F5F3";
const TXT_MD = "rgba(246,245,243,0.62)";
const TXT_LO = "rgba(246,245,243,0.40)";

const ACCENTS = {
  "#E8291C": { base: "#E8291C", soft: "rgba(232,41,28,0.13)", on: "#fff" },
  "#FF6200": { base: "#FF6200", soft: "rgba(255,98,0,0.14)", on: "#fff" },
};

function Mono({ children, color = INK40, style }) {
  return <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color, ...style }}>{children}</span>;
}
function ArrowIcon({ size = 15 }) {
  return (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>);
}

const NODES = [
  { x: 31, y: 30, bg: ["#FF8A65", "#E8291C"] },
  { x: 64, y: 37, bg: ["#bcd3f0", "#5577a8"] },
  { x: 46, y: 53, bg: ["#d9c4ea", "#8a6bb0"] },
  { x: 23, y: 58, bg: ["#cfe6c2", "#6f9c52"] },
  { x: 73, y: 60, bg: ["#F4D67A", "#B5860F"] },
];

function InlineBetaForm({ accent }) {
  const [loading, setLoading] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const data = new FormData(e.target);
      data.append("access_key", "bd1d8fa4-172c-4363-9436-9514e961cff1");
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        body: data,
        headers: { Accept: "application/json" }
      });
      if (res.ok) {
        window.location.href = "https://www.msbridge.io/confirmation.html";
      } else {
        setLoading(false);
      }
    } catch {
      setLoading(false);
    }
  };

  return (
    <div className="msb-form-light" style={{ marginTop: 28, width: "100%", maxWidth: 480, display: "flex", justifyContent: "center" }}>
      <a href="https://app.msbridge.io/signup" className="bt-cta" style={{ background: accent.base, color: accent.on, border: "none", cursor: "pointer", height: 50, marginTop: 0, padding: "0 22px", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, borderRadius: 7, textDecoration: "none" }}>
        Commencer gratuitement <ArrowIcon />
      </a>
    </div>
  );
}

function Beta({ accentKey }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  return (
    <div className="bt">
      <div className="bt-inner">
        <Mono color={INK40}>Bêta privée</Mono>
        <h2 className="bt-h2" style={{ whiteSpace: "nowrap" }}>Rejoignez <span style={{ color: accent.base }}>MS Bridge</span></h2>
        <p className="bt-sub">Capitaliser enfin sur chaque appel de prospect pour maximiser vos résultats.</p>
        <InlineBetaForm accent={accent} />
      </div>
    </div>
  );
}

/* ----------------------------- FAQ ----------------------------- */

const FAQS = [
  { tag: "Intégration", q: "Combien de temps pour brancher MS Bridge à votre stack ?",
    a: "10 minutes en moyenne. Une clé API depuis votre outil de transcription — Fireflies, Modjo, Gong, Zoom, Teams ou Google Meet — et c'est tout. Aucune migration, aucune saisie." },
  { tag: "Résultats", q: "Combien de temps pour avoir des résultats visibles ?",
    a: "Premiers insights à J+7, cartographie complète des pain points à J+30, marketing data-driven à J+90. La rapidité dépend du volume d'appels importés — 10 à 15 appels par semaine suffisent à enclencher la dynamique." },
  { tag: "ROI", q: "Quel ROI, et en combien de temps ?",
    a: "Un seul deal supplémentaire par trimestre dépasse déjà l'investissement. Le ROI se manifeste sur trois leviers : budget ads mieux orienté (dès J+30), objections traitées en amont (dès J+60), temps commercial récupéré (dès J+90)." },
  { tag: "RGPD", q: "Qu'est-ce qui se passe avec nos données commerciales ?",
    a: "Vos transcripts restent sur un serveur privé dédié, hébergé en Europe. Ni Anthropic, ni Google, ni aucun tiers n'y a accès. Chaque client dispose de son propre environnement isolé — vos données ne sont jamais mutualisées." },
  { tag: "Anonymisation", q: "Est-ce que les données de nos prospects sont anonymisées ?",
    a: "Oui, la confidentialité est notre priorité. Toutes les données sensibles et les informations personnelles (PII) extraites des appels sont rigoureusement anonymisées. Nous sommes 100% conformes au RGPD pour garantir la protection absolue de vos prospects et de votre entreprise." },
];

function Faq({ accentKey, ghost = true }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  const [open, setOpen] = useState(0);
  return (
    <div className="fq">
      <div className="fq-inner">
        <div className="fq-head">
          <div className="fq-mk-center">
            <span className="fq-mk">
              <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.soft}` }} />
              <Mono color={TXT_LO}>(10)</Mono>
              <span style={{ width: 18, height: 1, background: "rgba(255,255,255,0.2)" }} />
              <Mono color={TXT_LO}>FAQ</Mono>
            </span>
          </div>
          <h2 className="fq-h2">
            <span style={{ color: TXT_HI }}>Questions </span>
            <span className={ghost ? "fq-ghost" : undefined} style={ghost ? undefined : { color: TXT_HI }}>fréquentes.</span>
          </h2>
          <p className="fq-sub">Les questions que nous pose chaque équipe marketing B2B avant de se lancer.</p>
        </div>

        <div className="fq-list">
          {FAQS.map((f, i) => {
            const on = i === open;
            return (
              <div key={i} className={"fq-item" + (on ? " open" : "")}>
                <button className="fq-q" onClick={() => setOpen(on ? -1 : i)}>
                  <span className="fq-q-txt">
                    <span className="fq-tag" style={{ color: accent.base }}>{f.tag}</span>
                    {f.q}
                  </span>
                  <span className="fq-plus" style={{ color: on ? accent.base : TXT_MD }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" /><path d="M12 5v14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ opacity: on ? 0 : 1 }} /></svg>
                  </span>
                </button>
                {on && <div className="fq-a">{f.a}</div>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BetaV2: Beta, FaqV2: Faq });

})();