const APPLE_SANS_SP = "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif";
const APPLE_TEXT_SP = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif";

const CaseStudiesSection = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";
  const cols = isMobile ? 1 : isTablet ? 2 : 3;
  return (
    <section style={{
      background: "#fff",
      padding: isMobile ? "80px 20px" : "140px 32px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          eyebrow="Risultati reali"
          title={<>Numeri,<br/><span style={{ color: "#B3CDF9" }}>non chiacchiere.</span></>}
          lede="Ogni campagna tracciata dal pixel al pagamento. Ultimo trimestre, su sei clienti."
        />
        <div style={{
          display: "grid",
          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
          gap: isMobile ? 16 : 20,
          marginTop: isMobile ? 48 : 72,
        }}>
          {CASES.map((c) => <CaseCard key={c.brand} c={c} isMobile={isMobile}/>)}
        </div>
      </div>
    </section>
  );
};

const CASES = [
  { brand: "Trimly", cat: "D2C Dimagrimento", bigStat: "4.7×", bigLabel: "ROAS in 60 giorni",
    row1: { k: "CPA", v: "$38 → $20" }, row2: { k: "Spesa ads", v: "$18K / mese" },
    quote: "Meta è passata da break-even al nostro canale #1.", dark: false },
  { brand: "Raterunners", cat: "SaaS Spedizioni", bigStat: "-25%", bigLabel: "Costo Lead Gen",
    row1: { k: "Onboarding", v: "+84%" }, row2: { k: "CAC", v: "$48 → $38" },
    quote: "Gli hook capiscono davvero il nostro utente.", dark: true },
  { brand: "MintPlay", cat: "App Gaming", bigStat: "42", bigLabel: "Reel TikTok in 2 settimane",
    row1: { k: "Coerenza", v: "98.8%" }, row2: { k: "Test creativi", v: "228 in 60 giorni" },
    quote: "Ci aiutano ad affinare il processo!", dark: false },
  { brand: "Kedor", cat: "Materiali Edili B2B", bigStat: "$7.9M", bigLabel: "Visualizzazioni social in 3 mesi",
    row1: { k: "CPA", v: "$110 → $19" }, row2: { k: "Tasso progetti", v: "+71%" },
    quote: "I progetti triplicano, il team vendite è felice.", dark: false },
  { brand: "Mobili Rebecca", cat: "D2C Arredamento", bigStat: "6.1X", bigLabel: "ROAS medio sulle ads",
    row1: { k: "CPA", v: "-38%" }, row2: { k: "RICAVI", v: "+18% settimana" },
    quote: "Il loro approccio si adatta al mercato di oggi!", dark: true },
  { brand: "Steamatic SFV", cat: "Servizi Edilizia", bigStat: "+37%", bigLabel: "Crescita ricavi in un anno",
    row1: { k: "CPA", v: "$89 → $24" }, row2: { k: "Reach", v: "4.1M locali" },
    quote: "Conoscenza, creatività e visione strategica.", dark: false },
];

const CaseCard = ({ c, isMobile }) => {
  const bg = c.dark ? "#051B42" : "rgba(179,205,249,0.25)";
  const fg = c.dark ? "#fff" : "#051B42";
  const muted = c.dark ? "#B3CDF9" : "rgba(5,27,66,0.55)";
  return (
    <div style={{
      background: bg, color: fg, borderRadius: 22,
      padding: isMobile ? 24 : 32, border: "none",
      display: "flex", flexDirection: "column",
      minHeight: isMobile ? "auto" : 340,
      width: "100%", boxSizing: "border-box",
    }}>
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "center",
        marginBottom: isMobile ? 16 : 24, gap: 10,
      }}>
        <div style={{
          fontFamily: APPLE_SANS_SP, fontWeight: 600,
          fontSize: isMobile ? 15 : 16, letterSpacing: "-0.015em",
          minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
        }}>{c.brand}</div>
        <div style={{
          fontFamily: APPLE_TEXT_SP, fontSize: 11, fontWeight: 500,
          padding: "4px 10px", borderRadius: 999,
          background: c.dark ? "rgba(179,205,249,0.12)" : "rgba(5,27,66,0.08)",
          color: muted, whiteSpace: "nowrap", flex: "none",
        }}>{c.cat}</div>
      </div>
      <div style={{
        fontFamily: APPLE_SANS_SP, fontWeight: 700,
        fontSize: isMobile ? 60 : 76,
        lineHeight: 0.95, letterSpacing: "-0.045em",
        color: fg,
      }}>{c.bigStat}</div>
      <div style={{
        fontFamily: APPLE_TEXT_SP, fontSize: isMobile ? 14 : 15,
        color: muted, marginTop: 4,
        marginBottom: isMobile ? 18 : 24, letterSpacing: "-0.005em",
      }}>
        {c.bigLabel}
      </div>
      <div style={{
        paddingTop: 18, marginTop: "auto",
        borderTop: c.dark ? "1px solid rgba(179,205,249,0.2)" : "1px solid rgba(5,27,66,0.12)",
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12,
        marginBottom: 18,
      }}>
        {[c.row1, c.row2].map((r, i) => (
          <div key={i} style={{ minWidth: 0 }}>
            <div style={{ fontFamily: APPLE_TEXT_SP, fontSize: 11, fontWeight: 500,
              color: muted, letterSpacing: "-0.005em" }}>{r.k}</div>
            <div style={{ fontFamily: APPLE_SANS_SP, fontWeight: 600, fontSize: 15,
              marginTop: 2, letterSpacing: "-0.01em",
              overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
            }}>
              {r.v}
            </div>
          </div>
        ))}
      </div>
      <div style={{ fontFamily: APPLE_TEXT_SP, fontSize: 14,
        lineHeight: 1.5, color: c.dark ? "rgba(255,255,255,0.85)" : "rgba(5,27,66,0.75)",
        letterSpacing: "-0.005em" }}>
        "{c.quote}"
      </div>
    </div>
  );
};

const TestimonialsSection = () => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";
  const cols = isMobile ? 1 : isTablet ? 2 : 3;
  return (
    <section style={{
      background: "#051B42", color: "#fff",
      padding: isMobile ? "80px 20px" : "140px 32px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          light
          eyebrow="Cosa dicono gli operatori"
          title={<>Scelti dai founder<br/><span style={{ color: "#B3CDF9" }}>che stanno scalando.</span></>}
          lede="Non influencer. Non agenzie che rivendono il nostro lavoro. Operatori veri che gestiscono brand veri."
        />
        <div style={{
          marginTop: isMobile ? 48 : 72,
          columnCount: cols, columnGap: isMobile ? 16 : 20,
        }}>
          {TESTIMONIALS.map((t, i) => (
            <div key={i} style={{ breakInside: "avoid", marginBottom: isMobile ? 16 : 20 }}>
              <TestimonialCard t={t}/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const TESTIMONIALS = [
  { name: "Galit Shokrian", role: "Founder, Trimly", initials: "GS", avatarBg: "linear-gradient(135deg,#f4a08c,#c86a78)",
    avatar: "uploads/avatars/galit-shokrian.png",
    quote: "Inizialmente ho ingaggiato Di Fiore Creative per le nostre campagne di digital marketing, e sono diventati rapidamente un partner indispensabile. Sono entrati subito nel progetto, hanno preso in mano la strategia creativa e di campagna, e in poche settimane hanno ridotto il nostro CPA del 41% aumentando il traffico di cinque volte." },
  { name: "Michael Garganese", role: "CEO, Mintplay", initials: "MG", avatarBg: "linear-gradient(135deg,#4361EE,#2b2b99)",
    avatar: "uploads/avatars/michael-garganese.png",
    quote: "Di Fiore Creative è fondamentale nel guidare il processo creativo e l'esecuzione del nostro progetto. Dalle prime discussioni sui concept fino alla consegna finale, aiutano a perfezionare la visione, affinare il messaggio e mettere tutto insieme in modo coerente. Sono estremamente professionali e organizzati per tutta la durata della collaborazione." },
  { name: "Austin Smith", role: "CEO, Raterunners", initials: "AS", avatarBg: "linear-gradient(135deg,#051B42,#4361EE)",
    avatar: "uploads/avatars/austin-smith.png",
    quote: "Come SaaS finanziario nella supply chain, faticavamo a trovare un'agenzia che capisse il performance creative. Di Fiore l'ha azzeccata in pieno — il costo per lead è sceso del 25% e finalmente abbiamo ads che non sembrano quelle di tutte le altre software company." },
  { name: "Ada Di Fiore", role: "President, OHME Group SRL", initials: "AD", avatarBg: "linear-gradient(135deg,#687a3c,#3a4620)",
    avatar: "uploads/avatars/ada-di-fiore.png",
    quote: "La velocità è pazzesca. Prima aspettavamo 3 settimane per un singolo annuncio. Di Fiore consegna intere batch creative in 48 ore. La nostra velocità di test è esplosa, e con essa anche i ricavi." },
  { name: "Donatella Caravaggio", role: "CMO, Mobili Rebecca", initials: "DC", avatarBg: "linear-gradient(135deg,#b5896a,#7a4e2e)",
    avatar: "uploads/avatars/donatella-caravaggio.png",
    quote: "Il loro approccio innovativo si adatta perfettamente al mercato dinamico di oggi. Sanno trasformare i progetti in azione concreta e risultati misurabili." },
  { name: "Liza Henry", role: "CFO, Steamatic SFV", initials: "LH", avatarBg: "linear-gradient(135deg,#0f3d4a,#d4a574)",
    avatar: "uploads/avatars/liza-henry.png",
    quote: "Abbiamo ingaggiato Di Fiore Creative per analizzare le nostre attività di marketing esistenti e sviluppare un sito web nuovo e vibrante, completo di contenuti creativi e di una direzione strategica di marketing. All'epoca lavoravamo con un'altra azienda che non era all'altezza, e la differenza dopo l'arrivo di Di Fiore Creative è stata immediata. La loro conoscenza, creatività e visione strategica hanno avuto un impatto profondo sulla nostra presenza nel settore. Oltre ai risultati, lavorare con il loro team ha snellito significativamente il tempo che dobbiamo dedicare a quest'area del business, permettendomi di concentrare le mie energie altrove." },
];

const TestimonialCard = ({ t }) => (
  <div style={{
    background: "rgba(255,255,255,0.05)",
    border: "1px solid rgba(179,205,249,0.18)",
    borderRadius: 18, padding: 24,
  }}>
    <div style={{ display: "flex", gap: 2, marginBottom: 14 }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="#fff">
          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26"/>
        </svg>
      ))}
    </div>
    <div style={{
      fontFamily: APPLE_TEXT_SP, fontSize: 16, lineHeight: 1.5,
      color: "rgba(255,255,255,0.92)", marginBottom: 20,
      letterSpacing: "-0.005em",
    }}>
      "{t.quote}"
    </div>
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      {t.avatar ? (
        <img
          src={t.avatar}
          alt={t.name}
          style={{
            width: 44, height: 44, borderRadius: 999,
            objectFit: "cover", display: "block",
            border: "1.5px solid rgba(179,205,249,0.25)",
            flex: "none",
          }}
        />
      ) : (
        <div style={{
          width: 44, height: 44, borderRadius: 999, background: t.avatarBg,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: APPLE_SANS_SP, fontWeight: 600, fontSize: 14, color: "#fff",
          flex: "none",
        }}>{t.initials}</div>
      )}
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: APPLE_SANS_SP, fontWeight: 600, fontSize: 14, color: "#fff", letterSpacing: "-0.01em" }}>{t.name}</div>
        <div style={{ fontFamily: APPLE_TEXT_SP, fontSize: 12, color: "rgba(255,255,255,0.55)" }}>{t.role}</div>
      </div>
    </div>
  </div>
);

window.CaseStudiesSection = CaseStudiesSection;
window.TestimonialsSection = TestimonialsSection;