/* Kennedy Grace website — shared building blocks.
   Exports to window so the screen files can use them. */

const { Badge } = window.KennedyGraceDesignSystem_5322af;

/* Gradient + emoji photo placeholder (stands in for real photos/video stills) */
function PhotoTile({ emoji = '📸', grad = 'var(--grad-cotton)', ratio = '1 / 1', radius = 'var(--radius-md)', badge, views, label, style }) {
  return (
    <div style={{
      position: 'relative', aspectRatio: ratio, borderRadius: radius,
      background: grad, overflow: 'hidden', display: 'flex',
      alignItems: 'center', justifyContent: 'center', ...style,
    }}>
      <span style={{ fontSize: '2rem', opacity: 0.92, filter: 'drop-shadow(0 2px 6px rgba(0,0,0,.15))' }} aria-hidden="true">{emoji}</span>
      {badge && <div style={{ position: 'absolute', left: 8, bottom: 8 }}>{badge}</div>}
      {views && (
        <div style={{
          position: 'absolute', right: 8, bottom: 8, display: 'flex', alignItems: 'center', gap: 4,
          color: '#fff', font: 'var(--text-caps)', fontFamily: 'var(--font-body)',
          textShadow: '0 1px 3px rgba(0,0,0,.4)',
        }}>▶ {views}</div>
      )}
      {label && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 10px 8px',
          color: '#fff', font: 'var(--text-body-bold)', fontSize: 'var(--fs-sm)',
          background: 'linear-gradient(transparent, rgba(0,0,0,.45))',
        }}>{label}</div>
      )}
    </div>
  );
}

/* Section header with a little sticker accent */
function SectionTitle({ children, accent }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '4px 4px 12px' }}>
      <h2 style={{ margin: 0, font: 'var(--text-h3)', fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)', color: 'var(--text-strong)' }}>{children}</h2>
      {accent && <span aria-hidden="true" style={{ fontSize: '1.1rem' }}>{accent}</span>}
    </div>
  );
}

/* Sticky bottom tab bar */
function BottomNav({ tab, onChange }) {
  const tabs = [
    { id: 'home', emoji: '🏠', label: 'Home' },
    { id: 'videos', emoji: '🎬', label: 'Videos' },
    { id: 'about', emoji: '🎀', label: 'About' },
  ];
  return (
    <nav className="tabbar" style={{
      position: 'sticky', bottom: 0, zIndex: 5, marginTop: 'auto',
      display: 'flex', gap: 4, padding: '8px 10px calc(8px + env(safe-area-inset-bottom))',
      background: 'rgba(255,255,255,0.86)', backdropFilter: 'blur(12px)',
      borderTop: '1.5px solid var(--border-soft)',
    }}>
      {tabs.map(t => {
        const active = tab === t.id;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            padding: '6px 0', border: 'none', background: 'transparent', cursor: 'pointer',
            borderRadius: 'var(--radius-md)',
          }}>
            <span style={{ fontSize: '1.3rem', transform: active ? 'scale(1.15)' : 'none', transition: 'transform var(--dur-base) var(--ease-spring)' }} aria-hidden="true">{t.emoji}</span>
            <span style={{ font: 'var(--text-caps)', fontFamily: 'var(--font-body)', color: active ? 'var(--brand)' : 'var(--text-muted)' }}>{t.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

Object.assign(window, { PhotoTile, SectionTitle, BottomNav });