const img = (keywords, lock, w = 800, h = 600) =>
  `https://loremflickr.com/${w}/${h}/${keywords}?lock=${lock}`;

const servicios = [
  {
    id: "internet",
    name: "Internet",
    desc: "Fibra óptica dedicada, alta velocidad, no compartida y escalable.",
    img: img("fiber-optic,cable", 21),
  },
  {
    id: "ecommerce",
    name: "eCommerce",
    desc: "Soluciones digitales a medida: web, apps y tiendas en línea.",
    img: img("online-shopping,ecommerce", 22),
  },
  {
    id: "chatbot",
    name: "ChatBot+",
    desc: "Automatización de conversaciones comerciales en WhatsApp Business.",
    img: img("smartphone,chat", 23),
  },
  {
    id: "datos",
    name: "Datos",
    desc: "Centralización de operaciones, enlaces privados y redes corporativas.",
    img: img("datacenter,server", 24),
  },
  {
    id: "nube",
    name: "Nube",
    desc: "Data centers, máquinas virtuales y Office 365.",
    img: img("cloud-computing,technology", 25),
  },
];

export default function Home() {
  return (
    <>
      <section className="hero container">
        <h1>
          Tecnología empresarial para <span className="grad">hacer crecer tu negocio</span>
        </h1>
        <p>
          Desde 1994, ALFA+ conecta a las PYMES de Nicaragua con Internet dedicado,
          eCommerce, automatización y nube. Esta es una página de prueba del
          pipeline de despliegue.
        </p>
        <div className="hero-actions">
          <a href="#servicios" className="btn btn-primary">Ver servicios</a>
          <a href="https://www.alfa.com.ni" target="_blank" rel="noopener" className="btn btn-ghost">
            Ir a alfa.com.ni
          </a>
        </div>
      </section>

      <section id="servicios" className="section container">
        <div className="section-title">
          <span className="badge">Líneas de servicio</span>
          <h2>Todo lo que tu empresa necesita</h2>
          <p>Internet, eCommerce, ChatBot+, Datos y Nube en un solo aliado.</p>
        </div>
        <div className="grid">
          {servicios.map((s) => (
            <div key={s.id} className="card">
              <div className="thumb">
                <img src={s.img} alt={s.name} loading="lazy" />
              </div>
              <div className="card-body">
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}