// Products grid — each card has its own micro-visual
function BotsapperVis() {
  return (
    <div className="bs-vis product-visual">
      <div className="bs-bubble user">
        Hola, ¿tienen stock del modelo S?
        <div className="bs-bubble-meta">cliente · 12:04</div>
      </div>
      <div className="bs-bubble bot">
        ¡Hola Sol! Sí, tenemos 4 unidades en negro y 2 en blanco. ¿Te paso el link de pago?
        <div className="bs-bubble-meta">botsapper · 12:04</div>
      </div>
      <div className="bs-bubble user" style={{ alignSelf: "flex-start" }}>
        <span className="bs-typing"><span></span><span></span><span></span></span>
      </div>
    </div>
  );
}

function MyDataTalkVis() {
  const [bars, setBars] = React.useState([45, 62, 38, 78, 92, 55, 70]);
  React.useEffect(() => {
    const id = setInterval(() => {
      setBars((prev) => prev.map(() => 25 + Math.random() * 75));
    }, 2200);
    return () => clearInterval(id);
  }, []);
  const labels = ["L", "M", "M", "J", "V", "S", "D"];
  return (
    <div className="mdt-vis product-visual">
      <div className="mdt-prompt">
        <span className="mdt-prompt-prefix">›</span>
        <span style={{ color: "var(--fg)" }}>ventas última semana por canal</span>
        <span className="cursor" style={{ height: "0.85em" }}></span>
      </div>
      <div className="mdt-chart">
        {bars.map((h, i) => (
          <div key={i} className="mdt-bar" data-label={labels[i]} style={{ height: `${h}%` }}></div>
        ))}
      </div>
    </div>
  );
}

function ZwipVis() {
  const rows = [
    { st: "opened", subj: "Factura proveedor #4821", meta: "Clasificado · Contabilidad", pct: "auto" },
    { st: "sent", subj: "Reclamo urgente de cliente", meta: "Derivado · Soporte", pct: "alta" },
    { st: "opened", subj: "Promo / newsletter", meta: "Archivado · IA", pct: "✓" },
    { st: "queued", subj: "Pedido de reunión jueves", meta: "Detectado · agenda", pct: "2 min" },
  ];
  return (
    <div className="pm-vis product-visual">
      {rows.map((r, i) => (
        <div className="pm-row" key={i}>
          <span className={`pm-status ${r.st}`}></span>
          <div className="pm-subject">
            <span className="pm-subject-line">{r.subj}</span>
            <span className="pm-subject-meta">{r.meta}</span>
          </div>
          <span className="pm-pct">{r.pct}</span>
        </div>
      ))}
    </div>
  );
}

function KalirVis() {
  // simple flow diagram — security pipeline
  const nodes = [
    { x: 0, y: 30, label: "Tráfico entrante", cls: "" },
    { x: 38, y: 8, label: "Análisis · IA", cls: "b" },
    { x: 38, y: 65, label: "Amenaza detectada", cls: "b" },
    { x: 75, y: 38, label: "Bloqueo · alerta", cls: "c" },
  ];
  return (
    <div className="kl-vis product-visual">
      <svg
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible" }}
        preserveAspectRatio="none"
        viewBox="0 0 100 100"
      >
        <defs>
          <linearGradient id="kl-grad" x1="0" x2="1">
            <stop offset="0%" stopColor="#b8e23a" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#ff7a1c" stopOpacity="0.7" />
          </linearGradient>
        </defs>
        <path d="M 12 35 Q 28 18 40 14" stroke="url(#kl-grad)" strokeWidth="0.4" fill="none" />
        <path d="M 12 38 Q 28 60 40 70" stroke="url(#kl-grad)" strokeWidth="0.4" fill="none" />
        <path d="M 56 16 Q 70 28 78 40" stroke="url(#kl-grad)" strokeWidth="0.4" fill="none" />
        <path d="M 56 70 Q 70 56 78 44" stroke="url(#kl-grad)" strokeWidth="0.4" fill="none" />
      </svg>
      {nodes.map((n, i) => (
        <div
          key={i}
          className={`kl-node ${n.cls}`}
          style={{ left: `${n.x}%`, top: `${n.y}%` }}
        >
          <span className="kl-node-dot"></span>
          {n.label}
        </div>
      ))}
    </div>
  );
}

function ProductCard({ p }) {
  const Vis = {
    botsapper: BotsapperVis,
    mydatatalk: MyDataTalkVis,
    zwip: ZwipVis,
    kalir: KalirVis,
  }[p.key];

  return (
    <a
      className={`product-card ${p.span}`}
      href={`https://${p.slug}`}
      target="_blank"
      rel="noopener noreferrer"
    >
      <div className="product-head">
        <span className="product-tag">{p.tag}</span>
        <span className="product-status">
          <span className="product-status-dot"></span>
          en producción
        </span>
      </div>

      <div className="product-name">
        {p.name}
        <span className="slash">/</span>
      </div>

      <div className="product-desc">{p.desc}</div>

      {Vis ? <Vis /> : null}

      <div className="product-meta">
        <div className="product-meta-stats">
          {p.stats.map((s, i) => (
            <div className="product-meta-stat" key={i}>
              <span className="product-meta-stat-label">{s.label}</span>
              <span className="product-meta-stat-value">{s.value}</span>
            </div>
          ))}
        </div>
        <span className="product-link">
          {p.slug}
          <span className="product-link-arrow">↗</span>
        </span>
      </div>
    </a>
  );
}

function Products() {
  return (
    <section className="products" id="products">
      <div className="container">
        <div className="products-head">
          <span className="eyebrow">/ productos propios</span>
          <h2 className="products-title">
            Cuatro productos.{" "}
            <span className="serif">Mismo equipo</span>{" "}
            que va a construir el tuyo.
          </h2>
          <span className="products-counter">{window.PRODUCTS.length} live · 1 beta</span>
        </div>

        <div className="products-grid">
          {window.PRODUCTS.map((p) => (
            <ProductCard p={p} key={p.key} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Products = Products;