// Memoriz primitives — shared icons, logo, page indicator, status bar
const { useState, useEffect, useRef, useMemo } = React;

const MemorizLogo = ({ size = 36 }) => (
  <img
    src="assets/logo-memoriz.svg"
    alt="Memoriz"
    style={{ height: size, width: 'auto', display: 'inline-block' }}
  />
);

const Icon = ({ name, size = 22, color = 'currentColor', stroke = 1.7 }) => {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'back':    return <svg {...common}><path d="M15 18l-6-6 6-6"/></svg>;
    case 'check':   return <svg {...common}><path d="M5 12l4 4L19 6"/></svg>;
    case 'plus':    return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'shield':  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 3l8 4v5c0 4.6-3.3 8.6-8 10-4.7-1.4-8-5.4-8-10V7l8-4z"/></svg>;
    case 'lock':    return <svg {...common}><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 018 0v3"/></svg>;
    case 'sparkle': return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 3l1.6 5L19 9.7l-5.4 1.7L12 17l-1.6-4.6L5 9.7 10.4 8 12 3z"/></svg>;
    case 'sparkle-line': return <svg {...common}><path d="M12 3l1.6 5L19 9.7l-5.4 1.7L12 17l-1.6-4.6L5 9.7 10.4 8 12 3z"/></svg>;
    case 'heart':   return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><path d="M12 21s-7-4.5-9-9c-1.4-3.2 1-7 4.5-7 2.2 0 3.6 1.2 4.5 3 .9-1.8 2.3-3 4.5-3 3.5 0 5.9 3.8 4.5 7-2 4.5-9 9-9 9z"/></svg>;
    case 'timeline':return <svg {...common}><circle cx="12" cy="6" r="2"/><path d="M12 8v3M12 14v3"/><circle cx="12" cy="13" r="1.2" fill={color} stroke="none"/><circle cx="12" cy="18" r="2"/></svg>;
    case 'user':    return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7" stroke={color} strokeWidth="0"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7H4z"/></svg>;
    default: return null;
  }
};

// iOS-style status bar
const StatusBar = ({ color = '#1A1A1A' }) => (
  <div className="status-bar" style={{ color }}>
    <span style={{ fontFeatureSettings: '"tnum"', fontVariantNumeric: 'tabular-nums' }}>9:41</span>
    <span className="right">
      {/* Signal */}
      <svg width="18" height="11" viewBox="0 0 18 11" fill={color}>
        <rect x="0" y="7" width="3" height="4" rx="1"/>
        <rect x="5" y="5" width="3" height="6" rx="1"/>
        <rect x="10" y="2" width="3" height="9" rx="1"/>
        <rect x="15" y="0" width="3" height="11" rx="1"/>
      </svg>
      {/* Wifi */}
      <svg width="17" height="12" viewBox="0 0 17 12" fill={color}>
        <path d="M8.5 2.5C5.5 2.5 2.8 3.6 .7 5.5c-.3.3-.3.7 0 1l1 1c.3.3.7.3 1 0 1.6-1.5 3.6-2.3 5.8-2.3s4.2.8 5.8 2.3c.3.3.7.3 1 0l1-1c.3-.3.3-.7 0-1C14.2 3.6 11.5 2.5 8.5 2.5z" opacity=".5"/>
        <path d="M8.5 6c-1.6 0-3 .6-4.1 1.6-.3.3-.3.7 0 1l.9.9c.3.3.7.3 1 0 .6-.6 1.4-.9 2.3-.9s1.7.3 2.3.9c.3.3.7.3 1 0l.9-.9c.3-.3.3-.7 0-1C11.5 6.6 10.1 6 8.5 6z"/>
        <circle cx="8.5" cy="10.5" r="1.2"/>
      </svg>
      {/* Battery */}
      <svg width="27" height="12" viewBox="0 0 27 12" fill="none">
        <rect x="1" y="1" width="22" height="10" rx="2.5" stroke={color} strokeOpacity=".5" strokeWidth="1"/>
        <rect x="3" y="3" width="18" height="6" rx="1" fill={color}/>
        <rect x="24" y="4" width="2" height="4" rx="1" fill={color} fillOpacity=".5"/>
      </svg>
    </span>
  </div>
);

const TopNav = ({ step, total, onBack, hideBack = false }) => (
  <div className="topnav">
    {!hideBack && (
      <button className="back" onClick={onBack} aria-label="Back">
        <Icon name="back" size={22} stroke={2.2} />
      </button>
    )}
    <div className="progress">
      {Array.from({ length: total }).map((_, i) => (
        <div className="bar" key={i}>
          <div className="fill" style={{ width: i < step ? '100%' : (i === step ? '40%' : '0%') }} />
        </div>
      ))}
    </div>
  </div>
);

Object.assign(window, { MemorizLogo, Icon, StatusBar, TopNav });