// Showcase.jsx — Antes / Después
const Showcase = () => {
  return (
    <section className="s" id="solucion">
      <div className="container">
        <div className="s-head">
          <div className="left">
            <div className="s-eyebrow">La solución</div>
            <h2 className="s-title">Antes: tu negocio. Después: <span className="acc">tu negocio con BYTEC.</span></h2>
            <p className="s-sub">No te vendemos software, te vendemos un equipo digital que trabaja por vos. Mismo equipo, otra escala.</p>
          </div>
        </div>

        <div className="showcase-grid">
          <div className="showcase-card before">
            <span className="showcase-tag">⏻ ANTES</span>
            <h3>Equipo saturado, clientes esperando, ventas que se enfrían.</h3>
            <div className="scenes">
              <div className="scene-row">
                <span className="sic"><Icon name="phone-off" /></span>
                <div>33 mensajes de WhatsApp <b>sin leer</b> el lunes en la mañana.</div>
              </div>
              <div className="scene-row">
                <span className="sic"><Icon name="alarm-clock" size={16}/></span>
                <div>Reservas <b>perdidas</b> porque nadie contestó el viernes a las 8pm.</div>
              </div>
              <div className="scene-row">
                <span className="sic"><Icon name="search-x" /></span>
                <div>Web vieja que <b>no aparece en Google</b> y nadie quiere mostrarla.</div>
              </div>
              <div className="scene-row">
                <span className="sic"><Icon name="file-spreadsheet" /></span>
                <div>Cobros, facturas y citas <b>en Excel</b>. Errores cada semana.</div>
              </div>
            </div>
          </div>

          <div className="showcase-card after">
            <span className="showcase-tag">⚡ CON BYTEC</span>
            <h3>Tu negocio respondiendo, agendando y vendiendo a las 3am.</h3>
            <div className="scenes">
              <div className="scene-row">
                <span className="sic"><Icon name="message-circle-more" /></span>
                <div>Chatbot IA contesta en <b>2 segundos</b>, en español, todos los días.</div>
              </div>
              <div className="scene-row">
                <span className="sic"><Icon name="calendar-check" /></span>
                <div>Citas se <b>agendan solas</b> al calendario del equipo. Sin llamadas.</div>
              </div>
              <div className="scene-row">
                <span className="sic"><Icon name="rocket" /></span>
                <div>Web nueva con <b>SEO real</b>: aparecés cuando te buscan.</div>
              </div>
              <div className="scene-row">
                <span className="sic"><Icon name="workflow" /></span>
                <div>Automatización <b>Make.com</b>: factura, cobra, recuerda. Sin tu mano.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.Showcase = Showcase;