// BottomNav variant — Trees swapped out for Folk per the brief.
// 5 slots: Forests · Folk · Plant · Sunlight · You
// Plant FAB hides on Folk tab (per product call).

function UsersRoundIcon({ size = 22, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 21a8 8 0 0 0-16 0"/>
      <circle cx="10" cy="8" r="5"/>
      <path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/>
    </svg>
  );
}

function BottomNavFolk({ active = 'folk', onChange = () => {}, hasNewSunlight = true }) {
  const hidePlant = active === 'folk';
  const tab = (id, label, IconNode, isCompose = false) => {
    const isActive = active === id;
    if (isCompose) {
      if (hidePlant) {
        // Reserve the slot so the row balance survives — invisible placeholder.
        return <span key={id} style={{ width: 52, height: 52, marginTop: -10 }} aria-hidden="true"/>;
      }
      return (
        <button onClick={() => onChange(id)} key={id} style={{
          background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, marginTop: -10,
        }}>
          <div style={{
            width: 52, height: 52, borderRadius: '50%', background: '#2C5F2E',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#FAF7F1', boxShadow: '0 6px 16px rgba(44,95,46,0.32), 0 2px 4px rgba(17,29,10,0.12)',
          }}>{IconNode}</div>
          <span style={{ font: '500 10px var(--font-sans)', color: '#C9D2BB' }}>{label}</span>
        </button>
      );
    }
    return (
      <button onClick={() => onChange(id)} key={id} style={{
        background: 'transparent', border: 'none', padding: '4px 8px', cursor: 'pointer',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
        color: isActive ? '#F2EDE4' : '#586552', position: 'relative',
      }}>
        {IconNode}
        <span style={{ font: '500 10px var(--font-sans)' }}>{label}</span>
        {id === 'sunlight' && hasNewSunlight && (
          <span style={{
            position: 'absolute', top: 2, right: 8, width: 8, height: 8,
            borderRadius: '50%', background: '#D4960C',
            boxShadow: '0 0 0 3px rgba(212,150,12,0.28)',
          }}/>
        )}
      </button>
    );
  };
  return (
    <div style={{
      background: '#0B1306', borderTop: '0.5px solid #1F2B16',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      padding: '10px 8px 22px',
    }}>
      {tab('forests', 'Forests', <FLIcons.Map size={22} color={active === 'forests' ? '#F2EDE4' : '#586552'} />)}
      {tab('folk', 'Folk', <UsersRoundIcon size={22} color={active === 'folk' ? '#F2EDE4' : '#586552'} />)}
      {tab('compose', 'Plant', <FLIcons.Pencil size={22} color="#FAF7F1" />, true)}
      {tab('sunlight', 'Sunlight', <FLIcons.Sun size={22} color={active === 'sunlight' ? '#F2EDE4' : '#586552'} />)}
      {tab('you', 'You', <FLIcons.User size={22} color={active === 'you' ? '#F2EDE4' : '#586552'} />)}
    </div>
  );
}

Object.assign(window, { BottomNavFolk, UsersRoundIcon });