/* Navigation — Tab Bar + Home screen */

function TabBar({ activeTab, onTabChange, palette, isPro }) {
  const tabs = [
    { id: 'home', label: 'Home', icon: (c) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/>
        <path d="M9 21V13h6v8" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/>
      </svg>
    )},
    { id: 'learn', label: 'Learn', icon: (c) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M4 19.5A2.5 2.5 0 016.5 17H20" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z" stroke={c} strokeWidth="1.8" strokeLinejoin="round"/>
      </svg>
    )},
    { id: 'gallery', label: 'Gallery', icon: (c) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <rect x="3" y="3" width="7" height="7" rx="1.5" stroke={c} strokeWidth="1.8"/>
        <rect x="14" y="3" width="7" height="7" rx="1.5" stroke={c} strokeWidth="1.8"/>
        <rect x="3" y="14" width="7" height="7" rx="1.5" stroke={c} strokeWidth="1.8"/>
        <rect x="14" y="14" width="7" height="7" rx="1.5" stroke={c} strokeWidth="1.8"/>
      </svg>
    )},
    { id: 'settings', label: 'Settings', icon: (c) => (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="3" stroke={c} strokeWidth="1.8"/>
        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
          stroke={c} strokeWidth="1.8" strokeLinejoin="round"/>
      </svg>
    )},
  ];

  return (
    <div style={{
      display: 'flex', justifyContent: 'space-around',
      padding: '8px 0 22px', position: 'relative', zIndex: 50,
      borderTop: `1px solid ${palette.dim}18`,
      background: `${palette.bg1}dd`,
      backdropFilter: 'blur(16px)',
      WebkitBackdropFilter: 'blur(16px)',
    }}>
      {tabs.map(tab => {
        const active = activeTab === tab.id;
        const color = active ? palette.thick : palette.dim;
        return (
          <div key={tab.id} onClick={() => onTabChange(tab.id)} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            cursor: 'pointer', WebkitTapHighlightColor: 'transparent',
            padding: '4px 12px', touchAction: 'manipulation',
          }}>
            {tab.icon(color)}
            <span style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 9, letterSpacing: '0.08em',
              color, fontWeight: active ? 700 : 400,
            }}>{tab.label}</span>
          </div>
        );
      })}
    </div>
  );
}

function HomeScreen({ palette, onStartMode, onUpgrade, isPro, dailyBanner }) {
  const MODES = [
    {
      id: 'zen', label: 'ZEN', sub: 'Free reveal', detail: 'Infinite mosaic, no targets',
      icon: (
        <svg viewBox="-20 -20 40 40" width="44" height="44">
          <circle cx="0" cy="0" r="14" fill="none" stroke={palette.thick} strokeWidth="1.5" opacity="0.6"/>
          <circle cx="0" cy="0" r="6" fill={palette.thick} opacity="0.8"/>
        </svg>
      ),
      free: true,
    },
    {
      id: 'seeds', label: 'SEEDS', sub: 'Hunt hidden Suns', detail: 'Find all 5 tiles of each Sun pattern',
      icon: (
        <svg viewBox="-20 -20 40 40" width="44" height="44">
          <text x="0" y="5" textAnchor="middle" fontSize="22" fill="#FFD700">☀</text>
        </svg>
      ),
      free: false,
    },
    {
      id: 'levels', label: 'LEVELS', sub: 'Vertex Figures', detail: 'Chapter I — Master the 7 vertex types',
      icon: (
        <svg viewBox="-20 -20 40 40" width="44" height="44">
          {[0, 72, 144, 216, 288].map((a, i) => (
            <line key={i} x1="0" y1="0" x2={Math.cos(a * Math.PI / 180) * 15} y2={Math.sin(a * Math.PI / 180) * 15}
              stroke={palette.thin} strokeWidth="1.5" opacity="0.7"/>
          ))}
          <circle cx="0" cy="0" r="3" fill={palette.thin}/>
        </svg>
      ),
      free: true,
    },
  ];

  return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: '0 20px', gap: 20, position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Background */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.35, pointerEvents: 'none' }}>
        {window.BackgroundCanvas && <window.BackgroundCanvas palette={palette} />}
      </div>

      {/* Vignette for readability */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(ellipse at 50% 48%, ${palette.bg1}e0 0%, ${palette.bg1}a0 40%, ${palette.bg1}00 85%)`,
      }} />

      {/* Hero */}
      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
        <div style={{ animation: 'tessera-float 3.2s ease-in-out infinite' }}>
          {window.DynamicLogo && <window.DynamicLogo palette={palette} />}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
          <span style={{ width: 24, height: 1, background: palette.dim, opacity: 0.28 }} />
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
            letterSpacing: '0.44em', color: palette.dim,
          }}>APERIODIC MOSAIC</span>
          <span style={{ width: 24, height: 1, background: palette.dim, opacity: 0.28 }} />
        </div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace", fontSize: 40, fontWeight: 700,
          letterSpacing: '0.22em', color: palette.ink,
          textShadow: `0 0 48px ${palette.glow}66`,
        }}>PENROSE</div>
      </div>

      <div style={{ width: 32, height: 1, background: palette.dim, opacity: 0.2, position: 'relative' }} />

      {/* Daily Mosaic */}
      {dailyBanner && <div style={{ width: '100%', maxWidth: 340, position: 'relative' }}>{dailyBanner}</div>}

      {/* Mode cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%', maxWidth: 340, position: 'relative' }}>
        {MODES.map(({ id, label, sub, detail, icon, free }) => {
          const locked = !free && !isPro;
          return (
            <button key={id} onClick={() => locked ? onUpgrade() : onStartMode(id)} style={{
              width: '100%', borderRadius: 16, border: `1px solid ${palette.dim}33`,
              background: `${palette.bg2}88`, cursor: 'pointer',
              display: 'flex', alignItems: 'center', padding: '12px 14px', gap: 12,
              WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation',
              opacity: locked ? 0.6 : 1,
              backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 14, flexShrink: 0,
                background: `${palette.dim}12`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{icon}</div>
              <div style={{ flex: 1, textAlign: 'left' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700,
                    letterSpacing: '0.18em', color: palette.ink,
                  }}>{label}</span>
                  {locked && (
                    <span style={{
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 8,
                      letterSpacing: '0.14em', color: palette.thick,
                      padding: '2px 6px', borderRadius: 4,
                      background: `${palette.thick}18`, fontWeight: 700,
                    }}>PRO</span>
                  )}
                </div>
                <div style={{
                  fontFamily: "'Manrope', sans-serif", fontSize: 12, color: palette.dim,
                  marginTop: 2,
                }}>{detail}</div>
              </div>
              <svg width="7" height="12" viewBox="0 0 7 12" style={{ flexShrink: 0 }}>
                <path d="M1 1l5 5-5 5" fill="none" stroke={palette.dim} strokeWidth="1.5"
                  strokeLinecap="round" strokeLinejoin="round" opacity="0.5" />
              </svg>
            </button>
          );
        })}
      </div>

      {/* Pro banner for free users */}
      {!isPro && (
        <button onClick={onUpgrade} style={{
          width: '100%', maxWidth: 340, borderRadius: 14, border: `1px solid ${palette.thick}44`,
          background: `linear-gradient(135deg, ${palette.thick}12, ${palette.thin}08)`,
          cursor: 'pointer', display: 'flex', alignItems: 'center', padding: '10px 16px', gap: 10,
          WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation',
          position: 'relative',
        }}>
          <span style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 16, lineHeight: 1,
          }}>✦</span>
          <span style={{ flex: 1, textAlign: 'left' }}>
            <span style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700,
              letterSpacing: '0.16em', color: palette.thick,
            }}>Tessera Pro</span>
            <span style={{
              fontFamily: "'Manrope', sans-serif", fontSize: 11, color: palette.dim,
              marginLeft: 8,
            }}>All modes & themes</span>
          </span>
          <svg width="7" height="12" viewBox="0 0 7 12">
            <path d="M1 1l5 5-5 5" fill="none" stroke={palette.thick} strokeWidth="1.5"
              strokeLinecap="round" strokeLinejoin="round" opacity="0.6" />
          </svg>
        </button>
      )}
    </div>
  );
}

window.TabBar = TabBar;
window.HomeScreen = HomeScreen;