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="Real results"
          title={<>Numbers,<br/><span style={{ color: "#B3CDF9" }}>not vibes.</span></>}
          lede="Every campaign tracked pixel-to-payment. Last quarter, across six clients."
        />
        <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 Weight Loss", bigStat: "4.7×", bigLabel: "ROAS in 60 days",
    row1: { k: "CPA", v: "$38 → $20" }, row2: { k: "Ad spend", v: "$18K / mo" },
    quote: "Meta went from break-even to our #1 channel.", dark: false },
  { brand: "Raterunners", cat: "Shipping SaaS", bigStat: "-25%", bigLabel: "Lead Gen cost",
    row1: { k: "Onboarding", v: "+84%" }, row2: { k: "CAC", v: "$48 → $38" },
    quote: "The hooks actually understand our user.", dark: true },
  { brand: "MintPlay", cat: "Gaming App", bigStat: "42", bigLabel: "TikTok reels in 2 weeks",
    row1: { k: "Consistency", v: "98.8%" }, row2: { k: "Creative tests", v: "228 in 60 days" },
    quote: "They help sharpen the process!", dark: false },
  { brand: "Kedor", cat: "B2B Building Material", bigStat: "$7.9M", bigLabel: "social media views in 3 months",
    row1: { k: "CPA", v: "$110 → $19" }, row2: { k: "Project rate", v: "+71%" },
    quote: "Projects triple, sales team happy.", dark: false },
  { brand: "Mobili Rebecca", cat: "D2C Furniture", bigStat: "6.1X", bigLabel: "Avg. ROAS across ads",
    row1: { k: "CPA", v: "-38%" }, row2: { k: "REVENUE", v: "+18% week" },
    quote: "Their approach adapt to today's market!", dark: true },
  { brand: "Steamatic SFV", cat: "Construction Services", bigStat: "+37%", bigLabel: "Revenue growth in a year",
    row1: { k: "CPA", v: "$89 → $24" }, row2: { k: "Reach", v: "4.1M locals" },
    quote: "Knowledge, creativity and strategic insight", 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="What operators say"
          title={<>Trusted by founders<br/><span style={{ color: "#B3CDF9" }}>doing the scaling.</span></>}
          lede="Not influencers. Not agencies reselling our work. Actual operators running actual brands."
        />
        <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: "I originally hired Di Fiore Creative to help with our digital marketing campaigns, and they quickly became an invaluable partner. They stepped in, took ownership of our creative and campaign strategy, and within just weeks reduced our CPA by 41% while increasing traffic fivefold." },
  { name: "Michael Garganese", role: "CEO, Mintplay", initials: "MG", avatarBg: "linear-gradient(135deg,#4361EE,#2b2b99)",
    avatar: "uploads/avatars/michael-garganese.png",
    quote: "Di Fiore Creative is instrumental in guiding the creative process and execution for our project. From early concept discussions through final delivery, they help refine the vision, sharpen the messaging, and bring everything together in a cohesive way. They are highly professional and organized throughout the engagement." },
  { name: "Austin Smith", role: "CEO, Raterunners", initials: "AS", avatarBg: "linear-gradient(135deg,#051B42,#4361EE)",
    avatar: "uploads/avatars/austin-smith.png",
    quote: "As a financial SaaS in supply chain, we struggled to find an agency that understood performance creative. Di Fiore nailed it — our lead gen cost dropped 25% and we finally have ads that don't look like every other 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: "The speed is insane. We used to wait 3 weeks for a single ad. Di Fiore delivers full creative batches in 48 hours. Our testing velocity went through the roof and so did our revenue." },
  { name: "Donatella Caravaggio", role: "CMO, Mobili Rebecca", initials: "DC", avatarBg: "linear-gradient(135deg,#b5896a,#7a4e2e)",
    avatar: "uploads/avatars/donatella-caravaggio.png",
    quote: "Their innovative approach seamlessly adapts to today's dynamic market. They know how to turn projects into real-world action and measurable outcomes." },
  { name: "Liza Henry", role: "CFO, Steamatic SFV", initials: "LH", avatarBg: "linear-gradient(135deg,#0f3d4a,#d4a574)",
    avatar: "uploads/avatars/liza-henry.png",
    quote: "We hired Di Fiore Creative to analyze our existing marketing efforts and develop a new, vibrant website complete with creative content and strategic marketing direction. At the time, we were working with another company that was falling short, and the difference after bringing Di Fiore Creative on board was immediate. Their knowledge, creativity, and strategic insight have had a profound impact on our presence in the industry. Beyond the results, working with their team has significantly streamlined the time we need to dedicate to this area of our business, allowing me to focus my energy elsewhere." },
];

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;