/* Franchise Kosovo — shared primitives */
const { useState, useEffect, useRef } = React;

/* Lucide icon helper — renders a fresh element & creates the icon */
function Icon({ name, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const el = document.createElement('i');
      el.setAttribute('data-lucide', name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ nameAttr: 'data-lucide', icons: window.lucide.icons });
    }
  }, [name]);
  return <span ref={ref} style={{ display:'inline-flex' }} {...rest} />;
}

/* IntersectionObserver-based reveal wrapper */
function Reveal({ children, delay = 0, className = '', as = 'div', style = {} }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(node); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(node);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={`reveal ${seen ? 'in' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}>
      {children}
    </Tag>
  );
}

/* Count-up number that animates when scrolled into view */
function CountUp({ value, prefix = '', suffix = '', duration = 1400 }) {
  const ref = useRef(null);
  const [display, setDisplay] = useState(0);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    let raf, started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          const start = performance.now();
          const tick = (now) => {
            const p = Math.min((now - start) / duration, 1);
            const eased = 1 - Math.pow(1 - p, 3);
            setDisplay(Math.round(eased * value));
            if (p < 1) raf = requestAnimationFrame(tick);
          };
          raf = requestAnimationFrame(tick);
          io.unobserve(node);
        }
      });
    }, { threshold: 0.4 });
    io.observe(node);
    return () => { io.disconnect(); if (raf) cancelAnimationFrame(raf); };
  }, [value]);
  return <span ref={ref}>{prefix}{display}{suffix}</span>;
}

function Button({ variant = 'primary', size, icon, iconBefore, children, onClick, className = '' }) {
  const cls = `btn btn-${variant} ${size === 'lg' ? 'btn-lg' : ''} ${className}`;
  return (
    <button className={cls} onClick={onClick}>
      {iconBefore && <Icon name={iconBefore} />}
      {children}
      {icon && <Icon name={icon} />}
    </button>
  );
}

function Eyebrow({ children, center }) {
  return <div className={`eyebrow ${center ? 'center' : ''}`}>{children}</div>;
}

/* Decorative portal arch SVG (matches the logo motif) for hero background */
function ArchMotif({ className = '', color = '#C8A24B', style, ...rest }) {
  return (
    <svg className={className} style={style} {...rest} viewBox="0 0 200 240" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M20 240 V120 a80 80 0 0 1 160 0 V240" stroke={color} strokeWidth="2" fill="none"/>
      <path d="M55 240 V120 a45 45 0 0 1 90 0 V240" stroke={color} strokeWidth="2" fill="none" opacity="0.6"/>
      <path d="M90 240 V120 a10 10 0 0 1 20 0 V240" stroke={color} strokeWidth="2" fill="none" opacity="0.35"/>
    </svg>
  );
}

Object.assign(window, { Icon, Reveal, CountUp, Button, Eyebrow, ArchMotif });