/* global React, Icon */

const AGENCY_PROJECTS = [
  {
    category: "Salud · Gestión clínica",
    title: "Sistema para laboratorio clínico",
    image: "assets/projects/laboratorio-clinico.webp",
    problem: "Centralizar la recepción de pacientes, el procesamiento de muestras y la entrega segura de resultados en una sola plataforma.",
    modules: ["Pacientes", "Órdenes", "Muestras", "Resultados"],
    href: "/portfolio/#laboratorio",
  },
  {
    category: "Salud · Agenda digital",
    title: "Agenda y gestión de consultorio médico",
    image: "assets/projects/consultorio-medico.webp",
    problem: "Evitar cruces de horarios y tareas manuales al organizar citas, expedientes y seguimiento de pacientes.",
    modules: ["Agenda", "Expedientes", "Recordatorios", "Panel médico"],
    href: "/portfolio/#consultorio",
  },
  {
    category: "Automatización · Atención",
    title: "Chatbot empresarial de atención automática",
    image: "assets/projects/chatbot-empresarial.webp",
    problem: "Responder consultas frecuentes de forma inmediata y derivar cada conversación al área adecuada sin perder el contexto.",
    modules: ["Chat web", "Flujos", "Bandeja de equipo", "Analítica"],
    href: "/portfolio/#chatbot",
  },
  {
    category: "Logística · Experiencia de cliente",
    title: "Tracking y chat automático para empresa de paquetería",
    image: "assets/projects/empresa-paqueteria.webp",
    problem: "Dar visibilidad sobre cada envío y reducir las consultas repetitivas acerca del estado y la fecha de entrega.",
    modules: ["Tracking", "Notificaciones", "Chat automático", "Incidencias"],
    href: "/portfolio/#paqueteria",
  },
];

if (!document.querySelector('link[data-agency-projects="true"]')) {
  const stylesheet = document.createElement("link");
  stylesheet.rel = "stylesheet";
  stylesheet.href = "agency-projects.css";
  stylesheet.dataset.agencyProjects = "true";
  document.head.appendChild(stylesheet);
}

function Projects({ onContact }) {
  return (
    <section className="agency-projects" id="proyectos">
      <div className="container agency-projects__container">
        <header className="agency-projects__head reveal">
          <span className="agency-projects__eyebrow">Proyectos reales</span>
          <h2>Sistemas creados para resolver <span>operaciones reales</span></h2>
          <p>Una selección inicial de soluciones para salud, atención empresarial y logística, presentadas sin exponer información privada de nuestros clientes.</p>
        </header>

        <div className="agency-projects__grid">
          {AGENCY_PROJECTS.map((project, index) => (
            <article className={"agency-project reveal d" + ((index % 3) + 1)} key={project.title}>
              <div className="agency-project__media">
                <img src={project.image} alt={project.title} loading="lazy" />
                <span className="agency-project__sequence" aria-hidden="true">0{index + 1}</span>
                <div className="agency-project__badges">
                  <span className="agency-project__demo">Proyecto real</span>
                  <span className="agency-project__category">{project.category}</span>
                </div>
              </div>
              <div className="agency-project__body">
                <h3>{project.title}</h3>
                <div className="agency-project__problem">
                  <span>Problema a resolver</span>
                  <p>{project.problem}</p>
                </div>
                <ul className="agency-project__modules" aria-label={"Módulos de " + project.title}>
                  {project.modules.map((module) => <li key={module}>{module}</li>)}
                </ul>
                <a className="agency-project__detail" href={project.href}>Ver caso completo <Icon name="arrow" size={16} /></a>
              </div>
            </article>
          ))}
        </div>

        <div className="agency-projects__cta reveal">
          <p>¿Tienes un proceso que necesita una solución a medida?</p>
          <button type="button" onClick={onContact}>
            Hablemos de tu proyecto <Icon name="arrow" size={18} />
          </button>
        </div>
      </div>
    </section>
  );
}

window.Projects = Projects;