/* ============================================================
   Shared parts: Lucide-style icon set + small layout helpers.
   Stroke icons match the Alfia DS (1.75px, rounded joints).
   ============================================================ */
const { useState, useRef, useEffect } = React;

const ICON_PATHS = {
  arrowRight: "M5 12h14M13 6l6 6-6 6",
  check: "M20 6 9 17l-5-5",
  mail: "M3 7l9 6 9-6 M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z",
  inbox: "M22 12h-6l-2 3h-4l-2-3H2 M5.5 5h13l3.5 7v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5L5.5 5Z",
  cpu: "M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3 M5 5h14v14H5z M9 9h6v6H9z",
  warehouse: "M3 21V8l9-4 9 4v13 M3 21h18 M8 21v-7h8v7 M8 14h8",
  fileText: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M9 13h6 M9 17h4",
  receipt: "M5 3h14v18l-2.5-1.5L14 21l-2-1.5L10 21l-2.5-1.5L5 21V3Z M9 8h6 M9 12h6",
  shieldCheck: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z M9 12l2 2 4-4",
  package: "M21 8l-9-5-9 5 9 5 9-5Z M3 8v8l9 5 9-5V8 M12 13v8",
  messageSquare: "M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z",
  rotate: "M3 12a9 9 0 1 0 3-6.7L3 8 M3 3v5h5",
  alert: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h16.9a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z M12 9v4 M12 17h.01",
  lock: "M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4",
  menu: "M4 7h16M4 12h16M4 17h16",
  plus: "M12 5v14M5 12h14",
  paperclip: "M21 11.5 12.5 20a5 5 0 0 1-7-7L14 4.5a3.3 3.3 0 0 1 4.7 4.7L10 18",
  building: "M3 21h18 M5 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16 M19 21V11a1 1 0 0 0-1-1h-3 M8 8h2M8 12h2M8 16h2",
  zap: "M13 2 4 14h7l-1 8 9-12h-7l1-8Z",
  scan: "M4 8V6a2 2 0 0 1 2-2h2 M16 4h2a2 2 0 0 1 2 2v2 M20 16v2a2 2 0 0 1-2 2h-2 M8 20H6a2 2 0 0 1-2-2v-2 M8 12h8",
  plug: "M9 2v6M15 2v6 M7 8h10v3a5 5 0 0 1-10 0V8Z M12 16v6",
  clock: "M12 7v5l3 2 M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
  linkedin: "M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0Z M.5 8h4v15h-4z M8 8h3.8v2h.05c.53-1 1.83-2.05 3.77-2.05 4 0 4.75 2.45 4.75 5.65V23h-4v-6.5c0-1.55-.03-3.55-2.17-3.55s-2.5 1.7-2.5 3.45V23H8z",
};

function Icon({ name, size = 18, stroke = 1.75, className = "", style, ...rest }) {
  const d = ICON_PATHS[name];
  return (
    <svg
      className={"ic " + className}
      width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={style} aria-hidden="true" {...rest}
    >
      {d.split(" M").map((seg, i) => (
        <path key={i} d={(i === 0 ? seg : "M" + seg)} />
      ))}
    </svg>
  );
}

/* Eyebrow — tracked-out uppercase label per DS voice */
function Eyebrow({ children, onDark = false }) {
  return <span className={"eyebrow" + (onDark ? " eyebrow--dark" : "")}>{children}</span>;
}

/* Section head block */
function SectionHead({ eyebrow, title, sub, onDark = false, narrow = false, style }) {
  return (
    <div className={"section-head reveal" + (narrow ? " section-head--narrow" : "")} style={style}>
      {eyebrow && <Eyebrow onDark={onDark}>{eyebrow}</Eyebrow>}
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>
  );
}

Object.assign(window, { Icon, Eyebrow, SectionHead });