// Afer marketing — primitives shared across all pages
const { useState, useEffect, useRef } = React;

function Logo({ light = false }) {
  // Detect base by looking for the loaded primitives.jsx script tag
  const scripts = document.querySelectorAll('script[src*="primitives.jsx"]');
  let base = '';
  if (scripts.length) {
    const src = scripts[0].getAttribute('src') || '';
    base = src.replace(/shared\/primitives\.jsx.*$/, '');
  }
  const file = light ? 'afer-logo-white.svg?v=2' : 'afer-logo-color.png';
  return <img src={base + 'assets/logos/' + file} alt="afer" style={{ height: 30, width: 'auto', display: 'block' }} />;
}

function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.75, style }) {
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  const paths = {
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>,
    chart: <><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></>,
    scan: <><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></>,
    bank: <><path d="M3 21h18M3 10h18M5 6l7-3 7 3v4H5z"/><path d="M7 14v3M12 14v3M17 14v3"/></>,
    shield: <><path d="M12 2L4 6v6c0 5 4 9 8 10 4-1 8-5 8-10V6z"/></>,
    trend: <><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></>,
    portal: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a2 2 0 0 0 3.4 0"/></>,
    chevron: <path d="M9 6l6 6-6 6"/>,
    chevronDown: <path d="M6 9l6 6 6-6"/>,
    check: <path d="M5 12l5 5L20 7"/>,
    checkCircle: <><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-5"/></>,
    menu: <><path d="M3 6h18M3 12h18M3 18h18"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowUp: <><path d="M12 19V5M5 12l7-7 7 7"/></>,
    sparkle: <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>,
    bot: <><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M12 8V4M9 4h6M8 13v2M16 13v2"/></>,
    zap: <path d="M13 2L4 14h7l-1 8 9-12h-7z"/>,
    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.87M16 3.13a4 4 0 0 1 0 7.75"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M2 13h20"/></>,
    building: <><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 7h.01M15 7h.01M9 11h.01M15 11h.01M9 15h.01M15 15h.01M10 21v-4h4v4"/></>,
    package: <><path d="M21 16V8l-9-5-9 5v8l9 5 9-5z"/><path d="M3.3 7L12 12l8.7-5M12 22V12"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    play: <path d="M6 4l14 8-14 8z" fill="currentColor"/>,
    pause: <><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <path d="M5 12h14"/>,
    x: <><path d="M6 6l12 12M18 6L6 18"/></>,
    star: <path d="M12 2l3 7 7 .6-5.3 4.7L18 22l-6-3.7L6 22l1.3-7.7L2 9.6 9 9z"/>,
    quote: <><path d="M3 11h4v4a4 4 0 0 1-4 4M13 11h4v4a4 4 0 0 1-4 4"/><path d="M3 11C3 7 5 5 9 4M13 11c0-4 2-6 6-7"/></>,
    receipt: <><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2V2l-3 2-3-2-3 2-3-2-3 2z"/><path d="M8 8h8M8 12h8M8 16h6"/></>,
    timer: <><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2M9 2h6"/></>,
    workflow: <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><rect x="9" y="11" width="6" height="2"/><path d="M6 9v3h6M18 15v-3h-6"/></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    lightning: <path d="M13 3L4 14h7v7l9-11h-7z" fill="currentColor" stroke="none"/>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    cloud: <path d="M18 10a4 4 0 0 0-7.5-1.5A4.5 4.5 0 1 0 7 18h11a3 3 0 0 0 0-6 4 4 0 0 0 0-2z"/>,
    rocket: <><path d="M5 13l-2 4 4-2M14.5 9.5l-1 1M9 15l-3-3M19 5l-2 7-5 5-3-3 5-5 7-2-2-2zM14 5l5 5"/></>,
    refresh: <><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></>,
    coins: <><circle cx="8" cy="8" r="6"/><path d="M18.1 9.1A6 6 0 0 1 16 21a6 6 0 0 1-6-3.5"/><path d="M7 6h1v4M6 14h3"/></>,
    whatsapp: <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.932-1.408A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" fill="none" stroke={color} strokeWidth="1.1"/>,
    pencil: <><path d="M12 20h9M16 4l4 4-12 12H4v-4z"/></>,
    download: <><path d="M12 3v12M7 10l5 5 5-5M5 21h14"/></>,
    send: <><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></>,
    message: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    alert: <><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></>,
    help: <><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></>,
  };
  return <svg {...props}>{paths[name] || null}</svg>;
}

// Opens the Calendly popup widget. Loads the script lazily on first call.
function openCalendly(e) {
  if (e && e.preventDefault) e.preventDefault();
  const url = 'https://calendly.com/m-capo/demo';
  const launch = () => {
    if (window.Calendly && window.Calendly.initPopupWidget) {
      window.Calendly.initPopupWidget({ url });
    } else {
      window.open(url, '_blank', 'noopener');
    }
  };
  if (window.Calendly) return launch();
  // Inject CSS + JS once
  if (!document.getElementById('calendly-css')) {
    const css = document.createElement('link');
    css.id = 'calendly-css'; css.rel = 'stylesheet';
    css.href = 'https://assets.calendly.com/assets/external/widget.css';
    document.head.appendChild(css);
  }
  if (!document.getElementById('calendly-js')) {
    const js = document.createElement('script');
    js.id = 'calendly-js'; js.async = true;
    js.src = 'https://assets.calendly.com/assets/external/widget.js';
    js.onload = launch;
    document.body.appendChild(js);
  } else {
    // Script tag exists but Calendly not ready yet — poll briefly
    const start = Date.now();
    const poll = setInterval(() => {
      if (window.Calendly || Date.now() - start > 5000) {
        clearInterval(poll); launch();
      }
    }, 100);
  }
}

function Button({ variant = 'primary', size = 'md', href, children, ...rest }) {
  const cls = `afer-btn afer-btn--${variant}${size === 'lg' ? ' afer-btn--lg' : ''}`;
  if (href) return <a href={href} className={cls} {...rest}>{children}</a>;
  return <button className={cls} {...rest}>{children}</button>;
}

function Eyebrow({ children, color = 'var(--brand-accent)' }) {
  return <div style={{ fontSize: 13, fontWeight: 600, color, letterSpacing: '0.04em', marginBottom: 14 }}>{children}</div>;
}

function Container({ children, style, ...rest }) {
  return <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px', ...style }} {...rest}>{children}</div>;
}

function Section({ children, bg, pad = '96px 0', label, style, ...rest }) {
  return (
    <section data-screen-label={label} style={{ background: bg || 'transparent', padding: pad, ...style }} {...rest}>
      <Container>{children}</Container>
    </section>
  );
}

// On-scroll reveal — adds .reveal-in class when visible
function Reveal({ children, delay = 0, as: As = 'div', style }) {
  const ref = useRef();
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); }
    }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return (
    <As ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(16px)',
      transition: 'opacity 600ms cubic-bezier(0.2,0.8,0.2,1), transform 600ms cubic-bezier(0.2,0.8,0.2,1)',
      ...style,
    }}>
      {children}
    </As>
  );
}

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