/* ═════════════════════════════════════════════════════════
   Behavioral shared helpers
   Used by the 5 behavioral moments (Plannen - behavioral.html)
   — PulseCard: card-shaped Pulse message in the Stapel
   — PhoneFrame: compact iOS-ish lock-screen frame for push mockups
   — FooterEscape: the "Vandaag heb ik geen zin" link (moment 3)
   — ExplainerTag: small annotation arrow + caption for diagram callouts
   ═════════════════════════════════════════════════════════ */

/* Card-shaped Pulse message that can open-up with choice buttons.
   Used for the comeback prompt, guardrail, momentum-card etc.
   Props:
     tone: 'neutral' | 'warm' | 'warn'
     label: tiny label ('pulse', 'pulse · zondag ochtend', etc.)
     title: leading sentence
     body: secondary line(s)
     choices: [{ label, hint?, primary?, variant?: 'ghost'|'primary'|'danger' }]
     dismissable?: boolean (default false)
     onClose?: fn
*/
function PulseCard({ tone = 'neutral', label = 'pulse', title, body, children, choices, footer, dismissable, mood = 'encouraging' }) {
  const t = TK;
  const palette = {
    neutral: { bg: t.card, bd: t.border,                       accent: t.primary,     accentBg: 'rgba(0,180,216,0.10)', chip: t.primary },
    warm:    { bg: `linear-gradient(180deg, rgba(255,208,0,0.05), transparent)`,
                                                                bd: 'rgba(255,208,0,0.22)', accent: t.gold,         accentBg: 'rgba(255,208,0,0.10)', chip: t.gold },
    warn:    { bg: `linear-gradient(180deg, rgba(239,68,68,0.05), transparent)`,
                                                                bd: 'rgba(239,68,68,0.22)', accent: '#FCA5A5',     accentBg: 'rgba(239,68,68,0.10)', chip: '#FCA5A5' },
    calm:    { bg: `linear-gradient(180deg, rgba(157,78,221,0.04), transparent)`,
                                                                bd: 'rgba(157,78,221,0.22)', accent: '#C4B5FD',    accentBg: 'rgba(157,78,221,0.10)', chip: '#C4B5FD' },
  }[tone];

  return (
    <div style={{
      background: palette.bg, border: `1px solid ${palette.bd}`, borderRadius: 14,
      padding: '14px 16px 14px 14px', display: 'flex', gap: 14,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Left: Pulse mascot */}
      <div style={{ flexShrink: 0, paddingTop: 2 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 12,
          background: palette.accentBg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PulseMascot variant="glow" mood={mood} size="md" />
        </div>
      </div>

      {/* Right: content */}
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{
            fontSize: 9.5, fontWeight: 800, color: palette.chip,
            letterSpacing: 0.6, textTransform: 'uppercase',
          }}>{label}</span>
          <span style={{ flex: 1 }} />
          {dismissable && (
            <button style={{
              width: 22, height: 22, borderRadius: 6, background: 'transparent',
              border: 0, color: t.fgMute, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><I name="x" size={13} /></button>
          )}
        </div>
        {title && (
          <div style={{ fontSize: 15, fontWeight: 800, color: t.fg, lineHeight: 1.35, letterSpacing: '-0.005em' }}>
            {title}
          </div>
        )}
        {body && (
          <div style={{ fontSize: 12.5, color: t.fgDim, lineHeight: 1.55, fontWeight: 500 }}>
            {body}
          </div>
        )}
        {children}
        {choices && (
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
            {choices.map((c, i) => <ChoiceButton key={i} {...c} accent={palette.accent} />)}
          </div>
        )}
        {footer && (
          <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, marginTop: 2, fontStyle: 'italic' }}>
            {footer}
          </div>
        )}
      </div>
    </div>
  );
}

function ChoiceButton({ label, hint, variant = 'ghost', primary, accent }) {
  const t = TK;
  // all buttons visually equal — no single "primary" shouting
  const palette = variant === 'primary'
    ? { bg: accent || t.primary, fg: '#07090F', bd: 'transparent' }
    : variant === 'danger'
      ? { bg: t.card, fg: '#FCA5A5', bd: 'rgba(239,68,68,0.25)' }
      : { bg: t.card, fg: t.fg, bd: t.border };
  return (
    <button style={{
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 2,
      padding: '9px 14px', borderRadius: 10,
      background: palette.bg, color: palette.fg, border: `1px solid ${palette.bd}`,
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5, cursor: 'pointer',
      minWidth: 140,
    }}>
      <span>{label}</span>
      {hint && <span style={{ fontSize: 10.5, fontWeight: 600, color: variant === 'primary' ? '#07090F' : t.fgMute, letterSpacing: 0 }}>{hint}</span>}
    </button>
  );
}

/* iOS-like lock-screen frame for push notification mockups.
   Shows time + date, then a single notification card (or "silent" message).
   Props:
     time, date
     notification: { app, title?, body, sound?: bool, silent?: bool }
     dimmed?: bool
*/
function PhoneFrame({ time = '07:30', date = 'dinsdag 22 oktober', notification, caption, wallpaper = 'default' }) {
  const t = TK;
  const walls = {
    default: 'linear-gradient(160deg, #1a1130 0%, #0d1a2e 45%, #0a1020 100%)',
    morning: 'linear-gradient(170deg, #2a1845 0%, #1a2045 45%, #0d1625 100%)',
    quiet:   'linear-gradient(180deg, #0f1a2e 0%, #0a1120 100%)',
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <div style={{
        width: 264, height: 540, borderRadius: 38,
        background: '#000', padding: 10, boxSizing: 'border-box',
        boxShadow: '0 20px 44px rgba(0,0,0,0.5), inset 0 0 0 2px #222',
        position: 'relative',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 30,
          background: walls[wallpaper], overflow: 'hidden',
          position: 'relative', fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", Nunito, sans-serif',
        }}>
          {/* notch */}
          <div style={{
            position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
            width: 96, height: 22, borderRadius: 12, background: '#000', zIndex: 10,
          }} />
          {/* status bar */}
          <div style={{
            position: 'absolute', top: 10, left: 18, right: 18, display: 'flex',
            justifyContent: 'space-between', alignItems: 'center', color: '#fff',
            fontSize: 12, fontWeight: 700, zIndex: 11,
          }}>
            <span>09:41</span>
            <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <I name="signal" size={11} color="#fff" />
              <I name="wifi" size={11} color="#fff" />
              <div style={{ width: 20, height: 10, border: '1.2px solid #fff', borderRadius: 2, position: 'relative' }}>
                <div style={{ position: 'absolute', left: 1, top: 1, bottom: 1, width: 14, background: '#fff', borderRadius: 1 }} />
                <div style={{ position: 'absolute', right: -3, top: 3, bottom: 3, width: 2, background: '#fff', borderRadius: 1 }} />
              </div>
            </div>
          </div>
          {/* time + date (wallpaper area) */}
          <div style={{
            position: 'absolute', top: 58, left: 0, right: 0, textAlign: 'center', color: '#fff',
          }}>
            <div style={{ fontSize: 14, fontWeight: 500, opacity: 0.9 }}>{date}</div>
            <div style={{ fontFamily: '-apple-system, "SF Pro Display", system-ui', fontSize: 70, fontWeight: 200, lineHeight: 1.05, letterSpacing: '-0.02em', marginTop: 2 }}>{time}</div>
          </div>
          {/* notification stack */}
          <div style={{
            position: 'absolute', left: 12, right: 12, bottom: 92,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            {notification && <LockNotification {...notification} />}
          </div>
          {/* home indicator */}
          <div style={{
            position: 'absolute', bottom: 6, left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 4, borderRadius: 9999, background: 'rgba(255,255,255,0.4)',
          }} />
        </div>
      </div>
      {caption && (
        <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>
          {caption}
        </div>
      )}
    </div>
  );
}

function LockNotification({ app = 'SnapSnel', title, body, silent, badge }) {
  if (silent) {
    return (
      <div style={{
        background: 'rgba(22,28,48,0.55)', backdropFilter: 'blur(20px)',
        borderRadius: 14, padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'center',
        border: '1px solid rgba(255,255,255,0.06)',
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7, flexShrink: 0,
          background: 'linear-gradient(135deg, #0096C7, #005F7F)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="zap" size={14} color="#fff" fill="#fff" strokeWidth={0} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13, fontWeight: 600 }}>{app}</div>
          <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 11.5, fontWeight: 500, marginTop: 1, fontStyle: 'italic' }}>
            stille ochtend — alleen badge
          </div>
        </div>
        {typeof badge === 'number' && (
          <div style={{
            width: 22, height: 22, borderRadius: 9999, background: '#EF4444',
            color: '#fff', fontSize: 11, fontWeight: 800, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{badge}</div>
        )}
      </div>
    );
  }
  return (
    <div style={{
      background: 'rgba(22,28,48,0.75)', backdropFilter: 'blur(20px)',
      borderRadius: 14, padding: '10px 12px 11px',
      border: '1px solid rgba(255,255,255,0.08)',
    }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 6 }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6, flexShrink: 0,
          background: 'linear-gradient(135deg, #0096C7, #005F7F)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="zap" size={11} color="#fff" fill="#fff" strokeWidth={0} />
        </div>
        <span style={{ color: 'rgba(255,255,255,0.9)', fontSize: 11, fontWeight: 700, letterSpacing: 0.1, textTransform: 'uppercase' }}>{app}</span>
        <span style={{ flex: 1 }} />
        <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 10, fontWeight: 600 }}>nu</span>
      </div>
      {title && (
        <div style={{ color: '#fff', fontSize: 13.5, fontWeight: 700, lineHeight: 1.3, marginBottom: 2 }}>
          {title}
        </div>
      )}
      {body && (
        <div style={{ color: 'rgba(255,255,255,0.86)', fontSize: 12.5, fontWeight: 500, lineHeight: 1.4 }}>
          {body}
        </div>
      )}
    </div>
  );
}

/* Little explainer callout — dashed line + note. Used in the side-by-side
   mockups to point at UI bits. */
function Callout({ side = 'right', top = 40, label, width = 180, color = '#C4B5FD' }) {
  const t = TK;
  return (
    <div style={{
      position: 'absolute', top, [side]: -width - 30, width,
      pointerEvents: 'none', zIndex: 5,
    }}>
      <div style={{
        background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
        padding: '8px 10px', fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.4,
        boxShadow: '0 6px 18px rgba(0,0,0,0.3)',
      }}>
        <div style={{ width: 6, height: 6, borderRadius: 2, background: color, marginBottom: 4 }} />
        {label}
      </div>
    </div>
  );
}

/* Tiny-footer link in the Stapel — "Vandaag heb ik geen zin". */
function NoZinLink({ active = false }) {
  const t = TK;
  return (
    <button style={{
      background: 'transparent', border: 0, color: active ? t.fgDim : t.fgMute,
      fontSize: 11, fontWeight: 600, padding: '6px 2px',
      fontFamily: 'Nunito', cursor: 'pointer', textAlign: 'left',
      display: 'inline-flex', alignItems: 'center', gap: 6,
      borderRadius: 6,
      fontStyle: 'italic',
    }}>
      <span>vandaag heb ik geen zin</span>
      <I name="arrow-right" size={11} color={active ? t.fgDim : t.fgMute} />
    </button>
  );
}

/* Small stat chip for "tap-to-preview" consequences on choice buttons */
function PreviewChip({ label, color }) {
  const t = TK;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4, height: 18, padding: '0 7px',
      borderRadius: 6, background: t.cardHi, color: color || t.fgDim,
      fontSize: 9.5, fontWeight: 800, letterSpacing: 0.3,
    }}>{label}</span>
  );
}

/* Label for a state column (A · Rustige dag, B · Drukke dag, C · Stille ochtend) */
function StateHeader({ letter, title, subtitle, color = '#38BDF8' }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
      <div style={{
        width: 28, height: 28, borderRadius: 8, flexShrink: 0,
        background: `color-mix(in srgb, ${color} 22%, transparent)`,
        color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Fredoka One', fontSize: 13,
      }}>{letter}</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1 }}>{title}</div>
        {subtitle && <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 700, marginTop: 4, letterSpacing: 0.3 }}>{subtitle}</div>}
      </div>
    </div>
  );
}

window.PulseCard = PulseCard;
window.ChoiceButton = ChoiceButton;
window.PhoneFrame = PhoneFrame;
window.LockNotification = LockNotification;
window.Callout = Callout;
window.NoZinLink = NoZinLink;
window.PreviewChip = PreviewChip;
window.StateHeader = StateHeader;