/* global React */

const ICON_PROPS = {
  width: 28, height: 28,
  viewBox: '0 0 24 24',
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.6,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  'aria-hidden': true,
};

const SVC_ICONS = {
  key:    <svg {...ICON_PROPS}><circle cx="15.5" cy="8.5" r="3.5"/><path d="M12 12L3 21"/><path d="M7 17l3 3"/></svg>,
  hammer: <svg {...ICON_PROPS}><path d="M14 6l4-4 4 4-4 4z"/><path d="M16.5 7.5l-9.5 9.5"/><path d="M7 17l-4 4 1 1 4-4"/></svg>,
  shower: <svg {...ICON_PROPS}><path d="M4 21v-7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v7"/><path d="M2 21h20"/><path d="M12 3v4"/><circle cx="8" cy="15" r="0.6" fill="currentColor"/><circle cx="12" cy="15" r="0.6" fill="currentColor"/><circle cx="16" cy="15" r="0.6" fill="currentColor"/><circle cx="8" cy="18" r="0.6" fill="currentColor"/><circle cx="12" cy="18" r="0.6" fill="currentColor"/><circle cx="16" cy="18" r="0.6" fill="currentColor"/></svg>,
  snow:   <svg {...ICON_PROPS}><path d="M12 2v20M2 12h20M5 5l14 14M19 5L5 19"/></svg>,
  kitchen:<svg {...ICON_PROPS}><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 11h18"/><circle cx="7" cy="16" r="2"/><circle cx="14" cy="16" r="2"/></svg>,
  house:  <svg {...ICON_PROPS}><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H10v7H5a2 2 0 0 1-2-2z"/></svg>,
};

function Services() {
  const items = [
    {
      tag: '01', title: 'Reformas Parciales', icon: 'kitchen', cls: 'sc-wide light',
      list: [
        'Reformas de cocinas',
        'Reformas de baño completo',
        'Pintura interior, exterior y rehabilitación vertical',
        'Cambio de solería y revestimientos',
        'Acabados de pladur',
      ],
    },
    {
      tag: '02', title: 'Reformas Integrales', icon: 'house', cls: 'sc-wide dark', stamp: 'Más demandado',
      list: [
        'Renovación completa de vivienda',
        'Diseño y ejecución llave en mano',
        'Interiorismo y optimización de espacios',
        'Proyectos de modernización y actualización estética',
        'Home staging para revalorización inmobiliaria',
      ],
    },
    {
      tag: '03', title: 'Asesoría Técnica & Jurídica', icon: 'key', cls: 'sc-wide light',
      list: [
        'Asesoría jurídica y seguridad en proyectos',
        'Asesoría en diseño de interiorismo',
        'Gestión de cambio de uso de local a vivienda',
        'Servicios de arquitectura, diseño y proyectos técnicos',
        'Cumplimiento legal',
      ],
    },
    {
      tag: '04', title: 'Climatización & Calefacción', icon: 'snow', cls: 'sc-wide dark',
      list: [
        'Instalación de aire acondicionado split y por conductos',
        'Sistemas de calefacción, calderas y calentadores',
        'Suelo radiante para viviendas y baños',
        'Aerotermia',
        'Mantenimiento, sustitución y optimización de equipos',
      ],
    },
  ];
  return (
    <section id="servicios">
      <SectionHead
        eyebrow="Servicios"
        title="Todo lo que hacemos por ti."
        subtitle="Cuatro áreas de especialización. Un único equipo. Precio cerrado desde el primer día."
      />
      <div className="container-wide">
        <div className="services-grid">
          {items.map((it, i) => (
            <div key={i} className={"service-card reveal " + it.cls} style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="sc-icon">{SVC_ICONS[it.icon]}</div>
              <span className="stamp">{it.stamp || it.tag}</span>
              <div className="body">
                <div className="meta">{it.tag}</div>
                <h3 className="title">{it.title}</h3>
                <ul className="sc-list">
                  {it.list.map((item, j) => <li key={j}>{item}</li>)}
                </ul>
              </div>
              <div className="arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;