// Sub-pages: Media, Agency, Casi Studio, Chi Siamo, Contatti
// Stile coerente con la homepage: titoli centrati con HiBox, sezioni alternate
// bianco / #f6f6f6 / #F2F3F2, NumberStat, bottoni pill colorati con freccia.

/* ============ Shared section bits ============ */
function PageHero({ kicker, hiboxBg, hiboxText, titleBefore, titleAfter, lead, kickerColor = "#0A0A0A" }) {
  return (
    <section style={{ background: "#fff", padding: "clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 80px)" }}>
      <div className="container" style={{ textAlign: "center" }}>
        {kicker &&
        <div style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(14px, 1.05vw, 16px)",
          letterSpacing: "0.02em", color: kickerColor, marginBottom: 22, opacity: 0.85
        }}>{kicker}</div>
        }
        <h1 className="page-hero-title" style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(40px, 5.4vw, 78px)", lineHeight: 1.06,
          letterSpacing: "-0.03em", margin: 0,
          textWrap: "balance", maxWidth: 1100, marginInline: "auto"
        }}>
          {titleBefore}
          {hiboxText && <HiBox bg={hiboxBg}>{hiboxText}</HiBox>}
          {titleAfter}
        </h1>
        <style>{`
          @media (max-width: 640px) {
            .page-hero-title { font-size: 34px !important; margin-inline: 0 !important; }
            .page-hero-title [data-hibox] { white-space: normal !important; padding-left: 12px !important; padding-right: 12px !important; }
          }
        `}</style>
        {lead &&
        <p style={{
          marginTop: 32, marginInline: "auto", maxWidth: 720,
          fontSize: "clamp(15px, 1.15vw, 18px)", lineHeight: 1.55,
          color: "var(--c-fg)", opacity: 0.78
        }}>{lead}</p>
        }
      </div>
    </section>);

}

function CTASplit({ navigate }) {
  return (
    <section style={{ background: "#F2F3F2", padding: "clamp(64px, 9vw, 140px) 0" }}>
      <div className="container">
        <div className="cta-split" style={{
          display: "grid", gridTemplateColumns: "1fr 1px 1fr",
          gap: "clamp(32px, 5vw, 80px)", alignItems: "stretch"
        }}>
          <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", gap: 36 }}>
            <h3 style={{
              flex: "0 0 auto",
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(30px, 3vw, 48px)", lineHeight: 1.15,
              letterSpacing: "-0.02em", margin: 0, color: "#0A0A0A",
              maxWidth: 560, textWrap: "balance"
            }}>
              Vuoi mostrare il tuo brand a <HiBox bg="#3FB28E">milioni di persone?</HiBox>
            </h3>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
              <div style={{ fontSize: 16, color: "#0A0A0A", opacity: 0.85 }}>Scopri i nostri Media:</div>
              <a href="#media" onClick={(e) => {e.preventDefault();navigate("media");}} style={ctaPill("#3FB28E")}>
                Scopri di più <ArrowRight />
              </a>
            </div>
          </div>
          <div className="cta-divider" style={{ width: 1, alignSelf: "stretch", background: "rgba(0,0,0,0.12)" }}></div>
          <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "space-between", gap: 36 }}>
            <h3 style={{
              flex: "0 0 auto",
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(30px, 3vw, 48px)", lineHeight: 1.15,
              letterSpacing: "-0.02em", margin: 0, color: "#0A0A0A",
              maxWidth: 560, textWrap: "balance"
            }}>
              Vuoi produrre contenuti che attirano <HiBox bg="#3B5BFF">davvero l'attenzione?</HiBox>
            </h3>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
              <div style={{ fontSize: 16, color: "#0A0A0A", opacity: 0.85 }}>Scopri la nostra Agency:</div>
              <a href="#agency" onClick={(e) => {e.preventDefault();navigate("agency");}} style={ctaPill("#3B5BFF")}>
                Scopri di più <ArrowRight />
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .cta-split { grid-template-columns: 1fr !important; }
          .cta-divider { width: auto !important; height: 1px !important; align-self: stretch !important; }
        }
      `}</style>
    </section>);

}

const ctaPill = (bg) => ({
  background: bg, color: "#fff",
  fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17,
  padding: "16px 30px", borderRadius: "999px 999px 999px 0px",
  display: "inline-flex", alignItems: "center", gap: 14,
  textDecoration: "none",
  transition: "transform 200ms, filter 200ms"
});

function PageNumberStat({ value, desc, divider, accentColor = "#F96339" }) {
  const isElement = React.isValidElement(value);
  const s = isElement ? "" : String(value);
  const plusMatch = isElement ? [null, "", ""] : s.match(/^(.*?)(\+)?$/);
  const base = plusMatch[1];
  const plus = plusMatch[2];
  const slashIdx = base.indexOf("/");
  let head, tail;
  if (slashIdx >= 0) {
    head = base.slice(0, slashIdx + 1);
    tail = base.slice(slashIdx + 1);
  } else {
    const suffixMatch = base.match(/^(.*?)([kKmMbByY])$/);
    if (suffixMatch) {
      head = suffixMatch[1];
      tail = suffixMatch[2];
    } else {
      head = base;
      tail = "";
    }
  }
  return (
    <div style={{
      paddingInline: "clamp(20px, 3vw, 48px)",
      borderLeft: divider ? "1px solid #D9D7D2" : "none",
      textAlign: "center"
    }}>
      <div style={{
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: "clamp(64px, 7.5vw, 116px)", lineHeight: 0.95,
        letterSpacing: "-0.04em", color: "#0A0A0A",
        display: "flex", alignItems: "flex-start", justifyContent: "center", gap: 4
      }}>
        {isElement ? value : <><span>{head}{tail && <span style={{ color: accentColor }}>{tail}</span>}</span>{plus && <span style={{ color: accentColor }}>+</span>}</>}
      </div>
      <div style={{
        marginTop: 24, fontSize: "clamp(14px, 1.05vw, 16px)",
        lineHeight: 1.45, color: "#0A0A0A"
      }}>
        {desc}
      </div>
    </div>);

}

/* ============ MEDIA PAGE ============ */
const MediaPage = ({ navigate }) => {
  const verticals = [
  {
    slug: "media-economico",
    handle: "@ilpuntoeconomico", title: "Il Punto Economico",
    img: "assets/media/card-economico.webp",
    logo: "assets/media/logo-economico.webp",
    glow: "assets/media/glow-yellow.webp",
    hlBg: "#FFE2A8", hoverBg: "#ffb641",
    tagline: "La community per chi vuole davvero capirne di più di",
    highlight: "economia e attualità",
    stats: [["520k", "Community Instagram"], ["165k", "Iscritti YouTube"], ["2.5M", "Interazioni / 90 giorni"]]
  },
  {
    slug: "media-techy",
    handle: "@techy_ita", title: "Techy",
    img: "assets/media/card-techy.webp",
    logo: "assets/media/logo-techy.webp",
    glow: "assets/media/glow-pink.webp",
    hlBg: "#FFD6E8", hoverBg: "#fb037c",
    tagline: "La community per chi vuole capirne di più di",
    highlight: "innovazione, tecnologia e AI",
    stats: [["460k", "Community IG + TikTok"], ["15k", "Iscritti YouTube"], ["1.5M", "Interazioni / 90 giorni"]]
  }];


  return (
    <main>
      <PageHero
        kicker="I nostri Media"
        titleBefore={<>Creiamo community curiose<br /></>}
        hiboxBg="#3FB28E" hiboxText="che amano la divulgazione"
        titleAfter=""
        lead="Due canali, ma la stessa ossessione: creare contenuti che la gente sceglie di guardare." />
      

      {/* Numbers */}
      <section style={{ background: "#f6f6f6", padding: "clamp(64px, 8vw, 120px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: 0, textAlign: "center",
            textWrap: "balance", maxWidth: 1100, marginInline: "auto"
          }}>
            Insieme superiamo <HiBox bg="#3FB28E">il milione di persone</HiBox>
          </h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
            marginTop: 80, alignItems: "start"
          }} className="numbers-grid">
            {[
            ["1M", <>Le nostre sono tra le community<br />più grandi delle rispettive verticali</>, false],
            ["50M", <>Le impression che generiamo<br />ogni 3 mesi tra i nostri canali</>, true],
            ["45", <>I brand con cui abbiamo<br />collaborato negli ultimi 12 mesi</>, true]].
            map(([num, dsc, div], i) =>
            <div key={i} style={{
              paddingInline: "clamp(20px, 3vw, 48px)",
              borderLeft: div ? "1px solid #D9D7D2" : "none",
              textAlign: "center"
            }}>
                <div style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: "clamp(64px, 7.5vw, 116px)", lineHeight: 0.95,
                letterSpacing: "-0.04em", color: "#0A0A0A",
                display: "flex", alignItems: "flex-start", justifyContent: "center", gap: 4
              }}>
                  <span>{num}</span><span style={{ color: "#E94B2C" }}>+</span>
                </div>
                <div style={{ marginTop: 24, fontSize: "clamp(14px, 1.05vw, 16px)", lineHeight: 1.45, color: "#0A0A0A" }}>{dsc}</div>
              </div>
            )}
          </div>
          <style>{`@media (max-width:880px){ .numbers-grid{ grid-template-columns: 1fr !important; gap: 56px; } .numbers-grid > *{ border-left: 0 !important; } }`}</style>
        </div>
      </section>

      {/* Verticals */}
      <section style={{ background: "#fff", padding: "clamp(64px, 8vw, 120px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: 0, textAlign: "center",
            textWrap: "balance", maxWidth: 1100, marginInline: "auto"
          }}>
            Due <HiBox bg="#6B5CFF">verticali Media</HiBox><br />una sola ossessione
          </h2>

          <div style={{ display: "grid", gap: 28, marginTop: 72 }}>
            {verticals.map((v, i) =>
            <VerticalRow key={i} v={v} flip={i % 2 === 1} navigate={navigate} />
            )}
          </div>
        </div>
      </section>

      <CTASplit navigate={navigate} />
    </main>);

};

function VerticalRow({ v, flip, navigate }) {
  return (
    <div className="vertical-row" style={{
      display: "grid",
      gridTemplateColumns: flip ? "1.05fr 1fr" : "1fr 1.05fr",
      gap: "clamp(24px, 4vw, 64px)",
      background: "#F5F3EE", borderRadius: 18,
      padding: "clamp(24px, 3vw, 48px)",
      alignItems: "center"
    }}>
      <div style={{
        order: flip ? 2 : 1,
        position: "relative",
        display: "flex", alignItems: "center", justifyContent: "center",
        minHeight: 320
      }}>
        {v.glow &&
        <img src={v.glow} alt="" aria-hidden="true" style={{
          position: "absolute", top: "50%", left: "50%",
          transform: "translate(-50%, -50%)",
          width: "85%", aspectRatio: "1/1", height: "auto",
          objectFit: "contain", pointerEvents: "none", zIndex: 0
        }} />
        }
        <img src={v.img} alt={v.handle} style={{ position: "relative", zIndex: 1, width: "75%", height: "auto", objectFit: "contain" }} />
      </div>
      <div style={{ order: flip ? 1 : 2, padding: "8px 8px" }}>
        <img src={v.logo} alt="" style={{ width: 56, height: 56, borderRadius: 999, marginBottom: 18 }} />
        <div style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(28px, 2.6vw, 40px)", letterSpacing: "-0.02em",
          marginBottom: 12
        }}>{v.handle}</div>
        <div style={{ fontSize: 17, lineHeight: 1.5, color: "#0A0A0A", marginBottom: 28, maxWidth: 460 }}>
          {v.tagline}{" "}
          <HiBoxStatic bg={v.hlBg} color="#0A0A0A">{v.highlight}</HiBoxStatic>
        </div>
        <div style={{ display: "flex", gap: "clamp(20px, 3vw, 44px)", marginBottom: 32, flexWrap: "wrap" }}>
          {v.stats.map(([n, l], j) =>
          <div key={j}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(28px, 2.4vw, 38px)", lineHeight: 1, letterSpacing: "-0.03em" }}>{n}</div>
              <div style={{ fontSize: 13, color: "#4A4A4A", marginTop: 6, fontWeight: 600 }}>{l}</div>
            </div>
          )}
        </div>
        <a href={"#" + v.slug} onClick={(e) => {e.preventDefault();navigate && navigate(v.slug);}} style={ctaPill(v.hoverBg)}>
          Scopri di più <ArrowRight />
        </a>
      </div>
      <style>{`@media (max-width:880px){ .vertical-row{ grid-template-columns: 1fr !important; } .vertical-row > *{ order: initial !important; } }`}</style>
    </div>);

}

// Static highlight (for inline body text — solid color, dark text)
function HiBoxStatic({ children, bg, color = "#0A0A0A" }) {
  return (
    <span style={{
      background: bg, color, padding: "0.05em 0.35em",
      fontWeight: 700, borderRadius: 2,
      boxDecorationBreak: "clone", WebkitBoxDecorationBreak: "clone"
    }}>{children}</span>);

}

/* ============ AGENCY PAGE ============ */
const AgencyPage = ({ navigate }) => {
  const services = [
  {
    idx: "01", slug: "agency-yt", accent: "#3B5BFF", title: "YouTube Long-Form",
    hlBg: "#DDE9FB", hl: "tuo brand al centro",
    body: "Posizioniamo il tuo brand come autorità nella tua nicchia. Topic, scripting, post-production, SEO e analytics: tutto gestito da noi, ma con il tuo brand al centro.",
    bullets: ["Strategia & definizione del PED", "Scripting & casting", "Post-production & SEO", "Reporting mensile"]
  },
  {
    idx: "02", slug: "agency-shortform", accent: "#7A4DFF", title: "Short Form & UGC",
    hlBg: "#E5E2FF", hl: "organico o per advertising",
    body: "Reels, TikTok e Shorts pensati per fermare lo scroll. Hook che funzionano, scripting diretto, casting di creator UGC e consegna in 72h. In organico o per advertising.",
    bullets: ["Hook & scripting", "Casting creator UGC", "Editing rapido", "A/B testing creativi"]
  },
  {
    idx: "03", slug: "agency-social", accent: "#FF6B9E", title: "Social Media & Content",
    hlBg: "#FFD6E8", hl: "100% alle esigenze del tuo brand",
    body: "Post, caroselli, copywriting, grafica, programmazione e reporting su IG, LinkedIn e TikTok. Una redazione esterna, dedicata al 100% alle esigenze del tuo brand.",
    bullets: ["PED mensile", "Copy & Visual design", "Community management", "KPI & reporting"]
  }];


  return (
    <main>
      <PageHero
        kicker="La nostra Agency"
        titleBefore={<>Un <HiBox bg="#6B5CFF">content studio</HiBox><br />con il know-how</>}
        titleAfter={<> di un media.</>}
        lead="Tre servizi, una sola promessa: contenuti che convertono e che la gente sceglie di guardare. Mettiamo a disposizione delle aziende quello che facciamo ogni giorno per i nostri canali." />
      

      {/* Services */}
      <section style={{ background: "#f6f6f6", padding: "clamp(64px, 8vw, 120px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: 0, textAlign: "center",
            textWrap: "balance", maxWidth: 1100, marginInline: "auto"
          }}>
            Tre servizi, una sola<br /><HiBox bg="#3FB28E">redazione interna</HiBox>
          </h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
            marginTop: 72
          }} className="services-grid">
            {services.map((s, i) =>
            <div key={i} style={{
              background: "#fff", borderRadius: 18,
              padding: "32px 28px 36px",
              display: "flex", flexDirection: "column", gap: 16,
              minHeight: 380
            }}>
                <div style={{
                fontFamily: "var(--font-mono)", fontSize: 12,
                letterSpacing: "0.18em", color: "#8A8A8A"
              }}>{s.idx}</div>
                <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(22px, 1.9vw, 28px)", letterSpacing: "-0.02em",
                margin: 0, lineHeight: 1.15
              }}>{s.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.5, color: "#0A0A0A", margin: 0 }}>
                  {s.body.split(s.hl)[0]}
                  <HiBoxStatic bg={s.hlBg}>{s.hl}</HiBoxStatic>
                  {s.body.split(s.hl)[1]}
                </p>
                <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "grid", gap: 10 }}>
                  {s.bullets.map((b, j) =>
                <li key={j} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, fontWeight: 600 }}>
                      <span style={{ width: 18, height: 18, borderRadius: 999, background: "#0A0A0A", color: "#fff", display: "grid", placeItems: "center", fontSize: 11 }}>✓</span>
                      {b}
                    </li>
                )}
                </ul>
                <a href={"#" + s.slug} onClick={(e) => {e.preventDefault();navigate && navigate(s.slug);}}
              style={{ ...ctaPill(s.accent), marginTop: "auto", alignSelf: "flex-start", fontSize: 15, padding: "12px 22px" }}>
                  Scopri di più <ArrowRight />
                </a>
              </div>
            )}
          </div>
          <style>{`@media (max-width:880px){ .services-grid{ grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      <CTASplit navigate={navigate} />
    </main>);

};

/* ============ CASI STUDIO ============ */
function CaseCard({ c, navigate }) {
  return (
    <a href={"#" + c.slug} onClick={(e) => {e.preventDefault();navigate(c.slug);}} className="lift" style={{
      background: "#fff", borderRadius: 18, padding: 20,
      display: "flex", flexDirection: "column", gap: 16,
      textDecoration: "none", color: "inherit",
      boxShadow: "0 1px 0 rgba(10,10,10,0.04), 0 12px 32px -16px rgba(10,10,10,0.10)"
    }}>
      {/* Cover (colored placeholder) with white logo / brand wordmark */}
      <div style={{
        aspectRatio: "16/9", background: "#0A0A0A", borderRadius: 12,
        position: "relative", overflow: "hidden",
        display: "grid", placeItems: "center", padding: 24
      }}>
        {/* Tag pill top-left */}
        <div style={{
          position: "absolute", top: 14, left: 14,
          background: c.tagBg, color: c.tagColor || "#fff",
          padding: "6px 12px", borderRadius: 999,
          fontFamily: "var(--font-mono)", fontSize: 11,
          letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 700,
          whiteSpace: "nowrap"
        }}>{c.tag}</div>
        {/* Logo directly on colored bg */}
        {c.logo ?
        <img src={c.logo} alt={c.brand} style={{ maxHeight: 56 * (c.logoScale || 1), maxWidth: "80%", width: "auto", height: "auto", display: "block", objectFit: "contain" }} /> :
        c.wordmark ?
        <span style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: "clamp(26px, 2.8vw, 38px)", letterSpacing: "-0.025em",
          color: "#fff", textAlign: "center", lineHeight: 1.05
        }}>{c.wordmark}</span> :

        <span style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: "clamp(22px, 2.4vw, 32px)", letterSpacing: "-0.02em",
          color: "#fff", textAlign: "center", lineHeight: 1.05
        }}>{c.brand}</span>
        }
      </div>
      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: 20, lineHeight: 1.2, letterSpacing: "-0.02em",
        margin: "4px 0 0", color: "#0A0A0A",
        display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical",
        overflow: "hidden", minHeight: "calc(20px * 1.2 * 2)"
      }}>{c.title}</h3>
      <div style={{ fontSize: 13, color: "#8A8A8A", fontWeight: 500 }}>{c.metrics}</div>
      <div style={{
        marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 8,
        fontSize: 14, fontWeight: 700, color: c.group === "agency" ? "#3B5BFF" : "#3FB28E"
      }}>
        Leggi il caso studio <ArrowRight />
      </div>
    </a>);

}

/* ========== Registry of all case studies (used by index + detail pages) ========== */
const CASE_STUDIES_REGISTRY = [
// ----- MEDIA -----
{ slug: "cs-scalable", group: "media",
  brand: "Scalable Capital", logo: "assets/economico/logo-scalable.webp", color: "#a8d0ca",
  tag: "Il Punto Economico", tagBg: "#F0A30A", tagColor: "#0A0A0A",
  title: "Posizionare il brand come il miglior broker per investire",
  metrics: "4M reach · 2,5 anni di partnership",
  body: "Partnership across platforms per creare contenuti e menzionare il brand in modo costante, così da renderlo top of mind sul tema degli investimenti.",
  brief: "Scalable Capital cercava un modo per posizionarsi come il broker di riferimento per gli investitori italiani sui social. Aveva bisogno di una presenza costante su più formati con un tono credibile e non promozionale.",
  goals: [
  "Costruire awareness sul brand presso un pubblico interessato a finanza e investimenti",
  "Posizionare Scalable come il broker di riferimento in Italia",
  "Generare lead qualificati interessati ad aprire un conto investimenti",
  "Mantenere un tono credibile, educativo e non promozionale"],

  proposal: "Abbiamo proposto una partnership across platforms con presenza ricorrente su 3 formati editoriali del Punto Economico (Instagram, YouTube e Newsletter).\n\nAbbiamo inserito Scalable Capital in un mix di contenuti educativi e branded, sempre allineati al nostro tono di voce divulgativo, ma con menzioni native all'interno dei formati già esistenti.\n\nQuesto ha permesso di costruire una presenza continuativa, che ha reso Scalable parte della conversazione finanziaria su Instagram e YouTube.",
  channels: [
  { platform: "Instagram", format: "Branded Carousels", desc: "Abbiamo pubblicato oltre 20 caroselli in collab su argomenti affini alla finanza e all'attualità, con menzione diretta a Scalable Capital.", kind: "posts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/economico/cs-scalable-1.webp", href: "https://www.instagram.com/p/DOLR0GsjYxY/" },
    { thumb: "assets/economico/cs-scalable-2.webp", href: "https://www.instagram.com/p/DHYPylKMuBS/" }]

  },
  { platform: "YouTube", format: "YouTube Placement", desc: "Abbiamo inserito Scalable Capital in 30+ dei nostri video YouTube, con menzioni integrate, grafiche animate ad hoc e CTA dirette all'apertura del conto.", kind: "videos", bg: "#a8e8ff",
    tiles: [
    { thumb: "assets/economico/cs-scalable-4.webp", href: "https://www.youtube.com/watch?v=WTnw7qwoVeA" },
    { thumb: "assets/economico/yt-scalable-moro.webp", href: "https://www.youtube.com/watch?v=gskdDjtO6GI" }]

  },
  { platform: "Email", format: "Newsletter", desc: "Abbiamo inserito Scalable Capital in più di 100+ Newsletter, sia con contenuti editoriali che con Placement Adv, rendendo il brand Top of Mind tra gli investitori italiani.", kind: "newsletter", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/economico/cs-scalable-3.webp", href: "https://ilpunto.beehiiv.com/p/microstrategy-la-scommessa-pi-folle-di-wall-street" },
    { thumb: "assets/economico/cs-scalable-newsletter-2.webp", href: "https://ilpunto.beehiiv.com/p/perch-trump-vuole-cuba" }]

  }],

  formats: ["Branded Carousels", "Newsletter", "YouTube Placement"],
  kpis: [["4M", "Reach complessiva generata"], ["2,5y", "Partnership rinnovata più volte visti i risultati"]],
  quote: {
    text: "Il Punto Media ha saputo integrare Scalable Capital nella conversazione finanziaria italiana in modo nativo, posizionandoci all'interno di contenuti divulgativi di grande valore. Quello che hanno prodotto per noi (Caroselli, Reel, Newsletter e mention YouTube) ci hanno permesso di intercettare un pubblico e una community in target, con un tono credibile che riflette esattamente il posizionamento che vogliamo costruire. I numeri ci hanno convinto a rinnovare e ad estendere la collaborazione.",
    name: "Mirko Maestri",
    role: "Junior Marketing Manager",
    company: "Scalable Capital",
    initials: "MM",
    avatar: "assets/quotes/mirko-maestri.webp"
  } },
{ slug: "cs-deloitte", group: "media",
  brand: "Deloitte", wordmark: "Deloitte.", color: "#86bc24",
  ctaSoft: "#87BD28", ctaColor: "#87BD28",
  tag: "Il Punto Economico", tagBg: "#F0A30A", tagColor: "#0A0A0A",
  title: "Employer branding per avvicinare la GenZ al mondo della consulenza",
  metrics: "1,2M reach · 1+1y partnership",
  body: "Partnership across platforms per posizionare il brand come realtà di consulenza di riferimento in Italia, con focus sull'attrazione di talenti.",
  brief: "Deloitte voleva avvicinare la GenZ italiana al mondo della consulenza, raccontando in modo accessibile cosa significa lavorare in una big four oggi e quali competenze servono davvero.",
  goals: [
  "Posizionare Deloitte come employer di riferimento per la GenZ",
  "Aumentare le candidature qualificate verso programmi di internship e graduate",
  "Raccontare la cultura interna in modo autentico e non istituzionale",
  "Generare conversazione sui temi di consulenza e career path"],

  proposal: "Abbiamo proposto una partnership across platforms con 2 formati nativi e un contenuto ad hoc.\n\nTra i formati nativi: caroselli educativi sul CV, sulla consulenza e sui mestieri del futuro, e reel branded sul settore e sulle competenze chiave, per intercettare studenti universitari e neolaureati interessati.\n\nPer il contenuto ad hoc: abbiamo realizzato un ebook branded che spiega cosa significa lavorare in consulenza, quali sono le practice più rilevanti e come ottimizzare CV e candidatura per l'application.",
  channels: [
  { platform: "Ebook", format: "Ebook Branded", desc: "Abbiamo realizzato un Ebook in partnership con Deloitte dedicato all'employer branding per targettizzare la GenZ e avvicinarla al mondo della consulenza.", kind: "ebook", bg: "#d4f06b",
    tiles: [
    { thumb: "assets/economico/cs-deloitte-1.webp", href: "https://drive.google.com/file/d/14D_SMoWl3fxfiAY01Wj9oViwstzosv1y/view?usp=sharing" }]

  },
  { platform: "Instagram", format: "Branded Content", desc: "Abbiamo inserito Deloitte in oltre 10+ Caroselli e Reel Branded di approfondimento: dal come strutturare un CV, alla Cybersecurity, all'impatto dell'AI sul mondo del lavoro.", kind: "posts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/economico/cs-deloitte-2.webp", href: "https://www.instagram.com/p/DPOOaUYAGID/" },
    { thumb: "assets/economico/cs-deloitte-4.webp", href: "https://www.instagram.com/reels/DMKlb9TJyKc/" }]

  },
  { platform: "Email", format: "Newsletter", desc: "Abbiamo inserito Deloitte in più di 12+ Newsletter, sia con contenuti editoriali che con Placement Adv, rendendo il brand Top of Mind per il settore della consulenza.", kind: "newsletter", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/economico/cs-deloitte-newsletter-1.webp", href: "https://ilpunto.beehiiv.com/p/gioved-afe6" },
    { thumb: "assets/economico/cs-deloitte-newsletter-2.webp", href: "https://ilpunto.beehiiv.com/p/i-mercati-hanno-capito-il-trucco-di-trump-cos-l-effetto-taco-9945" }]

  }],

  formats: ["Ebook Branded", "Branded Content", "Newsletter"],
  kpis: [["1,2M", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]],
  quote: {
    text: "I giovani talenti sono sempre più curiosi del mondo della consulenza e cercano contenuti per capirlo davvero. Come Deloitte abbiamo voluto soddisfare questa curiosità con un approccio strutturato assieme ad Il Punto Media. Costruendo un piano di contenuti — eBook sulla consulenza, caroselli di orientamento, approfondimenti sui nostri team — abbiamo cercato di avvicinare potenziali talenti al nostro mondo. I risultati ci hanno convinto a rinnovare la nostra ottima collaborazione.",
    name: "Fabrizio Del Gobbo",
    role: "Employer Branding Manager",
    company: "Deloitte Italia",
    initials: "FD",
    avatar: "assets/quotes/fabrizio-del-gobbo.webp"
  } },
{ slug: "cs-iliad", group: "media",
  brand: "iliad", logo: "assets/economico/logo-iliad.webp", color: "#E40521",
  ctaSoft: "#CC0600", ctaColor: "#CC0600",
  tag: "Il Punto Economico", tagBg: "#F0A30A", tagColor: "#0A0A0A",
  title: "La telecom più attenta al benessere delle persone",
  metrics: "650k reach · 1+1y partnership",
  body: "Partnership across platforms con focus su 3 pilastri: sostenibilità di business, nuove generazioni (iliadship) e formazione (focus su lauree STEM).",
  brief: "iliad voleva consolidare il proprio posizionamento come telecom attenta al benessere delle persone, raccontando le iniziative concrete su sostenibilità, GenZ e formazione STEM senza scivolare nel marketing vuoto.",
  goals: [
  "Consolidare la percezione di brand attento alle persone e all'ambiente",
  "Comunicare le iniziative iliadship dedicate alle nuove generazioni",
  "Posizionarsi come partner di valore sui temi STEM e formazione",
  "Costruire affinità con un pubblico giovane e attento ai valori del brand"],

  proposal: "Abbiamo costruito una partnership editoriale su 2 pilastri narrativi: sostenibilità e iliadship e lauree STEM.\n\nI contenuti sono stati declinati tramite caroselli, reel branded e newsletter, con uno storytelling coerente che ha trasformato i progetti CSR del brand in conversazione editoriale e ha raccontato l'azienda come una forza trainante su questi temi.",
  channels: [
  { platform: "Instagram", format: "Report di sostenibilità", desc: "Abbiamo realizzato contenuti branded di CSR, con focus sul primo report di sostenibilità, così da comunicare gli investimenti in tecnologia e sostenibilità e posizionare l'azienda come brand che investe nel futuro.", kind: "posts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/economico/cs-iliad-1.webp", href: "https://www.instagram.com/p/DLPTt7_t9Ja/" },
    { thumb: "assets/economico/cs-iliad-2.webp", href: "https://www.instagram.com/p/DME2JSDoszQ/" }]

  },
  { platform: "Instagram", format: "Iliadship e Lauree STEM", desc: "Abbiamo realizzato Caroselli, Reel e Newsletter dedicate alle borse di studio iliadship, per posizionare l'azienda come protagonista nella formazione e nell'orientamento dei giovani.", kind: "posts", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/economico/cs-iliad-3.webp", href: "https://ilpunto.beehiiv.com/p/cornelius-vanderbilt-il-contadino-che-divent-l-uomo-pi-ricco-d-america" },
    { thumb: "assets/economico/cs-iliad-4.webp", href: "https://www.instagram.com/reel/DP5_6LBE5ld/" }]

  }],

  formats: ["Branded Carousels", "Reel Branded", "Newsletter"],
  kpis: [["650k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata visti i risultati"]],
  quote: {
    text: "Come iliad avevamo temi importanti da raccontare, tra il Report di sostenibilità, l'iniziativa iliadship e il focus sull'education e la formazione STEM ed eravamo alla ricerca di un canale che potesse veicolare questi messaggi nel modo corretto. Il Punto Media ha trasformato questa necessità in conversazione editoriale reale, con contenuti interessanti, un taglio fresco e una community che ha risposto positivamente. Con il senno di poi, possiamo dire che l'attività ha funzionato esattamente come speravamo.",
    name: "Margherita Curti",
    role: "Corporate Communication & CSR Specialist",
    company: "iliad Italia",
    initials: "MC",
    avatar: "assets/quotes/margherita-curti.webp"
  } },
{ slug: "cs-mp-filtri", group: "media",
  brand: "MP Filtri", logo: "assets/techy/logo-mp-filtri.webp", color: "#0E4FA8",
  ctaSoft: "#023A93", ctaColor: "#023A93",
  tag: "Techy", tagBg: "#FB037C", tagColor: "#fff",
  title: "Awareness per un'eccellenza industriale italiana nella filtrazione oleodinamica",
  metrics: "510k reach · 1+1y partnership",
  body: "Partnership across platforms per la realizzazione di Short form per mostrare il dietro le quinte di una realtà industriale italiana leader di settore.",
  brief: "MP Filtri cercava un modo per raccontare la propria realtà al grande pubblico. Un'azienda leader mondiale nella filtrazione oleodinamica, con una fonderia e un laboratorio R&D interni unici nel settore, ma quasi invisibile fuori dal proprio mercato di riferimento.",
  goals: [
  "Costruire awareness sul brand come eccellenza industriale italiana",
  "Valorizzare le unicità produttive dell'azienda: fonderia interna, laboratorio R&D e know-how di settore",
  "Posizionare MP Filtri come eccellenza industriale italiana a livello internazionale",
  "Affiancare all'awareness una componente di conversione B2B rivolta a potenziali clienti e partner"],

  proposal: "Abbiamo proposto una partnership across platforms articolata su due livelli complementari: awareness editoriale e conversione con contenuti UGC sui prodotti di punta.\n\nSul fronte awareness abbiamo raccontato MP Filtri attraverso short form e newsletter, spiegando in modo accessibile cosa produce l'azienda, come funziona una fonderia industriale e perché i filtri oleodinamici sono componenti critici in settori come l'energia, le costruzioni e i trasporti.\n\nIn parallelo abbiamo sviluppato una parte di conversione con contenuti UGC cross-platform pensati per intercettare potenziali clienti B2B, mostrando i prodotti di punta e le capacità produttive dell'azienda in contesti reali di utilizzo.",
  channels: [
  { platform: "Instagram", format: "Reel Branded", desc: "Entro fine 2026 avremo prodotto 10+ reel branded, che raccontano il dietro le quinte di MP Filtri: dalla fonderia al laboratorio R&D, fino ai filtri montati su piattaforme offshore e tunnel boring machine.", kind: "posts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/techy/cs-mpfiltri-1.webp", href: "https://www.instagram.com/p/DQqfiwqCvKD/" },
    { thumb: "assets/techy/cs-mpfiltri-2.webp", href: "https://www.instagram.com/p/DRyl7-kET0S/" }]

  },
  { platform: "Email", format: "Newsletter", desc: "Entro fine 2026 avremo inserito MP Filtri in 10+ edizioni della newsletter di techy, con contenuti editoriali che spiegano l'impatto della filtrazione oleodinamica su infrastrutture, energia e industria pesante.", kind: "newsletter", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/techy/cs-mpfiltri-newsletter-1.webp?v=2", href: "https://techy.beehiiv.com/p/gli-usa-hanno-usato-l-ai-di-anthropic-per-bombardare-l-iran" },
    { thumb: "assets/techy/cs-mpfiltri-newsletter-2.webp?v=2", href: "https://techy.beehiiv.com/p/se-non-puoi-batterli-unisciti-a-loro" }]

  },
  { platform: "LinkedIn", format: "UGC Campaign", kind: "shorts", desc: "Abbiamo realizzato una campagna di contenuti UGC cross-platform sui prodotti di punta, pensata per la conversione B2B e distribuita anche su LinkedIn e in doppia lingua (italiano e inglese), per raggiungere decision maker e potenziali partner industriali.", bg: "#a8e8ff",
    tiles: [
    { thumb: "assets/techy/cs-mpfiltri-3.webp" },
    { thumb: "assets/techy/cs-mpfiltri-4.webp" }]

  }],

  formats: ["Reel Branded", "Newsletter", "UGC Campaign"],
  kpis: [["510k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata"]],
  quote: {
    text: "Avevamo bisogno di comunicare sui social quello che facciamo, ma non sapevamo da dove partire. Il Punto Media ha preso i filtri oleodinamici — che sono componenti che la maggior parte delle persone non ha mai sentito nominare — e li ha trasformati in contenuti che la gente guarda davvero. Raccontare la nostra fonderia, il laboratorio R&D, i filtri montati su piattaforme offshore ci ha aiutato a posizionarci sui social, motivo per cui abbiamo deciso di estendere la partnership per tutto il 2026.",
    name: "Alessandro Toscano",
    role: "Digital Marketing Specialist",
    company: "MP Filtri",
    initials: "AT",
    avatar: "assets/quotes/alessandro-toscano.webp?v=2"
  } },
{ slug: "cs-swappie", group: "media",
  brand: "Swappie", logo: "assets/techy/logo-swappie.webp", color: "#0A0A0A",
  ctaSoft: "#FFCCF3", ctaColor: "#FFCCF3",
  tag: "Techy", tagBg: "#FB037C", tagColor: "#fff",
  title: "Top of mind per il tech ricondizionato",
  metrics: "575k reach · 1+1y partnership",
  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.",
  brief: "Swappie, leader europeo nel mercato dei ricondizionati, cercava un modo per diventare il brand di riferimento in Italia per chi vuole comprare tech usato di qualità. Aveva bisogno di costruire fiducia, educare il pubblico e convertire chi era ancora indeciso.",
  goals: [
  "Posizionare Swappie come il brand top of mind per il tech ricondizionato in Italia",
  "Costruire fiducia mostrando con trasparenza il processo di ricondizionamento",
  "Educare il pubblico su sostenibilità, terre rare e RAEE",
  "Generare conversioni dirette su prodotti chiave come AirPods, iPad e iPhone ricondizionati"],

  proposal: "Abbiamo proposto una partnership across platforms articolata su awareness editoriale, conversione newsletter e una campagna IRL per generare engagement diretto sul brand.\n\nSul fronte awareness abbiamo raccontato Swappie attraverso Reel su temi come le terre rare, i RAEE e l'impatto ambientale del tech usa e getta.\n\nIl momento centrale è stato un tour esclusivo nel sito di ricondizionamento di Tallinn, dove abbiamo mostrato passo per passo come nasce un iPhone ricondizionato Swappie, costruendo trasparenza e fiducia nel pubblico.\n\nIn parallelo, sulla newsletter abbiamo puntato sulla conversione diretta, promuovendo prodotti specifici del catalogo Swappie e intercettando chi era già in fase di acquisto.\n\nA completare il tutto, una campagna IRL con giveaway che sfruttava i trend del momento per portare il brand nella vita reale delle persone.",
  channels: [
  { platform: "Instagram", format: "Reel Branded", desc: "Abbiamo prodotto una serie di reel branded su temi come le terre rare, i RAEE e la sostenibilità del ricondizionato. Il contenuto più forte è stato il tour esclusivo nel loro sito di ricondizionamento, in cui abbiamo mostrato tutto il processo produttivo passo dopo passo.", kind: "posts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/techy/cs-swappie-1.webp", href: "https://www.instagram.com/reel/DQdnmNnjBSN/" },
    { thumb: "assets/techy/cs-swappie-3.webp", href: "https://www.instagram.com/reel/DSSLY_JE2vl/" }]

  },
  { platform: "Email", format: "Newsletter", desc: "Abbiamo integrato Swappie nelle nostre edizioni con un obiettivo preciso: la conversione. Promozioni, comparazioni e contenuti editoriali su AirPods, iPad e iPhone ricondizionati, pensati per intercettare il lettore nel momento giusto del funnel.", kind: "newsletter", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/techy/cs-swappie-newsletter-1.webp", href: "https://techy.beehiiv.com/p/un-ai-ferma-al-1930-potrebbe-scoprire-la-struttura-del-dna" },
    { thumb: "assets/techy/cs-swappie-newsletter-2.webp", href: "https://techy.beehiiv.com/p/siamo-stati-dentro-un-centro-di-ricondizionamento-di-iphone" }]

  },
  { platform: "IRL", format: "Campagna IRL", desc: "Abbiamo affiancato ai contenuti digitali una campagna IRL con giveaway di prodotti Swappie, agganciati ai trend del momento per massimizzare la visibilità organica e portare il brand fuori dallo schermo.", kind: "irl", bg: "#a8e8ff",
    tiles: [
    { thumb: "assets/techy/cs-swappie-4.webp", href: "https://www.instagram.com/reel/DX_jp2lE4wR/" },
    { thumb: "assets/techy/cs-swappie-2.webp", href: "https://www.instagram.com/reel/DRcHVZOE6U-/" }]

  }],

  formats: ["Reel Branded", "Newsletter", "Campagna IRL"],
  kpis: [["575k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata"]],
  quote: {
    text: "Avevamo bisogno di far conoscere a sempre più persone il mercato del ricondizionato, mostrando con trasparenza cosa succede davvero dentro il nostro sito di ricondizionamento a Tallinn. Il Punto Media lo ha fatto benissimo e grazie agli altri contenuti prodotti insieme, abbiamo raggiunto una community in target e migliorato l'awareness di Swappie.",
    name: "Antonio Cucurachi",
    role: "Social Media & Content Specialist",
    company: "Swappie",
    initials: "AC",
    avatar: "assets/quotes/antonio-cucurachi.webp"
  } },
{ slug: "cs-xiaomi", group: "media",
  brand: "Xiaomi", logo: "assets/techy/logo-xiaomi.webp", color: "#FF6900",
  ctaSoft: "#FF6902", ctaColor: "#FF6902",
  tag: "Techy", tagBg: "#FB037C", tagColor: "#fff",
  title: "Awareness sul lancio di nuovi prodotti tech del brand",
  metrics: "650k reach · 1+1y partnership",
  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.",
  brief: "Xiaomi cercava una presenza editoriale credibile in Italia per accompagnare il lancio dei suoi nuovi prodotti. Non recensioni, ma contenuti che entrassero nella conversazione tech e facessero parlare dei suoi device come punto di partenza per esplorare temi più grandi.",
  goals: [
  "Costruire awareness sui nuovi lanci di prodotto con un approccio divulgativo e non promozionale",
  "Integrare Xiaomi nella conversazione tech italiana su temi attuali come batterie, display e mobilità",
  "Garantire copertura mediatica agli eventi e alle presentazioni ufficiali",
  "Posizionare Xiaomi come brand di riferimento per chi vuole capire la direzione verso cui sta andando il settore tecnologico"],

  proposal: "Abbiamo proposto una partnership across platforms che ha integrato Xiaomi nella nostra missione divulgativa, senza mai trasformare i contenuti in semplici recensioni di prodotto.\n\nPer ogni lancio, abbiamo scelto un tema tecnologico o di attualità da approfondire, usando il prodotto come lente: dalle batterie al silicio-carbonio ai pannelli Mini-LED, fino alla questione normativa sui monopattini elettrici con il nuovo codice della strada.\n\nXiaomi non è mai stato il soggetto del contenuto, ma il motivo per cui valeva la pena raccontare qualcosa.\n\nA questo abbiamo affiancato una copertura diretta degli eventi ufficiali del brand, dalla presentazione della serie 15T fino agli ATP Finals (di cui Xiaomi è sponsor), portando il nostro pubblico dentro esperienze branded a cui normalmente non avrebbe accesso.",
  channels: [
  { platform: "Instagram", format: "Reel Branded", desc: "Per ogni lancio di prodotto abbiamo sviluppato reel che partivano da una domanda o un tema attuale: il futuro delle batterie, cosa c'è dentro un pannello Mini-LED o si possono guidare i monopattini con il nuovo codice della strada. I prodotti Xiaomi erano posizionati come gancio alla divulgazione vera.", kind: "posts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/techy/cs-xiaomi-1.webp", href: "https://www.instagram.com/reel/DUk5gxCjEBS/" },
    { thumb: "assets/techy/cs-xiaomi-3.webp", href: "https://www.instagram.com/reel/DPv00vZCPjv/" }]

  },
  { platform: "Email", format: "Newsletter", desc: "Abbiamo integrato Xiaomi nelle nostre edizioni con contenuti che approfondivano le tecnologie dei nuovi device — dalla partnership con Leica alla silicon-carbon battery — trasformando ogni lancio in un'occasione per spiegare qualcosa che il lettore non sapeva.", kind: "newsletter", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/techy/cs-xiaomi-newsletter-1.webp", href: "https://techy.beehiiv.com/p/ma-quindi-in-italia-posso-ancora-usare-il-mio-monopattino" },
    { thumb: "assets/techy/cs-xiaomi-newsletter-2.webp", href: "https://techy.beehiiv.com/p/ne-abbiamo-fatta-di-strada-dai-tubi-catodici" }]

  },
  { platform: "Events", format: "Copertura eventi", desc: "Siamo stati presenti agli eventi ufficiali Xiaomi in Italia, dalla presentazione della serie 15T agli ATP Finals. Una copertura editoriale diretta che ha portato il nostro pubblico dentro momenti esclusivi del brand.", kind: "shorts", bg: "#a8e8ff",
    tiles: [
    { thumb: "assets/techy/cs-xiaomi-4.webp" },
    { thumb: "assets/techy/cs-xiaomi-5.webp" }]

  }],

  formats: ["Reel Branded", "Newsletter", "Copertura eventi"],
  kpis: [["650k", "Reach complessiva generata"], ["1+1y", "Partnership rinnovata"]],
  quote: {
    text: "Volevamo un partner in grado di creare contenuti che accompagnassero il lancio dei nostri prodotti, ma che avessero un taglio divulgativo. Il Punto Media ha capito esattamente cosa cercavamo: usare i nostri prodotti come punto di partenza per raccontare temi più grandi, dalle batterie al silicio-carbonio, ai pannelli Mini-LED, fino alla mobilità elettrica. Questo ha posizionato Xiaomi come il brand che aiuta a capire la direzione verso cui sta andando il settore tecnologico.",
    name: "Andrea Crociani",
    role: "Marketing Manager",
    company: "Xiaomi Italia",
    initials: "AC",
    avatar: "assets/quotes/andrea-crociani.png"
  } },
// ----- AGENCY -----
{ slug: "cs-moneyfarm-yt", group: "agency",
  brand: "Moneyfarm", logo: "assets/agency/logo-moneyfarm.webp", color: "#FF2E5B",
  ctaSoft: "#5A2A6B", ctaColor: "#5A2A6B",
  tag: "YouTube Management", tagBg: "#3B5BFF", tagColor: "#fff",
  title: "Gestione completa canale YouTube ITA + UK",
  metrics: "96 video/anno · 2M di reach",
  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, packaging, distribuzione e ottimizzazione SEO.",
  brief: "Moneyfarm cercava un partner editoriale per trasformare il proprio canale YouTube italiano in un asset di brand stabile e in crescita, con video ottimizzati SEO e utili a educare gli investitori e avvicinarli al prodotto. Dopo i risultati italiani, la richiesta si è estesa anche al mercato UK.",
  goals: [
  "Produrre contenuti long-form per Italia e UK (8x video lunghi al mese + 32x clip estratte per YT Shorts)",
  "Posizionare Moneyfarm come riferimento per chi vuole capire di più di investimenti e mercati",
  "Gestire l'intero processo produttivo in white label, dalla ricerca allo scripting fino al montaggio e all'ottimizzazione SEO",
  "Replicare il playbook ITA sul mercato UK adattandolo al pubblico anglosassone"],

  proposal: "Abbiamo iniziato a gestire il canale YouTube di Moneyfarm Italia con un modello editoriale end-to-end, per la produzione di n.48 video nel corso del 2025.\n\nDopo 9 mesi di lavoro, i risultati sul canale ITA sono stati talmente solidi che Moneyfarm ci ha rinnovato per tutto il 2026 e ci ha chiesto di estendere il modello anche al mercato UK, replicando il playbook ed adattandolo a un pubblico anglosassone con codici di consumo e benchmark differenti.\n\nPer Moneyfarm UK abbiamo costruito un processo separato: script in inglese con copywriter madrelingua e con esperienza decennale in wealth management, revisione editoriale e di compliance locale e registrazione con creator inglese dedicato.\n\nOggi gestiamo entrambi i canali con un piano editoriale parallelo da n.48 video l'anno per ciascun mercato, cui si aggiungono le clip estratte per YouTube Shorts e la continua ottimizzazione data-driven di titoli, copertine e piano editoriale.",
  channels: [
  { platform: "YouTube", format: "YouTube Italia", desc: "Produzione mensile di n.4 documentari long-form sul canale Moneyfarm Italia, ottimizzati SEO e con uno storytelling che traduce temi finanziari complessi in contenuti accessibili.", kind: "videos", bg: "#FFE2A8",
    videos: [
    { thumb: "assets/agency/yt-moneyfarm-perdendo.webp", href: "https://www.youtube.com/watch?v=iBTeqSYrPug" },
    { thumb: "assets/agency/yt-moneyfarm-ai.webp", href: "https://www.youtube.com/watch?v=-YtZX8eBG-E" }]

  },
  { platform: "YouTube", format: "YouTube UK", desc: "Estensione del modello sul mercato UK avviata dopo 9 mesi di partnership: n.4 long-form al mese in inglese con copywriter madrelingua, calibrati su pubblico, benchmark e codici di consumo anglosassoni.", kind: "videos", bg: "#ffa8b5",
    videos: [
    { thumb: "assets/agency/yt-moneyfarmuk-etf.webp", href: "https://www.youtube.com/watch?v=ngR3kzT8Ufo" },
    { thumb: "assets/agency/yt-moneyfarmuk-portfolio.webp", href: "https://www.youtube.com/watch?v=s0Tf6GgTy-8" }]

  },
  { platform: "YouTube", format: "YouTube Shorts", desc: "Dai long-form estraiamo clip ottimizzate per YouTube Shorts: pubblichiamo fino a n.32 shorts al mese sui due canali per intercettare un pubblico più ampio e amplificare la reach.", kind: "shorts", bg: "#a8e8ff",
    videos: [
    { thumb: "assets/agency/yt-moneyfarm-shorts-face.webp", href: "https://www.youtube.com/shorts/cyzphUtg3WQ" },
    { thumb: "assets/agency/yt-moneyfarm-shorts-chart.webp", href: "https://www.youtube.com/shorts/sWLDEtPKf18" }]

  }],

  formats: ["YouTube long-form ITA", "YouTube long-form UK", "YouTube Shorts"],
  kpis: [["96", "Video Long prodotti all'anno sui 2 mercati gestiti"], ["1.75M", "Reach complessiva tra ITA e UK"]],
  quote: {
    text: "Avevamo bisogno di un partner che si prendesse la responsabilità completa del canale YouTube e lo trasformasse da progetto sperimentale a asset editoriale strutturato. Il Punto Media ha costruito un processo produttivo affidabile, con contenuti di qualità e che traducono temi finanziari complessi in contenuti accessibili. Siamo molto soddisfatti, motivo per cui abbiamo esteso il progetto anche al canale UK.",
    name: "Luigi Boccia",
    role: "Growth Marketing Manager Italy and UK",
    company: "Moneyfarm",
    initials: "LB",
    avatar: "assets/quotes/luigi-boccia.webp"
  } },
{ slug: "cs-scalable-yt", group: "agency",
  brand: "Scalable Capital", logo: "assets/economico/logo-scalable.webp", color: "#a8d0ca",
  ctaSoft: "#B5E0CC", ctaColor: "#3FB28E",
  tag: "YouTube Management", tagBg: "#3B5BFF", tagColor: "#fff",
  title: "Gestione canale YouTube",
  metrics: "20 video/anno · 325k di reach",
  body: "Produzione e gestione editoriale di video YouTube branded per Scalable Capital, allineati al posizionamento del brand come broker di riferimento per gli investimenti.",
  brief: "In parallelo alla partnership Media, Scalable Capital ci ha chiesto di gestire anche la produzione editoriale del proprio canale YouTube branded, con focus su contenuti di alto valore percepito. Il fine non era fare video di educazione finanziaria, ma documentari finanziari.",
  goals: [
  "Costruire un canale YouTube con alta qualità editoriale",
  "Creare contenuti con uno storytelling non pubblicitario",
  "Posizionare Scalable come player dalla voce autorevole nel mercato italiano, interessato alla (in)formazione del pubblico",
  "Sviluppare un canale media proprietario, che garantissse reach e penetrazione di mercato indipendente da altre partnership"],

  proposal: "Abbiamo iniziato a lavorare con Scalable Capital con un modello di produzione YouTube end-to-end, che ha previsto la pubblicazione di n.12 video long-form nel 2025.\n\nIl format che abbiamo sviluppato insieme è documentaristico: ogni video parte da una storia di finanza reale (un'azienda, un mercato o un fenomeno economico) e la usa come gancio per poi spiegare concetti di investimento che il pubblico di Scalable vuole capire.\n\nLa piattaforma non è mai presentata in modo pubblicitario, ma come strumento naturale per chi vuole agire su quello che ha appena imparato.\n\nIl risultato sono video editorialmente solidi e approfonditi, che intercettano un pubblico vasto e che hanno una cura narrativa e un montaggio tali da posizionare Scalable Capital come \"Educational Brand\".\n\nI risultati del 2025 hanno convinto Scalable ad estendere la partnership per tutto il 2026, aumentando i volumi a n.20-24 video l'anno e ampliando il piano editoriale con topic più ambiziosi e format in evoluzione.",
  channels: [
  { platform: "YouTube", format: "YouTube long-form", desc: "Produzione di n.12-24 documentari long-form l'anno con focus sulla finanza internazionale: storie di mercati, aziende e fenomeni economici raccontati con cura narrativa e montaggio editoriale.", kind: "videos", bg: "#FFE2A8",
    videos: [
    { thumb: "assets/agency/yt-scalable-palantir.webp", href: "https://www.youtube.com/watch?v=avS06COx6S4" },
    { thumb: "assets/agency/yt-scalable-bitcoin.webp", href: "https://www.youtube.com/watch?v=ZyWy9YeO1aw" }]

  },
  { platform: "YouTube", format: "YouTube Shorts", desc: "Dai documentari long-form estraiamo clip ottimizzate per YouTube Shorts, per amplificare la reach del canale e intercettare un pubblico più ampio sui temi della finanza.", kind: "shorts", bg: "#ffa8b5",
    videos: [
    { thumb: "assets/agency/yt-scalable-shorts-ceos.webp", href: "https://www.youtube.com/shorts/EE77rFx2ULQ" },
    { thumb: "assets/agency/yt-scalable-shorts-ai.webp", href: "https://www.youtube.com/shorts/jqKbr0x1L6I" }]

  }],

  formats: ["YouTube long-form", "YouTube Shorts"],
  kpis: [[<>20<span style={{ color: "#3FB28E" }}>+</span></>, "Video prodotti all'anno"], ["325k", "Reach complessiva"]],
  quote: {
    text: "Trovare un partner che capisse sia la finanza che il mondo di YouTube è più difficile di quanto sembri. Il Punto Media ha costruito per noi un format documentaristico che racconta storie di finanza usando la nostra piattaforma come parte naturale dello storytelling, non come prodotto da promuovere. È il tipo di contenuto che il nostro pubblico sceglie di guardare e i risultati del 2025 ci hanno portato a estendere la partnership con volumi più ambiziosi per il 2026.",
    name: "Mirko Maestri",
    role: "Junior Marketing Manager",
    company: "Scalable Capital",
    initials: "MM",
    avatar: "assets/quotes/mirko-maestri.webp"
  } },
{ slug: "cs-moneyfarm-ugc", group: "agency",
  brand: "Moneyfarm", logo: "assets/agency/logo-moneyfarm.webp", color: "#7A4DFF",
  ctaSoft: "#FF2E5B", ctaColor: "#FF2E5B",
  tag: "UGC Campaign", tagBg: "#7A4DFF", tagColor: "#fff",
  title: "Gestione campagne UGC per acquisizione",
  metrics: "UGC cross-platform · piano continuativo",
  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.",
  brief: "In parallelo alla gestione del canale YouTube, Moneyfarm ci ha chiesto di sviluppare un asset UGC dedicato all'acquisizione: contenuti nativi, credibili e in linea con i codici dei diversi feed social, pensati per intercettare nuovi investitori nel momento giusto del funnel.",
  goals: [
  "Costruire una libreria UGC continuativa cross-platform",
  "Intercettare nuovi investitori con contenuti nativi e non promozionali",
  "Testare creatività e angle in modo iterativo a supporto delle campagne paid",
  "Aumentare la conversion rate dei flussi di acquisizione"],

  proposal: "Abbiamo gestito una campagna UGC continuativa per Moneyfarm, con produzione di n.48 contenuti nel 2026, nativi cross-platform e pensati per la conversione.\n\nIl flusso prevede casting di creator coerenti con il target, scripting allineato ai brand pillar e produzione iterativa: ogni mese vengono prodotti nuovi asset che alimentano i flussi di acquisizione paid e organici sui diversi feed.\n\nA questo si affianca un lavoro di A/B test continuo su hook, angle e formati, per identificare i creativi più performanti e ottimizzare la conversion rate nel tempo.",
  channels: [
  { platform: "Instagram", format: "UGC cross-platform", desc: "Contenuti nativi prodotti con creator selezionati, distribuiti su Instagram e Meta Ads.", kind: "shorts", bg: "#FFE2A8",
    tiles: [
    { thumb: "assets/agency/ugc-moneyfarm-1.webp" },
    { thumb: "assets/agency/ugc-moneyfarm-2.webp" }]

  },
  { platform: "TikTok", format: "A/B test creativi", desc: "Test continuo su hook, angle e formati per identificare le creative più performanti in termini di ROAS.", kind: "shorts", bg: "#ffa8b5",
    tiles: [
    { thumb: "assets/agency/ugc-moneyfarm-3.webp" },
    { thumb: "assets/agency/ugc-moneyfarm-4.webp" }]

  }],

  formats: ["UGC cross-platform", "A/B test creativi"],
  kpis: [[<>48<span style={{ color: "#FF2E5B" }}>x</span></>, "UGC prodotti nel corso del 2026"], ["5+", "Format diversi sperimentati"]],
  quote: {
    text: "Avevamo bisogno di contenuti UGC per il Paid Media, costruiti per targetizzare potenziali nuovi investitori interessati ad iniziare un percorso con Moneyfarm. Dopo aver affidato YouTube al Punto Media, ci sembrava naturale affidar loro anche questa sfida. Hanno costruito un flusso produttivo mensile che ci consente di alimentare continuativamente le campagne paid con creatività fresche, testate su hook e angle diversi. La parte che ha fatto la differenza è il processo iterativo: ogni mese non produciamo solo nuovi asset, ma impariamo da quelli precedenti e ottimizziamo.",
    name: "Luigi Boccia",
    role: "Growth Marketing Manager Italy and UK",
    company: "Moneyfarm",
    initials: "LB",
    avatar: "assets/quotes/luigi-boccia.webp"
  } },
{ slug: "cs-confindustria", group: "agency",
  brand: "Confindustria", logo: "assets/economico/logo-confindustria.webp", color: "#1b458f",
  ctaSoft: "#5170FF", ctaColor: "#5170FF",
  tag: "SMM Agency", tagBg: "#FF6B9E", tagColor: "#fff", logoScale: 1.8,
  title: "LinkedIn management istituzionale",
  metrics: "5 post/sett · 5M di reach",
  body: "Gestione del canale LinkedIn istituzionale di Confindustria e del Presidente Orsini, in collaborazione con il reparto digital: proposte editoriali, copy, grafica e creazione di contenuti legati a eventi istituzionali, con focus sull'agenda economico-industriale italiana.",
  brief: "Confindustria voleva trasformare il proprio canale LinkedIn istituzionale in un asset di posizionamento sull'agenda economica italiana, con una voce autorevole ma capace di intercettare anche pubblici non strettamente associativi.",
  goals: [
  "Posizionare Confindustria come voce di riferimento sull'agenda industriale",
  "Costruire una presenza editoriale costante e di qualità su LinkedIn",
  "Aumentare la reach organica e l'engagement della pagina istituzionale, con un posizionamento divulgativo",
  "Coinvolgere community di imprenditori, policy maker e stakeholder"],

  proposal: "Da luglio 2025 abbiamo preso in gestione il canale LinkedIn di Confindustria Nazionale e il profilo ufficiale del Presidente Emanuele Orsini.\n\nL'obiettivo era creare contenuti che plasmassero l'agenda economica e ponessero l'attenzione sulla politica industriale del Paese e sulle policy necessarie per rilanciare l'Italia.\n\nIn 9 mesi, Confindustria Nazionale ha ottenuto oltre 50mila follower aggiuntivi, mentre il profilo del Presidente Orsini è passato da 18mila follower a oltre 50mila.\n\nVisti i risultati, il progetto è stato rinnovato per tutto il 2026.",
  channels: [
  { platform: "LinkedIn", format: "LinkedIn Confindustria", desc: "Da 140mila follower a 200mila in 9 mesi", kind: "posts", bg: "#dbe5ff",
    tiles: [
    { thumb: "assets/economico/cs-confindustria-1.webp", href: "https://www.linkedin.com/posts/confindustria_il-nucleare-%C3%A8-tra-le-fonti-energetiche-pi%C3%B9-activity-7393974256663076864-vJA5" },
    { thumb: "assets/economico/cs-confindustria-2.webp", href: "https://www.linkedin.com/posts/confindustria_cop30-sostenibilitaeq-transizioneverde-activity-7367155792447180801-uI3M" }]

  },
  { platform: "LinkedIn", format: "LinkedIn Presidente Orsini", desc: "Da 18mila follower a 50mila in 9 mesi", kind: "posts", bg: "#ffd9c2",
    tiles: [
    { thumb: "assets/economico/cs-confindustria-3.webp", href: "https://www.linkedin.com/posts/orsiniemanuele_lenergia-%C3%A8-una-sfida-economica-industriale-activity-7458498463685820417-ddba" },
    { thumb: "assets/economico/cs-confindustria-4.webp", href: "https://www.linkedin.com/posts/orsiniemanuele_lo-dico-chiaro-si-deve-trovare-una-soluzione-activity-7393748079428116481-rdzj" }]

  }],

  formats: ["LinkedIn Confindustria", "LinkedIn Presidente Orsini"],
  kpis: [["20M", "Impression totali generate tra i due canali"], ["+90k", "I nuovi follower aggiunti sui due profili"]],
  quote: {
    text: "Da quando questa partnership è stata avviata, Il Punto Media ha dimostrato di saper tradurre la complessità dei temi industriali e di politica economica in contenuti LinkedIn che parlano davvero al nostro pubblico e veicolano i messaggi che Confindustria vuole mandare. La crescita dei profili riflette non solo la quantità ma la qualità editoriale di ogni contenuto, in un lavoro che richiede competenza sia sui temi che sul mezzo.",
    name: "Gianluca Daluiso",
    role: "Responsabile Comunicazione Digitale",
    company: "Confindustria",
    initials: "GD",
    avatar: "assets/quotes/gianluca-daluiso.webp"
  } },
{ slug: "cs-gualini", group: "agency",
  brand: "Gualini Lamiere", logo: "assets/agency/logo-gualini.webp", color: "#0074B0",
  ctaSoft: "#0074B0", ctaColor: "#0074B0",
  tag: "SMM Agency", tagBg: "#FF6B9E", tagColor: "#fff", logoScale: 1.6,
  title: "Personal brand LinkedIn per C-Level",
  metrics: "4 post/sett · 15M di reach in 2 anni",
  body: "Personal branding LinkedIn per il C-Level di Gualini Lamiere: strategia, scrittura, video e gestione continuativa per costruire autorevolezza nel settore industriale.",
  brief: "Il CEO di Gualini Lamiere voleva costruire una presenza personale forte su LinkedIn, per posizionarsi come voce autorevole nel settore industriale italiano e intercettare una community di imprenditori e tecnici.",
  goals: [
  "Costruire un personal brand LinkedIn forte e riconoscibile",
  "Posizionare il CEO come voce di riferimento nel settore industriale",
  "Intercettare imprenditori, clienti potenziali e talenti",
  "Generare conversazione costante intorno ai temi dell'imprenditoria e della manifattura italiana"],

  proposal: "Abbiamo preso in gestione il profilo LinkedIn del CEO Miriam Gualini da marzo 2024. Siamo partiti da 0 follower e abbiamo iniziato a creare contenuti attorno a 3 pillar editoriali: building in public (portare il pubblico dentro le decisioni aziendali), contenuti commerciali (casi studio di progetti aziendali) e employer branding (come Gualini Lamiere gestisce le persone in azienda).\n\nSenza alcun budget adv abbiamo scalato il profilo fino a 31mila follower, generando più di 17 milioni di impressions.\n\nDa inizio 2026 abbiamo esteso la gestione anche ai profili del COO e del CRO, costruendo un presidio LinkedIn coordinato che racconta Gualini Lamiere da tre prospettive complementari. Ogni profilo ha un posizionamento editoriale distinto, ma coerente con l'identità aziendale.",
  channels: [
  { platform: "LinkedIn", format: "Building in Public", desc: "Post per portare il pubblico dentro le decisioni ", kind: "posts", bg: "#dbe5ff", tileAspect: "590/926", centered: true,
    tiles: [
    { thumb: "assets/agency/cs-gualini-1.webp", href: "https://www.linkedin.com/posts/miriam-gualini_ho-speso-50mila-euro-per-dormire-sonni-pi%C3%B9-activity-7187034713125969920-aWVw" }]

  },
  { platform: "LinkedIn", format: "Contenuti commerciali", desc: "Casi studio di progetti reali con clienti dell'azienda", kind: "posts", bg: "#ffd9c2", tileAspect: "581/926", centered: true,
    tiles: [
    { thumb: "assets/agency/cs-gualini-2.webp", href: "https://www.linkedin.com/posts/miriam-gualini_4-anni-fa-siamo-stati-scelti-da-renzo-piano-activity-7185585170819760129-Sc_8" }]

  },
  { platform: "LinkedIn", format: "Employer branding", desc: "Contenuti finalizzati alla talent attraction", kind: "posts", bg: "#e0f0d8", tileAspect: "550/928", centered: true,
    tiles: [
    { thumb: "assets/agency/cs-gualini-3.webp", href: "https://www.linkedin.com/posts/miriam-gualini_2-anni-fa-ho-affidato-lufficio-acquisti-activity-7178707324725825536-sBmc" }]

  }],

  formats: ["LinkedIn personal", "Contenuti commerciali", "Video short-form"],
  kpis: [["€400k", "Pipeline commerciale generata"], ["17M", "Reach cumulata dei 3 profili in gestione"]],
  quote: {
    text: "Non credevo che LinkedIn potesse generare opportunità concrete per un'azienda manifatturiera come la nostra, ma mi sbagliavo. Il Punto Media ci ha aiutato a costruire una presenza editoriale che racconta Gualini Lamiere per quello che è davvero: un'eccellenza italiana nella lavorazione della lamiera, con tecnologia e know-how che meritano di essere conosciuti fuori dal nostro settore. In 2 anni, il mio profilo ha raccolto 31mila follower e questa attività ha generato oltre €400mila euro di pipeline commerciale. Per questo, non abbiamo solo rinnovato l'attività per i prossimi 2 anni, ma anche esteso la comunicazione ai profili LinkedIn del nostro COO e del nostro CRO. Siamo pienamente soddisfatti.",
    name: "Miriam Gualini",
    role: "Amministratore Delegato",
    company: "Gualini Lamiere",
    initials: "MG",
    avatar: "assets/quotes/miriam-gualini.webp"
  } },
{ slug: "cs-directa", group: "agency",
  brand: "Directa", logo: "assets/agency/logo-directa.webp", color: "#0D1729",
  ctaSoft: "#0D1729", ctaColor: "#0D1729",
  tag: "YouTube Management", tagBg: "#3B5BFF", tagColor: "#fff",
  title: "Produzione Video per Corsi finanziari",
  metrics: "Formazione branded · video on-demand",
  body: "Produzione di 3 mini corsi video on-demand per la Directa Academy: ideazione, scripting, regia, montaggio e packaging didattico per formazione branded.",
  brief: "Directa voleva ampliare la propria offerta di corsi gratuiti dell'Academy con 3 corsi video on-demand di alta qualità, capaci di trasmettere competenze finanziarie con un tono accessibile ma rigoroso.",
  goals: [
  "Costruire una libreria di 3x corsi video on-demand per la Academy",
  "Tradurre temi finanziari complessi in formazione accessibile",
  "Posizionare Directa come player con un'offerta formativa premium",
  "Generare conversion verso l'apertura del conto investimenti"],

  proposal: "Directa ci ha coinvolto all'interno della loro iniziativa \"Directa Academy\", che punta a rendere disponibili gratuitamente corsi di educazione finanziaria per principianti, intermedi ed esperti.\n\nCi siamo occupati di produrre end-to-end 3 corsi video on-demand distinti, gestendo la produzione e consegnando un prodotto di educazione finanziaria completo e pronto da pubblicare.\n\nPer Directa abbiamo prodotto 3 corsi: uno sugli errori che ti costano caro quando investi, uno su costruire un portafoglio di investimenti e uno su come valutare un'azienda e capire se ha senso investirci.\n\nNel complesso, abbiamo prodotto 25 lezioni, per un totale di 4 ore di formazione finanziaria.",
  channels: [
  { platform: "YouTube", format: "Gli errori che ti costano caro quando inizi a investire", desc: "Un video corso dedicato agli errori psicologici che commettiamo nell'approccio agli investimenti.",
    bg: "#322B8C", centered: true,
    tiles: [{ thumb: "assets/agency/directa-errori.webp", href: "https://www.directa.it/academy/corsi" }] },
  { platform: "YouTube", format: "Costruisci e gestisci il tuo portafoglio investimenti", desc: "Un video corso dedicato all'asset allocation e a cosa fare attenzione quando si costruisce un portafoglio.",
    bg: "#6B4517", centered: true,
    tiles: [{ thumb: "assets/agency/directa-portafoglio.webp", href: "https://www.directa.it/academy/corsi" }] },
  { platform: "YouTube", format: "Valutare un'azienda e imparare a capire le trimestrali", desc: "Un video corso dedicato alla valutazione d'azienda, alle quotazioni di Borsa e al leggere le trimestrali.",
    bg: "#1F5F26", centered: true,
    tiles: [{ thumb: "assets/agency/directa-valutare.webp", href: "https://www.directa.it/academy/corsi" }] }],

  formats: ["Gli errori che ti costano caro", "Portafoglio investimenti", "Valutare un'azienda"],
  quote: {
    text: "Quando abbiamo deciso di espandere la Directa Academy con nuovi video corsi, avevamo bisogno di un partner che unisse due cose difficili da trovare insieme: competenza finanziaria reale e capacità di comunicarla in modo che funzionasse su video. Il Punto Media aveva entrambe. Per questo, con loro abbiamo sviluppato non 1, ma ben 3 corsi, di livello principiante, intermedio ed esperto, che coprono alcune parti mancanti del nostro percorso formativo.",
    name: "Luca Fabbricatore",
    role: "Head of Marketing",
    company: "Directa",
    initials: "LF",
    avatar: "assets/quotes/luca-fabbricatore.webp"
  },
  kpis: [["25+", "Episodi singoli prodotti per i 3 video corsi"], ["4h", "Di formazione on-demand gratuita"]] }];


const CasiPage = ({ navigate }) => {
  const mediaCases = CASE_STUDIES_REGISTRY.filter((c) => c.group === "media");
  const agencyCases = CASE_STUDIES_REGISTRY.filter((c) => c.group === "agency");

  return (
    <main>
      <PageHero
        kicker="Casi studio"
        titleBefore={<>Come abbiamo </>}
        hiboxBg="#F96339" hiboxText="aiutato i brand"
        titleAfter={<><br />a comunicare meglio</>}
        lead="Quello che abbiamo fatto per i brand che hanno scelto di lavorare con noi." />

      {/* MEDIA PARTNERSHIPS */}
      <section style={{ background: "#f6f6f6", padding: "clamp(64px, 8vw, 110px) 0" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(30px, 4vw, 52px)", lineHeight: 1.1,
              letterSpacing: "-0.025em", margin: 0
            }}>Le nostre partnership <HiBox bg="#3FB28E">Media</HiBox></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="cases-grid">
            {mediaCases.map((c, i) => <CaseCard key={i} c={c} navigate={navigate} />)}
          </div>
        </div>
      </section>

      {/* AGENCY PARTNERSHIPS */}
      <section style={{ background: "#fff", padding: "clamp(64px, 8vw, 110px) 0" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 56 }}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(30px, 4vw, 52px)", lineHeight: 1.1,
              letterSpacing: "-0.025em", margin: 0
            }}>Le nostre partnership <HiBox bg="#3B5BFF">Agency</HiBox></h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="cases-grid">
            {agencyCases.map((c, i) => <CaseCard key={i} c={c} navigate={navigate} />)}
          </div>
        </div>
        <style>{`
          @media (max-width:1080px){ .cases-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width:640px){ .cases-grid{ grid-template-columns: 1fr !important; } }
        `}</style>
      </section>

      <CTASplit navigate={navigate} />
    </main>);

};

/* ============ CASE STUDY DETAIL ============ */
function ChannelIcon({ platform, color }) {
  // Tiny inline SVG glyph per platform (no external icon deps).
  const c = color || "#0A0A0A";
  if (platform === "Instagram") return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <rect x="3.5" y="3.5" width="17" height="17" rx="5" stroke={c} strokeWidth="1.8" />
      <circle cx="12" cy="12" r="4" stroke={c} strokeWidth="1.8" />
      <circle cx="17" cy="7" r="1.1" fill={c} />
    </svg>);
  if (platform === "YouTube") return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <rect x="2.5" y="5.5" width="19" height="13" rx="3" stroke={c} strokeWidth="1.8" />
      <path d="M10.5 9.3v5.4L15 12l-4.5-2.7Z" fill={c} />
    </svg>);
  if (platform === "LinkedIn") return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <rect x="3.5" y="3.5" width="17" height="17" rx="3" stroke={c} strokeWidth="1.8" />
      <path d="M7 10v7M7 7.5v.01M10.5 17v-7m0 2c.6-1.4 1.9-2 3-2 1.6 0 2.5 1.1 2.5 2.8V17" stroke={c} strokeWidth="1.8" strokeLinecap="round" />
    </svg>);
  if (platform === "Email") return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <rect x="3" y="5.5" width="18" height="13" rx="2" stroke={c} strokeWidth="1.8" />
      <path d="m3.5 7 8.5 6 8.5-6" stroke={c} strokeWidth="1.8" strokeLinecap="round" />
    </svg>);
  if (platform === "TikTok") return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="M14 4v9.5a3 3 0 1 1-3-3M14 4c.4 2.6 2.4 4 5 4" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);
  return null;
}

/* ============ QUOTE / TESTIMONIAL ============ */
const DEMO_QUOTE = {
  text: "Avevamo bisogno di un partner che si prendesse la responsabilità completa del canale YouTube e lo trasformasse da progetto sperimentale a asset editoriale strutturato. Il Punto Media ha costruito un processo produttivo affidabile, con contenuti di qualità e che traducono temi finanziari complessi in contenuti accessibili. Siamo molto soddisfatti, motivo per cui abbiamo esteso il progetto anche al canale UK.",
  name: "Luigi Boccia",
  role: "Growth Marketing Manager Italy & UK",
  company: "Moneyfarm",
  initials: "LB"
};

const LOREM_QUOTE = {
  text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
  name: "Nome Cognome",
  role: "Ruolo del referente",
  company: "Brand",
  initials: "NC"
};

function AvatarPH({ initials, bg = "#0A0A0A", color = "#fff", size = 56, ring, src }) {
  if (src) {
    return (
      <div style={{
        width: size, height: size, borderRadius: 999, flexShrink: 0,
        overflow: "hidden", background: bg,
        boxShadow: ring ? `0 0 0 3px ${ring}` : "none"
      }}>
        <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>);
  }
  return (
    <div style={{
      width: size, height: size, borderRadius: 999, flexShrink: 0,
      background: bg, color, display: "grid", placeItems: "center",
      fontFamily: "var(--font-display)", fontWeight: 700,
      fontSize: size * 0.36, letterSpacing: "-0.02em",
      boxShadow: ring ? `0 0 0 3px ${ring}` : "none"
    }}>{initials}</div>);
}

/* Scroll-driven word reveal: words start in muted grey (#5E5D59) and turn near-black
   (#0D0D0D) one by one based on how far the section has scrolled through the viewport. */
function QuoteSection({ q, ctaColor }) {
  const sectionRef = React.useRef(null);
  const startRef = React.useRef(null);
  const tokens = React.useMemo(() => (q.text || "").split(/(\s+)/), [q.text]);
  const wordCount = React.useMemo(() => tokens.filter((t) => /\S/.test(t)).length, [tokens]);
  const [blackCount, setBlackCount] = React.useState(0);

  React.useEffect(() => {
    const sec = sectionRef.current;
    const startEl = startRef.current;
    if (!sec || !startEl) return;
    let raf = null;
    const update = () => {
      raf = null;
      const sRect = startEl.getBoundingClientRect();
      const eRect = sec.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight || 800;
      // Reveal window:
      //  start = moment the quote-mark element enters the viewport (sRect.top === vh)
      //  end   = moment the section's bottom reaches the viewport bottom (eRect.bottom === vh)
      const offset = eRect.bottom - sRect.top;
      let p = offset > 0 ? (vh - sRect.top) / offset : 0;
      p = Math.max(0, Math.min(1, p));
      const next = Math.round(p * wordCount);
      setBlackCount((prev) => prev === next ? prev : next);
    };
    const onScroll = () => {if (raf == null) raf = requestAnimationFrame(update);};
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      if (raf != null) cancelAnimationFrame(raf);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [wordCount]);

  let wIdx = 0;
  return (
    <section ref={sectionRef} style={{ background: "#F4EFE5", padding: "clamp(96px, 12vw, 160px) 0", position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 12,
          letterSpacing: "0.24em", textTransform: "uppercase",
          fontWeight: 700, color: ctaColor, marginBottom: 32,
          display: "inline-flex", alignItems: "center", gap: 12
        }}>
          <span style={{ width: 22, height: 1, background: ctaColor }} />
          Cosa ne pensa il cliente
          <span style={{ width: 22, height: 1, background: ctaColor }} />
        </div>
        <svg ref={startRef} width="56" height="44" viewBox="0 0 56 44" style={{ marginInline: "auto", display: "block", marginBottom: 32 }}>
          <path d="M0 44V26C0 12 8 2 22 0v8c-7 2-11 8-11 16h11v20H0Zm34 0V26C34 12 42 2 56 0v8c-7 2-11 8-11 16h11v20H34Z" fill={ctaColor} />
        </svg>
        <p style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(24px, 2.6vw, 40px)", lineHeight: 1.35,
          letterSpacing: "-0.02em",
          margin: 0, maxWidth: 1100, marginInline: "auto", textWrap: "pretty",
          color: "#cfc9bd"
        }}>
          {tokens.map((tok, i) => {
            if (!/\S/.test(tok)) return tok;
            const myIdx = wIdx++;
            const isBlack = myIdx < blackCount;
            return (
              <span key={i} style={{ color: isBlack ? "#0D0D0D" : "#cfc9bd" }}>{tok}</span>);
          })}
        </p>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 16,
          marginTop: 56, paddingTop: 28,
          borderTop: "1px solid rgba(13,13,13,0.18)"
        }}>
          <AvatarPH initials={q.initials} bg={ctaColor} color="#fff" size={52} src={q.avatar} />
          <div style={{ textAlign: "left" }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 18, letterSpacing: "-0.01em", color: "#0A0A0A"
            }}>{q.name}</div>
            <div style={{ fontSize: 13, color: "#5E5D59", marginTop: 3 }}>
              {q.role} · <span style={{ fontWeight: 700, color: "#0A0A0A" }}>{q.company}</span>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

const CaseStudyPage = ({ slug, navigate }) => {
  const c = CASE_STUDIES_REGISTRY.find((x) => x.slug === slug);
  if (!c) {
    return (
      <main style={{ padding: "120px 0", textAlign: "center" }}>
        <div className="container">
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 48, margin: 0 }}>Caso studio non trovato</h1>
          <a href="#casi" onClick={(e) => {e.preventDefault();navigate("casi");}}
          style={{ ...ctaPill("#0A0A0A"), marginTop: 32, display: "inline-flex" }}>
            ← Torna ai casi studio
          </a>
        </div>
      </main>);
  }

  const isMedia = c.group === "media";
  const ctaColor = c.ctaColor || (isMedia ? "#3FB28E" : "#3B5BFF");
  const ctaSoft = c.ctaSoft || (isMedia ? "#B5E0CC" : "#C9D2FE");
  // Pick a readable text color for content drawn ON TOP of ctaSoft / ctaColor.
  const pickText = (hex) => {
    const h = (hex || "").replace("#", "");
    if (h.length < 6) return "#0A0A0A";
    const r = parseInt(h.slice(0, 2), 16),g = parseInt(h.slice(2, 4), 16),b = parseInt(h.slice(4, 6), 16);
    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    return lum > 0.6 ? "#0A0A0A" : "#fff";
  };
  const ctaSoftText = pickText(ctaSoft);
  const ctaText = pickText(ctaColor);
  const channels = c.channels || (c.formats || []).map((f) => ({ platform: "", format: f, desc: "" }));

  return (
    <main>
      {/* HERO */}
      <section style={{ background: "#f6f6f6", padding: "clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px)" }}>
        <div className="container">
          <a href="#casi" onClick={(e) => {e.preventDefault();navigate("casi");}}
          style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
            color: "#0A0A0A", textDecoration: "none", marginBottom: 32
          }}>← Tutti i casi studio</a>

          <div style={{
            display: "inline-block", background: c.tagBg, color: c.tagColor || "#fff",
            padding: "6px 14px", borderRadius: 999,
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
            marginBottom: 18
          }}>{c.tag}</div>

          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.05,
            letterSpacing: "-0.025em", margin: "0 0 24px",
            maxWidth: 1100, textWrap: "balance"
          }}>{c.title}</h1>

          <p style={{
            fontSize: "clamp(17px, 1.3vw, 20px)", lineHeight: 1.55,
            color: "#3A3A3A", maxWidth: 760, margin: 0
          }}>{c.body}</p>
        </div>
      </section>

      {/* COVER */}
      <section style={{ background: "#f6f6f6", paddingBottom: "clamp(56px, 7vw, 96px)" }}>
        <div className="container">
          <div style={{
            aspectRatio: "16/9", background: "#0A0A0A", borderRadius: 18,
            display: "grid", placeItems: "center", padding: 40
          }}>
            {c.logo ?
            <img src={c.logo} alt={c.brand} style={{ maxHeight: 140 * (c.logoScale || 1), maxWidth: "70%", display: "block", objectFit: "contain" }} /> :
            c.wordmark ?
            <span style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(56px, 8vw, 120px)", letterSpacing: "-0.03em",
              color: "#fff", textAlign: "center", lineHeight: 1
            }}>{c.wordmark}</span> :

            <span style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(40px, 6vw, 88px)", letterSpacing: "-0.025em",
              color: "#fff", textAlign: "center"
            }}>{c.brand}</span>
            }
          </div>
        </div>
      </section>

      {/* BRIEF */}
      <section style={{ background: "#fff", padding: "clamp(72px, 9vw, 120px) 0" }}>
        <div className="container cs-brief-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.05fr) minmax(0, 1fr)", gap: "clamp(40px, 6vw, 96px)", alignItems: "center" }}>
          <div className="cs-detail-col">
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "0.22em", textTransform: "uppercase", color: "#8A8A8A",
              fontWeight: 700, marginBottom: 20
            }}>Il brief del cliente</div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.1,
              letterSpacing: "-0.025em", margin: "0 0 24px"
            }}>Cosa ci ha chiesto <HiBox bg={ctaSoft}>{c.brand}</HiBox></h2>
            <p style={{ fontSize: "clamp(16px, 1.1vw, 18px)", lineHeight: 1.6, color: "#3A3A3A", margin: 0 }}>{c.brief || c.body}</p>
          </div>
          <div className="cs-detail-col">
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 20 }}>
              {(c.goals || []).map((g, i) =>
              <li key={i} style={{
                fontSize: "clamp(15px, 1.05vw, 17px)", lineHeight: 1.5, color: "#0A0A0A",
                paddingLeft: 40, position: "relative", minHeight: 26,
                display: "flex", alignItems: "center"
              }}>
                  <span style={{
                  position: "absolute", left: 0, top: "50%", transform: "translateY(-50%)",
                  width: 26, height: 26, borderRadius: 999, background: ctaSoft, color: ctaSoftText,
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700
                }}>{i + 1}</span>
                  <span>{g}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
        <style>{`@media (max-width: 880px){ .cs-brief-grid{ grid-template-columns: 1fr !important; align-items: start !important; } }`}</style>
      </section>

      {/* PROPOSAL + CHANNELS */}
      <section style={{ background: "#f6f6f6", padding: "clamp(72px, 9vw, 120px) 0" }}>
        <div className="container">
          <div style={{ maxWidth: 880, marginBottom: 64 }}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 12,
              letterSpacing: "0.22em", textTransform: "uppercase", color: "#8A8A8A",
              fontWeight: 700, marginBottom: 20
            }}>La soluzione proposta</div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.1,
              letterSpacing: "-0.025em", margin: "0 0 24px"
            }}>La nostra <HiBox bg={ctaSoft}>proposta</HiBox></h2>
            <div style={{ fontSize: "clamp(16px, 1.15vw, 19px)", lineHeight: 1.6, color: "#3A3A3A" }}>
              {(c.proposal || c.body).split("\n\n").map((p, i) =>
              <p key={i} style={{ margin: i === 0 ? 0 : "18px 0 0" }}>{p}</p>
              )}
            </div>
          </div>

          <div className="cs-channels-grid" style={{
            display: "flex",
            justifyContent: "center",
            flexWrap: "wrap",
            "--ch-gap": "clamp(20px, 2vw, 28px)",
            gap: "var(--ch-gap)"
          }}>
            {channels.map((ch, i) => {
              const rawTiles = ch.tiles?.length ? ch.tiles : ch.videos?.length ? ch.videos : null;
              const isShorts = ch.kind === "shorts";
              const isVideo = ch.kind === "videos" || isShorts;
              const tileAspect = ch.tileAspect || (isShorts ? "9/16" : ch.kind === "videos" ? "16/9" : "4/5");
              const tileCount = rawTiles ? Math.min(rawTiles.length, 3) : 0;
              let tileWidth, layouts;
              if (tileCount === 1) {
                tileWidth = isShorts ? "44%" : ch.kind === "videos" ? "82%" : "60%";
                layouts = isShorts ?
                [{ left: "28%", top: "12%", rot: -2 }] :
                ch.kind === "videos" ?
                [{ left: "9%", top: "32%", rot: -2 }] :
                [{ left: "20%", top: "20%", rot: -2 }];
              } else if (tileCount === 2) {
                tileWidth = isShorts ? "48%" : ch.kind === "videos" ? "72%" : "50%";
                layouts = isShorts ?
                [
                { left: "4%", top: "6%", rot: -4 },
                { left: "44%", top: "22%", rot: 4 }] :

                ch.kind === "videos" ?
                [
                { left: "6%", top: "14%", rot: -3 },
                { left: "22%", top: "56%", rot: 2 }] :

                [
                { left: "8%", top: "5%", rot: -3 },
                { left: "36%", top: "42%", rot: 2.5 }];

              } else {
                tileWidth = isShorts ? "36%" : ch.kind === "videos" ? "72%" : "42%";
                layouts = isShorts ?
                [
                { left: "4%", top: "3%", rot: -3 },
                { left: "30%", top: "30%", rot: 2 },
                { left: "12%", top: "55%", rot: -1.5 }] :

                ch.kind === "videos" ?
                [
                { left: "6%", top: "6%", rot: -3 },
                { left: "22%", top: "36%", rot: 2 },
                { left: "8%", top: "66%", rot: -1.5 }] :

                [
                { left: "6%", top: "4%", rot: -3 },
                { left: "36%", top: "32%", rot: 2.5 },
                { left: "14%", top: "60%", rot: -1.5 }];

              }
              return (
                <div key={i} style={{
                  display: "flex", flexDirection: "column", gap: 24,
                  flex: "0 0 calc((100% - 2 * var(--ch-gap)) / 3)",
                  minWidth: 0
                }}>
                <div style={{
                    position: "relative", width: "100%", aspectRatio: "4/5",
                    background: ch.bg || ctaSoft, borderRadius: 22, overflow: "hidden",
                    display: rawTiles ? "block" : "grid",
                    placeItems: rawTiles ? undefined : "center",
                    padding: rawTiles ? 0 : 28
                  }}>
                  {rawTiles ?
                    rawTiles.slice(0, 3).map((v, k) => {
                      const L = layouts[k] || layouts[0];
                      const isCentered = ch.centered && tileCount === 1;
                      const baseShadow = "0 16px 28px rgba(0,0,0,0.22)";
                      const liftShadow = "0 24px 44px rgba(0,0,0,0.34)";
                      const baseTransform = isCentered ? "translate(-50%, -50%) rotate(0deg)" : `rotate(${L.rot}deg)`;
                      const liftTransform = isCentered ? "translate(-50%, calc(-50% - 3px)) rotate(0deg) scale(1.03)" : `rotate(0deg) translateY(-3px) scale(1.03)`;
                      const TileTag = v.href ? "a" : "div";
                      const linkProps = v.href ? { href: v.href, target: "_blank", rel: "noopener noreferrer" } : {};
                      return (
                        <TileTag key={k} {...linkProps}
                        onMouseEnter={(e) => {e.currentTarget.style.transform = liftTransform;e.currentTarget.style.boxShadow = liftShadow;e.currentTarget.style.zIndex = 10;}}
                        onMouseLeave={(e) => {e.currentTarget.style.transform = baseTransform;e.currentTarget.style.boxShadow = baseShadow;e.currentTarget.style.zIndex = k + 1;}}
                        style={{
                          position: "absolute",
                          left: isCentered ? "50%" : L.left,
                          top: isCentered ? "50%" : L.top,
                          width: tileWidth, aspectRatio: tileAspect,
                          borderRadius: 10, overflow: "hidden", background: "#000",
                          boxShadow: baseShadow,
                          transform: baseTransform,
                          transition: "transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease",
                          cursor: v.href ? "pointer" : "default", zIndex: k + 1,
                          display: "block"
                        }}>
                          <img src={v.thumb} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
                        </TileTag>);
                    }) :
                    ch.images && ch.images[0] ?
                    <img src={ch.images[0]} alt="" style={{ maxWidth: "82%", maxHeight: "82%", objectFit: "contain", display: "block", borderRadius: 12, boxShadow: "0 22px 44px rgba(0,0,0,0.16)" }} /> :

                    <div style={{ textAlign: "center", color: "rgba(10,10,10,0.45)" }}>
                      <div style={{ marginBottom: 12, display: "flex", justifyContent: "center" }}>
                        <ChannelIcon platform={ch.platform} color="#0A0A0A" />
                      </div>
                      <div style={{
                        fontFamily: "var(--font-mono)", fontSize: 11,
                        letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700
                      }}>Immagine da inserire</div>
                    </div>
                    }
                </div>
                <div style={{ paddingInline: 4 }}>
                  <div style={{
                      fontFamily: "var(--font-display)", fontWeight: 700,
                      fontSize: "clamp(22px, 2vw, 28px)", letterSpacing: "-0.02em",
                      color: "#0A0A0A", marginBottom: 10, textAlign: "center"
                    }}>{ch.format}</div>
                  <p style={{
                      margin: 0, fontSize: "clamp(14px, 1vw, 15px)", lineHeight: 1.55,
                      color: "#4A4A4A", textAlign: "center"
                    }}>{ch.desc}</p>
                </div>
              </div>);
            })}
          </div>

          <style>{`
            .cs-channels-grid > div { width: calc((100% - 2 * var(--ch-gap)) / 3); }
            @media (max-width: 980px){
              .cs-channels-grid{ flex-direction: column !important; align-items: center !important; }
              .cs-channels-grid > div{ flex: 0 0 auto !important; width: 100% !important; max-width: 480px !important; }
            }
          `}</style>
        </div>
      </section>

      {/* RESULTS — big numbers */}
      <section style={{ background: "#fff", padding: "clamp(72px, 9vw, 120px) 0" }}>
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 64 }}>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.1,
              letterSpacing: "-0.025em", margin: 0,
              textWrap: "balance", maxWidth: 1000, marginInline: "auto"
            }}>I <HiBox bg={ctaSoft}>numeri</HiBox> generati per {c.brand}</h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: `repeat(${(c.kpis || []).length}, 1fr)`,
            alignItems: "start"
          }} className="cs-results">
            {(c.kpis || []).map((kpi, i) =>
            <PageNumberStat key={i} value={kpi[0]} desc={kpi[1]} divider={i > 0} accentColor={ctaColor} />
            )}
          </div>
          <style>{`@media (max-width:880px){ .cs-results{ grid-template-columns: 1fr !important; gap: 48px; } .cs-results > *{ border-left: 0 !important; } }`}</style>
        </div>
      </section>

      {/* QUOTE — scroll-driven reveal */}
      <QuoteSection q={c.quote || (c.slug === "cs-moneyfarm-yt" ? DEMO_QUOTE : LOREM_QUOTE)} ctaColor={ctaColor} />

      {/* CTA */}
      <section style={{ background: ctaColor, padding: "clamp(72px, 9vw, 120px) 0" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.5vw, 56px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: "0 0 28px",
            color: c.slug === "cs-deloitte" ? "#fff" : ctaText, textWrap: "balance", maxWidth: 900, marginInline: "auto"
          }}>Vuoi ottenere risultati simili per il tuo brand?</h2>
          <a href="#contatti" onClick={(e) => {e.preventDefault();navigate("contatti");}}
          style={{
            ...ctaPill(ctaText === "#fff" ? "#0A0A0A" : "#fff"), display: "inline-flex", color: ctaText === "#fff" ? "#fff" : "#0A0A0A"
          }}>
            Contattaci <ArrowRight />
          </a>
        </div>
      </section>

      {/* RELATED */}
      <section style={{ background: "#f6f6f6", padding: "clamp(64px, 8vw, 110px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(28px, 3.4vw, 42px)", lineHeight: 1.1,
            letterSpacing: "-0.02em", margin: "0 0 40px"
          }}>Altri casi studio</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="cases-grid">
            {(() => {
              const relatedMap = {
                "cs-mp-filtri": ["cs-xiaomi", "cs-swappie", "cs-scalable"],
                "cs-swappie": ["cs-xiaomi", "cs-mp-filtri", "cs-iliad"],
                "cs-xiaomi": ["cs-swappie", "cs-mp-filtri", "cs-deloitte"],
                "cs-moneyfarm-yt": ["cs-scalable-yt", "cs-moneyfarm-ugc", "cs-directa"],
                "cs-scalable-yt": ["cs-moneyfarm-yt", "cs-scalable", "cs-directa"],
                "cs-moneyfarm-ugc": ["cs-scalable", "cs-confindustria", "cs-moneyfarm-yt"],
                "cs-confindustria": ["cs-gualini", "cs-moneyfarm-ugc", "cs-iliad"],
                "cs-gualini": ["cs-confindustria", "cs-moneyfarm-ugc", "cs-deloitte"],
                "cs-directa": ["cs-scalable-yt", "cs-moneyfarm-yt", "cs-deloitte"]
              };
              const relatedSlugs = relatedMap[c.slug];
              const related = relatedSlugs ?
                relatedSlugs.map((s) => CASE_STUDIES_REGISTRY.find((x) => x.slug === s)).filter(Boolean) :
                CASE_STUDIES_REGISTRY.filter((x) => x.slug !== c.slug).slice(0, 3);
              return related.map((rc, i) =>
              <CaseCard key={i} c={rc} navigate={navigate} />
              );
            })()}
          </div>
        </div>
        <style>{`
          @media (max-width:1080px){ .cases-grid{ grid-template-columns: repeat(2, 1fr) !important; } }
          @media (max-width:640px){ .cases-grid{ grid-template-columns: 1fr !important; } }
        `}</style>
      </section>
    </main>);

};

function ChannelsHeader({ label, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 18, flexWrap: "wrap" }}>
      <div style={{
        display: "inline-block", background: "#0A0A0A", color: "#fff",
        padding: "6px 14px", borderRadius: 999,
        fontFamily: "var(--font-mono)", fontSize: 11,
        letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 700
      }}>{label}</div>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 12,
        letterSpacing: "0.14em", textTransform: "uppercase", color: "#8A8A8A", fontWeight: 700
      }}>{sub}</div>
    </div>);
}

/* ============ CHI SIAMO ============ */
const ChiSiamoPage = ({ navigate }) => {
  const team = [
  ["Nicola Travella", "Co-founder & CEO", "#6B5CFF", "https://www.linkedin.com/in/nicola-travella/"],
  ["Duccio Pasquinelli", "Co-founder & COO", "#FF2895", "https://www.linkedin.com/in/ducciopasquinelli/"],
  ["Filippo Lusini", "Co-founder & Head of Techy", "#3FB28E", "https://www.linkedin.com/in/filippo-lusini-%F0%9F%9F%A3-41b56523a/"],
  ["Sara Cacioli", "Head of Content - Il Punto Economico", "#F96339", "https://www.linkedin.com/in/sara-cacioli/"],
  ["Alberto Vivoli", "Head of Agency SMM", "#3B5BFF", "https://www.linkedin.com/in/alberto-vivoli-18390b27a/"],
  ["Tommaso Pollarini", "Head of YouTube", "#F0A30A", "https://www.linkedin.com/in/tommaso-pollarini-3408b7114/"],
  ["Gabriele Scrima", "Junior YouTube Specialist", "#FB037C", "https://www.linkedin.com/in/gabriele-scrima-300712215/"],
  ["Giulia Locatelli", "Project Manager - Agency", "#5170FF", "https://www.linkedin.com/in/giulia-locatelli-2b3215200/"],
  ["Anna Detti", "Short Form Content Strategist", "#7A4DFF", "https://www.linkedin.com/in/anna-detti/"],
  ["Fabrizio Guerra Chavez", "Junior Project Manager - Techy", "#FF6B9F", "https://www.linkedin.com/in/fabrizio-guerra-chavez-77058a2a8/"]];


  const values = [
  { hlBg: "#FFE2A8", hl: "Curiosità", body: "Partiamo sempre dal perché. Se non capiamo davvero un argomento, non possiamo raccontarlo a milioni di persone." },
  { hlBg: "#FFD6E8", hl: "Ossessione", body: "Per il dettaglio, per il ritmo, per ogni singolo frame. La differenza tra un contenuto che funziona e uno che no è nei dettagli." },
  { hlBg: "#B5E0CC", hl: "Trasparenza", body: "Numeri reali, report onesti, scadenze rispettate. Trattiamo i clienti come trattiamo la nostra audience." }];


  return (
    <main>
      <PageHero
        kicker="Chi siamo"
        titleBefore={<>Vogliamo risolvere il<br />problema della </>}
        hiboxBg="#6B5CFF" hiboxText="conoscenza"
        titleAfter={<><br />attraverso la divulgazione</>}
        lead="Siamo un team di giovani under-30 ossessionati dal creare contenuti che la persone scelgono di guardare." />
      

      {/* Numbers */}
      <section style={{ background: "#fff", padding: "clamp(64px, 8vw, 120px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: 0, textAlign: "center",
            textWrap: "balance", maxWidth: 1100, marginInline: "auto"
          }}>
            Un team <HiBox bg="#F96339">piccolo</HiBox><br />che fa numeri grandi
          </h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
            marginTop: 80, alignItems: "start"
          }} className="chi-numbers">
            <PageNumberStat value="10+" desc={<>Giovani under-30 nel Team <br />(lavoriamo in full-remote)</>} />
            <PageNumberStat value="6+" desc={<>Anni di esperienza<br />sui contenuti digitali</>} divider />
            <PageNumberStat value="200+" desc={<>Contenuti pubblicati ogni mese<br />tra Media e Content Agency</>} divider />
          </div>
          <style>{`@media (max-width:880px){ .chi-numbers{ grid-template-columns: 1fr !important; gap: 56px; } .chi-numbers > *{ border-left: 0 !important; } }`}</style>
        </div>
      </section>

      {/* Team */}
      <section style={{ background: "#f6f6f6", padding: "clamp(64px, 8vw, 120px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: 0, textAlign: "center",
            textWrap: "balance", maxWidth: 1100, marginInline: "auto"
          }}>
            Le persone <HiBox bg="#6B5CFF">dietro allo schermo</HiBox>
          </h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20,
            marginTop: 64
          }} className="team-grid">
            {team.map(([name, role, color, href], i) => {
              const slug = name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
              return (
                <a key={i} href={href} target="_blank" rel="noopener noreferrer"
                  aria-label={`${name} su LinkedIn`}
                  className="team-card"
                  style={{
                  background: "#fff", borderRadius: 18, padding: 20,
                  textDecoration: "none", color: "inherit", display: "block",
                  transition: "transform 220ms ease, box-shadow 220ms ease",
                  ...(i === team.length - 2 ? { gridColumn: "2 / span 1" } : {})
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 24px 50px -14px rgba(28,22,8,0.22)"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}>
                <div className="team-imgwrap" style={{
                    position: "relative", aspectRatio: "1/1", background: "#efc162", borderRadius: 12,
                    marginBottom: 16, overflow: "hidden"
                  }}>
                  <img src={`assets/team/${slug}.webp`} alt={name} loading="lazy"
                    className="team-img"
                    style={{
                      position: "absolute", left: "50%", bottom: 0,
                      transform: "translateX(-50%)",
                      width: "100%", height: "100%", objectFit: "cover", objectPosition: "center bottom",
                      display: "block",
                      transition: "transform 420ms cubic-bezier(.2,.7,.2,1), filter 420ms"
                    }} />
                  <span className="team-li" aria-hidden="true" style={{
                      position: "absolute", right: 10, bottom: 10,
                      width: 32, height: 32, borderRadius: 8,
                      background: "#0A66C2", color: "#fff",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      opacity: 0, transform: "translateY(6px)",
                      transition: "opacity 280ms ease, transform 280ms ease",
                      boxShadow: "0 6px 14px rgba(10,38,71,0.25)"
                    }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                      <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/>
                    </svg>
                  </span>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, letterSpacing: "-0.01em" }}>{name}</div>
                <div style={{ fontSize: 13, color: "#4A4A4A", marginTop: 4 }}>{role}</div>
              </a>);

            })}
          </div>
          <style>{`
            .team-card:hover .team-img{ transform: translateX(-50%) scale(1.06); filter: saturate(1.05); }
            .team-card:hover .team-li{ opacity: 1; transform: translateY(0); }
            .team-card:focus-visible{ outline: 3px solid #6B5CFF; outline-offset: 3px; }
            @media (max-width:880px){ .team-grid{ grid-template-columns: 1fr 1fr !important; } .team-grid > *{ grid-column: auto !important; } }
          `}</style>
        </div>
      </section>

      {/* Values */}
      <section style={{ background: "#fff", padding: "clamp(64px, 8vw, 120px) 0" }}>
        <div className="container">
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.025em", margin: 0, textAlign: "center",
            textWrap: "balance", maxWidth: 1100, marginInline: "auto"
          }}>
            Tre cose su cui <HiBox bg="#3FB28E">non scendiamo a compromessi</HiBox>
          </h2>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24,
            marginTop: 72
          }} className="values-grid">
            {values.map((v, i) =>
            <div key={i} style={{
              background: "#f6f6f6", borderRadius: 18,
              padding: "32px 28px",
              display: "flex", flexDirection: "column", gap: 18, minHeight: 240
            }}>
                <div style={{ alignSelf: "flex-start" }}>
                  <HiBoxStatic bg={v.hlBg}>
                    <span style={{
                    fontFamily: "var(--font-display)", fontWeight: 700,
                    fontSize: "clamp(22px, 1.9vw, 28px)", letterSpacing: "-0.02em"
                  }}>{v.hl}</span>
                  </HiBoxStatic>
                </div>
                <p style={{ fontSize: 16, lineHeight: 1.55, color: "#0A0A0A", margin: 0 }}>{v.body}</p>
              </div>
            )}
          </div>
          <style>{`@media (max-width:880px){ .values-grid{ grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>

      <CTASplit navigate={navigate} />
    </main>);

};

/* ============ CONTATTI ============ */
const ContattiPage = ({ navigate }) => {
  const [sent, setSent] = useState(false);
  const [service, setService] = useState("");
  const [serviceError, setServiceError] = useState(false);
  return (
    <main>
      <PageHero
        kicker="Contatti"
        titleBefore={<></>}
        hiboxBg="#3B5BFF" hiboxText="Parliamone"
        titleAfter={<><br />Rispondiamo entro 24h</>}
        lead="Compila il form o scrivici direttamente e scopriamo insieme come possiamo aiutarti." />
      

      <section style={{ background: "#f6f6f6", padding: "clamp(56px, 7vw, 100px) 0 clamp(80px, 10vw, 140px)" }}>
        <div className="container">
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1.1fr",
            gap: "clamp(32px, 5vw, 80px)", alignItems: "start"
          }} className="contact-grid">
            {/* Left — info card */}
            <div style={{
              background: "#fff", borderRadius: 18,
              padding: "clamp(28px, 3vw, 44px)",
              display: "flex", flexDirection: "column", gap: 24
            }}>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(22px, 1.9vw, 28px)", letterSpacing: "-0.02em",
                margin: 0, lineHeight: 1.2
              }}>
                Scrivici direttamente
              </h3>
              <a href="mailto:team@ilpuntomedia.com" style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(20px, 2vw, 26px)", letterSpacing: "-0.02em",
                color: "#0A0A0A", borderBottom: "2px solid #0A0A0A",
                paddingBottom: 4, alignSelf: "flex-start"
              }}>team@ilpuntomedia.com</a>
              <div style={{ height: 1, background: "#E8E5DE" }} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.02em", marginBottom: 8, color: "#8A8A8A", textTransform: "uppercase" }}>SEDE LEGALE</div>
                <div style={{ fontSize: 16, lineHeight: 1.5 }}>Via Europa 50<br />24060 Bolgare, Italia</div>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.02em", marginBottom: 8, color: "#8A8A8A", textTransform: "uppercase" }}>Tempo di risposta</div>
                <div style={{ fontSize: 16, lineHeight: 1.5 }}>Entro 24 ore lavorative</div>
              </div>
            </div>

            {/* Right — form */}
            <form onSubmit={(e) => {
              e.preventDefault();
              if (!service) { setServiceError(true); return; }
              setSent(true);
            }}
            style={{
              background: "#fff", padding: "clamp(28px, 3vw, 44px)",
              borderRadius: 18, display: "grid", gap: 18
            }}>
              {sent ?
              <div style={{ padding: "40px 8px", textAlign: "center" }}>
                  <HiBoxStatic bg="#B5E0CC">
                    <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 24, letterSpacing: "-0.02em" }}>Ricevuto</span>
                  </HiBoxStatic>
                  <p style={{ marginTop: 20, color: "#4A4A4A", fontSize: 16 }}>Ti rispondiamo entro 24h all'indirizzo email che ci hai indicato.</p>
                </div> :

              <>
                  <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: "clamp(22px, 1.9vw, 28px)", letterSpacing: "-0.02em",
                  margin: 0, lineHeight: 1.2
                }}>
                    Raccontaci il progetto
                  </h3>
                  <Field label="Nome e cognome" name="name" required />
                  <Field label="Sito Web della tua azienda" name="company" required />
                  <Field label="Email aziendale" name="email" type="email" required />
                  <div>
                    <label style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.02em", textTransform: "uppercase", color: "#8A8A8A" }}>Cosa ti serve?<span style={{ color: "#F96339" }}> *</span></label>
                    <div style={{ display: "flex", gap: 8, marginTop: 12, flexWrap: "wrap" }}>
                      {["Servizi Media", "Servizi Agency", "Entrambi"].map((tlabel) => {
                        const selected = service === tlabel;
                        return (
                    <label key={tlabel} style={{
                      display: "inline-flex", alignItems: "center", gap: 8,
                      padding: "10px 16px", borderRadius: "999px 999px 999px 0px",
                      border: selected ? "1.5px solid #3B5BFF" : (serviceError ? "1.5px solid #F96339" : "1.5px solid #DCD8D0"),
                      background: selected ? "#E8EEFF" : "#fff",
                      cursor: "pointer", fontSize: 14, fontWeight: 600,
                      transition: "border-color 160ms, background 160ms"
                    }}>
                          <input type="radio" name="service" value={tlabel}
                            checked={selected}
                            onChange={() => { setService(tlabel); setServiceError(false); }}
                            style={{ accentColor: "#3B5BFF" }} />
                          {tlabel}
                        </label>);
                      })}
                    </div>
                    {serviceError &&
                      <div style={{ marginTop: 8, fontSize: 13, color: "#F96339", fontWeight: 600 }}>
                        Seleziona almeno un'opzione
                      </div>
                    }
                  </div>
                  <Field label="Dicci qualcosa in più" name="message" textarea required />
                  <button type="submit" style={{ ...ctaPill("#3B5BFF"), border: 0, cursor: "pointer", justifySelf: "start", marginTop: 8 }}>
                    Invia richiesta <ArrowRight />
                  </button>
                </>
              }
            </form>
          </div>
          <style>{`@media (max-width:880px){ .contact-grid{ grid-template-columns: 1fr !important; } }`}</style>
        </div>
      </section>
    </main>);

};

function Field({ label, name, type = "text", required, textarea }) {
  const [v, setV] = useState("");
  const Tag = textarea ? "textarea" : "input";
  return (
    <div>
      <label style={{
        fontSize: 13, fontWeight: 700, letterSpacing: "0.02em",
        textTransform: "uppercase", color: "#8A8A8A"
      }}>
        {label}{required && <span style={{ color: "#F96339" }}> *</span>}
      </label>
      <Tag name={name} type={type} required={required} value={v} onChange={(e) => setV(e.target.value)} rows={textarea ? 4 : undefined}
      style={{
        marginTop: 8, width: "100%", padding: "14px 16px", borderRadius: 12,
        border: "1.5px solid #DCD8D0", background: "#fff", fontFamily: "inherit", fontSize: 15,
        outline: "none", resize: textarea ? "vertical" : "none"
      }}
      onFocus={(e) => e.target.style.borderColor = "#3B5BFF"}
      onBlur={(e) => e.target.style.borderColor = "#DCD8D0"} />
    </div>);

}

Object.assign(window, {
  MediaPage, AgencyPage, CasiPage, CaseStudyPage, ChiSiamoPage, ContattiPage,
  // shared bits used by subpages
  PageHero, PageNumberStat, CTASplit, HiBoxStatic, ctaPill, Field
});