/* Motion · site primitives — shared atoms.
   `window.MPOS_BASE` (set inline in each HTML before scripts load) controls
   how relative asset URLs are resolved; for root pages it's "./" and for
   nested pages like funkcje/*.html it's "../". */

const { useState, useEffect, useRef, useCallback } = React;

const baseUrl = (p) => (window.MPOS_BASE || "./") + p;

function Container({ className = "", children, ...rest }) {
  return (
    <div className={`mpos-container ${className}`} {...rest}>
      {children}
    </div>
  );
}

function Button({ variant = "primary", size = "md", as = "button", href, children, className = "", ...rest }) {
  const cls = `mpos-btn mpos-btn-${variant} mpos-btn-${size} ${className}`;
  if (as === "a" || href) {
    return <a href={href || "#"} className={cls} {...rest}>{children}</a>;
  }
  return <button className={cls} {...rest}>{children}</button>;
}

/* Brand mark — small standalone "M" SVG (extracted from the brand mark).
   Drawn inline so it's path-independent and pixel-crisp. */
function LogoMark({ size = 28 }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="436 436 624 384"
      width={size}
      height={size * (384 / 624)}
      style={{ display: "block" }}
      aria-hidden="true"
    >
      <path
        fill="#013ca4"
        d="M745.86 451.38c33.45-19.29 76.23-7.84 95.5 25.62l139.78 242.18c19.4 33.47 7.84 76.26-25.5 95.54-33.44 19.28-76.23 7.84-95.5-25.62L720.36 546.92c-19.4-33.47-7.95-76.13 25.5-95.54z"
      />
      <path
        fill="#0175e4"
        d="M753.82 814.72c-33.45 19.28-76.23 7.84-95.5-25.62L518.54 546.92c-19.27-33.47-7.83-76.13 25.62-95.54 33.33-19.29 76.1-7.84 95.38 25.62l139.9 242.18c19.27 33.47 7.83 76.27-25.62 95.54z"
      />
      <path
        fill="#73b7ff"
        d="M947.69 451.38c33.45-19.29 76.22-7.84 95.5 25.62 19.27 33.46 7.83 76.25-25.62 95.53-33.45 19.28-76.23 7.84-95.5-25.62-19.28-33.47-7.84-76.13 25.62-95.53zM551.99 814.72c-33.45 19.28-76.1 7.84-95.5-25.62-19.27-33.34-7.84-76.13 25.62-95.42 33.44-19.4 76.22-7.83 95.5 25.5 19.27 33.47 7.83 76.27-25.62 95.54z"
      />
    </svg>
  );
}

function Logo({ variant = "dark" }) {
  return (
    <span className="mpos-logo">
      <LogoMark size={28} />
      <span className="mpos-logo-word" style={variant === "white" ? { color: "#fff" } : null}>
        Motion
      </span>
    </span>
  );
}

/* Stroke-icon component using Lucide-style SVG paths. */
const ICONS = {
  check:        <path d="m6 12 4 4 8-8"/>,
  checkCircle:  <><circle cx="12" cy="12" r="9" opacity=".25"/><path d="m8.5 12.2 2.6 2.6 4.4-5"/></>,
  arrowRight:   <path d="M5 12h14M13 5l7 7-7 7"/>,
  arrowLeft:    <path d="M19 12H5M11 19l-7-7 7-7"/>,
  play:         <polygon points="6 3 20 12 6 21 6 3"/>,
  bolt:         <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z"/>,
  zap:          <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
  wifi:         <><path d="M5 12.55a11 11 0 0 1 14 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
  wifiOff:      <><path d="m2 2 20 20"/><path d="M8.5 16.5a5 5 0 0 1 7 0"/><path d="M2 8.82a15 15 0 0 1 4.17-2.65"/><path d="M10.66 5c4.01-.36 8.14.9 11.34 3.76"/><path d="M16.85 11.25a10 10 0 0 1 2.22 1.68"/><path d="M5 13a10 10 0 0 1 5.24-2.76"/><line x1="12" y1="20" x2="12.01" y2="20"/></>,
  layers:       <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
  barChart:     <><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></>,
  pieChart:     <><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></>,
  receipt:      <><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 1 2V2"/><path d="M16 8H8M16 12H8M13 16H8"/></>,
  creditCard:   <><rect x="2" y="6" width="20" height="12" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></>,
  store:        <><path d="m2 7 1-4h18l1 4"/><path d="M2 7v13a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7"/><path d="M6 21V13h6v8"/></>,
  coffee:       <><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" y1="2" x2="6" y2="4"/><line x1="10" y1="2" x2="10" y2="4"/><line x1="14" y1="2" x2="14" y2="4"/></>,
  utensils:     <><path d="M3 2v7a2 2 0 0 0 4 0V2"/><path d="M5 9v13"/><path d="M19 22V2a4 4 0 0 0-4 4v7h4"/></>,
  shieldCheck:  <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></>,
  users:        <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
  user:         <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
  trendingUp:   <><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></>,
  printer:      <><path d="M6 9V2h12v7"/><rect x="2" y="9" width="20" height="9" rx="2"/><path d="M6 14h12v8H6z"/></>,
  smartphone:   <><rect x="6" y="2" width="12" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></>,
  tablet:       <><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></>,
  chevronDown:  <polyline points="6 9 12 15 18 9"/>,
  chevronRight: <polyline points="9 18 15 12 9 6"/>,
  chevronLeft:  <polyline points="15 18 9 12 15 6"/>,
  plus:         <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
  minus:        <line x1="5" y1="12" x2="19" y2="12"/>,
  x:            <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
  menu:         <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
  search:       <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
  quote:        <><path d="M6 11H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4v6a4 4 0 0 1-4 4"/><path d="M18 11h-2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h4v6a4 4 0 0 1-4 4"/></>,
  jpk:          <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 8h10M7 12h6M7 16h8"/></>,
  package:      <><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></>,
  tag:          <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></>,
  tags:         <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/><path d="m12 7 8 8"/></>,
  percent:      <><line x1="19" y1="5" x2="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></>,
  gift:         <><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></>,
  truck:        <><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
  refresh:      <><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></>,
  rotateCcw:    <><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></>,
  alertCircle:  <><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></>,
  helpCircle:   <><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
  fileText:     <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></>,
  clock:        <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
  cpu:          <><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></>,
  database:     <><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></>,
  history:      <><path d="M3 12a9 9 0 1 0 9-9 9.74 9.74 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></>,
  filter:       <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>,
  download:     <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
  star:         <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
  monitor:      <><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></>,
  building:     <><path d="M3 21h18M5 21V7l8-4v18M19 21V11l-6-4"/><path d="M9 9h.01M9 12h.01M9 15h.01M9 18h.01"/></>,
  lock:         <><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
  globe:        <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
  cash:         <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></>,
  banknote:     <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></>,
  link:         <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></>,
  send:         <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></>,
};

function Icon({ name, size = 20, color = "currentColor", strokeWidth = 1.75, className = "", style }) {
  const path = ICONS[name];
  if (!path) return null;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={style}
      aria-hidden="true"
    >
      {path}
    </svg>
  );
}

function Eyebrow({ children, className = "" }) {
  return <div className={`mpos-eyebrow ${className}`}>{children}</div>;
}

/* Reveal: opacity-fade entrance, gates on intersection. */
function Reveal({ children, delay = 0, className = "" }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(true);
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    if (r.top >= window.innerHeight) {
      setShown(false);
      const io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
      }, { threshold: 0.05, rootMargin: "0px 0px -10% 0px" });
      io.observe(el);
      return () => io.disconnect();
    }
  }, []);
  return (
    <div
      ref={ref}
      className={className}
      style={{
        transform: shown ? "translateY(0)" : "translateY(8px)",
        opacity: shown ? 1 : 0,
        transition: `transform 360ms cubic-bezier(.16,1,.3,1) ${delay}ms, opacity 360ms cubic-bezier(.16,1,.3,1) ${delay}ms`,
      }}
    >
      {children}
    </div>
  );
}

Object.assign(window, { Container, Button, Logo, LogoMark, Icon, Eyebrow, Reveal, baseUrl });
