/* eslint-disable */
// MS BRIDGE — Why v2 (restyle, LIGHT/white) — "Pourquoi MS Bridge ?", 3 variants
//  · table  : comparison table (label · Claude direct · Avec MS Bridge)
//  · duo    : two columns — « Brancher Claude en direct » (✗) vs « Avec MS Bridge » (✓)
//  · lignes : stacked rows, con (✗) vs pro (✓) side by side

;(function () {
const { useState, useEffect, useRef } = React;

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

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

const ROWS = [
  { label: "RGPD & données",
    con: "Vos transcripts transitent vers les serveurs Anthropic / Google (US). Transfert hors UE.",
    conChip: "Transfert hors UE — SCC requises",
    pro: "Serveur dédié hébergé dans l'UE. Vos données ne quittent jamais votre périmètre, jamais utilisées pour l'entraînement.",
    proChip: "Conforme RGPD — serveurs EU" },
  { label: "Base de données",
    con: "Aucune mémoire entre les sessions. Chaque prompt repart de zéro.",
    pro: "Base de connaissance persistante, propre à votre entreprise. S'enrichit à chaque appel." },
  { label: "Structuration des inputs",
    con: "Résultats variables selon la qualité du prompt. Aucune classification automatique.",
    pro: "Tagging automatique : type d'appel, persona, rôle d'achat, objection. Cohérent d'un appel à l'autre." },
  { label: "Outputs actionnables",
    con: "Réponse texte brute. L'équipe doit interpréter, reformater et distribuer à la main.",
    pro: "Outputs typés prêts à activer : briefs, posts, séquences, scripts ads, lead magnets, dashboards." },
  { label: "Accès concurrent",
    con: "Chaque utilisateur a sa session isolée. Pas de base partagée marketing / sales.",
    pro: "Base partagée entre tous les rôles. Une seule source de vérité, en temps réel." },
  { label: "Sécurité des verbatims",
    con: "Noms de prospects et infos confidentielles transmis à un tiers à chaque requête.",
    pro: "PII détectées & masquées automatiquement. Audit trail, contrôle d'accès par rôle." },
];

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 XIcon({ c = INK40 }) {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden style={{ flexShrink: 0 }}><path d="M7 7l10 10M17 7L7 17" stroke={c} strokeWidth="1.8" strokeLinecap="round" /></svg>);
}
function CheckIcon({ c }) {
  return (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden style={{ flexShrink: 0 }}><path d="M4 12.5l5 5L20 6" stroke={c} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" /></svg>);
}
function CircleXIcon({ bg = INK40 }) {
  return (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden style={{ flexShrink: 0, marginTop: 2 }}><circle cx="12" cy="12" r="10" fill={bg} /><path d="M8 8l8 8M16 8l-8 8" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" /></svg>);
}
function CircleCheckIcon({ bg }) {
  return (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden style={{ flexShrink: 0, marginTop: 2 }}><circle cx="12" cy="12" r="10" fill={bg} /><path d="M7 12.5l3.5 3.5L17 7.5" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /></svg>);
}

function Header({ accent, ghost }) {
  return (
    <div className="wy-head">
      <div className="wy-mk-center">
        <span className="wy-mk">
          <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.chip}` }} />
          <Mono>(08)</Mono>
          <span style={{ width: 18, height: 1, background: INK40 }} />
          <Mono>pourquoi MS Bridge ?</Mono>
        </span>
      </div>
      <h2 className="wy-h2">
        <span>Brancher Claude sur vos appels, </span>
        <span className={ghost ? "wy-ghost" : undefined} style={ghost ? undefined : { color: INK }}>ce n'est </span>
        <span style={{ color: accent.base }}>pas suffisant.</span>
      </h2>
      <p className="wy-sub">« On peut brancher Claude sur nos transcripts », vous diront certains. Voici pourquoi ce n'est pas la même chose.</p>
    </div>
  );
}

function useIsMobile() {
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 760);
  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 760);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  return isMobile;
}

function Why({ accentKey, ghost = true, layout = "table" }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  const isMobile = useIsMobile();
  const [active, setActive] = useState(0);
  const scrollRef = useRef(null);

  const handleScroll = () => {
    if (scrollRef.current) {
      const scrollLeft = scrollRef.current.scrollLeft;
      const cards = Array.from(scrollRef.current.children);
      if (cards && cards.length > 0) {
        let activeIndex = 0;
        let minDiff = Infinity;
        for (let i = 0; i < cards.length; i++) {
          const leftPos = cards[i].offsetLeft - scrollRef.current.offsetLeft;
          const diff = Math.abs(scrollLeft - leftPos);
          if (diff < minDiff) {
            minDiff = diff;
            activeIndex = i;
          }
        }
        setActive(activeIndex);
      }
    }
  };

  const scrollToSlide = (index) => {
    if (scrollRef.current) {
      const cards = Array.from(scrollRef.current.children);
      if (cards && cards[index]) {
        scrollRef.current.scrollTo({
          left: cards[index].offsetLeft - scrollRef.current.offsetLeft,
          behavior: "smooth",
        });
        setActive(index);
      }
    }
  };

  let body;

  if (isMobile) {
    body = (
      <div>
        <style dangerouslySetInnerHTML={{ __html: `
          .wy-scroll-container::-webkit-scrollbar {
            display: none;
          }
        ` }} />
        <div
          ref={scrollRef}
          className="wy-scroll-container"
          onScroll={handleScroll}
          style={{
            display: "flex",
            overflowX: "auto",
            scrollSnapType: "x mandatory",
            scrollBehavior: "smooth",
            paddingLeft: 22,
            paddingRight: "20vw",
            gap: 0,
            width: "100vw",
            marginLeft: "-22px",
            marginRight: "-22px",
            scrollbarWidth: "none",
            msOverflowStyle: "none",
            WebkitOverflowScrolling: "touch",
          }}
        >
          {ROWS.map((r, i) => {
            const isLast = i === ROWS.length - 1;
            return (
              <div
                key={r.label}
                style={{
                  flex: "0 0 82vw",
                  scrollSnapAlign: "start",
                  boxSizing: "border-box",
                  padding: "24px 20px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 16,
                  background: "#FFFFFF",
                  borderTop: `1px solid rgba(0,0,0,0.08)`,
                  borderBottom: `1px solid rgba(0,0,0,0.08)`,
                  borderLeft: `1px solid rgba(0,0,0,0.08)`,
                  borderRight: isLast ? `1px solid rgba(0,0,0,0.08)` : "none",
                }}
              >
                <div style={{ display: "flex", alignItems: "center", gap: 8, borderBottom: "1px solid rgba(0,0,0,0.06)", paddingBottom: 10 }}>
                  <Mono color={accent.base} style={{ fontSize: 10.5 }}>{r.label}</Mono>
                </div>
                
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <XIcon c={INK40} />
                    <span style={{ fontSize: 13.5, color: INK60, lineHeight: 1.5 }}>{r.con}</span>
                  </div>
                  {r.conChip && (
                    <span className="wy-chip wy-chip-warn" style={{ marginLeft: 28, marginTop: 4 }}>
                      {r.conChip}
                    </span>
                  )}
                </div>

                <div style={{ display: "flex", flexDirection: "column", gap: 6, borderTop: "1px dashed rgba(0,0,0,0.08)", paddingTop: 14 }}>
                  <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <CheckIcon c={accent.base} />
                    <span style={{ fontSize: 13.5, color: INK, fontWeight: 500, lineHeight: 1.5 }}>{r.pro}</span>
                  </div>
                  {r.proChip && (
                    <span className="wy-chip" style={{ background: accent.chip, color: accent.base, marginLeft: 28, marginTop: 4 }}>
                      {r.proChip}
                    </span>
                  )}
                </div>
              </div>
            );
          })}
        </div>
        {/* Stepper dots */}
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 8, marginTop: 24 }}>
          {ROWS.map((_, i) => (
            <button
              key={i}
              onClick={() => scrollToSlide(i)}
              aria-label={`Aller au cas ${i + 1}`}
              style={{
                width: active === i ? 24 : 8,
                height: 8,
                borderRadius: 999,
                background: active === i ? accent.base : "rgba(0,0,0,0.15)",
                border: "none",
                padding: 0,
                cursor: "pointer",
                outline: "none",
                transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)",
              }}
            />
          ))}
        </div>
      </div>
    );
  } else if (layout === "duo") {
    body = (
      <div className="wy-duo">
        <div className="wy-col wy-col-con">
          <div className="wy-col-head"><XIcon c={INK40} /><span>Brancher Claude en direct</span></div>
          <ul className="wy-col-list">
            {ROWS.map((r) => (<li key={r.label}><XIcon c={INK40} /><span><b>{r.label}.</b> {r.con}</span></li>))}
          </ul>
        </div>
        <div className="wy-col wy-col-pro" style={{ borderColor: accent.base }}>
          <div className="wy-col-head" style={{ color: accent.base }}><CheckIcon c={accent.base} /><span>Avec MS Bridge</span></div>
          <ul className="wy-col-list">
            {ROWS.map((r) => (<li key={r.label}><CheckIcon c={accent.base} /><span><b>{r.label}.</b> {r.pro}</span></li>))}
          </ul>
        </div>
      </div>
    );
  } else if (layout === "lignes") {
    body = (
      <div className="wy-lines">
        {ROWS.map((r) => (
          <div key={r.label} className="wy-line">
            <div className="wy-line-label"><Mono color={INK40}>{r.label}</Mono></div>
            <div className="wy-line-con"><XIcon c={INK40} /><span>{r.con}</span></div>
            <div className="wy-line-pro"><CheckIcon c={accent.base} /><span>{r.pro}</span></div>
          </div>
        ))}
      </div>
    );
  } else {
    // table (default)
    body = (
      <div className="wy-table">
        <div className="wy-thead">
          <div className="wy-th-label" />
          <div className="wy-th-con"><Mono color={INK40}>Claude / Gemini — en direct</Mono></div>
          <div className="wy-th-pro" style={{ background: accent.soft }}><Mono color={accent.base}>Avec MS Bridge</Mono></div>
        </div>
        {ROWS.map((r) => (
          <div key={r.label} className="wy-tr">
            <div className="wy-td-label">{r.label}</div>
            <div className="wy-td-con">
              <div style={{ display: "flex", gap: "10px", alignItems: "flex-start" }}>
                <CircleXIcon bg={INK40} />
                <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                  <p style={{ margin: 0 }}>{r.con}</p>
                  {r.conChip && <div><span className="wy-chip wy-chip-warn">{r.conChip}</span></div>}
                </div>
              </div>
            </div>
            <div className="wy-td-pro" style={{ background: accent.soft }}>
              <div style={{ display: "flex", gap: "10px", alignItems: "flex-start" }}>
                <CircleCheckIcon bg={accent.base} />
                <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                  <p style={{ margin: 0 }}>{r.pro}</p>
                  {r.proChip && <div><span className="wy-chip" style={{ background: accent.chip, color: accent.base }}>{r.proChip}</span></div>}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="wy" style={{ background: LIGHT, color: INK }}>
      <div className="wy-inner">
        <Header accent={accent} ghost={ghost} />
        <div className="wy-body">{body}</div>
      </div>
      <div className="mf-hatch" aria-hidden />
    </div>
  );
}

Object.assign(window, { WhyV2: Why });

})();