// Expertise.jsx — "Core Expertise" — four columns with captioned images.
// Copy lifted verbatim from the Fiverr leave-behind PDF.
const EXPERTISE = [
  {
    idx: "01",
    title: { a: "Developer", b: "focus" },
    image: "assets/case-studies/AI_Avenue_studio.jpg",
    imageAlt: "On-location production crew at work",
    body: "We have been uniquely focused on software developer tutorials and technical communication. We love getting into the details and creating aha moments for tech creatives.",
    meta: "Tutorials · Docs · Dev Rel",
  },
  {
    idx: "02",
    title: { a: "Scripting", b: "" },
    image: "assets/case-studies/Scripting.jpg",
    imageAlt: "Storyboard-style frame — training program script",
    body: "We write with learners in mind, combining technical accuracy with compelling narrative flow. Our scripts use plain language, smart structure, and the perfect tone to keep audiences informed and interested.",
    meta: "Research · Outline · Script",
  },
  {
    idx: "03",
    title: { a: "Motion", b: "design" },
    image: "assets/animations/Arc_Blockradar_01.jpg",
    video: "assets/animations/Arc_Blockradar_01.mp4",
    imageAlt: "Abstract motion-design frame — curved paths and particles",
    body: "We turn abstract concepts into motion-driven clarity, with styles that flex from playful to polished. Using illustration, motion graphics, and visual metaphors, we make learning feel intuitive and enjoyable — even when topics are complex.",
    meta: "2D · 3D · Visual Metaphors",
  },
  {
    idx: "04",
    title: { a: "On-location", b: "production" },
    image: "assets/case-studies/OnLocation_NYC_BTS.png",
    imageAlt: "Behind-the-scenes of an on-location interview shoot",
    body: "Wherever you are, we bring professional production to you. Our refined remote workflows allow us to capture high-quality footage, direct talent, and manage shoots from anywhere — without compromising quality or collaboration.",
    meta: "Crew · Direction · Remote Ops",
  },
];

// Image-or-video tile that plays the clip on hover.
const ExpertiseMedia = ({ c }) => {
  const ref = React.useRef(null);
  const onEnter = () => { const v = ref.current; if (v) { v.currentTime = 0; v.play().catch(()=>{}); } };
  const onLeave = () => { const v = ref.current; if (v) { v.pause(); v.currentTime = 0; } };
  if (!c.video) {
    return (
      <div
        className="pc-cap-image"
        role="img"
        aria-label={c.imageAlt}
        style={{ backgroundImage: `url(${c.image})` }}
      />
    );
  }
  return (
    <div
      className="pc-cap-image pc-cap-image--video"
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      style={{ backgroundImage: `url(${c.image})` }}
      aria-label={c.imageAlt}
    >
      <video ref={ref} muted playsInline loop preload="metadata" src={c.video}/>
    </div>
  );
};

const Expertise = () => (
  <section className="pc-section pc-expertise" id="expertise">
    <div className="pc-section-head">
      <h2 className="pc-section-title">Core <em>Expertise</em></h2>
      <p className="pc-section-lede">
        Four things we do better than anyone else. They show up in every
        engagement, in whatever ratio the story needs.
      </p>
    </div>
    <div className="pc-cap-grid pc-cap-grid--4">
      {EXPERTISE.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} {c.title.b && <em>{c.title.b}</em>}
          </h3>
          <ExpertiseMedia c={c} />
          <p className="pc-cap-body">{c.body}</p>
          <div className="pc-cap-meta">{c.meta}</div>
        </article>
      ))}
    </div>
  </section>
);
window.Expertise = Expertise;