// Sezione "Come collaboriamo con i brand?" \u2014 Brand poster
// 5 casi studio, dimensioni card uniformi, aspect-ratio thumbnail preservato.

const { HiBox: CSHiBox } = window;

// Slot fissi per le 3 immagini di ogni caso \u2014 garantisce card di pari altezza
const SLOT_RATIOS = ["4 / 5", "16 / 9", "1 / 1"];

const CASE_STUDIES = [
{
  brand: "Scalable Capital",
  logo: "assets/economico/logo-scalable.webp",
  sector: "Banking",
  color: "#C8541C",
  title: "Posizionare il brand come il miglior broker per investire",
  body: "Partnership across platforms per creare contenuti e menzionare il brand in modo costante, cos\u00ec da renderlo top of mind sul tema degli investimenti.",
  formats: ["Branded Carousels", "Newsletter", "YouTube Placement"],
  thumbs: [
  "assets/economico/cs-scalable-1.webp",
  "assets/economico/cs-scalable-2.webp",
  "assets/economico/cs-scalable-3.webp",
  "assets/economico/cs-scalable-4.webp"],
  links: ["https://www.instagram.com/p/DOLR0GsjYxY/", "https://www.instagram.com/p/DHYPylKMuBS/", "https://ilpunto.beehiiv.com/p/microstrategy-la-scommessa-pi-folle-di-wall-street", "https://www.youtube.com/watch?v=WTnw7qwoVeA"],

  metrics: [["4M", "Reach complessiva generata"], ["2.5y", "Anni di durata della partnership"]]
},
{
  brand: "Deloitte", wordmark: "Deloitte.", sector: "Consulting", color: "#1F4E8C",
  title: "Employer branding per avvicinare la GenZ al mondo della consulenza",
  body: "Partnership across platforms per posizionare il brand come realt\u00e0 di consulenza di riferimento in Italia, con focus sull'attrazione di talenti.",
  formats: ["Branded Carousels", "Reel Branded", "Newsletter"],
  thumbs: [
  "assets/economico/cs-deloitte-1.webp",
  "assets/economico/cs-deloitte-2.webp",
  "assets/economico/cs-deloitte-3.webp",
  "assets/economico/cs-deloitte-4.webp"],
  links: ["https://drive.google.com/file/d/14D_SMoWl3fxfiAY01Wj9oViwstzosv1y/view?usp=sharing", "https://www.instagram.com/p/DPOOaUYAGID/", "https://www.instagram.com/p/DL17rpTtE50/", "https://www.instagram.com/reels/DMKlb9TJyKc/"],

  metrics: [["1.2M", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
},
{
  brand: "iliad", logo: "assets/economico/logo-iliad.webp", sector: "Telecom", color: "#E40521",
  title: "Posizionare il brand come la telecom pi\u00f9 attenta al benessere delle persone",
  body: "Partnership across platforms con focus su 3 pilastri: sostenibilit\u00e0 di business, nuove generazioni (iliadship) e formazione (focus su lauree STEM).",
  formats: ["Branded Carousels", "Reel Branded", "Newsletter"],
  thumbs: [
  "assets/economico/cs-iliad-1.webp",
  "assets/economico/cs-iliad-2.webp",
  "assets/economico/cs-iliad-3.webp",
  "assets/economico/cs-iliad-4.webp"],
  links: ["https://www.instagram.com/p/DLPTt7_t9Ja/", "https://www.instagram.com/p/DME2JSDoszQ/", "https://ilpunto.beehiiv.com/p/cornelius-vanderbilt-il-contadino-che-divent-l-uomo-pi-ricco-d-america", "https://www.instagram.com/reel/DP5_6LBE5ld/"],

  metrics: [["650k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
},
{
  brand: "Italiana Assicurazioni",
  logo: "assets/economico/logo-italiana.webp",
  sector: "Insurance",
  color: "#0A2A66",
  title: "Awareness sull\u2019importanza dell\u2019assicurazione e su come protegge persone e aziende",
  body: "Partnership su Instagram con focus su educazione finanziaria e sul proteggere se stessi, la propria famiglia e la propria impresa dai rischi.",
  formats: ["Branded Carousels"],
  thumbs: [
  "assets/economico/cs-italiana-1.webp",
  "assets/economico/cs-italiana-2.webp",
  "assets/economico/cs-italiana-3.webp",
  "assets/economico/cs-italiana-4.webp"],
  links: ["https://www.instagram.com/p/DRhGkZBiIXR/", "https://www.instagram.com/p/DMzMbjoMpe5/", "https://www.instagram.com/p/DQ36WzjkSJH/", "https://www.instagram.com/p/DPyR4SiDeGu/"],

  metrics: [["2,4M", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
},
{
  brand: "Confindustria",
  logo: "assets/economico/logo-confindustria.webp",
  sector: "Institution",
  color: "#5170ff",
  title: "Sensibilizzazione al tessuto imprenditoriale e al Nucleare",
  body: "Partnership across platforms con focus su 2 pilastri: riportare l\u2019attenzione del Parlamento sui vantaggi dell\u2019Energia Nucleare e evidenziare i punti di forza e debolezza del tessuto imprenditoriale italiano.",
  formats: ["Branded Carousels", "Reel Branded", "Long Form video"],
  thumbs: [
  "assets/economico/cs-confindustria-economico-1.webp",
  "assets/economico/cs-confindustria-economico-2.webp",
  "assets/economico/cs-confindustria-economico-3.webp",
  "assets/economico/cs-confindustria-economico-4.webp"],
  links: ["https://www.instagram.com/p/DMMkh2XscWB/", "https://www.instagram.com/p/DRmQeVfiIlv/", "https://www.instagram.com/p/DXJe71dCDRB/", "https://drive.google.com/file/d/1Hls-KTSQf9Sqe4ARnXybd89ghDuqCLUS/view"],

  metrics: [["1,3M", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
}];


const TECHY_CASE_STUDIES = [
{
  brand: "MP Filtri",
  logo: "assets/techy/logo-mp-filtri.webp",
  sector: "Industrial",
  color: "#0E4FA8",
  title: "Awareness per un’eccellenza industriale nel settore della filtrazione per l’oleodinamica",
  body: "Partnership across platforms per la realizzazione di Short form per mostrare il dietro le quinte di una realtà industriale italiana leader di settore.",
  formats: ["Reel Branded", "Newsletter"],
  thumbs: [
  "assets/techy/cs-mpfiltri-1.webp",
  "assets/techy/cs-mpfiltri-2.webp",
  "assets/techy/cs-mpfiltri-techy-3.webp",
  "assets/techy/cs-mpfiltri-techy-4.webp"],
  links: [
  "https://www.instagram.com/p/DQqfiwqCvKD/",
  "https://www.instagram.com/p/DRyl7-kET0S/",
  "https://www.instagram.com/p/DVQtIlpDCNI/",
  "https://www.instagram.com/p/DXgqURCAShs/"],

  metrics: [["510k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
},
{
  brand: "Swappie",
  logo: "assets/techy/logo-swappie.webp",
  sector: "Technology",
  color: "#0A0A0A",
  title: "Posizionare il brand come top of mind per il tech ricondizionato",
  body: "Partnership across platforms per la realizzazione di Short form per mostrare come funziona il ricondizionamento di un iPhone e perché è più sostenibile comprare ricondizionato rispetto a comprare nuovo.",
  formats: ["Reel Branded", "Newsletter"],
  thumbs: [
  "assets/techy/cs-swappie-1.webp",
  "assets/techy/cs-swappie-2.webp",
  "assets/techy/cs-swappie-3.webp",
  "assets/techy/cs-swappie-4.webp"],
  links: [
  "https://www.instagram.com/reel/DQdnmNnjBSN/",
  "https://www.instagram.com/reel/DRcHVZOE6U-/",
  "https://www.instagram.com/reel/DSSLY_JE2vl/",
  "https://www.instagram.com/reel/DX_jp2lE4wR/"],

  metrics: [["575k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
},
{
  brand: "Xiaomi",
  logo: "assets/techy/logo-xiaomi.webp",
  sector: "Technology",
  color: "#FF6900",
  title: "Awareness sul lancio di nuovi prodotti tech del brand",
  body: "Partnership across platforms per la realizzazione di Short form per mostrare le features e le caratteristiche tecniche dei nuovi top di gamma di Xiaomi.",
  formats: ["Reel Branded", "Newsletter"],
  thumbs: [
  "assets/techy/cs-xiaomi-1.webp",
  "assets/techy/cs-xiaomi-2.webp",
  "assets/techy/cs-xiaomi-3.webp",
  "assets/techy/cs-xiaomi-techy-4.webp"],
  links: [
  "https://www.instagram.com/reel/DUk5gxCjEBS/",
  "https://www.instagram.com/reel/DQYeBocDFyO/",
  "https://www.instagram.com/reel/DPv00vZCPjv/",
  "https://www.instagram.com/reel/DR3vz8bkSQn/"],

  metrics: [["650k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
},
{
  brand: "Baker Hughes",
  logo: "assets/techy/logo-bakerhughes.webp",
  sector: "Industrial",
  color: "#0E5C57",
  title: "Employer branding con focus sulle tecnologie industriali",
  body: "Partnership across platforms per la realizzazione di Short form per mostrare le tecnologie industriali e l\u2019innovazione di un\u2019azienda di scala globale.",
  formats: ["Reel Branded", "Newsletter"],
  thumbs: [
  "assets/techy/cs-bakerhughes-1.webp",
  "assets/techy/cs-bakerhughes-2.webp"],
  links: [
  "https://www.instagram.com/reel/DW3d0ehjW2K/",
  "https://www.instagram.com/reel/DXwI9VNgDl-/"],

  metrics: [["560k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]]
}];


const TOTAL = CASE_STUDIES.length;

function useSpotlight() {
  const [idx, setIdx] = React.useState(0);
  return {
    idx, setIdx,
    canPrev: idx > 0,
    canNext: idx < TOTAL - 1,
    prev: () => setIdx((i) => Math.max(0, i - 1)),
    next: () => setIdx((i) => Math.min(TOTAL - 1, i + 1))
  };
}

function ArrowIcon({ dir }) {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
    style={{ transform: dir === "prev" ? "scaleX(-1)" : "none" }}>
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>);

}

function NavArrow({ dir, active, onClick }) {
  if (!active) return null;
  return (
    <button aria-label={dir === "prev" ? "Precedente" : "Successivo"} onClick={onClick}
    onMouseEnter={(e) => {e.currentTarget.style.transform = "scale(1.06)";e.currentTarget.style.background = "#fff";}}
    onMouseLeave={(e) => {e.currentTarget.style.transform = "scale(1)";e.currentTarget.style.background = "rgba(255,255,255,0.94)";}}
    style={{
      width: 56, height: 56, borderRadius: 999,
      background: "rgba(255,255,255,0.94)", color: "#0A0A0A",
      border: "1px solid rgba(0,0,0,0.06)",
      boxShadow: "0 10px 28px -10px rgba(0,0,0,0.18)",
      display: "grid", placeItems: "center", cursor: "pointer",
      transition: "transform 0.2s, background 0.2s"
    }}>
      <ArrowIcon dir={dir} />
    </button>);

}

function Counter({ idx, total, color = "#0A0A0A" }) {
  const pad = (n) => String(n + 1).padStart(2, "0");
  return (
    <div style={{
      fontFamily: "var(--font-mono)", fontSize: 12,
      letterSpacing: "0.22em", textTransform: "uppercase", color
    }}>
      <span style={{ fontWeight: 700 }}>{pad(idx)}</span>
      <span style={{ opacity: 0.4 }}> / {pad(total - 1)}</span>
    </div>);

}

function Thumb({ src, ratio, shadow = "0 16px 32px -10px rgba(28,22,8,0.18)", href }) {
  const img = (
    <img src={src} alt="" style={{
      width: "100%", height: "100%", objectFit: "cover", display: "block"
    }} />);
  const wrapStyle = {
    aspectRatio: ratio,
    borderRadius: 16,
    overflow: "hidden",
    background: "#fff",
    boxShadow: shadow,
    display: "block",
    transition: "transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease"
  };
  if (href && String(href).trim()) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer" style={{ ...wrapStyle, cursor: "pointer" }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 24px 50px -14px rgba(28,22,8,0.28)"; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = shadow; }}>
        {img}
      </a>);
  }
  return <div style={wrapStyle}>{img}</div>;

}

function CaseStudiesPoster({ accent, dataset }) {
  const cases = dataset || CASE_STUDIES;
  const [idx, setIdx] = React.useState(0);
  const cur = Math.min(idx, cases.length - 1);
  const s = { idx: cur, setIdx,
    canPrev: cur > 0,
    canNext: cur < cases.length - 1,
    next: () => setIdx((i) => Math.min(cases.length - 1, i + 1)),
    prev: () => setIdx((i) => Math.max(0, i - 1)) };
  const cs = cases[s.idx];

  // Preload all images (logos + thumbs) on mount so navigation never lags
  React.useEffect(() => {
    const urls = [];
    cases.forEach((c) => {
      if (c.logo) urls.push(c.logo);
      (c.thumbs || []).forEach((t) => urls.push(t));
    });
    urls.forEach((u) => { const i = new Image(); i.src = u; });
  }, [cases]);
  return (
    <section style={{ background: "#fff", padding: "clamp(80px, 10vw, 140px) 0" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "center", alignItems: "baseline", marginBottom: "clamp(40px, 5vw, 64px)" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(38px, 5vw, 68px)", lineHeight: 1.02, letterSpacing: "-0.03em", margin: 0, textAlign: "center" }}>
            Come <CSHiBox bg={accent}>collaboriamo</CSHiBox> con i brand?
          </h2>
        </div>

        <div className="cs-pt-card" style={{
          borderRadius: 28, overflow: "hidden",
          display: "grid", gridTemplateColumns: "1.05fr 1fr",
          gridTemplateRows: "1fr",
          height: 640, position: "relative",
          boxShadow: "0 30px 80px -20px rgba(0,0,0,0.18)"
        }}>
          {/* LEFT \u2014 brand color */}
          <div key={"l" + s.idx} style={{
            background: cs.color, color: "#fff", padding: "clamp(32px, 3.4vw, 48px)",
            display: "flex", flexDirection: "column",
            position: "relative", overflow: "hidden",
            animation: "cs-pt-fade 0.55s ease both"
          }}>
            {/* TOP ROW: sector + format pills */}
            <div style={{ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <div style={{
                display: "inline-flex", alignItems: "center", gap: 10,
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.22em",
                textTransform: "uppercase", color: "rgba(255,255,255,0.85)"
              }}>
                <span style={{ width: 22, height: 1, background: "rgba(255,255,255,0.6)" }} />
                {cs.sector}
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {cs.formats.map((f, i) =>
                <span key={i} style={{
                  fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em",
                  padding: "6px 12px", borderRadius: 999,
                  background: "rgba(255,255,255,0.14)", border: "1px solid rgba(255,255,255,0.22)", color: "#fff"
                }}>{f}</span>
                )}
              </div>
            </div>

            {/* MIDDLE BLOCK: logo + title + body, centered between header and metrics */}
            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", flex: 1, gap: 18, paddingTop: 24, paddingBottom: 24 }}>
              {/* BRAND LOGO o WORDMARK */}
              <div>
                {cs.logo ?
                <img src={cs.logo} alt={cs.brand} style={{ height: cs.logoHeight || 38, width: "auto", display: "block" }} /> :
                cs.wordmark ?
                <div style={{
                    fontFamily: "var(--font-display)", fontWeight: 800,
                    fontSize: "clamp(28px, 2.6vw, 38px)", letterSpacing: "-0.025em", lineHeight: 1
                  }}>{cs.wordmark}</div> :

                <div style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
                    <div style={{
                    fontFamily: "var(--font-display)", fontWeight: 800,
                    fontSize: "clamp(26px, 2.4vw, 34px)", letterSpacing: "-0.02em", lineHeight: 1
                  }}>{cs.brand}</div>
                  </div>
                }
              </div>

              {/* TITLE + BODY */}
              <div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: "clamp(24px, 2.8vw, 38px)", lineHeight: 1.08, letterSpacing: "-0.025em",
                  margin: 0, textWrap: "balance"
                }}>{cs.title}</h3>
                <p style={{ marginTop: 14, fontSize: cs.bodySize || 14.5, lineHeight: 1.55, color: "rgba(255,255,255,0.85)" }}>{cs.body}</p>
              </div>
            </div>

            {/* METRICS */}
            <div style={{
              display: "flex", gap: "clamp(28px, 4vw, 56px)", alignItems: "flex-start",
              paddingTop: 22, borderTop: "1px solid rgba(255,255,255,0.22)"
            }}>
              {cs.metrics.map(([v, l], i) =>
              <React.Fragment key={i}>
                  <div>
                    <div style={{
                    fontFamily: "var(--font-display)", fontWeight: 800,
                    fontSize: "clamp(44px, 4.6vw, 68px)", lineHeight: 0.95, letterSpacing: "-0.04em",
                    whiteSpace: "nowrap"
                  }}>{v}</div>
                    <div style={{ fontSize: 13, opacity: 0.85, marginTop: 8, maxWidth: 220 }}>{l}</div>
                  </div>
                  {i < cs.metrics.length - 1 &&
                <div style={{ width: 1, alignSelf: "stretch", background: "rgba(255,255,255,0.22)" }} />
                }
                </React.Fragment>
              )}
            </div>
          </div>

          {/* RIGHT \u2014 thumbnails: 3-up (4:5 / 16:9 / 1:1) o 2x2 portrait se thumbs.length === 4 */}
          <div key={"r" + s.idx} style={{
            background: "#F2EEE5", padding: "clamp(28px, 3vw, 40px)",
            position: "relative",
            display: "grid",
            gridTemplateColumns: cs.thumbs.length === 2 ? "1fr 1fr" : cs.thumbs.length === 4 ? "1fr 1fr" : cs.thumbs.length === 6 ? "1fr 1fr" : "1.1fr 1fr",
            gridTemplateRows: cs.thumbs.length === 6 ? "auto auto auto" : "auto auto",
            gap: cs.thumbs.length === 6 ? 10 : 14,
            alignContent: "center",
            animation: "cs-pt-rise 0.65s cubic-bezier(.2,.8,.2,1) both"
          }}>
            {cs.thumbs.length === 2 ?
            <>
                <div style={{ gridColumn: "1", gridRow: "1 / span 2", alignSelf: "center" }}>
                  <Thumb src={cs.thumbs[0]} ratio={"4 / 5"} href={(cs.links || [])[0]} />
                </div>
                <div style={{ gridColumn: "2", gridRow: "1 / span 2", alignSelf: "center" }}>
                  <Thumb src={cs.thumbs[1]} ratio={"4 / 5"} href={(cs.links || [])[1]} />
                </div>
              </> :
            cs.thumbs.length === 6 ?
            <>
                {cs.thumbs.map((t, i) =>
                  <div key={i} style={{ gridColumn: (i % 2) + 1, gridRow: Math.floor(i / 2) + 1 }}>
                    <Thumb src={t} ratio={"16 / 9"} href={(cs.links || [])[i]} />
                  </div>
                )}
              </> :
            cs.thumbs.length === 4 ?
            <>
                <div style={{ gridColumn: "1", gridRow: "1" }}>
                  <Thumb src={cs.thumbs[0]} ratio={"4 / 5"} href={(cs.links || [])[0]} />
                </div>
                <div style={{ gridColumn: "2", gridRow: "1" }}>
                  <Thumb src={cs.thumbs[1]} ratio={"4 / 5"} href={(cs.links || [])[1]} />
                </div>
                <div style={{ gridColumn: "1", gridRow: "2" }}>
                  <Thumb src={cs.thumbs[2]} ratio={"4 / 5"} href={(cs.links || [])[2]} />
                </div>
                <div style={{ gridColumn: "2", gridRow: "2" }}>
                  <Thumb src={cs.thumbs[3]} ratio={"4 / 5"} href={(cs.links || [])[3]} />
                </div>
              </> :

            <>
                <div style={{ gridColumn: "1", gridRow: "1 / span 2", alignSelf: "center" }}>
                  <Thumb src={cs.thumbs[0]} ratio={SLOT_RATIOS[0]} href={(cs.links || [])[0]} />
                </div>
                <div style={{ gridColumn: "2", gridRow: "1" }}>
                  <Thumb src={cs.thumbs[1]} ratio={SLOT_RATIOS[1]} href={(cs.links || [])[1]} />
                </div>
                <div style={{ gridColumn: "2", gridRow: "2" }}>
                  <Thumb src={cs.thumbs[2]} ratio={SLOT_RATIOS[2]} href={(cs.links || [])[2]} />
                </div>
              </>
            }

            <div style={{
              position: "absolute", right: "clamp(20px, 2.5vw, 32px)", bottom: "clamp(20px, 2.5vw, 32px)",
              display: "flex", gap: 10, zIndex: 2
            }}>
              <NavArrow dir="prev" active={s.canPrev} onClick={s.prev} />
              <NavArrow dir="next" active={s.canNext} onClick={s.next} />
            </div>
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 32 }}>
          {cases.map((_, i) =>
          <button key={i} onClick={() => s.setIdx(i)} aria-label={`Caso ${i + 1}`} style={{
            width: i === s.idx ? 28 : 8, height: 8, borderRadius: 999,
            background: i === s.idx ? "#0A0A0A" : "rgba(10,10,10,0.18)",
            border: "none", cursor: "pointer",
            transition: "width 0.4s ease, background 0.4s ease",
            padding: 0
          }} />
          )}
        </div>

        <style>{`
          @keyframes cs-pt-fade { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
          @keyframes cs-pt-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
          @media (max-width:980px){ .cs-pt-card{ grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; height: auto !important; min-height: 0 !important; } }
        `}</style>
      </div>
    </section>);

}

// Agency case studies — popolati dalle pagine specifiche dei casi studio
const AGENCY_YT_CASE_STUDIES = [
  {
    brand: "Moneyfarm",
    logo: "assets/agency/logo-moneyfarm-white.webp",
    logoHeight: 38,
    sector: "Wealth",
    color: "#FF2E5B",
    title: "Gestione completa canale YouTube ITA + UK",
    body: "Gestione end-to-end del canale YouTube di Moneyfarm in Italia ed estensione del modello sul mercato UK: piano editoriale, scripting, registrazione, post-produzione e ottimizzazione SEO.",
    formats: ["YouTube long-form ITA", "YouTube long-form UK", "YouTube Shorts"],
    thumbs: [
      "assets/agency/yt-moneyfarm-perdendo.webp",
      "assets/agency/yt-moneyfarm-ai.webp",
      "assets/agency/yt-moneyfarm-bloccati.webp",
      "assets/agency/yt-moneyfarmuk-etf.webp",
      "assets/agency/yt-moneyfarmuk-portfolio.webp",
      "assets/agency/yt-moneyfarmuk-investing.webp"
    ],
    links: [
      "https://www.youtube.com/watch?v=iBTeqSYrPug",
      "https://www.youtube.com/watch?v=-YtZX8eBG-E",
      "https://www.youtube.com/watch?v=G0w_xe-M4Po",
      "https://www.youtube.com/watch?v=ngR3kzT8Ufo",
      "https://www.youtube.com/watch?v=s0Tf6GgTy-8",
      "https://www.youtube.com/watch?v=tKytXFIwKKA"
    ],
    metrics: [["x96", "Video Long prodotti /anno"], ["1.75M", "Reach complessiva tra ITA e UK"]]
  },
  {
    brand: "Scalable Capital",
    logo: "assets/agency/logo-scalable-white.webp",
    logoHeight: 68,
    sector: "Banking",
    color: "#3B5BFF",
    title: "Gestione canale YouTube — documentari finanziari",
    body: "Produzione e gestione editoriale del canale YouTube branded di Scalable Capital: format documentaristico che parte da storie reali di finanza per costruire un canale media proprietario di alta qualità.",
    formats: ["YouTube long-form", "YouTube Shorts"],
    thumbs: [
      "assets/agency/yt-scalable-palantir.webp",
      "assets/agency/yt-scalable-bitcoin.webp",
      "assets/agency/yt-scalable-elon.webp",
      "assets/agency/yt-scalable-chip.webp",
      "assets/agency/yt-scalable-microsoft.webp",
      "assets/agency/yt-scalable-ipo.webp"
    ],
    links: [
      "https://www.youtube.com/watch?v=avS06COx6S4",
      "https://www.youtube.com/watch?v=ZyWy9YeO1aw",
      "https://www.youtube.com/watch?v=EOIsTjckMFo",
      "https://www.youtube.com/watch?v=tUK4MAsQbKc",
      "https://www.youtube.com/watch?v=QnAiBa9zspw",
      "https://www.youtube.com/watch?v=oYufJMV5JlA"
    ],
    metrics: [[<>20<span style={{ color: "#fff" }}>+</span></>, "Video prodotti all'anno"], ["325k", "Reach complessiva"]]
  }
];

const AGENCY_SHORTFORM_CASE_STUDIES = [
  {
    brand: "Moneyfarm",
    logo: "assets/agency/logo-moneyfarm-white.webp",
    logoHeight: 38,
    sector: "Wealth",
    color: "#7A4DFF",
    title: "Gestione campagne UGC per acquisizione",
    body: "Gestione di una campagna UGC continuativa per Moneyfarm: produzione di contenuti nativi cross-platform pensati per la conversione e l'acquisizione di nuovi investitori, con A/B test continuo su hook e angle.",
    formats: ["UGC cross-platform", "A/B test creativi"],
    thumbs: [
      "assets/agency/ugc-moneyfarm-1.webp",
      "assets/agency/ugc-moneyfarm-2.webp",
      "assets/agency/ugc-moneyfarm-3.webp",
      "assets/agency/ugc-moneyfarm-4.webp"
    ],
    links: ["", "", "", ""],
    metrics: [[<>48<span style={{ color: "#fff" }}>x</span></>, "UGC prodotti nel corso del 2026"], ["5+", "Format diversi sperimentati"]]
  }
];

const AGENCY_SOCIAL_CASE_STUDIES = [
  {
    brand: "Confindustria",
    logo: "assets/economico/logo-confindustria.webp",
    sector: "Institution",
    color: "#1b458f",
    title: "LinkedIn management istituzionale",
    body: "Gestione del canale LinkedIn istituzionale di Confindustria e del profilo del Presidente Emanuele Orsini: proposte editoriali, copy, grafica e contenuti legati all'agenda economico-industriale italiana.",
    formats: ["LinkedIn Confindustria", "LinkedIn Presidente Orsini"],
    thumbs: [
      "assets/economico/cs-confindustria-1.webp",
      "assets/economico/cs-confindustria-2.webp",
      "assets/economico/cs-confindustria-3.webp",
      "assets/economico/cs-confindustria-4.webp"
    ],
    links: [
      "https://www.linkedin.com/posts/confindustria_il-nucleare-%C3%A8-tra-le-fonti-energetiche-pi%C3%B9-activity-7393974256663076864-vJA5",
      "https://www.linkedin.com/posts/confindustria_cop30-sostenibilitaeq-transizioneverde-activity-7367155792447180801-uI3M",
      "https://www.linkedin.com/posts/orsiniemanuele_lenergia-%C3%A8-una-sfida-economica-industriale-activity-7458498463685820417-ddba",
      "https://www.linkedin.com/posts/orsiniemanuele_lo-dico-chiaro-si-deve-trovare-una-soluzione-activity-7393748079428116481-rdzj"
    ],
    metrics: [["20M", "Impression totali generate"], ["+90k", "I nuovi follower aggiunti"]]
  },
  {
    brand: "Gualini Lamiere",
    logo: "assets/agency/logo-gualini.webp",
    sector: "Industrial",
    color: "#0074B0",
    title: "Personal brand LinkedIn per il C-Level",
    body: "Personal branding LinkedIn per il C-Level di Gualini Lamiere: strategia, scrittura, video e gestione continuativa dei profili di CEO, COO e CRO per costruire autorevolezza nel settore industriale.",
    formats: ["LinkedIn personal", "Copy & ghostwriting", "Building in public"],
    thumbs: [
      "assets/agency/cs-gualini-1.webp",
      "assets/agency/cs-gualini-2.webp"
    ],
    links: [
      "https://www.linkedin.com/posts/miriam-gualini_ho-speso-50mila-euro-per-dormire-sonni-pi%C3%B9-activity-7187034713125969920-aWVw",
      "https://www.linkedin.com/posts/miriam-gualini_4-anni-fa-siamo-stati-scelti-da-renzo-piano-activity-7185585170819760129-Sc_8"
    ],
    metrics: [["€400k", "Pipeline commerciale generata"], ["17M", "Reach cumulata dei 3 profili"]]
  }
];

function CaseStudiesAllVariants({ accent, slug }) {
  let dataset;
  if (slug === "media-techy") dataset = TECHY_CASE_STUDIES;
  else if (slug === "agency-yt") dataset = AGENCY_YT_CASE_STUDIES;
  else if (slug === "agency-shortform") dataset = AGENCY_SHORTFORM_CASE_STUDIES;
  else if (slug === "agency-social") dataset = AGENCY_SOCIAL_CASE_STUDIES;
  else dataset = CASE_STUDIES;
  return <CaseStudiesPoster accent={accent} dataset={dataset} />;
}

Object.assign(window, { CaseStudiesAllVariants });