// LINKONA prototype — shared UI helpers (icons, animations, drawer, mobile frame).
(function () {
  // ---- Inject animation + prototype CSS once ----
  if (!document.getElementById('lk-proto-css')) {
    const s = document.createElement('style');
    s.id = 'lk-proto-css';
    s.textContent = `
      @keyframes lkFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
      @keyframes lkSpin { to { transform: rotate(360deg); } }
      @keyframes lkPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
      @keyframes lkBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      @keyframes lkBarY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
      @keyframes lkOverlayIn { from { opacity: 0; } to { opacity: 1; } }
      @keyframes lkDrawerIn { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
      @keyframes lkPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
      .lk-fade { animation: lkFadeUp .45s var(--ease-out) both; }
      .lk-spin { animation: lkSpin 1s linear infinite; }
      .lk-stagger > * { animation: lkFadeUp .5s var(--ease-out) both; }
      /* Never strand content invisible when the page is backgrounded (animations pause while hidden) */
      .lk-overlay { animation: lkOverlayIn .2s ease both; }
      .lk-drawer { animation: lkDrawerIn .28s var(--ease-out) both; }
      .lk-modal { animation: lkPop .26s var(--ease-out) both; }
      .lk-bar { animation: lkBar .8s var(--ease-out) both; }
      .lk-bar-y { animation: lkBarY .7s var(--ease-out) both; transform-origin: bottom; }
      html.lk-noanim .lk-fade, html.lk-noanim .lk-stagger > *,
      html.lk-noanim .lk-overlay, html.lk-noanim .lk-drawer, html.lk-noanim .lk-modal,
      html.lk-noanim .lk-bar, html.lk-noanim .lk-bar-y { animation: none !important; opacity: 1 !important; transform: none !important; }
      .lk-stagger > *:nth-child(1){animation-delay:.02s}
      .lk-stagger > *:nth-child(2){animation-delay:.08s}
      .lk-stagger > *:nth-child(3){animation-delay:.14s}
      .lk-stagger > *:nth-child(4){animation-delay:.20s}
      .lk-stagger > *:nth-child(5){animation-delay:.26s}
      .lk-stagger > *:nth-child(6){animation-delay:.32s}
      *::-webkit-scrollbar { width: 10px; height: 10px; }
      *::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 8px; border: 3px solid var(--bg-page); }
      *::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
      .lk-navbtn:hover { background: var(--ink-50) !important; }
      .lk-linkrow:hover { background: var(--ink-50); }
    `;
    document.head.appendChild(s);
  }

  // Content must never be stranded invisible: while the page is hidden, CSS
  // animations pause at frame 0 (opacity:0). Disable entrance animations then.
  (function () {
    const html = document.documentElement;
    const sync = () => { if (document.hidden) html.classList.add('lk-noanim'); else html.classList.remove('lk-noanim'); };
    sync();
    document.addEventListener('visibilitychange', sync);
  })();

  // ---- Icon set: rounded 2px stroke, matches brand ----
  const Icon = ({ name, size = 18, color = 'currentColor', style = {} }) => {
    const P = {
      dash: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z',
    };
    const paths = {
      dashboard: <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
      sparkle: <><path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z"/><path d="M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15z"/></>,
      campaign: <><path d="M3 11l16-7v16L3 13v-2z"/><path d="M7 12v5a2 2 0 002 2h1"/></>,
      users: <><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0111 0"/><path d="M16 5.2a3.2 3.2 0 010 5.6"/><path d="M17.5 20a5.5 5.5 0 00-3-4.9"/></>,
      report: <><path d="M5 3h9l5 5v13a1 1 0 01-1 1H5a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v5h5"/><path d="M8 14l2.5 2.5L16 11"/></>,
      inbox: <><path d="M4 13l2.5-8h11L20 13"/><path d="M4 13v6a1 1 0 001 1h14a1 1 0 001-1v-6"/><path d="M4 13h4l1.5 3h5L16 13h4"/></>,
      user: <><circle cx="12" cy="8" r="4"/><path d="M4.5 20a7.5 7.5 0 0115 0"/></>,
      wallet: <><rect x="3" y="6" width="18" height="14" rx="2.5"/><path d="M3 10h18"/><circle cx="17" cy="14" r="1.3"/></>,
      arrowRight: <path d="M5 12h14M13 6l6 6-6 6"/>,
      arrowLeft: <path d="M19 12H5M11 18l-6-6 6-6"/>,
      check: <path d="M5 12.5l4.5 4.5L19 7"/>,
      x: <path d="M6 6l12 12M18 6L6 18"/>,
      search: <><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>,
      link: <><path d="M9 15l6-6"/><path d="M11 6l1.5-1.5a4 4 0 015.7 5.7L16 12"/><path d="M13 18l-1.5 1.5a4 4 0 01-5.7-5.7L8 12"/></>,
      calendar: <><rect x="3.5" y="5" width="17" height="16" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/></>,
      bell: <><path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 20a2 2 0 004 0"/></>,
      target: <><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1"/></>,
      trending: <><path d="M3 16l5-5 4 4 8-8"/><path d="M15 7h5v5"/></>,
      shield: <><path d="M12 3l7 3v5c0 5-3 8-7 10-4-2-7-5-7-10V6l7-3z"/><path d="M9 12l2 2 4-4"/></>,
      play: <path d="M8 5v14l11-7L8 5z"/>,
      globe: <><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.5 2.5 14.5 0 17M12 3.5c-2.5 2.5-2.5 14.5 0 17"/></>,
      settings: <><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/></>,
      logout: <><path d="M15 4h3a1 1 0 011 1v14a1 1 0 01-1 1h-3"/><path d="M10 12h9M16 8l3 4-3 4"/></>,
      plus: <path d="M12 5v14M5 12h14"/>,
      chevronRight: <path d="M9 6l6 6-6 6"/>,
      dot: <circle cx="12" cy="12" r="3"/>,
      clock: <><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></>,
      camera: <><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 011 1v9a1 1 0 01-1 1H4a1 1 0 01-1-1V9a1 1 0 011-1z"/><circle cx="12" cy="13" r="3.2"/></>,
      heart: <path d="M12 20s-7-4.5-7-9.5A3.9 3.9 0 0112 8a3.9 3.9 0 017 2.5c0 5-7 9.5-7 9.5z"/>,
    };
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', flexShrink: 0, ...style }}>
        {paths[name] || paths.dot}
      </svg>
    );
  };

  // ---- Eyebrow (mono uppercase) ----
  const Eyebrow = ({ children, style = {} }) => (
    <div className="lk-eyebrow" style={style}>{children}</div>
  );

  // ---- Page header inside app main ----
  const PageHead = ({ eyebrow, title, desc, right }) => (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, marginBottom: 24, flexWrap: 'wrap' }}>
      <div>
        {eyebrow && <Eyebrow style={{ marginBottom: 8 }}>{eyebrow}</Eyebrow>}
        <h2 style={{ fontSize: 27, fontWeight: 700, margin: 0, letterSpacing: '-0.01em' }}>{title}</h2>
        {desc && <p style={{ margin: '9px 0 0', color: 'var(--text-secondary)', fontSize: 15, maxWidth: 620 }}>{desc}</p>}
      </div>
      {right}
    </div>
  );

  // ---- Right-side drawer ----
  const Drawer = ({ open, onClose, width = 520, children }) => {
    if (!open) return null;
    return (
      <div className="lk-overlay" onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(20,22,31,.42)', display: 'flex', justifyContent: 'flex-end' }}>
        <div className="lk-drawer" onClick={(e) => e.stopPropagation()} style={{ width, maxWidth: '94vw', height: '100%', background: 'var(--bg-surface)', boxShadow: 'var(--shadow-lg)', overflowY: 'auto' }}>
          {children}
        </div>
      </div>
    );
  };

  // ---- Centered modal ----
  const Modal = ({ open, onClose, width = 460, children }) => {
    if (!open) return null;
    return (
      <div className="lk-overlay" onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 70, background: 'rgba(20,22,31,.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
        <div className="lk-modal" onClick={(e) => e.stopPropagation()} style={{ width, maxWidth: '94vw', background: 'var(--bg-surface)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
          {children}
        </div>
      </div>
    );
  };

  // ---- Phone frame for mobile views ----
  const MobileFrame = ({ children, label }) => (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
      <div style={{ width: 390, height: 786, background: 'var(--ink-950)', borderRadius: 52, padding: 12, boxShadow: 'var(--shadow-lg)', flexShrink: 0 }}>
        <div style={{ position: 'relative', width: '100%', height: '100%', background: 'var(--bg-page)', borderRadius: 42, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 128, height: 30, background: 'var(--ink-950)', borderRadius: '0 0 18px 18px', zIndex: 20 }} />
          {children}
        </div>
      </div>
      {label && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</div>}
    </div>
  );

  // ---- Before/After skin bar ----
  const SkinBar = ({ label, before, after }) => (
    <div style={{ display: 'grid', gridTemplateColumns: '92px 1fr 46px', alignItems: 'center', gap: 12 }}>
      <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{label}</span>
      <div style={{ position: 'relative', height: 10, background: 'var(--ink-100)', borderRadius: 'var(--r-full)', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, width: before + '%', background: 'var(--ink-300)', borderRadius: 'var(--r-full)' }} />
        <div className="lk-bar" style={{ position: 'absolute', inset: 0, width: after + '%', background: 'var(--grad-brand)', borderRadius: 'var(--r-full)', transformOrigin: 'left' }} />
      </div>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600, color: 'var(--success-600)', textAlign: 'right' }}>+{after - before}</span>
    </div>
  );

  // ---- Toast ----
  const Toast = ({ show, children }) => (
    <div style={{ position: 'fixed', bottom: 28, left: '50%', transform: `translateX(-50%) translateY(${show ? '0' : '20px'})`, opacity: show ? 1 : 0, pointerEvents: 'none', transition: 'all .3s var(--ease-out)', zIndex: 90, background: 'var(--ink-900)', color: 'var(--text-on-ink)', padding: '13px 20px', borderRadius: 'var(--r-full)', boxShadow: 'var(--shadow-lg)', fontSize: 14, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 9 }}>
      {children}
    </div>
  );

  Object.assign(window, { Icon, Eyebrow, PageHead, Drawer, Modal, MobileFrame, SkinBar, Toast });
})();