// FeaturedWork.jsx — Three case-study bands. Pink / yellow / blue. Alternating sides.
// Uses the flat color card overlay on a full-bleed scene photo.
const CASES = [
  {
    image: "assets/animations/AI_Ave_intro.jpg",
    color: "yellow", side: "right",
    tag: "DOCUMENTARY SERIES — 6 EPISODES",
    client: "Cloudflare",
    title: "Cloudflare: AI Avenue",
    body: "Six-episode documentary series exploring AI education and adoption globally. Full production including on-location shoots in multiple countries, animated explainers, and technical deep-dives with developer advocates and AI researchers.",
    metrics: [["360K", "First-month views"], ["828K", "Impressions"]],
  },
  {
    image: "assets/case-studies/Cir_Stablecoin_02.jpg",
    color: "blue", side: "left",
    tag: "ANIMATED EXPLAINER SERIES",
    client: "Circle",
    title: "Circle: Stablecoin 101",
    body: "Working with Circle's international Developer Relations team, we produced a comprehensive course about stablecoins — designed to be released in bite-sized videos on social and as a YouTube-ready resource.",
    metrics: [["3", "Locations"], ["17", "Videos"]],
  },
  {
    image: "assets/case-studies/CL_Mathstream_01.png",
    color: "pink", side: "right",
    tag: "VIDEO CURRICULUM — EDTECH",
    client: "Carnegie Learning",
    title: "Carnegie Learning: MATHstream",
    body: "Built with CL Next, Carnegie Learning's innovation team: a video-based math curriculum featuring influencer teachers from X, TikTok, and YouTube. 2024 EdTech Award winner, now in ongoing production.",
    metrics: [["600+", "Videos"], ["10+", "Presenters"]],
  },
];

const FeaturedWork = () => (
  <section className="pc-section pc-featured" id="work">
    <div className="pc-section-head">
      <h2 className="pc-section-title">Case <em>Studies</em></h2>
      <p className="pc-section-lede">
        A slice of what we've shipped. Every program here was built in a
        multi-quarter partnership — not a one-off deliverable.
      </p>
    </div>

    <div className="pc-featured-list">
      {CASES.map((c, i) => (
        <CaseBand key={i} idx={i+1} {...c} />
      ))}
    </div>

    <div className="pc-featured-footer">
      <a className="pc-big-link" href="case-studies.html">
        See the full index &nbsp;
        <span className="pc-big-link-arrow">
          <OutboundArrow size={42}/>
        </span>
      </a>
    </div>
  </section>
);

const CaseBand = ({ image, color, side, tag, client, title, body, metrics, idx }) => (
  <article className={`pc-band pc-band--${color} pc-band--${side}`}>
    <div className="pc-band-img" style={{ backgroundImage: `url(${image})` }}>
      <div className="pc-band-rivet">
        <span>No. {String(idx).padStart(2, "0")}</span>
        <span>·</span>
        <span>{client}</span>
      </div>
    </div>
    <div className="pc-band-card">
      <div className="pc-band-card-top">
        <span className="pc-rivet-sm">{tag}</span>
        <OutboundArrow size={49} />
      </div>
      <h3 className="pc-band-title">{title}</h3>
      <p className="pc-band-body">{body}</p>
      <div className="pc-band-metrics">
        {metrics.map(([n, l], i) => (
          <div key={i} className="pc-band-metric">
            <span className="pc-band-metric-n">{n}</span>
            <span className="pc-band-metric-l">{l}</span>
          </div>
        ))}
      </div>
      <a className="pc-band-link">View full case study &nbsp;↗</a>
    </div>
  </article>
);

window.FeaturedWork = FeaturedWork;