// mockups/app-shell.jsx — Shared chrome used across product screens.
//   - <AppHeader> : top nav (logo, module title, user)
//   - <Sparkle>   : the Sophia ✨ icon
//   - <Logo>      : compact logo mark + wordmark
//
// Exports on window: AppHeader, Sparkle, Logo

function Logo({ size = 28, withWord = true }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <img
        src="../static/logo-mark.png"
        alt="EasyPro Plus"
        style={{
          width: size, height: size,
          flexShrink: 0,
          filter: 'drop-shadow(0 2px 6px rgba(0, 122, 255, 0.22))',
        }}
      />
      {withWord && (
        <div style={{
          fontSize: 15,
          fontWeight: 600,
          letterSpacing: -0.015,
          color: '#1d1d1f',
        }}>
          EasyPro <span style={{
            background: 'linear-gradient(120deg, #7a3cff, #5a6dff, #2257ff)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
          }}>Plus</span>
        </div>
      )}
    </div>
  );
}

function Sparkle({ size = 14, color = '#8b5cf6' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      <path d="M12 2 L13.5 9.5 L21 11 L13.5 12.5 L12 20 L10.5 12.5 L3 11 L10.5 9.5 Z"
            fill={color} />
      <circle cx="19" cy="5" r="1.3" fill={color} opacity="0.65"/>
      <circle cx="5" cy="19" r="1" fill={color} opacity="0.55"/>
    </svg>
  );
}

function AppHeader({ moduleName, moduleAccent = '#007AFF', moduleIcon = '📊', breadcrumbs = [] }) {
  return (
    <div style={{
      position: 'absolute',
      top: 0, left: 0, right: 0,
      height: 54,
      background: '#fff',
      borderBottom: '1px solid #e8e8ed',
      display: 'flex',
      alignItems: 'center',
      padding: '0 22px',
      gap: 18,
      zIndex: 5,
    }}>
      <Logo size={26} withWord={true} />

      {moduleName && (
        <>
          <div style={{ width: 1, height: 24, background: '#e8e8ed' }} />
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 8,
            padding: '6px 12px',
            background: `${moduleAccent}11`,
            border: `1px solid ${moduleAccent}33`,
            borderRadius: 999,
            color: moduleAccent,
            fontSize: 12,
            fontWeight: 600,
            letterSpacing: -0.005,
          }}>
            <span style={{ fontSize: 14 }}>{moduleIcon}</span>
            {moduleName}
          </div>
        </>
      )}

      {breadcrumbs.length > 0 && (
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 6,
          fontSize: 12,
          color: '#6e6e73',
          letterSpacing: -0.005,
        }}>
          {breadcrumbs.map((b, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span style={{ color: '#c7c7cf' }}>/</span>}
              <span style={{ color: i === breadcrumbs.length - 1 ? '#1d1d1f' : '#6e6e73' }}>{b}</span>
            </React.Fragment>
          ))}
        </div>
      )}

      <div style={{ flex: 1 }} />

      {/* User avatar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: '#6e6e73' }}>
        <span style={{ letterSpacing: -0.005 }}>Amelia</span>
        <div style={{
          width: 28, height: 28,
          borderRadius: '50%',
          background: 'linear-gradient(135deg, #5a6dff, #8b5cf6)',
          color: 'white',
          fontSize: 11,
          fontWeight: 600,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>A</div>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Sparkle, AppHeader });