/* eslint-disable */
// MS BRIDGE — How v2 (restyle, LIGHT) — brain-diagram centric, 3 variants
//  · bento  : intro + mini step-list (left) · compact brain diagram (right)
//  · schema : centred brain diagram (tools → brain → outputs), full width
//  · etapes : 3 numbered text columns (no diagram)

;(function () {

const INK   = "#16150F";
const INK60 = "#6B6A64";
const INK40 = "#9A9994";
const LIGHT = "#FFFFFF";
const LINE  = "rgba(0,0,0,0.10)";

const ACCENTS = {
  "#E8291C": { base: "#E8291C", soft: "rgba(232,41,28,0.13)", glow: "rgba(232,41,28,0.45)", on: "#fff" },
  "#FF6200": { base: "#FF6200", soft: "rgba(255,98,0,0.14)", glow: "rgba(255,98,0,0.45)", 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 = 14, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M5 12h14M13 6l6 6-6 6" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const TOOLS = [
  { letter: "T", name: "Teams",     sub: "Appels d'équipe",  color: "#5059C9" },
  { letter: "G", name: "Meet",      sub: "Visioconférence",  color: "#34A853" },
  { letter: "Z", name: "Zoom",      sub: "Visioconférence",  color: "#0B5CFF" },
  { letter: "F", name: "Fireflies", sub: "Transcripts auto", color: "#F4502A" },
  { letter: "A", name: "Aircall",   sub: "Appels sortants",  color: "#00B388" },
  { letter: "R", name: "Ringover",  sub: "Appels VoIP",      color: "#7C3AED" },
];

const OUTPUTS = [
  { title: "Pain points",      sub: "Objections cartographiées" },
  { title: "Contenu généré",   sub: "Posts · Emails · Séquences" },
  { title: "Personas affinés", sub: "ICP enrichi en continu" },
];

const STEPS = [
  { number: "01", tag: "Collecter",  body: "On branche vos outils. MS Bridge aspire les transcripts. Zéro saisie." },
  { number: "02", tag: "Comprendre", body: "L'IA extrait objections, arguments et vocabulaire client." },
  { number: "03", tag: "Activer",    body: "Angles pub, posts, séquences, briefs — prêts à publier." },
  { number: "04", tag: "Générer des leads", body: "Maintenant que vous connaissez parfaitement ce qu'attendent vos prospects, votre lead gen sera multiplié par 3." },
];

/* ----------------------------- brain diagram ----------------------------- */

function BrainDiagram({ accent, tools }) {
  const W = 560, H = 340, bx = 280, by = 170, r = 50;
  const tx = 157, ox = 392;
  const tA = tools.map((t, i) => ({ ...t, y: Math.round(H * (i + 0.5) / tools.length) }));
  const oA = OUTPUTS.map((o, i) => ({ ...o, y: Math.round(H * (i + 0.5) / 3) }));
  return (
    <div className="bd">
      <svg className="bd-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden>
        {tA.map((t, i) => (
          <path key={"t" + i} d={`M ${tx} ${t.y} C ${tx + 60} ${t.y}, ${bx - 96} ${by}, ${bx - r - 6} ${by}`}
            stroke={accent.base} strokeWidth="1.4" fill="none" strokeDasharray="3 4" opacity="0.45" />
        ))}
        {oA.map((o, i) => (
          <path key={"o" + i} d={`M ${bx + r + 6} ${by} C ${bx + 96} ${by}, ${ox - 60} ${o.y}, ${ox} ${o.y}`}
            stroke={accent.base} strokeWidth="1.6" fill="none" />
        ))}
      </svg>

      {tA.map((t, i) => (
        <div key={i} className="bd-tool" style={{ top: `${t.y / H * 100}%`, borderColor: LINE }}>
          <span className="bd-tool-badge" style={{ background: t.color }}>{t.letter}</span>
          <span className="bd-tool-txt">
            <span className="bd-tool-name">{t.name}</span>
            <span className="bd-tool-sub">{t.sub}</span>
          </span>
        </div>
      ))}

      <div className="bd-brain" style={{ boxShadow: `0 0 0 6px ${accent.soft}, 0 0 44px -4px ${accent.glow}` }}>
        <span className="bd-brain-k">Cerveau</span>
        <span className="bd-brain-m" style={{ color: accent.base }}>MS BRIDGE</span>
        <span className="bd-brain-s">s'enrichit à chaque appel</span>
      </div>

      {oA.map((o, i) => (
        <div key={i} className="bd-out" style={{ top: `${o.y / H * 100}%`, borderColor: accent.soft, background: accent.soft }}>
          <span className="bd-out-title" style={{ color: accent.base }}>{o.title}</span>
          <span className="bd-out-sub">{o.sub}</span>
        </div>
      ))}
    </div>
  );
}

/* ----------------------------- section ----------------------------- */

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: 8, width: "100%", maxWidth: 480 }}>
      <a href="https://app.msbridge.io/signup" className="hw-cta" style={{ background: accent.base, color: accent.on, border: "none", cursor: "pointer", height: 50, padding: "0 22px", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 9, borderRadius: 7, textDecoration: "none" }}>
        Commencer gratuitement <ArrowIcon size={15} />
      </a>
    </div>
  );
}

function How({ accentKey, ghost = true, layout = "bento" }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];

  const header = (
    <div className="hw-head">
      <div className="hw-mk-center">
        <span className="hw-mk">
          <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.soft}` }} />
          <Mono>(04)</Mono>
          <span style={{ width: 18, height: 1, background: INK40 }} />
          <Mono>la réponse</Mono>
        </span>
      </div>
      <h2 className="hw-h2">
        <span>De la voix de vos prospects </span>
        <br />
        <span className={ghost ? "hw-ghost" : undefined} style={ghost ? undefined : { color: INK }}>à votre </span>
        <span style={{ color: accent.base }}>cerveau IA marketing-sales.</span>
      </h2>
      <p className="hw-sub">Branchez vos outils. MS Bridge écoute, structure, restitue. Plus vous l'utilisez, plus votre base devient précise et stratégique.</p>
    </div>
  );

  let body;

  if (layout === "etapes") {
    body = (
      <div className="hw-steps3">
        {STEPS.map((s) => (
          <div key={s.number} className="hw-step">
            <span className="hw-step-num">{s.number}</span>
            <Mono color={accent.base} style={{ fontSize: 12 }}>{s.tag}</Mono>
            <p className="hw-step-body">{s.body}</p>
          </div>
        ))}
      </div>
    );
  } else if (layout === "schema") {
    body = (
      <div className="hw-schema">
        <div className="hw-schema-cap hw-cap-l"><Mono color={INK40}>import auto →</Mono></div>
        <div className="hw-schema-cap hw-cap-r"><Mono color={INK40}>← génère</Mono></div>
        <BrainDiagram accent={accent} tools={TOOLS} />
      </div>
    );
  } else {
    // bento (default) — intro + mini steps (left) · compact brain diagram (right)
    body = (
      <div className="hw-bento">
        <div className="hw-left">
          <span className="hw-pill" style={{ borderColor: LINE }}>Le système, en continu</span>
          <h3 className="hw-left-title">On écoute, on comprend, on restitue — en boucle.</h3>
          <div className="hw-mini-steps">
            {STEPS.map((s) => (
              <div key={s.number} className="hw-mini-step">
                <Mono color={accent.base} style={{ fontSize: 11 }}>{s.number}</Mono>
                <div>
                  <span className="hw-mini-tag">{s.tag}</span>
                  <span className="hw-mini-body">{s.body}</span>
                </div>
              </div>
            ))}
          </div>
          <InlineBetaForm accent={accent} />
        </div>
        <div className="hw-right">
          <BrainDiagram accent={accent} tools={TOOLS.slice(0, 4)} />
        </div>
      </div>
    );
  }

  return (
    <div className="hw" style={{ background: LIGHT, color: INK }}>
      <div className="hw-inner">
        {header}
        <div className="hw-body">{body}</div>
      </div>
      <div className="hw-dot-sep" aria-hidden />
    </div>
  );
}

Object.assign(window, { HowV2: How });

})();