/* eslint-disable */
// MS BRIDGE — Manifesto v2 (restyle, light)
// Insight-clean white section + Mindly two-tone ghost headline.
// Sharp corners, monospace marker, diagonal-hatch dividers, handwritten note,
// strike-through "what marketing does instead" (kept from v1), sharp punchline callout.

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

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

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" },
};

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

function Mono({ children, color = INK40, style }) {
  return <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color, ...style }}>{children}</span>;
}

function HatchDivider() {
  return <div className="mf-hatch" aria-hidden />;
}

function Marker({ accent }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.soft}` }} />
      <Mono style={{ fontSize: 11.5 }}>(02)</Mono>
      <span style={{ width: 18, height: 1, background: INK40 }} />
      <Mono style={{ fontSize: 11.5 }}>le constat</Mono>
    </div>
  );
}

function FocusParagraph({ children, style, className }) {
  const ref = React.useRef(null);
  const [isActive, setIsActive] = useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsActive(entry.isIntersecting);
      },
      {
        rootMargin: "-28% 0px -28% 0px",
        threshold: 0.15,
      }
    );

    observer.observe(el);
    return () => observer.unobserve(el);
  }, []);

  return (
    <p
      ref={ref}
      className={className}
      style={{
        ...style,
        opacity: isActive ? 1 : 0.35,
        transform: isActive ? "translateY(0)" : "translateY(6px)",
        transition: "opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
      }}
    >
      {children}
    </p>
  );
}

/* strike-through word (kept from v1, restyled) */
function Strike({ children, accent }) {
  return (
    <span style={{ position: "relative", display: "inline-block", color: INK60 }}>
      {children}
      <span aria-hidden style={{ position: "absolute", left: -3, right: -3, top: "54%", height: 2.5, background: accent.base, transform: "rotate(-3deg)", borderRadius: 2 }} />
    </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>
  );
}

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

function EarIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden>
      <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="#fff" strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="12" cy="9" r="1.5" fill="#fff" />
    </svg>
  );
}

function Manifesto({ accentKey, ghost, showNote, layout = "editorial" }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  const strong = { fontWeight: 500, color: INK };

  const headline = (extra) => (
    <h2 className={"mf-h2" + (extra ? " " + extra : "")}>
      <span>Vos prospects vous disent </span>
      <span style={{ color: accent.base }}>déjà tout.</span>
      <br />
      <span className={ghost ? "mf-ghost" : undefined} style={ghost ? undefined : { color: INK }}>
        Mais personne ne les écoute.
      </span>
    </h2>
  );

  const p1 = (
    <FocusParagraph className="mf-p">
      Chaque semaine, vous (ou vos équipes commerciales) passez des dizaines d'heures en visio.
      Vous y entendez les <strong style={strong}>vraies objections</strong>, les vrais
      mots, les vraies hésitations de vos clients.
    </FocusParagraph>
  );
  const p2 = (
    <FocusParagraph className="mf-p" style={{ marginTop: 22 }}>
      Pendant ce temps, votre marketing <Strike accent={accent}>devine</Strike>.{" "}
      <Strike accent={accent}>suppose</Strike>. Copie les concurrents. Publie au feeling.
    </FocusParagraph>
  );
  const p3 = (
    <FocusParagraph className="mf-p" style={{ marginTop: 22 }}>
      Le résultat&nbsp;? Des campagnes qui sonnent faux. Des posts qui ne convertissent
      pas. Des budgets brûlés sur des messages que <em>personne n'attend</em>.
    </FocusParagraph>
  );
  const p4 = (
    <FocusParagraph className="mf-p" style={{ marginTop: 22 }}>
      Le pire&nbsp;: <strong style={strong}>l'information est déjà là.</strong>{" "}
      Dans vos appels. Dans vos transcripts. Dans la bouche de vos prospects.
    </FocusParagraph>
  );
  const note = showNote ? (
    <div className="mf-note" style={{ color: accent.base }}>
      <svg width="40" height="34" viewBox="0 0 40 34" fill="none" aria-hidden style={{ flexShrink: 0 }}>
        <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>chacun dans son coin</span>
    </div>
  ) : null;

  // light punchline (with accent bar) — used by editorial + centre
  const punchLight = (centre) => (
    <div className={"mf-punch" + (centre ? " mf-punch-center" : "")}>
      <span className="mf-punch-bar" style={{ background: accent.base }} aria-hidden />
      <span className="mf-punch-icon" style={{ background: accent.base }} aria-hidden><EarIcon /></span>
      <div className="mf-punch-txt">
        <span style={{ color: INK, fontWeight: 500 }}>Il manquait juste quelqu'un pour écouter.</span>{" "}
        <span style={{ color: INK60 }}>MS Bridge écoute. Pour vous, sans relâche.</span>
      </div>
      <a href="#timeline" className="mf-punch-cta" style={{ borderColor: LINE, color: INK }}>
        Voir comment <ArrowIcon size={13} />
      </a>
    </div>
  );

  // dark punchline strip — used by split (a darker rhythm moment)
  const punchDark = (
    <div className="mf-punch mf-punch-dark">
      <span className="mf-punch-icon" style={{ background: accent.base }} aria-hidden><EarIcon /></span>
      <div className="mf-punch-txt">
        <span style={{ color: "#F6F5F3", fontWeight: 500 }}>Il manquait juste quelqu'un pour écouter.</span>{" "}
        <span style={{ color: "rgba(246,245,243,0.6)" }}>MS Bridge écoute. Pour vous, sans relâche.</span>
      </div>
      <a href="#timeline" className="mf-punch-cta" style={{ borderColor: "rgba(255,255,255,0.22)", color: "#fff" }}>
        Voir comment <ArrowIcon size={13} />
      </a>
    </div>
  );

  let body;
  if (layout === "centre") {
    body = (
      <div className="mf-wrap">
        <div className="mf-mk-center"><Marker accent={accent} /></div>
        {headline("mf-h2-center")}
        <div className="mf-narrow">
          {p1}{p2}{p3}{p4}
          {note && <div style={{ display: "flex", justifyContent: "center" }}>{note}</div>}
        </div>
        {punchLight(true)}
      </div>
    );
  } else if (layout === "split") {
    body = (
      <div className="mf-wrap">
        <div className="mf-split">
          <div className="mf-split-l">
            <Marker accent={accent} />
            {headline()}
          </div>
          <div className="mf-split-r">
            {p1}{p2}{p3}{p4}{note}
          </div>
        </div>
        {punchDark}
      </div>
    );
  } else {
    // editorial (default)
    body = (
      <div className="mf-wrap">
        <Marker accent={accent} />
        {headline()}
        <div className="mf-cols">
          <div>{p1}{p2}{note}</div>
          <div>{p3}{p4}</div>
        </div>
        {punchLight(false)}
      </div>
    );
  }

  return (
    <div style={{ background: LIGHT, color: INK }}>
      <HatchDivider />
      {body}
    </div>
  );
}

/* ----------------------------- export ----------------------------- */

Object.assign(window, { ManifestoV2: Manifesto });

})();