/* eslint-disable */
// MS BRIDGE — Pains v2 (restyle, light) — 3 layout variants
//  · agitation : Mindly "Is this you?" — ghost headline + centred pain grid + handwritten note
//  · capacites : Insight 4-up feature row — reframed as positive capabilities
//  · hybride   : Insight clean aesthetic + pain content (the 4 "fuites" as sharp cards)

;(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 ACCENTS = {
  "#E8291C": { base: "#E8291C", soft: "rgba(232,41,28,0.13)", glow: "rgba(232,41,28,0.16)", on: "#fff" },
  "#FF6200": { base: "#FF6200", soft: "rgba(255,98,0,0.14)", glow: "rgba(255,98,0,0.18)", on: "#fff" },
};

/* ----------------------------- atoms ----------------------------- */

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 Marker({ accent, label, index = "(03)" }) {
  return (
    <div className="pn-mk">
      <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.soft}` }} />
      <Mono>{index}</Mono>
      <span style={{ width: 18, height: 1, background: INK40 }} />
      <Mono>{label}</Mono>
    </div>
  );
}

/* simple thin-line icons (geometric, stroke = currentColor) */
const Icon = {
  budget: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M3 7h18v12H3zM3 11h18" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M16 15l3-3-3-3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  unplug: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M9 4v5a3 3 0 0 0 6 0V4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M12 12v8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><path d="M5 20h14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeDasharray="2 3"/></svg>),
  misalign: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M4 8h10M20 8l-3-3M20 8l-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/><path d="M20 16H10M4 16l3-3M4 16l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  target: () => (<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="12" r="3.4" stroke="currentColor" strokeWidth="1.6"/></svg>),
  signal: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M5 20V11M10 20V7M15 20v-6M20 20V4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  ear: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M7 9a5 5 0 1 1 10 0v3a3 3 0 0 1-3 3h-1a2 2 0 0 0-2 2v1a3 3 0 0 1-3-3v-1" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/><circle cx="12" cy="9" r="1.4" fill="currentColor"/></svg>),
  link: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M9 12h6M8.5 8H7a4 4 0 0 0 0 8h1.5M15.5 8H17a4 4 0 0 1 0 8h-1.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
  check: () => (<svg viewBox="0 0 24 24" fill="none"><path d="M4 12.5l5 5L20 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>),
};

function HandNote({ accent, children, dir = "left" }) {
  return (
    <div className="pn-note" style={{ color: accent.base }}>
      <svg width="40" height="34" viewBox="0 0 40 34" fill="none" aria-hidden style={{ flexShrink: 0, transform: dir === "right" ? "scaleX(-1)" : "none" }}>
        <path d="M4 4c2 14 10 22 30 24" stroke={accent.base} strokeWidth="1.6" strokeLinecap="round" />
        <path d="M34 28l6-1M34 28l-2-6" stroke={accent.base} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <span>{children}</span>
    </div>
  );
}

/* ----------------------------- content ----------------------------- */

const FUITES = [
  { index: "01", tag: "Leads qualifiés", icon: "unplug", title: "Stratégie déconnectée du terrain.",
    body: "Votre contenu est générique car il n'est pas alimenté par ce que vos prospects disent vraiment. Vos commerciaux le savent. Vos prospects aussi.",
    consequence: "Deals perdus sur des objections non traitées",
    short: "Un contenu générique que vos commerciaux n'utilisent même pas." },
  { index: "02", tag: "Gain de temps", icon: "misalign", title: "Sales et Marketing désalignés.",
    body: "Deux équipes, deux narratifs, zéro alignement. Les insights terrain ne remontent jamais au marketing. Les réunions hebdo n'y changent rien.",
    consequence: "Temps commercial gaspillé à requalifier",
    short: "Sales et marketing qui ne se parlent pas vraiment." },
  { index: "03", tag: "Impact closing", icon: "target", title: "Taux de closing insuffisant.",
    body: "Les objections clés meurent dans les transcripts. Votre marketing ne les traite jamais en amont. Chaque deal perdu sur une objection récurrente est évitable.",
    consequence: "Cycle de vente 30 jours trop long",
    short: "Des objections clés qui meurent dans les transcripts." },
  { index: "04", tag: "ROI direct", icon: "budget", title: "Budget mal alloué.",
    body: "Vous dépensez sur des messages qui ne résonnent pas avec la réalité terrain. Votre messaging repose sur des hypothèses, pas sur des données.",
    consequence: "20-30 % du budget ads gaspillé / mois",
    short: "Un budget ads brûlé sur des messages qui ne résonnent pas." },
];

const CAPACITES = [
  { icon: "signal", title: "Un messaging calé sur le terrain", body: "Vos campagnes parlent enfin le langage exact de vos prospects." },
  { icon: "ear",    title: "Du contenu qui résonne",            body: "Chaque post nourri par ce que vos prospects disent vraiment." },
  { icon: "link",   title: "Sales & marketing alignés",         body: "Un seul narratif, alimenté par les insights des appels." },
  { icon: "check",  title: "Plus de deals signés",              body: "Les objections clés traitées en amont, pas perdues dans les transcripts." },
];

/* ----------------------------- variants ----------------------------- */

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 Pains({ accentKey, layout = "hybride", ghost = true, showNote = true, dark = false }) {
  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]) {
        const leftPos = cards[index].offsetLeft - scrollRef.current.offsetLeft;
        scrollRef.current.scrollTo({
          left: leftPos,
          behavior: "smooth"
        });
        setActive(index);
      }
    }
  };

  const borderColor = dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.10)";

  let header, grid;

  if (layout === "agitation") {
    header = (
      <div className="pn-head">
        <div className="pn-mk-center"><Marker accent={accent} label="ça vous parle ?" /></div>
        <h2 className="pn-h2">
          <span>Votre marketing avance </span>
          <span style={{ color: accent.base }}>à l'aveugle.</span>
          <br />
          <span className={ghost ? "pn-ghost" : undefined} style={ghost ? undefined : { color: INK }}>
            Vos prospects, eux, parlent déjà.
          </span>
        </h2>
      </div>
    );
    grid = (
      <div className="pn-grid-ag">
        {FUITES.map((f) => {
          const I = Icon[f.icon];
          return (
            <div key={f.index} className="pn-ag">
              <span className="pn-ag-ic" style={{ color: accent.base }}><I /></span>
              <p className="pn-ag-txt">{f.short}</p>
            </div>
          );
        })}
        {showNote && <div className="pn-ag-note"><HandNote accent={accent}>ça vous parle ?</HandNote></div>}
      </div>
    );
  } else if (layout === "capacites") {
    header = (
      <div className="pn-head">
        <div className="pn-mk-center"><Marker accent={accent} label="ce que ça change" /></div>
        <h2 className="pn-h2">
          <span>De l'aveugle au </span>
          <span style={{ color: accent.base }}>piloté par le terrain.</span>
        </h2>
        <p className="pn-sub">Ce que MS Bridge débloque, concrètement, dès les premiers appels analysés.</p>
      </div>
    );
    grid = (
      <div className="pn-grid-4">
        {CAPACITES.map((c, i) => {
          const I = Icon[c.icon];
          return (
            <div key={i} className="pn-feat">
              <span className="pn-feat-ic" style={{ color: accent.base }}><I /></span>
              <h3 className="pn-feat-title">{c.title}</h3>
              <p className="pn-feat-body">{c.body}</p>
            </div>
          );
        })}
      </div>
    );
  } else if (layout === "fuites") {
    // capacités layout (Insight 4-up) + pain wording (les 4 fuites)
    header = (
      <div className="pn-head">
        <div className="pn-mk-center"><Marker accent={accent} label="les fuites" /></div>
        <h2 className="pn-h2">
          <span>4 fuites qui plombent </span>
          <span style={{ color: accent.base }}>votre R.O.I marketing.</span>
        </h2>
        <p className="pn-sub">Anecdotiques au quotidien, à l'année elles représentent des dizaines de milliers d'euros mal investis.</p>
      </div>
    );
    if (isMobile) {
      grid = (
        <div>
          <style dangerouslySetInnerHTML={{ __html: `
            .pn-scroll-container::-webkit-scrollbar {
              display: none;
            }
          ` }} />
          <div
            ref={scrollRef}
            className="pn-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",
            }}
          >
            {FUITES.map((f, i) => {
              const I = Icon[f.icon];
              const isLast = i === FUITES.length - 1;
              return (
                <div
                  key={f.index}
                  style={{
                    flex: "0 0 80vw",
                    scrollSnapAlign: "start",
                    boxSizing: "border-box",
                    padding: "30px 24px",
                    display: "flex",
                    flexDirection: "column",
                    gap: 12,
                    border: "none",
                    borderTop: `1px solid ${borderColor}`,
                    borderBottom: `1px solid ${borderColor}`,
                    borderLeft: `1px solid ${borderColor}`,
                    borderRight: isLast ? `1px solid ${borderColor}` : "none",
                  }}
                >
                  <span className="pn-feat-ic" style={{ color: accent.base }}><I /></span>
                  <h3 className="pn-feat-title">{f.title}</h3>
                  <p className="pn-feat-body">{f.body}</p>
                  <div className="pn-feat-cons" style={{ color: accent.base }}>
                    <span className="pn-card-cons-dot" style={{ background: accent.base }} aria-hidden />
                    <span>{f.consequence}</span>
                  </div>
                </div>
              );
            })}
          </div>
          {/* Stepper dots */}
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 8, marginTop: 24 }}>
            {FUITES.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 : (dark ? "rgba(255,255,255,0.25)" : "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 {
      grid = (
        <div className="pn-grid-4">
          {FUITES.map((f) => {
            const I = Icon[f.icon];
            return (
              <div key={f.index} className="pn-feat">
                <span className="pn-feat-ic" style={{ color: accent.base }}><I /></span>
                <h3 className="pn-feat-title">{f.title}</h3>
                <p className="pn-feat-body">{f.body}</p>
                <div className="pn-feat-cons" style={{ color: accent.base }}>
                  <span className="pn-card-cons-dot" style={{ background: accent.base }} aria-hidden />
                  <span>{f.consequence}</span>
                </div>
              </div>
            );
          })}
        </div>
      );
    }
  } else {
    // hybride (default)
    header = (
      <div className="pn-head">
        <div className="pn-mk-center"><Marker accent={accent} label="les fuites" /></div>
        <h2 className="pn-h2">
          <span>4 fuites qui plombent </span>
          <span style={{ color: accent.base }}>votre R.O.I marketing.</span>
        </h2>
        <p className="pn-sub">Anecdotiques au quotidien, à l'année elles représentent des dizaines de milliers d'euros mal investis.</p>
      </div>
    );
    grid = (
      <div className="pn-grid-2">
        {FUITES.map((f) => {
          const I = Icon[f.icon];
          return (
            <div key={f.index} className="pn-card">
              <div className="pn-card-top">
                <span className="pn-card-ic" style={{ color: accent.base, borderColor: LINE }}><I /></span>
                <span className="pn-card-meta">
                  <Mono color={INK40}>{f.index}</Mono>
                  <span style={{ width: 12, height: 1, background: INK40 }} />
                  <span className="pn-tag" style={{ background: accent.soft, color: accent.base }}>{f.tag}</span>
                </span>
              </div>
              <h3 className="pn-card-title">{f.title}</h3>
              <p className="pn-card-body">{f.body}</p>
              <div className="pn-card-cons" style={{ borderColor: LINE }}>
                <span className="pn-card-cons-dot" style={{ background: accent.base }} aria-hidden />
                <span>{f.consequence}</span>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  return (
    <div className={"pn-sect" + (dark ? " pn-dark" : "")} style={{ background: dark ? "#0B0B0C" : LIGHT, color: dark ? "#F6F5F3" : INK, position: "relative", overflow: "hidden" }}>
      {dark && <div className="pn-bg" aria-hidden />}
      {dark && <div className="pn-glow" style={{ background: `radial-gradient(900px 360px at 50% 0%, ${accent.soft} 0%, transparent 62%)` }} aria-hidden />}
      <div className="pn-wrap" style={{ position: "relative", zIndex: 1 }}>
        {header}
        <div className="pn-body">{grid}</div>
        {(layout === "hybride" || layout === "fuites") && showNote && (
          <div className="pn-hybride-note"><HandNote accent={accent} dir="right">ça chiffre vite</HandNote></div>
        )}
      </div>
      {!dark && <div className="mf-hatch" aria-hidden />}
    </div>
  );
}

Object.assign(window, { PainsV2: Pains });

})();