// Capabilities.jsx — "Our Capabilities" — three columns, each with a representative image.
// Matches the Fiverr leave-behind PDF: three examples — Interviews, Explainers, Courses.
const CAPABILITIES = [
  {
    idx: "01",
    title: { a: "Interviews", b: "& branded docs" },
    image: "assets/interviews/Arc_CopperX.jpg",
    imageAlt: "Founders interview, shot on-site",
    body: "We capture the human stories behind the technology. From founder spotlights to developer testimonials, we produce interview-driven content that builds trust and showcases real people solving problems with your platform.",
    meta: "Studio · Field · Edit",
  },
  {
    idx: "02",
    title: { a: "Explainer", b: "videos & animation" },
    image: "assets/animations/CF_Explainer.jpg",
    video: "assets/videos/cf-explainer-hover.mp4",
    imageAlt: "Animated explainer frame — isometric Build platform",
    body: "Complex APIs, protocols, and developer tools — made visual. We translate technical concepts into clear, engaging animations that help developers understand your product faster.",
    meta: "Motion · 2D · Script",
  },
  {
    idx: "03",
    title: { a: "Educational", b: "courses & series" },
    image: "assets/case-studies/FCC_Intro_APIs_01.jpg",
    video: "assets/videos/fcc-education.mp4",
    imageAlt: "Host teaching a developer course",
    body: "We develop multi-episode series and structured educational content that positions your brand as a trusted resource. Think YouTube series, onboarding courses, and episodic content that builds community while teaching developers how to succeed with your tools.",
    meta: "Production · LMS · Hosts",
  },
];

const Capabilities = () => (
  <section className="pc-section pc-capabilities" id="capabilities">
    <div className="pc-section-head">
      <h2 className="pc-section-title">Our <em>Capabilities</em></h2>
      <p className="pc-section-lede">
        We specialize in creating high-quality video content for major tech
        companies, helping them connect with developer communities worldwide.
      </p>
    </div>
    <div className="pc-cap-grid pc-cap-grid--3">
      {CAPABILITIES.map((c) => (
        <article key={c.idx} className="pc-cap-col">
          <div className="pc-cap-head">
            <span className="pc-cap-idx">{c.idx}</span>
            <img src="assets/arrow-down-right-pink.svg" alt="" className="pc-cap-arrow"/>
          </div>
          <h3 className="pc-cap-title">
            {c.title.a} <em>{c.title.b}</em>
          </h3>
          <div
            className={"pc-cap-image" + (c.video ? " pc-cap-image--video" : "")}
            role="img"
            aria-label={c.imageAlt}
            style={{ backgroundImage: `url(${c.image})` }}
            onMouseEnter={c.video ? (e) => {
              const v = e.currentTarget.querySelector('video');
              if (v) { v.currentTime = 0; v.play().catch(() => {}); }
            } : undefined}
            onMouseLeave={c.video ? (e) => {
              const v = e.currentTarget.querySelector('video');
              if (v) { v.pause(); v.currentTime = 0; }
            } : undefined}
          >
            {c.video && (
              <video src={c.video} muted loop playsInline preload="metadata" />
            )}
          </div>
          <p className="pc-cap-body">{c.body}</p>
          <div className="pc-cap-meta">{c.meta}</div>
        </article>
      ))}
    </div>
  </section>
);
window.Capabilities = Capabilities;