/* Shared primitives for Scality Solutions */
const { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } = React;

// ---------- Lucide icon helper ----------
// Inline SVG icon paths (lucide-style, MIT). Only the ones we use.
const ICON_PATHS = {
  TrendingUp: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
  UserPlus: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>',
  Calendar: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
  Zap: '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
  ShieldCheck: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/>',
  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"/>',
  Code2: '<path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/>',
  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"/>',
  Workflow: '<rect x="3" y="3" width="8" height="8" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect x="13" y="13" width="8" height="8" rx="2"/>',
  ArrowRight: '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
  ArrowLeft: '<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>',
  ChevronDown: '<polyline points="6 9 12 15 18 9"/>',
  ChevronLeft: '<polyline points="15 18 9 12 15 6"/>',
  ChevronRight: '<polyline points="9 18 15 12 9 6"/>',
  Check: '<polyline points="20 6 9 17 4 12"/>',
  CheckCircle2: '<circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 16 10"/>',
  Menu: '<line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>',
  X: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
  Mail: '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/>',
  Phone: '<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>',
  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"/>',
  Linkedin: '<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>',
  Instagram: '<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>',
  Facebook: '<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>',
  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"/>',
  LayoutDashboard: '<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>',
  Users: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  Settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33h.09A1.65 1.65 0 0 0 9 3.09V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51h.09a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
  Bell: '<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',
  Search: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
  Home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
  ClipboardList: '<rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/>',
  CalendarDays: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M8 18h.01"/><path d="M12 18h.01"/>',
  Smartphone: '<rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>',
  WifiOff: '<line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/>',
  Lock: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
  Wifi: '<path d="M5 13a10 10 0 0 1 14 0"/><path d="M8.5 16.5a5 5 0 0 1 7 0"/><path d="M2 8.82a15 15 0 0 1 20 0"/><line x1="12" y1="20" x2="12.01" y2="20"/>',
  Battery: '<rect x="2" y="7" width="18" height="10" rx="2" ry="2"/><line x1="22" y1="11" x2="22" y2="13"/>',
  Signal: '<path d="M2 20h.01"/><path d="M7 20v-4"/><path d="M12 20v-8"/><path d="M17 20V8"/><path d="M22 4v16"/>',
  MapPin: '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
  Clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
  Plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
};

function makeIcon(name) {
  return function Icon({ size = 18, className = "", strokeWidth = 1.8, style = {}, fill }) {
    const path = ICON_PATHS[name];
    if (!path) return <span className={className} style={{ width: size, height: size, display: "inline-block" }} />;
    return (
      <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
        fill={fill || (style.fill ? style.fill : "none")}
        stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
        className={className} style={style} aria-hidden="true"
        dangerouslySetInnerHTML={{ __html: path }} />
    );
  };
}

const TrendingUp = makeIcon("TrendingUp");
const UserPlus = makeIcon("UserPlus");
const Calendar = makeIcon("Calendar");
const Zap = makeIcon("Zap");
const ShieldCheck = makeIcon("ShieldCheck");
const Star = makeIcon("Star");
const Code2 = makeIcon("Code2");
const Layers = makeIcon("Layers");
const Workflow = makeIcon("Workflow");
const ArrowRight = makeIcon("ArrowRight");
const ArrowLeft = makeIcon("ArrowLeft");
const ChevronDown = makeIcon("ChevronDown");
const ChevronLeft = makeIcon("ChevronLeft");
const ChevronRight = makeIcon("ChevronRight");
const Check = makeIcon("Check");
const CheckCircle2 = makeIcon("CheckCircle2");
const Menu = makeIcon("Menu");
const X = makeIcon("X");
const Mail = makeIcon("Mail");
const Phone = makeIcon("Phone");
const FileText = makeIcon("FileText");
const Linkedin = makeIcon("Linkedin");
const Instagram = makeIcon("Instagram");
const Facebook = makeIcon("Facebook");
const User = makeIcon("User");
const LayoutDashboard = makeIcon("LayoutDashboard");
const Briefcase = makeIcon("Briefcase");
const Users = makeIcon("Users");
const Settings = makeIcon("Settings");
const Bell = makeIcon("Bell");
const Search = makeIcon("Search");
const Home = makeIcon("Home");
const ClipboardList = makeIcon("ClipboardList");
const CalendarDays = makeIcon("CalendarDays");
const Smartphone = makeIcon("Smartphone");
const WifiOff = makeIcon("WifiOff");
const Lock = makeIcon("Lock");
const Wifi = makeIcon("Wifi");
const Battery = makeIcon("Battery");
const Signal = makeIcon("Signal");
const MapPin = makeIcon("MapPin");
const Clock = makeIcon("Clock");
const Globe = makeIcon("Globe");
const Cog = makeIcon("Cog");
const Target = makeIcon("Target");
const Plus = makeIcon("Plus");
const Minus = makeIcon("Minus");
const Award = makeIcon("Award");

// ---------- Reveal hook ----------
function useReveal(threshold = 0.1) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            el.classList.add("in");
            io.unobserve(el);
          }
        });
      },
      { threshold, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [threshold]);
  return ref;
}

// ---------- Buttons ----------
function PrimaryButton({ children, href = "#kontakt", onClick, className = "", magnet = true, size = "md" }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!magnet) return;
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      const dx = (e.clientX - cx) / (r.width / 2);
      const dy = (e.clientY - cy) / (r.height / 2);
      const max = 8;
      el.style.transform = `translate(${Math.max(-1,Math.min(1,dx))*max}px, ${Math.max(-1,Math.min(1,dy))*max}px) scale(1.02)`;
    };
    const onLeave = () => { el.style.transform = ""; };
    const region = el;
    region.addEventListener("mousemove", onMove);
    region.addEventListener("mouseleave", onLeave);
    return () => {
      region.removeEventListener("mousemove", onMove);
      region.removeEventListener("mouseleave", onLeave);
    };
  }, [magnet]);
  const sizes = {
    sm: "px-4 py-2 text-sm",
    md: "px-6 py-3 text-[15px]",
    lg: "px-7 py-4 text-base",
  };
  return (
    <a
      ref={ref}
      href={href}
      onClick={onClick}
      className={`btn-shine inline-flex items-center justify-center gap-2 ${sizes[size]} font-semibold rounded-full text-black transition-transform duration-300 ${className}`}
      style={{ background: "var(--accent-blue)", boxShadow: "0 10px 30px -10px rgba(21,185,250,0.55), inset 0 1px 0 rgba(255,255,255,0.4)" }}
    >
      {children}
    </a>
  );
}

function GhostButton({ children, href = "#projekte", onClick, className = "", size = "md" }) {
  const sizes = {
    sm: "px-4 py-2 text-sm",
    md: "px-6 py-3 text-[15px]",
    lg: "px-7 py-4 text-base",
  };
  return (
    <a
      href={href}
      onClick={onClick}
      className={`inline-flex items-center justify-center gap-2 ${sizes[size]} font-semibold rounded-full text-white border border-white/15 hover:border-white/40 hover:bg-white/[0.06] transition-colors duration-300 ${className}`}
    >
      {children}
    </a>
  );
}

// ---------- Stats count-up ----------
function CountUp({ to, suffix = "", prefix = "", duration = 1600, decimals = 0 }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const startedRef = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          const start = performance.now();
          const tick = (t) => {
            const p = Math.min(1, (t - start) / duration);
            // easeOutCubic
            const e2 = 1 - Math.pow(1 - p, 3);
            setVal(to * e2);
            if (p < 1) requestAnimationFrame(tick);
            else setVal(to);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  const formatted = decimals ? val.toFixed(decimals) : Math.round(val).toString();
  return <span ref={ref}>{prefix}{formatted}{suffix}</span>;
}

// expose
Object.assign(window, {
  TrendingUp, UserPlus, Calendar, Zap, ShieldCheck, Star, Code2, Layers, Workflow,
  ArrowRight, ArrowLeft, ChevronDown, ChevronLeft, ChevronRight, Check, CheckCircle2,
  Menu, X, Mail, Phone, FileText, Linkedin, Instagram, Facebook, User,
  LayoutDashboard, Briefcase, Users, Settings, Bell, Search, Home, ClipboardList,
  CalendarDays, Smartphone, WifiOff, Lock, Wifi, Battery, Signal, MapPin, Clock,
  Globe, Cog, Target, Plus, Minus, Award,
  useReveal, PrimaryButton, GhostButton, CountUp, makeIcon,
});
