/* global React, Icon */

const PROBLEMS = [
  { icon: "layout", title: "Una plantilla no te representa", text: "Las webs genéricas se ven iguales a las de todos y no transmiten la confianza que tu marca merece." },
  { icon: "inbox", title: "Procesos manuales que frenan", text: "Pedidos, reservas y cotizaciones repartidos en cuadernos, chats y hojas sueltas restan tiempo y ventas." },
  { icon: "globe", title: "Si no te encuentran, no te eligen", text: "Sin una presencia digital sólida, tus clientes terminan eligiendo al competidor que sí está bien presentado." },
];

function Problem() {
  return (
    <section className="section section--soft" id="reto">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">El reto</span>
          <h2 className="section-title">Tu negocio merece más<br />que una plantilla</h2>
        </div>
        <div className="problem-grid">
          {PROBLEMS.map((p, i) => (
            <div key={p.title} className={"card problem-card reveal d" + (i + 1)}>
              <span className="problem-card__ic"><Icon name={p.icon} size={24} /></span>
              <h3 className="problem-card__title">{p.title}</h3>
              <p className="muted">{p.text}</p>
            </div>
          ))}
        </div>

        <div className="solution-callout reveal d2">
          <span className="solution-callout__ic"><Icon name="spark" size={26} /></span>
          <p>
            <b>STAMINEX diseña y construye tu presencia y tus sistemas a medida</b> — para que tu
            empresa se vea profesional, trabaje ordenada y convierta más visitantes en clientes.
          </p>
        </div>
      </div>
    </section>
  );
}

const SOLUTIONS = [
  { icon: "layout", tone: "orange", title: "Sitios y páginas web", text: "Páginas modernas, rápidas y pensadas para transmitir confianza y captar clientes." },
  { icon: "mobile", tone: "navy", title: "Aplicaciones móviles", text: "Apps a medida para Android e iOS, conectadas a tus sistemas y datos en tiempo real." },
  { icon: "cog", tone: "navy", title: "Sistemas web a medida", text: "Plataformas de gestión hechas para tu operación: clínicas, hoteles, courier, importadoras y más." },
  { icon: "cart", tone: "wa", title: "Tiendas online", text: "Catálogos y e-commerce listos para vender, con pagos y seguimiento de pedidos." },
  { icon: "calendar", tone: "navy", title: "Sistemas de reservas", text: "Agenda en línea, confirmaciones y recordatorios automáticos para tu equipo." },
  { icon: "api", tone: "orange", title: "Integraciones y API oficial", text: "Conectamos tus sistemas con la API oficial de WhatsApp (Cloud API), pagos y servicios externos — cuida tu número, sin riesgo de bloqueos." },
];

function Solutions() {
  return (
    <section className="section" id="soluciones">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Servicios</span>
          <h2 className="section-title">Lo que construimos<br />para tu empresa</h2>
          <p className="section-sub">Desde tu sitio web hasta sistemas y automatizaciones a medida — diseño y desarrollo de principio a fin.</p>
        </div>
        <div className="sol-grid">
          {SOLUTIONS.map((s, i) => (
            <div key={s.title} className={"card sol-card reveal d" + ((i % 3) + 1)}>
              <span className={"sol-card__ic sol-card__ic--" + s.tone}><Icon name={s.icon} size={26} /></span>
              <h3 className="sol-card__title">{s.title}</h3>
              <p className="muted">{s.text}</p>
              <span className="sol-card__arrow"><Icon name="arrow" size={18} /></span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Problem, Solutions });