// casestudies.jsx - testimonial bento (light / paper)
// Exports window.RecLabCases = { CaseStudies }
// NOTE: quotes + attributions are PLACEHOLDERS - swap for real ones.

// NOTE: most quote TEXT is still placeholder, pending each person's real words.
const QUOTES = [
  { quote: "He ran a Vibe-Coding workshop for our team and we were absolutely blown away. If you want to explore AI in a way that actually feels useful and inspiring, I'd thoroughly recommend Jamie, he's ridiculously knowledgeable and explains things in a super digestible way.", name: "Kira Walker", role: "Head of People", org: "Few & Far", photo: "images/avatar-kira.jpg", linkedin: "https://www.linkedin.com/in/", slot: "testi-3" },
  { quote: "Jamie cuts straight through the AI hype and gets to what's actually useful for a TA team. We left with things we could put to work the same week.", name: "Milan Mravoic", role: "TA Leader", org: "Creatio", photo: "images/avatar-milan.jpg", linkedin: "https://www.linkedin.com/in/", slot: "testi-2" },
  { quote: "The workshop was ace, thank you so much. The presenting was great and I wanted to hire him after to bring more AI to Venatrix.", name: "Elaine Tyler", role: "CEO", org: "Venatrix", photo: "images/avatar-elaine.jpg", linkedin: "https://www.linkedin.com/in/", slot: "testi-1" },
  { quote: "The team left so inspired we ran our own mini build-off back at HelloFresh. Recruiters who'd never built anything were suddenly shipping their own AI tools.", name: "Ellyas", role: "Global TA Leader", org: "HelloFresh", photo: "images/avatar-ellyas.jpg", linkedin: "https://www.linkedin.com/in/", slot: "testi-4" },
  { quote: "Your testimonial could go here. Worked with The Rec Lab? We'd love to feature your words.", name: "Your name here", role: "Your role", org: "Your company", photo: "images/avatar-placeholder.svg", linkedin: "https://www.linkedin.com/in/", slot: "testi-5" },
  { quote: "Jamie made AI feel approachable for a global team at very different starting points. Genuinely useful, and genuinely fun.", name: "Kevin Walker", role: "Global TA Leader", org: "McDonald's", photo: "images/avatar-kevin.jpg", linkedin: "https://www.linkedin.com/in/", slot: "testi-6" },
  { quote: "I wouldn't be building half of what I am now if Jamie hadn't shown me the shortcuts. He took the intimidation out of it and made it click.", name: "Callum Buxton", role: "TA Leader", org: "Sophia Genetics", photo: "images/avatar-callum.jpg", linkedin: "https://www.linkedin.com/in/", slot: "testi-7" },
];

// 3x3 bento: 2 wide cards on a diagonal (terra anchor + a wide closer),
// one ink card for depth, the rest on paper / paper-2. 7 cells fill 9 slots.
const CELLS = [
  { ...QUOTES[0], span: "1 / span 2", bg: "var(--terra)", fg: "#fff", feat: true },  // Elaine (real quote) — wide terra anchor
  { ...QUOTES[1], bg: "#1c1a16", fg: "#fff" },                                        // ink card for contrast
  { ...QUOTES[2], bg: "#fff" },
  { ...QUOTES[3], bg: "var(--paper-2)" },
  { ...QUOTES[4], bg: "#fff" },
  { ...QUOTES[5], bg: "var(--paper-2)" },
  { ...QUOTES[6], span: "2 / span 2", bg: "#fff" },                                  // wide closer bottom-right
];

function LinkedInIcon({ size, color }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} 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.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/>
    </svg>
  );
}

function Cell({ quote, name, role, org, linkedin, photo, slot, span, rowSpan, bg, fg, feat }) {
  const onColor = !!fg;
  const bordered = bg === "#fff" || bg === "var(--paper-2)";
  const av = feat ? 58 : 48;
  return (
    <div className="cs-cell" style={{ gridColumn: span || "auto", gridRow: rowSpan || "auto", background: bg, borderRadius: 20, padding: feat ? "40px 38px" : "30px 30px",
      border: bordered ? "1px solid rgba(28,26,22,0.1)" : "none", display: "flex", flexDirection: "column" }}>
      <span className="cs-mark" style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: feat ? 60 : 48, lineHeight: 0.6,
        color: onColor ? "rgba(255,255,255,0.85)" : "var(--terra)" }}>&ldquo;</span>
      <p className="cs-quote" style={{ fontFamily: "var(--sans)", fontWeight: 500, fontSize: feat ? 26 : 19, lineHeight: 1.42, letterSpacing: "-0.015em",
        color: fg || "var(--ink)", margin: feat ? "18px 0 28px" : "14px 0 22px" }}>{quote}</p>
      <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 14 }}>
        <img src={photo} alt={name} loading="lazy"
          style={{ display: "block", width: av, height: av, flex: "0 0 auto", objectFit: "cover", objectPosition: "center top",
            borderRadius: "50%",
            border: onColor ? "2px solid rgba(255,255,255,0.35)" : "2px solid rgba(28,26,22,0.12)" }} />
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 15.5, color: fg || "var(--ink)" }}>{name}</div>
          <div style={{ fontFamily: "var(--sans)", fontSize: 13.5, color: onColor ? "rgba(255,255,255,0.85)" : "var(--ink-soft)" }}>{role}</div>
          <div style={{ fontFamily: "var(--sans)", fontSize: 13.5, color: onColor ? "rgba(255,255,255,0.7)" : "var(--terra-deep)" }}>{org}</div>
        </div>
        <a href={linkedin} target="_blank" rel="noopener noreferrer" aria-label={`${name} on LinkedIn`}
          style={{ marginLeft: "auto", flex: "0 0 auto", display: "inline-flex", alignItems: "center", justifyContent: "center",
            width: 34, height: 34, borderRadius: 9, transition: "background .15s ease",
            background: onColor ? "rgba(255,255,255,0.16)" : "rgba(28,26,22,0.05)",
            color: onColor ? "#fff" : "var(--terra-deep)" }}
          onMouseEnter={(e) => { e.currentTarget.style.background = onColor ? "rgba(255,255,255,0.28)" : "rgba(191,92,58,0.14)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = onColor ? "rgba(255,255,255,0.16)" : "rgba(28,26,22,0.05)"; }}>
          <LinkedInIcon size={17} color="currentColor" />
        </a>
      </div>
    </div>
  );
}

function CaseStudies() {
  return (
    <section style={{ background: "var(--paper)", fontFamily: "var(--sans)", padding: "104px 80px 116px" }}>
      <div style={{ maxWidth: 1360, margin: "0 auto" }}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <h2 style={{ fontFamily: "var(--sans)", fontWeight: 600, fontSize: 54, lineHeight: 1.04, letterSpacing: "-0.035em", color: "var(--ink)", margin: 0 }}>What other people are saying</h2>
        </div>
        <div className="cs-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {CELLS.map((c, i) => <Cell key={i} {...c} />)}
        </div>
      </div>
    </section>
  );
}

window.RecLabCases = { CaseStudies };