// flow-atoms.jsx — reusable primitives for the BTC Now onboarding

// ═══ BRAND MARK ════════════════════════════════════════════════════════════
function BTCMark({ size = 22, showDot = true }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: "'Clash Display', 'Inter', sans-serif",
      fontWeight: 600, fontSize: size, letterSpacing: '-0.03em',
      color: '#F5F5F7',
    }}>
      {showDot && (
        <span style={{
          width: size * 0.45, height: size * 0.45, borderRadius: '50%',
          background: 'linear-gradient(135deg, #FFD60A 0%, #FF9F0A 50%, #FF453A 100%)',
          boxShadow: '0 0 12px rgba(255,159,10,0.6)',
          display: 'inline-block',
        }} />
      )}
      BTC <span style={{ color: '#FF9F0A', marginLeft: -3 }}>Now</span>
    </div>
  );
}

// ═══ PRIMARY BUTTON ════════════════════════════════════════════════════════
function PrimaryButton({ children, onClick, disabled, variant = 'gradient', fullWidth = true, style = {} }) {
  const [hover, setHover] = React.useState(false);
  const base = {
    fontFamily: "'Inter', system-ui, sans-serif",
    fontWeight: 600,
    fontSize: 16,
    letterSpacing: '-0.01em',
    border: 'none',
    borderRadius: 100,
    padding: '16px 24px',
    cursor: disabled ? 'not-allowed' : 'pointer',
    width: fullWidth ? '100%' : 'auto',
    transition: 'all 0.25s cubic-bezier(0.16, 1, 0.3, 1)',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    opacity: disabled ? 0.35 : 1,
    ...style,
  };
  if (variant === 'gradient') {
    return (
      <button onClick={disabled ? undefined : onClick}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          ...base,
          background: 'linear-gradient(135deg, #FFD60A 0%, #FF9F0A 50%, #FF6B1A 100%)',
          color: '#000',
          boxShadow: disabled ? 'none' :
            hover ? '0 0 40px rgba(255,159,10,0.55), 0 8px 24px rgba(255,69,58,0.3)'
                  : '0 0 24px rgba(255,159,10,0.35), 0 4px 16px rgba(255,69,58,0.2)',
          transform: hover && !disabled ? 'translateY(-1px)' : 'translateY(0)',
        }}>
        {children}
      </button>
    );
  }
  // ghost
  return (
    <button onClick={disabled ? undefined : onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        ...base,
        background: hover ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.03)',
        border: '1px solid rgba(255,255,255,0.12)',
        color: '#F5F5F7',
      }}>
      {children}
    </button>
  );
}

// ═══ SOCIAL BUTTON ═════════════════════════════════════════════════════════
function SocialButton({ provider, onClick }) {
  const [hover, setHover] = React.useState(false);
  const configs = {
    apple: { label: 'Continue with Apple', icon: (
      <svg width="18" height="20" viewBox="0 0 18 20" fill="currentColor"><path d="M14.94 10.58c-.03-2.77 2.26-4.11 2.37-4.17-1.3-1.89-3.3-2.15-4.01-2.18-1.71-.17-3.34 1-4.2 1-.88 0-2.21-.98-3.64-.95-1.87.03-3.6 1.09-4.56 2.76-1.95 3.37-.5 8.35 1.4 11.08.93 1.34 2.03 2.83 3.46 2.78 1.39-.06 1.91-.9 3.59-.9 1.66 0 2.15.9 3.62.86 1.5-.02 2.44-1.36 3.35-2.71 1.06-1.55 1.49-3.05 1.51-3.13-.03-.01-2.9-1.11-2.93-4.41zM12.19 2.55c.76-.92 1.27-2.2 1.13-3.47-1.09.04-2.41.73-3.19 1.65-.7.82-1.31 2.11-1.15 3.37 1.22.09 2.46-.62 3.21-1.55z"/></svg>
    )},
    google: { label: 'Continue with Google', icon: (
      <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.61 20.08H42V20H24v8h11.3c-1.65 4.66-6.08 8-11.3 8-6.63 0-12-5.37-12-12s5.37-12 12-12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.05 6.05 29.27 4 24 4 12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20c0-1.34-.14-2.65-.39-3.92z"/><path fill="#FF3D00" d="M6.31 14.69l6.57 4.82C14.66 15.11 18.96 12 24 12c3.06 0 5.84 1.15 7.96 3.04l5.66-5.66C34.05 6.05 29.27 4 24 4 16.32 4 9.66 8.34 6.31 14.69z"/><path fill="#4CAF50" d="M24 44c5.17 0 9.86-1.98 13.41-5.2l-6.19-5.24C29.2 35.09 26.72 36 24 36c-5.2 0-9.62-3.32-11.28-7.95l-6.52 5.02C9.5 39.56 16.23 44 24 44z"/><path fill="#1976D2" d="M43.61 20.08H42V20H24v8h11.3c-.79 2.24-2.23 4.17-4.09 5.56l6.19 5.24C36.97 37.02 44 31.5 44 24c0-1.34-.14-2.65-.39-3.92z"/></svg>
    )},
    x: { label: 'Continue with X', icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
    )},
    passkey: { label: 'Continue with Passkey', icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="10" cy="8" r="4"/><path d="M10.85 12.17a5 5 0 1 0-6.7 6.7L2 21h4v-2h2v-2h2.17A5 5 0 0 0 10.85 12.17z"/><circle cx="18" cy="8" r="1.5" fill="currentColor"/></svg>
    )},
    email: { label: 'Continue with email', icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
    )},
  };
  const cfg = configs[provider];
  return (
    <button onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: '100%', padding: '15px 20px',
        background: hover ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(255,255,255,0.1)',
        borderRadius: 100,
        color: '#F5F5F7',
        fontFamily: "'Inter', system-ui, sans-serif",
        fontSize: 15, fontWeight: 500,
        letterSpacing: '-0.01em',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        cursor: 'pointer',
        transition: 'all 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
      <span style={{ display: 'inline-flex', alignItems: 'center' }}>{cfg.icon}</span>
      {cfg.label}
    </button>
  );
}

// ═══ TEXT INPUT ════════════════════════════════════════════════════════════
function TextInput({ label, value, onChange, placeholder, type = 'text', autoFocus, prefix, inputMode, maxLength }) {
  const [focused, setFocused] = React.useState(false);
  const inputRef = React.useRef(null);
  React.useEffect(() => { if (autoFocus && inputRef.current) inputRef.current.focus(); }, [autoFocus]);
  return (
    <div style={{ width: '100%' }}>
      {label && (
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
          textTransform: 'uppercase',
          color: focused ? '#FF9F0A' : 'rgba(245,245,247,0.45)',
          marginBottom: 8, transition: 'color 0.2s',
        }}>{label}</div>
      )}
      <div style={{
        display: 'flex', alignItems: 'center',
        background: 'rgba(255,255,255,0.03)',
        border: `1px solid ${focused ? 'rgba(255,159,10,0.5)' : 'rgba(255,255,255,0.08)'}`,
        borderRadius: 14, padding: '14px 16px',
        transition: 'all 0.2s',
        boxShadow: focused ? '0 0 0 4px rgba(255,159,10,0.08)' : 'none',
      }}>
        {prefix && (
          <span style={{
            color: 'rgba(245,245,247,0.5)', fontSize: 16, fontWeight: 500,
            marginRight: 8, fontFamily: "'JetBrains Mono', monospace",
          }}>{prefix}</span>
        )}
        <input ref={inputRef}
          type={type} value={value}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
          placeholder={placeholder}
          inputMode={inputMode}
          maxLength={maxLength}
          style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: '#F5F5F7', fontSize: 16, fontWeight: 500,
            fontFamily: "'Inter', system-ui, sans-serif",
            letterSpacing: '-0.01em',
            minWidth: 0,
          }}
        />
      </div>
    </div>
  );
}

// ═══ SCREEN SHELL ══════════════════════════════════════════════════════════
// Full-bleed dark screen inside the iOS frame
function Screen({ children, style = {}, padTop = 56, padBottom = 34, padX = 24 }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#050507',
      backgroundImage: 'radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,159,10,0.06) 0%, transparent 60%)',
      color: '#F5F5F7',
      display: 'flex', flexDirection: 'column',
      padding: `${padTop}px ${padX}px ${padBottom}px`,
      boxSizing: 'border-box',
      position: 'relative',
      overflow: 'hidden',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ═══ PROGRESS BAR (top of screen) ══════════════════════════════════════════
function ProgressDots({ current, total }) {
  return (
    <div style={{
      position: 'absolute', top: 58, left: 24, right: 24,
      display: 'flex', gap: 4, zIndex: 5,
    }}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} style={{
          flex: 1, height: 3, borderRadius: 2,
          background: i < current ? 'linear-gradient(90deg, #FFD60A, #FF9F0A)' : 'rgba(255,255,255,0.08)',
          transition: 'background 0.4s',
        }} />
      ))}
    </div>
  );
}

// ═══ BACK BUTTON ═══════════════════════════════════════════════════════════
function BackButton({ onClick }) {
  return (
    <button onClick={onClick} style={{
      position: 'absolute', top: 72, left: 16, zIndex: 5,
      width: 36, height: 36, borderRadius: '50%',
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.08)',
      color: '#F5F5F7',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer',
    }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M19 12H5M12 19l-7-7 7-7"/>
      </svg>
    </button>
  );
}

// ═══ HEADING ═══════════════════════════════════════════════════════════════
function ScreenHeading({ eyebrow, title, subtitle }) {
  return (
    <div style={{ marginBottom: 28 }}>
      {eyebrow && (
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: '#FF9F0A', marginBottom: 12,
        }}>{eyebrow}</div>
      )}
      <h1 style={{
        fontFamily: "'Clash Display', 'Inter', sans-serif",
        fontSize: 34, fontWeight: 600, lineHeight: 1.05,
        letterSpacing: '-0.035em', color: '#fff',
        margin: 0, marginBottom: subtitle ? 10 : 0,
        textWrap: 'balance',
      }}>{title}</h1>
      {subtitle && (
        <p style={{
          fontSize: 15, lineHeight: 1.5,
          color: 'rgba(245,245,247,0.55)', margin: 0,
          letterSpacing: '-0.01em',
          textWrap: 'pretty',
        }}>{subtitle}</p>
      )}
    </div>
  );
}

// ═══ exports ═══════════════════════════════════════════════════════════════
Object.assign(window, {
  BTCMark, PrimaryButton, SocialButton, TextInput,
  Screen, ProgressDots, BackButton, ScreenHeading,
});