// CaseStudiesHero.jsx — hero + stacked case studies for the Case Studies page.
// Visual language: editorial rivets, dashed rules, numbered entries (No. 01…),
//   big display headline, serif body, stat grid. Matches Featured Work on home.
// Any field containing "[NEEDS INFO]" is surfaced in a dim tag so it's obvious
//   on review — never dressed up to look like real data.
const HAS_NEEDS_INFO = (s) => typeof s === "string" && s.includes("[NEEDS INFO]");

const NeedsInfo = ({ children = "NEEDS INFO" }) => (
  <span className="pc-needs-info">{children}</span>
);

// Format a stat value — swap the literal [NEEDS INFO] for a dim tag.
const formatStat = (val) => {
  if (typeof val === "string" && val.trim() === "[NEEDS INFO]") {
    return <NeedsInfo />;
  }
  return val;
};
// Format a blurb that may contain [NEEDS INFO] as a prefix.
const formatBlurb = (b) => {
  if (!HAS_NEEDS_INFO(b)) return b;
  // Strip the tag and render the rest alongside a flag.
  const rest = b.replace(/\[NEEDS INFO\]\s*/g, "");
  return (
    <>
      <NeedsInfo>Needs final copy</NeedsInfo>
      {rest ? " " + rest : null}
    </>
  );
};

// Per-case hero: one large hero image up top, the rest as a small thumbnail
// carousel beneath it. Click a thumb to swap it into the main frame.
// `heroImages` (array) is preferred — first entry becomes the hero, rest become
// carousel thumbs. `heroImage` (string) remains for backwards compat.
const HeroMedia = ({ images, src, title }) => {
  const list = React.useMemo(() => {
    if (Array.isArray(images) && images.length > 0) return images;
    if (src) return [src];
    return [];
  }, [images, src]);

  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => { setIdx(0); }, [list]);

  if (list.length === 0) {
    return (
      <div className="pc-cs-hero-wrap">
        <div className="pc-cs-hero-img pc-cs-hero-img--placeholder" aria-label="Hero image placeholder">
          <span className="pc-cs-placeholder-label">
            <span className="pc-rivet-sm">Hero image</span>
            <span className="pc-rivet-sm pc-rivet-sm--dim">Awaiting upload</span>
          </span>
        </div>
      </div>
    );
  }

  const multi = list.length > 1;
  return (
    <div className="pc-cs-hero-wrap">
      <div className="pc-cs-hero-img">
        <img key={list[idx]} src={list[idx]} alt={title} />
      </div>

      {multi && (
        <div className="pc-cs-carousel" role="tablist" aria-label={`${title} — more images`}>
          {list.map((s, i) => (
            <button
              key={s + i}
              type="button"
              role="tab"
              aria-selected={i === idx}
              aria-label={`Image ${i + 1} of ${list.length}`}
              className={"pc-cs-carousel-thumb" + (i === idx ? " is-active" : "")}
              onClick={() => setIdx(i)}
            >
              <img src={s} alt="" />
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

const CaseStudy = ({ cs, idx }) => {
  const no = String(idx + 1).padStart(2, "0");
  return (
    <article className="pc-cs" id={cs.id}>
      <header className="pc-cs-head">
        <div className="pc-cs-rivet">
          <span>Case No. {no}</span>
          <span>·</span>
          <span>{cs.client}</span>
          <span>·</span>
          <span>{cs.tag}</span>
        </div>
        <h2 className="pc-cs-title">
          <em>{cs.client}</em>
          {cs.title && cs.title !== cs.client && (
            <>
              <span className="pc-cs-title-sep">:</span> {cs.title}
            </>
          )}
        </h2>
      </header>

      <div className="pc-cs-body">
        <HeroMedia images={cs.heroImages} src={cs.heroImage} title={cs.title} />

        <div className="pc-cs-text">
          <p className="pc-cs-blurb">{formatBlurb(cs.blurb)}</p>

          {cs.stats && cs.stats.length > 0 && (
            <dl className="pc-cs-stats">
              {cs.stats.map(([label, value], i) => (
                <div key={i} className="pc-cs-stat">
                  <dt className="pc-cs-stat-l">{label}</dt>
                  <dd className="pc-cs-stat-v">{formatStat(value)}</dd>
                </div>
              ))}
            </dl>
          )}

          {(cs.partners?.length > 0 || cs.tools?.length > 0 || cs.products?.length > 0 || cs.shotTypes?.length > 0 || cs.technologies?.length > 0) && (
            <div className="pc-cs-meta-col">
              {cs.partners && cs.partners.length > 0 && (
                <div className="pc-cs-partners">
                  <span className="pc-rivet-sm">Featured partners</span>
                  <ul className="pc-cs-partners-list">
                    {cs.partners.map((p, i) => (
                      <li key={i} className="pc-cs-partner">{p}</li>
                    ))}
                  </ul>
                </div>
              )}

              {cs.tools && cs.tools.length > 0 && (
                <div className="pc-cs-partners">
                  <span className="pc-rivet-sm">Tools in rotation</span>
                  <ul className="pc-cs-partners-list">
                    {cs.tools.map((t, i) => (
                      <li key={i} className="pc-cs-partner">{t}</li>
                    ))}
                  </ul>
                </div>
              )}

              {cs.shotTypes && cs.shotTypes.length > 0 && (
                <div className="pc-cs-partners">
                  <span className="pc-rivet-sm">Shot types</span>
                  <ul className="pc-cs-partners-list">
                    {cs.shotTypes.map((s, i) => (
                      <li key={i} className="pc-cs-partner">{s}</li>
                    ))}
                  </ul>
                </div>
              )}

              {cs.products && cs.products.length > 0 && (
                <div className="pc-cs-partners">
                  <span className="pc-rivet-sm">Featured products</span>
                  <ul className="pc-cs-partners-list">
                    {cs.products.map((p, i) => (
                      <li key={i} className="pc-cs-partner">{p}</li>
                    ))}
                  </ul>
                </div>
              )}

              {cs.technologies && cs.technologies.length > 0 && (
                <div className="pc-cs-partners">
                  <span className="pc-rivet-sm">Featured technologies</span>
                  <ul className="pc-cs-partners-list">
                    {cs.technologies.map((t, i) => (
                      <li key={i} className="pc-cs-partner">{t}</li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          )}
        </div>

        <div className="pc-cs-below">
          {cs.performance && (
            <div className="pc-cs-perf">
              <span className="pc-rivet-sm">{cs.performance.label}</span>
              <div className="pc-cs-perf-row">
                {cs.performance.items.map(([n, l], i) => (
                  <div key={i} className="pc-cs-perf-item">
                    <span className="pc-cs-perf-n">{n}</span>
                    <span className="pc-cs-perf-l">{l}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {cs.notes && cs.notes.length > 0 && (
            <div className="pc-cs-notes">
              {cs.notes.map((n, i) => (
                <div key={i} className="pc-cs-note">
                  <span className="pc-rivet-sm">{n.label}</span>
                  <p className="pc-cs-note-body">{n.body}</p>
                </div>
              ))}
            </div>
          )}

          {cs.link && cs.link.href && cs.link.href !== "#" && (
            <a className="pc-cs-link" href={cs.link.href} target="_blank" rel="noreferrer">
              {cs.link.label} &nbsp;↗
            </a>
          )}
          {cs.link && (!cs.link.href || cs.link.href === "#") && (
            <span className="pc-cs-link pc-cs-link--disabled">
              {cs.link.label} &nbsp;<NeedsInfo>URL</NeedsInfo>
            </span>
          )}
        </div>
      </div>
    </article>
  );
};

const CaseStudiesHero = () => {
  const cases = window.CASE_STUDIES || [];
  return (
    <section className="pc-cs-page">
      <div className="pc-cs-head-hero">
        <div className="pc-rivet-sm">Case Studies · 2026 Edition</div>
        <h1 className="pc-cs-h1">
          Case <em>Studies</em>.
        </h1>
        <p className="pc-cs-lede">
          Programs we've built in multi-quarter partnerships with developer-first
          companies. Each case study is a receipt — the format, the numbers, and
          the work itself.
        </p>
      </div>

      <div className="pc-cs-list">
        {cases.map((cs, i) => (
          <CaseStudy key={cs.id} cs={cs} idx={i} />
        ))}
      </div>
    </section>
  );
};
window.CaseStudiesHero = CaseStudiesHero;