export default function TestRembg() {
  const products = [
    { id: 1246330, name: "Abeba - Active", brand: "Abeba" },
    { id: 1245643, name: "Ps. Poelman - Enkellaarsjes Hak", brand: "Ps. Poelman" },
    { id: 1261459, name: "Enkellaarsjes met hoge hak", brand: "Raid Wide Fit" },
    { id: 1230168, name: "Born To Shine Bruin/Multicolor Damessjaal", brand: "VTD" },
    { id: 1264728, name: "Teensandalen", brand: "GARDINI SPIRIT" },
    { id: 1260593, name: "Sneakers laag", brand: "Palladium" },
    { id: 1264643, name: "Ballerina's met enkelbandjes", brand: "Mod8" },
    { id: 1256357, name: "Sneakers laag", brand: "Hackett London" },
    { id: 1251323, name: "Veterboots", brand: "ARIZONA LOVE" },
    { id: 1231306, name: "Atlanta Bruin", brand: "Paul Smith" },
  ];

  const models = ["u2net", "isnet-general-use", "birefnet-general", "u2net_human_seg"];

  return (
    <div style={{ background: "#1a1a2e", color: "#eee", fontFamily: "system-ui, sans-serif", padding: 20, minHeight: "100vh" }}>
      <h1 style={{ textAlign: "center", marginBottom: 30 }}>🔬 rembg Model Comparison</h1>
      <p style={{ textAlign: "center", color: "#666", marginBottom: 20, fontSize: 14 }}>
        Checkerboard = transparent | White bg = original
      </p>

      {products.map((p) => (
        <div key={p.id} style={{ marginBottom: 40, border: "1px solid #333", borderRadius: 8, padding: 16, background: "#16213e" }}>
          <h2 style={{ marginBottom: 12, fontSize: 16, color: "#e94560" }}>
            #{p.id} — {p.brand} — {p.name}
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12 }}>
            <div style={{ textAlign: "center" }}>
              <img
                src={`/rembg-test/${p.id}_original.jpg`}
                alt="Original"
                loading="lazy"
                style={{ maxWidth: "100%", height: 200, objectFit: "contain", background: "#fff", borderRadius: 4 }}
              />
              <div style={{ marginTop: 4, fontSize: 12, color: "#aaa" }}>Original</div>
            </div>
            {models.map((m) => (
              <div key={m} style={{ textAlign: "center" }}>
                <img
                  src={`/rembg-test/${p.id}_${m}.png`}
                  alt={m}
                  loading="lazy"
                  style={{
                    maxWidth: "100%",
                    height: 200,
                    objectFit: "contain",
                    background: "repeating-conic-gradient(#333 0% 25%, #222 0% 50%) 50% / 20px 20px",
                    borderRadius: 4,
                  }}
                />
                <div style={{ marginTop: 4, fontSize: 12, color: "#aaa" }}>{m}</div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}