// tgp-header-nav.jsx v2 — PageHeader + BottomNav

// Page header — bold display title, minimal top bar
const PageHeader = ({ title, sub, onChat, onSearch, onProfileOpen, avatarSrc, rightAction }) => (
  <div style={{ background: '#F2F2F7', paddingTop: 'max(16px, env(safe-area-inset-top))' }}>
    {/* Top bar: chat + search left, avatar right */}
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 20px', marginBottom: 12 }}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        {/* Chat — icon only */}
        <div style={{ position: 'relative' }}>
          <button onClick={onChat} style={{
            width: 32, height: 32, border: 'none', background: 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', color: '#020100', padding: 0,
          }}>
            <Ico.Msg size={22} />
          </button>
          <span style={{
            position: 'absolute', top: -2, left: -4, minWidth: 16, height: 16, padding: '0 4px',
            background: '#FF3B30', borderRadius: 999,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 9, fontWeight: 700, color: '#fff', fontFamily: 'Inter, system-ui, sans-serif',
            pointerEvents: 'none',
          }}>3</span>
        </div>
        {/* Search — icon only */}
        <button onClick={onSearch} style={{
          width: 32, height: 32, border: 'none', background: 'transparent',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer', color: '#020100', padding: 0,
        }}>
          <Ico.Search size={22} />
        </button>
      </div>
      <img src={IMG.joep} alt="" onClick={onProfileOpen} style={{ width: 44, height: 44, borderRadius: '50%', objectFit: 'cover', cursor: 'pointer' }} />
    </div>
    {/* Display title */}
    <div style={{ padding: '0 20px 16px' }}>
      {title === 'The Greater Plan' ? (
        <h1 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontWeight: 400, fontSize: 46, letterSpacing: '-1.2px',
          color: '#020100', margin: 0, lineHeight: 1.0,
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          {title}
          <span style={{ display: 'inline-flex', transform: 'translateY(-8px)' }}>
            <LogoSVG active={false} size={22} />
          </span>
        </h1>
      ) : (
        <DisplayTitle style={{ marginBottom: sub ? 0 : 0 }}>{title}</DisplayTitle>
      )}
      {sub && <p style={{ fontSize: 13, color: '#8E8E93', margin: '4px 0 0', fontFamily: 'Inter, system-ui, sans-serif' }}>{sub}</p>}
    </div>
  </div>
);

// Logo — hand-drawn organic oval ring with a solid inner dot
const LogoSVG = ({ active, size = 34 }) => {
  const color = active ? '#fff' : '#020100';
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
      {/* Irregular oval ring — asymmetric control points give the drawn-by-hand feel */}
      <path
        d="M 46 9 C 66 6 89 18 93 44 C 96 68 82 92 54 93 C 28 95 8 79 7 52 C 5 28 21 11 46 9 Z"
        stroke={color} strokeWidth="10.5" strokeLinejoin="round" strokeLinecap="round" fill="none"
      />
      {/* Solid inner dot — slightly above geometric center, matches the reference */}
      <circle cx="50" cy="49" r="12" fill={color} />
    </svg>
  );
};

// Nav icons — circle family: 1 / 2 / 5 circles (consistent line style)
const NavPersonIcon  = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <circle cx="12" cy="12" r="8"/>
  </svg>
);
const NavProjectIcon = () => (
  <svg width="26" height="24" viewBox="0 0 24 20" fill="none" stroke="currentColor" strokeWidth="2">
    <circle cx="9" cy="10" r="6.5"/>
    <circle cx="15" cy="10" r="6.5"/>
  </svg>
);
const NavCommIcon    = () => (
  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <circle cx="12"   cy="8"     r="4"/>
    <circle cx="15.8" cy="10.76" r="4"/>
    <circle cx="14.35" cy="15.24" r="4"/>
    <circle cx="9.65"  cy="15.24" r="4"/>
    <circle cx="8.2"  cy="10.76" r="4"/>
  </svg>
);
const NavMenuIcon    = () => <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="5" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1.5" fill="currentColor" stroke="none"/></svg>;

const NAV_ITEMS = [
  { id: 'personal',  label: 'Personal Plan',  Icon: NavPersonIcon },
  { id: 'projects',  label: 'Project Plan',   Icon: NavProjectIcon },
  { id: 'community', label: 'Community Plan', Icon: NavCommIcon },
];

// Menu popup (inspired by clean white popover style)
const MenuPopup = ({ onClose }) => {
  const items = [
    { icon: Ico.Gear,     label: 'Instellingen' },
    { icon: Ico.Help,     label: 'Help & FAQ' },
    { icon: Ico.UserPlus, label: 'Uitnodigen' },
    { icon: Ico.Info,     label: 'Over The Greater Plan' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 100, left: '50%', transform: 'translateX(-50%)',
      background: '#fff', borderRadius: 18, padding: 6,
      boxShadow: '0 8px 40px rgba(0,0,0,0.20)', zIndex: 100, minWidth: 210,
    }}>
      {items.map(({ icon: Icon, label }, i) => (
        <div key={label}>
          <button onClick={onClose} style={{
            display: 'flex', alignItems: 'center', gap: 14, width: '100%',
            padding: '12px 14px', borderRadius: 12, border: 'none', background: 'transparent',
            cursor: 'pointer', color: '#020100', fontSize: 14, fontWeight: 500,
            fontFamily: 'Inter, system-ui, sans-serif', textAlign: 'left',
          }}
            onMouseEnter={e => e.currentTarget.style.background = '#F2F2F7'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
          >
            <div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(116,116,128,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon size={15} color="#8E8E93" />
            </div>
            {label}
          </button>
          {i < items.length - 1 && <div style={{ height: 1, background: 'rgba(60,60,67,0.1)', margin: '0 14px' }} />}
        </div>
      ))}
    </div>
  );
};

// Bottom nav — feed circle on the left, dark pill (Personal / Projecten / Community) on the right
const BottomNav = ({ page, onPageChange, menuOpen, onMenuToggle }) => {
  const feedActive = page === 'feed';
  return (
    <div style={{
      position: 'absolute', bottom: 'max(18px, env(safe-area-inset-bottom))', left: 0, right: 0,
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      gap: 10, zIndex: 50, pointerEvents: 'none',
    }}>
      {/* Feed button — circular when off feed, expands to a pill with "The Greater Plan" label when on feed */}
      <button
        onClick={() => onPageChange('feed')}
        style={{
          height: 60,
          minWidth: 60,
          width: feedActive ? 'auto' : 60,
          padding: feedActive ? '0 22px 0 14px' : 0,
          borderRadius: 999,
          border: feedActive ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(0,0,0,0.25)',
          background: feedActive
            ? 'linear-gradient(180deg, #FFFFFF 0%, #EEEDE8 100%)'
            : 'linear-gradient(180deg, #1F1D1A 0%, #020100 100%)',
          boxShadow: feedActive
            ? 'inset 0 1px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(0,0,0,0.05), 0 3px 0 rgba(180,175,165,0.5), 0 6px 14px rgba(0,0,0,0.12)'
            : 'inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), 0 3px 0 rgba(0,0,0,0.4), 0 6px 14px rgba(0,0,0,0.25)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          cursor: 'pointer', pointerEvents: 'all', transition: 'all 0.2s', flexShrink: 0,
          color: '#020100',
        }}
      >
        <LogoSVG active={!feedActive} size={32} />
        {feedActive && (
          <span style={{
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontSize: 17, fontWeight: 400, letterSpacing: '-0.2px', lineHeight: 1,
            color: '#020100', whiteSpace: 'nowrap',
          }}>The Greater Plan</span>
        )}
      </button>

      {/* Dark pill with Personal / Projecten / Community */}
      <div style={{
        background: '#020100', borderRadius: 999,
        boxShadow: '0 4px 20px rgba(0,0,0,0.18)',
        display: 'flex', alignItems: 'center', padding: 5,
        gap: 2, pointerEvents: 'all',
      }}>
        {NAV_ITEMS.map(({ id, label, Icon }) => {
          const isActive = page === id && !feedActive;
          return (
            <button
              key={id}
              onClick={() => onPageChange(id)}
              style={{
                display: 'flex', alignItems: 'center', gap: 8,
                padding: isActive ? '10px 16px 10px 13px' : '11px 13px',
                borderRadius: 999, border: 'none',
                background: isActive ? '#FFFFFF' : 'transparent',
                color: isActive ? '#020100' : 'rgba(255,255,255,0.72)',
                cursor: 'pointer', transition: 'all 0.18s',
                fontFamily: '"Instrument Serif", Georgia, serif',
                fontSize: 17, fontWeight: 400, letterSpacing: '-0.2px',
              }}
            >
              <Icon />
              {isActive && <span style={{ lineHeight: 1 }}>{label}</span>}
            </button>
          );
        })}
      </div>

      {menuOpen && <MenuPopup onClose={onMenuToggle} />}
    </div>
  );
};

Object.assign(window, { PageHeader, BottomNav, LogoSVG, MenuPopup });