/* eslint-disable */
// MS BRIDGE — Proof v2 (restyle, DARK) — testimonials, 3 variants
//  · marquee  : ColdIQ-style — big featured italic quote + 2-row marquee of cards
//  · grille   : featured quote + 3-col grid of rated testimonial cards
//  · spotlight: one big rotating quote + clickable author avatars

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

const BG    = "#0B0B0C";
const CARD  = "#141415";
const BORD  = "rgba(255,255,255,0.09)";
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.16)" },
  "#FF6200": { base: "#FF6200", soft: "rgba(255,98,0,0.18)" },
};

const FEATURED = {
  short: "",
  highlight: "Trusted by 300+ people\nMS Bridge nous a juste appris à l'entendre.",
  author: "Marie Lefranc", role: "Directrice", company: "Acme SaaS", initials: "ML", bg: ["#FF8A65", "#E8291C"],
};

const TESTIMONIALS = [
  { initials: "AV", name: "Anissa Ardjoum-Vouloir", role: "Directrice Marketing et Communication", company: "TD SYNNEX", bg: ["#FF8A65", "#E8291C"],
    quote: "J'ai eu la chance de collaborer avec Henri sur un projet de transformation complexe. Henri se distingue par sa rare capacité à combiner excellence technique, vision stratégique et sens business. Au-delà de son rôle de consultant, il s'est impliqué comme un véritable partenaire — engagé, orienté solutions et toujours positif. Un consultant avec lequel je retravaillerai sans hésiter." },
  { initials: "BR", name: "Baptiste Herpin", role: "Directeur des opérations", company: "LegalPlace", bg: ["#FFB088", "#D4690D"],
    quote: "Il a su comprendre nos enjeux Business et nous accompagner tout au long des campagnes. Il a mis en place l’ensemble de la stratégie d’acquisition digitale au sein des équipes. Nous avons amélioré de façon significative nos leads." },
  { initials: "PL", name: "Philippa Launay", role: "Fondatrice et partner", company: "Zuma partners", bg: ["#D7B98C", "#7A5320"],
    quote: "Henri a su appliquer une méthodologie rigoureuse grâce à sa solution et a fait preuve d'une grande réactivité. Grâce à son travail nous avons validé nos hypothèse concernant nos canaux." },
  { initials: "VD", name: "Valentine Dupont", role: "Media planning & buying", company: "RTL Belgium", bg: ["#9EE76F", "#3B6D11"],
    quote: "Solution très complète. Henri nous a donné de chouettes tips pour réussir nos futures campagnes." },
  { initials: "JD", name: "Joris Dulac", role: "Part-time Growth Marketer", company: "ex-Signitic", bg: ["#F4D67A", "#B5860F"],
    quote: "Un accompagnement en profondeur permettant de bien comprendre les actions mise en place, de monter en compétences et d'obtenir des résultats rapidement" },
  
];

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

function Avatar({ t, size = 40 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: 999, flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center",
      background: `linear-gradient(135deg, ${t.bg[0]}, ${t.bg[1]})`, color: "#fff", fontSize: size * 0.32, fontWeight: 600, letterSpacing: "0.02em" }}>
      {t.initials}
    </span>
  );
}

function Marker({ accent }) {
  return (
    <span className="pf-mk">
      <span style={{ width: 7, height: 7, borderRadius: 999, background: accent.base, boxShadow: `0 0 0 3px ${accent.soft}` }} />
      <Mono>(07)</Mono>
      <span style={{ width: 18, height: 1, background: TXT_LO }} />
      <Mono>la preuve</Mono>
    </span>
  );
}

function Featured({ accent, size = "lg" }) {
  return (
    <div className="pf-head">
      <div className="pf-mk-center"><Marker accent={accent} /></div>
      <h2 className="pf-title">Ils connaissent notre travail. Voici ce qu'ils <span style={{ color: accent.base }}>en pensent</span>.</h2>
    </div>
  );
}

function Stars({ accent }) {
  return <span className="pf-stars" style={{ color: accent.base }}>★★★★★</span>;
}

function Card({ t, accent, rated }) {
  return (
    <div className="pf-card">
      {rated && <Stars accent={accent} />}
      <p className="pf-card-quote">{t.quote}</p>
      <div className="pf-card-author">
        <Avatar t={t} size={34} />
        <div className="pf-author-txt">
          <span className="pf-card-name">{t.name}</span>
          <span className="pf-author-role">{t.role} · {t.company}</span>
        </div>
      </div>
    </div>
  );
}

function Proof({ accentKey, layout = "marquee" }) {
  const accent = ACCENTS[accentKey] || ACCENTS["#E8291C"];
  const [spot, setSpot] = useState(0);

  let body;

  if (layout === "grille") {
    body = (
      <div className="pf-grid3">
        {TESTIMONIALS.map((t) => <Card key={t.name} t={t} accent={accent} rated />)}
      </div>
    );
  } else if (layout === "spotlight") {
    const t = TESTIMONIALS[spot];
    body = (
      <div className="pf-spot">
        <blockquote className="pf-spot-quote">
          <span style={{ color: accent.base }}>“</span>{t.quote}<span style={{ color: accent.base }}>”</span>
        </blockquote>
        <div className="pf-spot-who">
          <span className="pf-spot-name">{t.name}</span>
          <span className="pf-author-role">{t.role} · {t.company}</span>
        </div>
        <div className="pf-spot-avs">
          {TESTIMONIALS.map((x, i) => (
            <button key={x.name} className={"pf-spot-av" + (i === spot ? " active" : "")} onClick={() => setSpot(i)}
              style={i === spot ? { boxShadow: `0 0 0 2px ${accent.base}` } : undefined} aria-label={x.name}>
              <Avatar t={x} size={i === spot ? 52 : 42} />
            </button>
          ))}
        </div>
      </div>
    );
  } else {
    // marquee (default)
    const row1 = TESTIMONIALS.slice(0, 3).concat(TESTIMONIALS.slice(0, 3));
    const row2 = TESTIMONIALS.slice(3, 6).concat(TESTIMONIALS.slice(3, 6));
    body = (
      <div className="pf-marquee-wrap">
        <div className="pf-marq">
          <div className="pf-track pf-track-a">
            {row1.map((t, i) => <div key={i} className="pf-mcard"><Card t={t} accent={accent} /></div>)}
          </div>
        </div>
        <div className="pf-marq">
          <div className="pf-track pf-track-b">
            {row2.map((t, i) => <div key={i} className="pf-mcard"><Card t={t} accent={accent} /></div>)}
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="pf" style={{ background: BG, color: TXT_HI }}>
      <div className="pf-inner">
        <Featured accent={accent} size={layout === "marquee" ? "lg" : "sm"} />
        <div className="pf-body">{body}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ProofV2: Proof });

})();