// Project placeholder graphics. Different visual feel per project.
// One image per case (mobile mockup) — used on both the home fan card AND
// the case-detail sticky visual. Falls back to the gradient placeholder.
const IMAGES_CARD = {
  transform: "/images/cases/transform.webp",
  eagles: "/images/cases/eagles.webp",
  nichefinder: "/images/cases/nichefinder.webp",
  meet: "/images/cases/meet.webp",
};

const Placeholder = ({ kind, label }) => {
  const realSrc = IMAGES_CARD[kind];
  if (realSrc) {
    return (
      <div className="ph ph-img">
        <img src={realSrc} alt={label || kind} loading="lazy" />
      </div>
    );
  }

  const variants = {
    transform: { cls: "cream", shapes: [
      { c: "#FCCF4D", x: "20%", y: "30%", s: 280 },
      { c: "#E8D5B5", x: "70%", y: "60%", s: 220 },
    ]},
    eagles: { cls: "blush", shapes: [
      { c: "#C9A34A", x: "60%", y: "20%", s: 240 },
      { c: "#F4E4BC", x: "25%", y: "75%", s: 320 },
    ]},
    meet: { cls: "gold", shapes: [
      { c: "#FCCF4D", x: "75%", y: "30%", s: 260 },
      { c: "#E8D5B5", x: "20%", y: "70%", s: 200 },
    ]},
    nichefinder: { cls: "sand", shapes: [
      { c: "#F2E6D6", x: "30%", y: "40%", s: 300 },
      { c: "#FCCF4D", x: "70%", y: "65%", s: 180 },
    ]},
    youtube: { cls: "cream", shapes: [
      { c: "#F5B832", x: "50%", y: "30%", s: 240 },
      { c: "#E8D5B5", x: "30%", y: "70%", s: 280 },
    ]},
    about: { cls: "blush", shapes: [
      { c: "#FCCF4D", x: "60%", y: "40%", s: 200 },
    ]},
  };
  const v = variants[kind] || variants.transform;
  return (
    <div className={`ph ${v.cls}`}>
      {v.shapes.map((s, i) => (
        <div key={i} className="shape" style={{
          background: s.c,
          left: s.x, top: s.y,
          width: s.s, height: s.s,
          transform: "translate(-50%, -50%)"
        }} />
      ))}
      <span style={{ position: "relative", zIndex: 2 }}>{label}</span>
    </div>
  );
};

// CaseVisual: used in the right-side sticky visual on /#/case/:id pages.
// Reuses the same mobile-mockup as the fan card, displayed bigger.
const CaseVisual = ({ kind, label }) => (
  <Placeholder kind={kind} label={label} />
);

window.Placeholder = Placeholder;
window.CaseVisual = CaseVisual;