/* ============================================================================
   Yottasecure UI kit — shared primitives (theme.jsx)
   Exports to window: Icon, Container, Section, Kicker, Eyebrow, Button,
   GradientButton, GridBG, GlowField, Stat, useReveal, Reveal, cx
   ============================================================================ */
const { useRef, useEffect, useState, createElement: h } = React;

const cx = (...a) => a.filter(Boolean).join(' ');

/* Brand/social logos — Lucide dropped these from core, so we inline them (fill) */
const BRAND_SVG = {
  github: '<path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.5v-1.8c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.7.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2 1-.3 2-.4 3-.4s2 .1 3 .4c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.5 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"/>',
  linkedin: '<path d="M20.45 20.45h-3.56v-5.57c0-1.33 0-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 110-4.14 2.07 2.07 0 010 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/>',
  twitter: '<path d="M18.9 1.6h3.5l-7.6 8.7L23.8 22h-7L11.5 15 5.4 22H1.9l8.1-9.3L1 1.6h7.2l4.7 6.3 5.9-6.3zm-1.2 18.3h1.9L7.1 3.6H5.1l12.6 16.3z"/>',
  facebook: '<path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.12 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.88v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07z"/>',
};

/* --- Lucide icon (or inline brand logo), rendered via manual DOM --- */
function Icon({ name, size = 22, stroke = 1.75, className, style }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (BRAND_SVG[name]) {
      el.innerHTML = `<svg viewBox="0 0 24 24" width="${size}" height="${size}" fill="currentColor" aria-hidden="true">${BRAND_SVG[name]}</svg>`;
      return;
    }
    if (!window.lucide) return;
    el.innerHTML = '';
    const i = document.createElement('i');
    i.setAttribute('data-lucide', name);
    el.appendChild(i);
    try {
      window.lucide.createIcons({ attrs: { 'stroke-width': stroke, width: size, height: size }, nameAttr: 'data-lucide' });
    } catch (e) {}
  }, [name, size, stroke]);
  return h('span', { ref, className: cx('ys-ic', className), style: { display: 'inline-flex', width: size, height: size, ...style } });
}

/* --- layout --- */
function Container({ children, className, style, narrow }) {
  return h('div', { className: cx('ys-container', className), style: { maxWidth: narrow ? 880 : 1200, margin: '0 auto', padding: '0 32px', width: '100%', boxSizing: 'border-box', ...style } }, children);
}

function Section({ children, className, style, id, tone }) {
  return h('section', { id, className: cx('ys-section', className), style: { padding: '104px 0', position: 'relative', ...style } }, children);
}

/* --- mono kicker / eyebrow --- */
function Kicker({ children, style }) {
  return h('div', { className: 'ys-kicker', style: { display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap', ...style } },
    h('span', { style: { width: 18, height: 1, background: 'var(--brand)', display: 'inline-block', opacity: .8, flex: 'none' } }),
    children);
}

/* --- buttons --- */
function GradientButton({ children, icon, onClick, href, size, style }) {
  const pad = size === 'lg' ? '15px 30px' : '12px 22px';
  const fs = size === 'lg' ? 16 : 14.5;
  const inner = [children, icon && h(Icon, { key: 'i', name: icon, size: size === 'lg' ? 18 : 16 })];
  const props = {
    className: 'ys-btn-grad', onClick,
    style: { display: 'inline-flex', alignItems: 'center', gap: 9, padding: pad, fontSize: fs, fontWeight: 600, fontFamily: 'var(--font-display)', letterSpacing: '-.01em', color: '#04222b', background: 'var(--brand-gradient)', border: 'none', borderRadius: 'var(--radius-md)', cursor: 'pointer', textDecoration: 'none', boxShadow: 'var(--glow-soft)', transition: 'transform var(--dur-fast) var(--ease-out), filter var(--dur) var(--ease-out)', ...style }
  };
  return h(href ? 'a' : 'button', href ? { ...props, href } : props, inner);
}

function Button({ children, icon, iconRight, onClick, href, variant = 'secondary', size, style }) {
  const pad = size === 'lg' ? '15px 28px' : '12px 20px';
  const fs = size === 'lg' ? 16 : 14.5;
  const base = { display: 'inline-flex', alignItems: 'center', gap: 9, padding: pad, fontSize: fs, fontWeight: 500, fontFamily: 'var(--font-display)', letterSpacing: '-.01em', borderRadius: 'var(--radius-md)', cursor: 'pointer', textDecoration: 'none', transition: 'all var(--dur) var(--ease-out)', border: '1px solid transparent' };
  const variants = {
    secondary: { background: 'var(--bg-3)', color: 'var(--fg-1)', borderColor: 'var(--border-2)' },
    ghost: { background: 'transparent', color: 'var(--fg-2)', borderColor: 'var(--border-2)' },
    link: { background: 'transparent', color: 'var(--brand)', border: 'none', padding: size === 'lg' ? '15px 4px' : '12px 4px' },
  };
  const inner = [icon && h(Icon, { key: 'l', name: icon, size: size === 'lg' ? 18 : 16 }), children, iconRight && h(Icon, { key: 'r', name: iconRight, size: size === 'lg' ? 18 : 16 })];
  const props = { className: cx('ys-btn', 'ys-btn-' + variant), onClick, style: { ...base, ...variants[variant], ...style } };
  return h(href ? 'a' : 'button', href ? { ...props, href } : props, inner);
}

/* --- decorative backgrounds --- */
function GridBG({ style }) {
  return h('div', { 'aria-hidden': true, style: { position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(rgba(120,150,180,.10) 1px, transparent 1px)', backgroundSize: '22px 22px', maskImage: 'radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%)', pointerEvents: 'none', ...style } });
}
function GlowField({ style }) {
  return h('div', { 'aria-hidden': true, style: { position: 'absolute', inset: 0, background: 'radial-gradient(80% 70% at 50% -10%, rgba(22,187,233,.18), rgba(67,224,195,.05) 40%, transparent 70%)', pointerEvents: 'none', ...style } });
}

/* --- scroll reveal --- */
function useReveal() {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setShown(true); return; }
    let done = false;
    const reveal = () => { if (!done) { done = true; setShown(true); } };
    let io;
    try {
      io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) { reveal(); io.disconnect(); } }); }, { threshold: 0.1, rootMargin: '0px 0px -4% 0px' });
      io.observe(el);
    } catch (e) { reveal(); }
    // safety: never leave content permanently hidden if IO is flaky
    const t = setTimeout(reveal, 1300);
    return () => { if (io) io.disconnect(); clearTimeout(t); };
  }, []);
  return [ref, shown];
}
function Reveal({ children, delay = 0, style, as = 'div' }) {
  const [ref, shown] = useReveal();
  return h(as, { ref, style: { opacity: shown ? 1 : 0, transform: shown ? 'none' : 'translateY(16px)', transition: `opacity .6s var(--ease-out) ${delay}ms, transform .6s var(--ease-out) ${delay}ms`, ...style } }, children);
}

Object.assign(window, { Icon, Container, Section, Kicker, Button, GradientButton, GridBG, GlowField, useReveal, Reveal, cx });