/* SKOPIA Landing — Shared primitives */
const { useState, useEffect, useRef, useMemo } = React;

/* Logo mark — approved orb identity (PNG) */
const LogoMark = ({ size = 32 }) =>
<img
  src="assets/logo-approved.png"
  alt="SKOPIA"
  width={size} height={size}
  style={{ ...{ display: 'block', width: size, height: size, borderRadius: '50%', objectFit: 'cover' }, width: "100px", height: "100px" }} />;



const Wordmark = ({ size = 18, color = '#1A1A2E' }) =>
<span style={{ ...{
    fontFamily: 'var(--font-head)', fontWeight: 900,
    fontSize: size, letterSpacing: -0.5, color
  }, fontSize: "30px" }}></span>;


const Logo = ({ size = 30, color = '#1A1A2E' }) =>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <LogoMark size={size} />
    <Wordmark size={size * 0.58} color={color} />
  </div>;


/* Pill */
const Pill = ({ children, tone = 'default', style }) => {
  const tones = {
    default: { bg: '#EFF1FB', color: '#2A4DCC', border: '1px solid #D8DEF4' },
    success: { bg: '#F0FFF4', color: '#15803D', border: '1px solid #86EFAC' },
    warning: { bg: '#FEF9C3', color: '#854D0E', border: '1px solid #FDE047' },
    error: { bg: '#FFF5F5', color: '#DC2626', border: '1px solid #FECACA' },
    cyan: { bg: 'rgba(30,200,212,0.12)', color: '#0E8C95', border: '1px solid rgba(30,200,212,0.3)' },
    dark: { bg: 'rgba(255,255,255,0.08)', color: 'rgba(255,255,255,0.9)', border: '1px solid rgba(255,255,255,0.15)' },
    grad: { bg: 'transparent', color: '#fff', border: '1px solid transparent', backgroundImage: 'var(--color-grad)' }
  };
  const t = tones[tone] || tones.default;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 12px', borderRadius: 999,
      fontFamily: 'var(--font-head)', fontWeight: 700,
      fontSize: 11, letterSpacing: 0.5,
      background: t.bg, color: t.color, border: t.border,
      backgroundImage: t.backgroundImage,
      ...style
    }}>{children}</span>);

};

/* Button */
const Btn = ({ children, variant = 'primary', href, onClick, icon, iconRight, style }) => {
  const cls = `btn btn-${variant}`;
  const inner =
  <>
      {icon}
      {children}
      {iconRight}
    </>;

  if (href) return <a className={cls} href={href} onClick={onClick} style={style}>{inner}</a>;
  return <button className={cls} onClick={onClick} style={style}>{inner}</button>;
};

/* Section header */
const SectionHeader = ({ eyebrow, title, lede, align = 'left', children }) =>
<div style={{ textAlign: align, maxWidth: align === 'center' ? 760 : '100%', margin: align === 'center' ? '0 auto' : 0 }}>
    {eyebrow && <div className="eyebrow" style={{ marginBottom: 22 }}>{eyebrow}</div>}
    <h2 className="h-section" style={{ marginBottom: 22, textWrap: 'balance' }}>{title}</h2>
    {lede && <p className="lede" style={{ margin: align === 'center' ? '0 auto' : 0 }}>{lede}</p>}
    {children}
  </div>;


/* Reveal on scroll */
const Reveal = ({ children, delay = 0, as: Tag = 'div', style, className = '' }) => {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setTimeout(() => el.classList.add('in'), delay);
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${className}`} style={style}>{children}</Tag>;
};

/* Inline icon set — minimal stroke (Lucide-style) */
const Icon = ({ name, size = 18, stroke = 1.6, color = 'currentColor' }) => {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    arrow: <><path d="M5 12h14" /><path d="M13 6l6 6-6 6" /></>,
    check: <path d="M5 12.5l4 4L19 7" />,
    x: <><path d="M6 6l12 12" /><path d="M18 6L6 18" /></>,
    minus: <path d="M5 12h14" />,
    chev: <path d="M6 9l6 6 6-6" />,
    play: <polygon points="6 4 20 12 6 20 6 4" />,
    spark: <><path d="M12 3v4" /><path d="M12 17v4" /><path d="M3 12h4" /><path d="M17 12h4" /><path d="M5.5 5.5l2.8 2.8" /><path d="M15.7 15.7l2.8 2.8" /><path d="M5.5 18.5l2.8-2.8" /><path d="M15.7 8.3l2.8-2.8" /></>,
    bolt: <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" />,
    chart: <><path d="M3 3v18h18" /><path d="M7 14l4-4 3 3 5-7" /></>,
    gantt: <><rect x="3" y="5" width="9" height="3" rx="1" /><rect x="6" y="11" width="11" height="3" rx="1" /><rect x="9" y="17" width="8" height="3" rx="1" /></>,
    layers: <><path d="M12 3l9 5-9 5-9-5 9-5z" /><path d="M3 13l9 5 9-5" /><path d="M3 18l9 5 9-5" /></>,
    shield: <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" />,
    cloud: <path d="M7 18a4 4 0 010-8 6 6 0 0111-2 4 4 0 011 8H7z" />,
    cpu: <><rect x="6" y="6" width="12" height="12" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3" /></>,
    mobile: <><rect x="7" y="2" width="10" height="20" rx="2" /><path d="M11 18h2" /></>,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6" /></>,
    globe: <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" /></>,
    file: <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z" /><path d="M14 3v5h5" /></>,
    lens: <><circle cx="11" cy="11" r="6" /><path d="M21 21l-5-5" /></>,
    hammer: <><path d="M14 4l6 6-3 3-6-6 3-3z" /><path d="M11 7l-7 7v3h3l7-7" /></>,
    track: <><path d="M5 18l4-9 4 5 5-9" /><circle cx="5" cy="18" r="1.6" /><circle cx="9" cy="9" r="1.6" /><circle cx="13" cy="14" r="1.6" /><circle cx="18" cy="5" r="1.6" /></>,
    brain: <><path d="M9 4a3 3 0 00-3 3v1a3 3 0 00-2 5 3 3 0 002 5v0a3 3 0 003 3h1V4H9z" /><path d="M15 4a3 3 0 013 3v1a3 3 0 012 5 3 3 0 01-2 5v0a3 3 0 01-3 3h-1V4h1z" /></>,
    flow: <><circle cx="6" cy="6" r="2" /><circle cx="18" cy="6" r="2" /><circle cx="6" cy="18" r="2" /><circle cx="18" cy="18" r="2" /><path d="M8 6h8M6 8v8M18 8v8M8 18h8" /></>,
    code: <><path d="M9 8l-5 4 5 4M15 8l5 4-5 4" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    star: <polygon points="12 2 15 9 22 9.5 17 14 18.5 21 12 17.5 5.5 21 7 14 2 9.5 9 9 12 2" />,
    dollar: <><path d="M12 3v18" /><path d="M16 7H10a3 3 0 000 6h4a3 3 0 010 6H8" /></>,
    inbox: <><path d="M3 13l3-9h12l3 9" /><path d="M3 13v6a2 2 0 002 2h14a2 2 0 002-2v-6" /><path d="M3 13h5l1 3h6l1-3h5" /></>,
    grid: <><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></>,
    zap: <polygon points="13 2 4 14 11 14 10 22 20 10 13 10 13 2" />
  };
  return <svg {...common}>{paths[name]}</svg>;
};

/* Gradient accent bar */
const GradBar = ({ height = 6 }) =>
<div style={{ height, background: 'var(--color-grad-90)' }} />;


Object.assign(window, { LogoMark, Wordmark, Logo, Pill, Btn, SectionHeader, Reveal, Icon, GradBar });