/* global React */
const { useState: useStateA, useEffect: useEffectA } = React;

// ─── Logo ──────────────────────────────────────────────
function Logo({ height = 36, mono = false }) {
  const src = (window.__resources && (mono ? window.__resources.logoMono : window.__resources.logoColor)) ||
              (mono ? 'assets/logo-kmucare-mono.svg?v=7hex-blue' : 'assets/logo-kmucare.svg?v=7hex-blue');
  return <img src={src} height={height} alt="KMUcare" style={{ display: 'block' }} />;
}

// ─── Icon (lucide-style line icons, inline) ───────────
function Icon({ name, size = 24, color = 'currentColor', strokeWidth = 1.75, style }) {
  const paths = {
    'hard-drive': <g><rect x="2" y="14" width="20" height="8" rx="2"/><rect x="2" y="2" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></g>,
    'server':     <g><rect x="2" y="2"  width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></g>,
    'wifi':       <g><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></g>,
    'shield':     <g><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></g>,
    'database':   <g><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></g>,
    'activity':   <g><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></g>,
    'compass':    <g><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></g>,
    'receipt':    <g><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z"/><path d="M16 8H8"/><path d="M16 12H8"/><path d="M13 16H8"/></g>,
    'phone':      <g><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></g>,
    'mail':       <g><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22,6 12,13 2,6"/></g>,
    'arrow-right':<g><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></g>,
    'arrow-up-right': <g><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></g>,
    'check':      <g><polyline points="20 6 9 17 4 12"/></g>,
    'menu':       <g><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></g>,
    'x':          <g><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></g>,
    'map-pin':    <g><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></g>,
    'clock':      <g><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></g>,
    'sparkle':    <g><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4"/></g>,
    'users':      <g><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></g>,
    'leaf':       <g><path d="M11 20A7 7 0 0 1 4 13c0-4 3-7 7-7 5 0 9 3 9 9 0 4-2 5-5 5"/><path d="M2 22c2-3 6-5 10-5"/></g>,
    'heart':      <g><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></g>,
    'send':       <g><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></g>,
    'globe':      <g><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></g>,
    'briefcase':  <g><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></g>,
    'coffee':     <g><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></g>,
    'tool':       <g><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></g>,
    'eye':        <g><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></g>,
    'lock':       <g><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></g>,
    'file-text':  <g><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></g>,
    'monitor':    <g><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></g>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block', ...(style||{}) }}>
      {paths[name] || null}
    </svg>
  );
}

// ─── Button ────────────────────────────────────────────
function Button({ children, variant = 'primary', size = 'md', icon, onClick, type='button', as = 'button', href }) {
  const sizes = {
    sm: { padding: '8px 16px', fontSize: 13 },
    md: { padding: '12px 22px', fontSize: 15 },
    lg: { padding: '16px 28px', fontSize: 17 },
  };
  const variants = {
    primary:   { background: 'var(--kmu-blue)', color: '#fff', border: 'none' },
    secondary: { background: 'transparent', color: 'var(--fg-1)', border: '1px solid var(--kmu-line-strong)' },
    ghost:     { background: 'transparent', color: 'var(--kmu-blue)', border: 'none' },
    onDark:    { background: '#fff', color: 'var(--fg-1)', border: 'none' },
  };
  const style = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: 'var(--font-sans)', fontWeight: 600,
    borderRadius: 999, cursor: 'pointer',
    transition: 'all 200ms var(--ease-out)',
    textDecoration: 'none',
    ...sizes[size], ...variants[variant],
  };
  const content = <>{children}{icon && <Icon name={icon} size={size === 'sm' ? 14 : 16} />}</>;
  if (as === 'a') return <a href={href} style={style} onClick={onClick}>{content}</a>;
  return <button type={type} onClick={onClick} style={style}
    onMouseEnter={(e) => {
      if (variant === 'primary') { e.currentTarget.style.background = 'var(--kmu-blue-700)'; e.currentTarget.style.boxShadow = 'var(--shadow-blue)'; }
      else if (variant === 'secondary') { e.currentTarget.style.borderColor = 'var(--kmu-blue)'; e.currentTarget.style.color = 'var(--kmu-blue)'; }
      else if (variant === 'onDark') { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.background = variants[variant].background;
      e.currentTarget.style.color = variants[variant].color;
      e.currentTarget.style.boxShadow = '';
      e.currentTarget.style.transform = '';
      if (variants[variant].border) e.currentTarget.style.borderColor = variants[variant].border.split(' ')[2];
    }}
  >{content}</button>;
}

// ─── Topographic SVG (reusable) ────────────────────────
function Topo({ opacity = 0.55, color = '#cfd9e0' }) {
  return (
    <svg viewBox="0 0 1600 700" preserveAspectRatio="xMidYMid slice" aria-hidden
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity, pointerEvents: 'none' }}>
      <g fill="none" stroke={color} strokeWidth="1">
        {Array.from({ length: 14 }).map((_, i) => {
          const offset = i * 26;
          return (
            <path key={i}
              d={`M -50 ${320 + offset - 180} C 250 ${260 + offset - 180}, 520 ${420 + offset - 180}, 820 ${340 + offset - 180} S 1380 ${260 + offset - 180}, 1700 ${360 + offset - 180}`}
            />
          );
        })}
      </g>
    </svg>
  );
}

// ─── Pulse line ────────────────────────────────────────
function Pulse({ width = '100%', height = 60, color = 'var(--kmu-blue)' }) {
  return (
    <svg viewBox="0 0 480 80" width={width} height={height} preserveAspectRatio="none" style={{ display: 'block' }}>
      <line x1="0" y1="40" x2="480" y2="40" stroke="#cfd9e0" strokeWidth="1" strokeDasharray="2 4"/>
      <path d="M0 40 L80 40 L100 40 L115 14 L130 66 L150 8 L170 70 L185 40 L240 40 L255 40 L270 22 L285 60 L305 40 L480 40"
            fill="none" stroke={color} strokeWidth="2.2"
            strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// ─── Section / Container ───────────────────────────────
function Section({ id, bg = '#fff', pad = '96px 24px', children, label, style }) {
  return (
    <section id={id} data-screen-label={label} style={{ background: bg, padding: pad, position: 'relative', ...(style||{}) }}>
      {children}
    </section>
  );
}
function Container({ children, max = 1200, style }) {
  return (
    <div style={{ maxWidth: max, margin: '0 auto', position: 'relative', ...(style||{}) }}>
      {children}
    </div>
  );
}

// ─── Eyebrow ───────────────────────────────────────────
function Eyebrow({ children, dot = false }) {
  return (
    <div className="kmu-eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--kmu-blue)' }}/>}
      {children}
    </div>
  );
}

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