/* Corsa Privata homepage — Lucide icon helper (real glyphs, no hand-rolled SVG). */
function Icon({ name, size = 20, stroke = 1.5, color = 'currentColor', style }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({
        attrs: { width: size, height: size, 'stroke-width': stroke, stroke: color },
        nameAttr: 'data-lucide',
      });
    }
  }, [name, size, stroke, color]);
  return <span ref={ref} style={{ display: 'inline-flex', width: size, height: size, ...style }} />;
}

/* Thin flowing gold contour line — a brand-documented background element.
 * Reused as the "circuit" motif. Crisp vector, gentle gradient, low presence. */
function TrackLine({ width = 400, height = 240, opacity = 1, stroke = 1.6, color, style }) {
  const gid = React.useId().replace(/:/g, '');
  const c = color || 'url(#' + gid + ')';
  return (
    <svg viewBox="0 0 400 240" width={width} height={height} fill="none" style={{ display: 'block', opacity, ...style }} aria-hidden="true">
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="400" y2="240" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="#A98950" />
          <stop offset="0.5" stopColor="#D3BC8D" />
          <stop offset="1" stopColor="#A98950" />
        </linearGradient>
      </defs>
      <path
        d="M64 158 C40 104 92 56 150 64 C196 70 214 38 268 44 C338 52 372 92 356 138 C344 174 296 182 250 168 C214 157 196 188 150 188 C100 188 86 206 64 158 Z"
        stroke={c} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      />
      {/* start/finish tick */}
      <path d="M150 64 L150 50" stroke={c} strokeWidth={stroke} strokeLinecap="round" />
    </svg>
  );
}

/* Faint dot-grid corner cluster — permitted brand background accent. */
function DotGrid({ rows = 5, cols = 6, gap = 11, dot = 2, color = 'rgba(27,29,31,0.22)', style }) {
  const cells = [];
  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) cells.push(r + '-' + c);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, ${gap}px)`, gridAutoRows: `${gap}px`, ...style }} aria-hidden="true">
      {cells.map((k) => (
        <span key={k} style={{ width: dot, height: dot, borderRadius: '50%', background: color }} />
      ))}
    </div>
  );
}

window.Icon = Icon;
window.TrackLine = TrackLine;
window.DotGrid = DotGrid;