// CaseStudies V3 — Marquee of quotes scrolling horizontally with brand chips
const QUOTES_V3 = [
  { brand: "Moldoteca", glyph: "M", color: "9,169,85", quote: "+34% rata confirmare COD în 30 zile.",            who: "Andrei M.", role: "Founder" },
  { brand: "HomeStyle", glyph: "H", color: "250,204,21", quote: "Comentariile spam au dispărut peste noapte.",       who: "Cristina V.", role: "Marketing" },
  { brand: "FitLab",    glyph: "F", color: "34,197,94",  quote: "Conversie chat de la 1.8% la 4.2%.",                who: "Dan P.",   role: "CEO" },
  { brand: "PetFresh",  glyph: "P", color: "87,255,135",quote: "Cost per comandă cu 68% mai mic. ROI în 2 săpt.",   who: "Ioana D.", role: "Ops" },
  { brand: "Velora",    glyph: "V", color: "9,169,85", quote: "47s timp mediu de la sunet la confirmare.",         who: "Mihai R.", role: "Founder" },
  { brand: "OakHaus",   glyph: "O", color: "34,197,94",  quote: "Echipa de 4 a devenit echipa de 1 + AI.",            who: "Alex T.",  role: "COO" },
];

const CaseStudiesV3 = () => {
  // Duplicate the array for seamless loop
  const items = [...QUOTES_V3, ...QUOTES_V3];

  return (
    <div className="ev-stage" style={{ width: "100%", height: "100%", padding: "60px 0", display: "flex", flexDirection: "column", justifyContent: "center" }}>
      <div style={{ padding: "0 80px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--neon-purple)", boxShadow: "0 0 12px var(--neon-purple)" }} />
          <span style={{ fontSize: 12, fontWeight: 700, color: "var(--fg-3)", letterSpacing: "0.24em", textTransform: "uppercase" }}>Ce spun clienții</span>
        </div>
        <h2 style={{ fontSize: 56, fontWeight: 900, color: "#fff", letterSpacing: "-0.035em", lineHeight: 1.05, margin: "0 0 48px", maxWidth: 760 }}>
          Voci dintre cei{" "}
          <span style={{ color: "var(--neon-purple)" }}>140+</span> care rulează pe Confirmări.ro.
        </h2>
      </div>

      {/* Marquee track */}
      <div style={{
        position: "relative",
        WebkitMaskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
        maskImage: "linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)",
      }}>
        <div style={{
          display: "flex", gap: 20, width: "max-content",
          animation: "marqueeQuotes 38s linear infinite",
        }}>
          {items.map((q, i) => (
            <div key={i} className="ev-glass" style={{
              padding: "22px 26px", width: 380, flex: "0 0 380px",
              display: "flex", flexDirection: "column", gap: 14,
              borderColor: `rgba(${q.color},0.25)`,
              transition: "transform .3s ease, border-color .3s ease",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px) scale(1.02)"; e.currentTarget.style.borderColor = `rgba(${q.color},0.55)`; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0) scale(1)"; e.currentTarget.style.borderColor = `rgba(${q.color},0.25)`; }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                  width: 42, height: 42, borderRadius: 10,
                  background: `rgba(${q.color},0.16)`,
                  border: `1px solid rgba(${q.color},0.40)`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 18, fontWeight: 900, color: `rgb(${q.color})`,
                }}>{q.glyph}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 800, color: "#fff", letterSpacing: "-0.01em" }}>{q.brand}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 2 }}>{q.who} · {q.role}</div>
                </div>
              </div>
              <div style={{ fontSize: 17, fontWeight: 700, color: "#fff", letterSpacing: "-0.015em", lineHeight: 1.35, flex: 1 }}>
                "{q.quote}"
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`@keyframes marqueeQuotes {from{transform:translateX(0);}to{transform:translateX(-50%);}}`}</style>
    </div>
  );
};

window.CaseStudiesV3 = CaseStudiesV3;