// ============================================================
// BOTS — 3 paquetes con desc + features (matches data.jsx)
// ============================================================

function BotCard({ b }) {
  const host = CHARACTERS.find(c => c.id === b.host);
  const voxi = CHARACTERS.find(c => c.id === "voxi");
  const chatHost = CHARACTERS.find(c => c.id === "gatito-te-amo");

  const callLink = "tel:+525532009853";
  const chatLink = "https://wa.me/525532009853?text=" + encodeURIComponent(
    "Hola Cristina, quiero cotizar: " + b.title + "."
  );

  return (
    <article className="bot-card" style={{ "--bc": b.color }}>
      <header className="bot-head">
        <div>
          <small>{b.label}</small>
          <h3>{b.title}</h3>
        </div>
        <div className="bot-host">
          <img src={host.img} alt={host.name} draggable="false" />
        </div>
      </header>

      <p className="bot-result">{b.desc}</p>

      <div className="bot-includes">
        <small>Incluye</small>
        <ul>
          {b.features.map(f => <li key={f}>{f}</li>)}
        </ul>
      </div>

      <footer className="bot-footer">
        <span className="bot-cot">Cotizar</span>
        <div className="bot-actions">
          <a className="bot-action bot-action-call" href={callLink} aria-label={"Llamar para cotizar " + b.title}>
            <span className="bot-action-avatar">
              <img src={voxi.img} alt="" draggable="false" />
              <span className="bot-action-badge" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                  <path d="M5 4.5C5 3.67 5.67 3 6.5 3h2.7c.74 0 1.38.55 1.49 1.28l.6 4.02a1.5 1.5 0 0 1-.81 1.58l-1.6.8a13 13 0 0 0 6.34 6.34l.8-1.6a1.5 1.5 0 0 1 1.58-.81l4.02.6c.73.11 1.28.75 1.28 1.49v2.7c0 .83-.67 1.5-1.5 1.5C9.6 21 3 14.4 3 6.5 3 5.67 3.67 5 4.5 5h.5Z" fill="currentColor"/>
                </svg>
              </span>
            </span>
            <span className="bot-action-label"><b>Llamar</b><small>Habla con Voxi</small></span>
          </a>
          <a className="bot-action bot-action-chat" href={chatLink} target="_blank" rel="noopener" aria-label="Chat para informes y cita">
            <span className="bot-action-avatar">
              <img src={chatHost.img} alt="" draggable="false" />
              <span className="bot-action-badge" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none">
                  <path d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-4 4v-4H6a2 2 0 0 1-2-2V5Z" fill="currentColor"/>
                </svg>
              </span>
            </span>
            <span className="bot-action-label"><b>Chat</b><small>Informes y cita</small></span>
          </a>
        </div>
      </footer>
    </article>
  );
}

function Bots() {
  return (
    <section id="bots" className="section bots">
      <header className="bots-header">
        <h2>Bots que <em>venden, agendan y hablan</em>.</h2>
      </header>

      <div className="bots-grid">
        {BOTS.map(b => <BotCard key={b.id} b={b} />)}
      </div>
    </section>
  );
}

window.Bots = Bots;