/* global React, Icon, Counter */

const USE_CASES = [
  { icon: "building", title: "Clínicas y consultorios", text: "Reservas, recordatorios y atención inicial de pacientes." },
  { icon: "bed", title: "Hoteles", text: "Consultas, disponibilidad y reservas en segundos." },
  { icon: "truck", title: "Courier y logística", text: "Tracking, estados de pedidos y notificaciones automáticas." },
  { icon: "plane", title: "Importadoras", text: "Proformas, consultas comerciales y seguimiento de cargas." },
  { icon: "cart", title: "Tiendas y comercio", text: "Consultas, pedidos y atención al cliente sin esperas." },
  { icon: "briefcase", title: "Servicios profesionales", text: "Formularios, captación y seguimiento de interesados." },
];

function UseCases() {
  return (
    <section className="section" id="casos">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Casos de uso</span>
          <h2 className="section-title">Pensado para cómo trabaja tu industria</h2>
          <p className="section-sub">STAMINEX se adapta a la operación de cada negocio, no al revés.</p>
        </div>
        <div className="uc-grid">
          {USE_CASES.map((u, i) => (
            <div key={u.title} className={"card uc-card reveal d" + ((i % 3) + 1)}>
              <span className="uc-card__ic"><Icon name={u.icon} size={26} /></span>
              <div>
                <h3 className="uc-card__title">{u.title}</h3>
                <p className="muted">{u.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const STATS = [
  { icon: "users", label: "Clientes atendidos", end: 1284, tone: "navy" },
  { icon: "inbox", label: "Solicitudes recibidas", end: 942, tone: "orange" },
  { icon: "calendar", label: "Citas agendadas", end: 318, tone: "navy" },
  { icon: "doc", label: "Proformas generadas", end: 176, tone: "orange" },
  { icon: "track", label: "Pedidos en seguimiento", end: 64, tone: "navy" },
  { icon: "chat", label: "Conversaciones activas", end: 27, tone: "wa" },
];

const CONVOS = [
  { name: "Laura M.", msg: "¿Tienen cita para mañana?", status: "Resuelto", tone: "done" },
  { name: "Importadora Sur", msg: "Solicitó proforma P-0241", status: "Proforma", tone: "info" },
  { name: "Carlos R.", msg: "Seguimiento STX-58213", status: "En camino", tone: "warn" },
  { name: "Hotel Vista", msg: "Consulta de disponibilidad", status: "Atendiendo", tone: "live" },
];

function Dashboard() {
  const bars = [40, 62, 51, 78, 66, 90, 72, 84];
  return (
    <section className="section section--dark" id="panel">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Panel administrativo</span>
          <h2 className="section-title">Toda tu operación, <span className="grad-text-blue">en una sola vista</span></h2>
          <p className="section-sub">Mensajes, citas, proformas y pedidos centralizados en un panel claro y en tiempo real.</p>
        </div>

        <div className="dash reveal">
          <div className="dash__rail">
            <span className="dash__logo" />
            {["pulse", "chat", "calendar", "doc", "track", "users", "cog"].map((ic, i) => (
              <span key={ic} className={"dash__railic" + (i === 0 ? " is-active" : "")}><Icon name={ic} size={18} /></span>
            ))}
          </div>
          <div className="dash__main">
            <div className="dash__topbar">
              <div>
                <div className="dash__hello">Panel STAMINEX</div>
                <div className="dash__date">Resumen de hoy · actualizado hace instantes</div>
              </div>
              <span className="dash__live"><span className="dot" /> En vivo</span>
            </div>

            <div className="dash__stats">
              {STATS.map((s) => (
                <div key={s.label} className="dash__stat">
                  <span className={"dash__static dash__static--" + s.tone}><Icon name={s.icon} size={18} /></span>
                  <div className="dash__statval"><Counter end={s.end} /></div>
                  <div className="dash__statlbl">{s.label}</div>
                </div>
              ))}
            </div>

            <div className="dash__lower">
              <div className="dash__chart">
                <div className="dash__panelhd">Solicitudes por día <span className="dash__trend"><Icon name="trend" size={14} /> +24%</span></div>
                <div className="dash__bars">
                  {bars.map((h, i) => (
                    <span key={i} style={{ "--h": h + "%", animationDelay: i * 0.07 + "s" }} />
                  ))}
                </div>
              </div>
              <div className="dash__convos">
                <div className="dash__panelhd">Conversaciones recientes</div>
                <div className="dash__convolist">
                  {CONVOS.map((c) => (
                    <div key={c.name} className="dash__convo">
                      <span className="dash__avatar">{c.name[0]}</span>
                      <div className="dash__convotxt">
                        <b>{c.name}</b>
                        <span>{c.msg}</span>
                      </div>
                      <span className={"dash__status dash__status--" + c.tone}>{c.status}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const BENEFITS = [
  "Respuestas más rápidas",
  "Clientes mejor atendidos",
  "Procesos ordenados",
  "Información centralizada",
  "Menos errores manuales",
  "Mayor imagen profesional",
  "Escalable para crecer",
];

function Benefits() {
  return (
    <section className="section section--soft" id="beneficios">
      <div className="container">
        <div className="benefits">
          <div className="benefits__copy reveal">
            <span className="eyebrow">Beneficios</span>
            <h2 className="section-title">Menos trabajo manual.<br />Más oportunidades atendidas.</h2>
            <p className="section-sub" style={{ marginLeft: 0 }}>
              Cada conversación atendida a tiempo es un cliente que se queda. STAMINEX se
              encarga de lo repetitivo para que tu equipo se enfoque en lo que genera valor.
            </p>
          </div>
          <ul className="benefits__list">
            {BENEFITS.map((b, i) => (
              <li key={b} className={"benefits__item reveal d" + ((i % 4) + 1)}>
                <span className="benefits__check"><Icon name="check" size={16} stroke={2.6} /></span>
                {b}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { UseCases, Dashboard, Benefits });