/* ============================================================
   SE42 · Landing — iconos + helpers tipográficos
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* Lucide-style hairline icons (1.5px stroke) */
const ICONS = {
  arrow:   "M5 12h14M13 6l6 6-6 6",
  download:"M12 3v12M7 11l5 5 5-5M5 21h14",
  alert:   "M12 9v4M12 17h.01M10.3 3.9 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z",
  calendar:"M8 2v4M16 2v4M3 9h18M5 5h14a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z",
  package: "M21 8 12 3 3 8v8l9 5 9-5V8ZM3 8l9 5 9-5M12 13v8",
  chat:    "M21 11.5a8.4 8.4 0 0 1-9 8.4l-5 2 1.5-4.5A8.4 8.4 0 1 1 21 11.5Z",
  doc:     "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6ZM14 2v6h6M9 13h6M9 17h6",
  bell:    "M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0",
  phone:   "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z",
  mail:    "M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1ZM3 6l9 7 9-7",
  moon:    "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z",
  bolt:    "M13 2 4 14h7l-1 8 9-12h-7l1-8Z",
  shield:  "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z",
  clock:   "M12 6v6l4 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z",
  home:    "M3 10.5 12 3l9 7.5M5 9.5V21h14V9.5",
  globe:   "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z",
  menu:    "M3 6h18M3 12h18M3 18h18",
  close:   "M6 6l12 12M18 6 6 18",
  external:"M14 4h6v6M20 4l-9 9M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5",
  chevron: "M6 9l6 6 6-6",
};
const META_ICON = { "Comunicación directa": "chat", "Avisos en tiempo real": "bell", "Hecha para residentes": "home",
                    "Direct communication": "chat", "Real-time alerts": "bell", "Made for residents": "home" };

function Icon({ name, size = 24, style }) {
  const d = ICONS[name];
  if (!d) return null;
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
         stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
         style={style} aria-hidden="true">
      {d.split("M").filter(Boolean).map((seg, i) => <path key={i} d={"M" + seg} />)}
    </svg>
  );
}

/* Título firma: sans ligera + palabra de acento serif itálica */
function Headline({ lead, accent, className }) {
  return (
    <span className={className}>
      {lead}{lead ? " " : ""}<em className="accent">{accent}</em>
    </span>
  );
}

Object.assign(window, { Icon, Headline, ICONS, META_ICON });