/* global React, Icon */

const PROJECTS = [
  { id: "proj-1", cat: "Salud", title: "Clínica San Rafael", desc: "Sitio web institucional con agenda de citas en línea y recordatorios automáticos.", result: "+40% citas agendadas" },
  { id: "proj-2", cat: "Hotelería", title: "Hotel Gran Vista", desc: "Web de reservas con disponibilidad en tiempo real y confirmación inmediata.", result: "+32% reservas directas" },
  { id: "proj-3", cat: "Comercio", title: "Importadora Andina", desc: "Tienda online con catálogo amplio, pagos y seguimiento de pedidos.", result: "800+ productos en línea" },
  { id: "proj-4", cat: "Logística", title: "Courier Express", desc: "Sistema de tracking para que los clientes consulten el estado de sus envíos.", result: "Seguimiento en tiempo real" },
  { id: "proj-5", cat: "Servicios", title: "Estudio Jurídico Ríos", desc: "Landing page de captación con formularios y seguimiento de interesados.", result: "3× más consultas" },
  { id: "proj-6", cat: "Gastronomía", title: "Restaurante La Terraza", desc: "Web con menú digital y pedidos directos por WhatsApp Business.", result: "Pedidos por WhatsApp" },
];

function Projects({ onContact }) {
  return (
    <section className="section" id="proyectos">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Proyectos</span>
          <h2 className="section-title">Trabajo que ya está<br /><span className="sx-serif">dando resultados</span></h2>
          <p className="section-sub">Una muestra de los sitios, tiendas y sistemas que hemos construido para empresas reales.</p>
        </div>

        <div className="proj-grid">
          {PROJECTS.map((p, i) => (
            <article className={"proj-card reveal d" + ((i % 3) + 1)} key={p.id}>
              <div className="proj-card__media">
                <span className="proj-card__cat">{p.cat}</span>
                <image-slot
                  id={p.id}
                  shape="rect"
                  placeholder={"Foto · " + p.title}
                ></image-slot>
              </div>
              <div className="proj-card__body">
                <h3 className="proj-card__title">{p.title}</h3>
                <p className="proj-card__desc">{p.desc}</p>
                <div className="proj-card__foot">
                  <span className="proj-card__result"><Icon name="trend" size={15} /> {p.result}</span>
                  <span className="proj-card__link">Ver caso <Icon name="arrow" size={14} /></span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="proj-cta reveal">
          <button className="btn btn--primary btn--lg" onClick={onContact}>
            ¿Tienes un proyecto en mente? <Icon name="arrow" size={18} />
          </button>
        </div>
      </div>
    </section>
  );
}

window.Projects = Projects;