// Shared bottom tab bar for landing-page phone animations
// Loaded BEFORE landing-plan-anim.jsx, landing-recipes-anim.jsx, landing-shop-anim.jsx
// Exposes window.LandingTabBar({ active, transitioningTo })

const LTB_C = {
  ink:   'var(--ink-900, #1f1f1c)',
  ink3:  'var(--ink-500, #76736a)',
  paper: 'var(--paper-50, #faf6e9)',
  sage:  'var(--sage-700, #4f7a3a)',
};

const LTBIcon = ({ name, size = 22, color, stroke }) => {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'today') return <svg {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>;
  if (name === 'plan')  return <svg {...p}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
  if (name === 'book')  return <svg {...p}><path d="M5 4h11a3 3 0 0 1 3 3v13a1 1 0 0 1-1 1H8a3 3 0 0 1-3-3V4z"/><path d="M5 17a2 2 0 0 1 2-2h12"/></svg>;
  if (name === 'shop')  return <svg {...p}><path d="M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>;
  return null;
};

window.LandingTabBar = ({ active, transitioningTo }) => {
  const tabs = [['today','Today'], ['plan','Plan'], ['book','Recipes'], ['shop','Shopping']];
  return (
    <div style={{
      position: 'absolute', bottom: 14, left: 14, right: 14,
      height: 58, borderRadius: 22,
      background: 'rgba(250,246,233,0.78)',
      backdropFilter: 'blur(20px) saturate(140%)',
      WebkitBackdropFilter: 'blur(20px) saturate(140%)',
      boxShadow: '0 1px 2px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.10), inset 0 0 0 1px rgba(31,31,28,.04)',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      padding: '0 8px', zIndex: 15,
    }}>
      {tabs.map(([k, label]) => {
        const isActive = active === k;
        const isTransitioning = transitioningTo === k;
        const color = (isActive || isTransitioning) ? LTB_C.sage : LTB_C.ink3;
        const stroke = (isActive || isTransitioning) ? 2 : 1.6;
        return (
          <div key={k} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 3, color: (isActive || isTransitioning) ? LTB_C.ink : LTB_C.ink3,
            transition: 'color 280ms ease', position: 'relative',
          }}>
            <LTBIcon name={k} size={22} color={color} stroke={stroke} />
            <span style={{
              fontFamily: 'var(--font-sans, system-ui)', fontSize: 9, fontWeight: 600,
              letterSpacing: '.04em',
            }}>{label}</span>
            {isTransitioning && (
              <React.Fragment>
                <div style={{
                  position: 'absolute', top: 2, left: '50%',
                  width: 44, height: 44, marginLeft: -22, borderRadius: '50%',
                  background: 'rgba(79,122,58,0.18)',
                  animation: 'ltbTapPulse 850ms ease-out',
                  pointerEvents: 'none',
                }} />
                <div style={{
                  position: 'absolute', top: 2, left: '50%',
                  width: 44, height: 44, marginLeft: -22, borderRadius: '50%',
                  border: `2px solid ${LTB_C.sage}`,
                  animation: 'ltbTapRing 850ms ease-out',
                  pointerEvents: 'none',
                }} />
              </React.Fragment>
            )}
          </div>
        );
      })}
    </div>
  );
};

(function injectLTBKeyframes() {
  if (document.getElementById('ltb-keyframes')) return;
  const s = document.createElement('style');
  s.id = 'ltb-keyframes';
  s.textContent = `
    @keyframes ltbTapPulse { 0% { transform: scale(0.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
    @keyframes ltbTapRing  { 0% { transform: scale(0.5); opacity: 0.95; } 100% { transform: scale(1.7); opacity: 0; } }
  `;
  document.head.appendChild(s);
})();